.app-search-mobile { display: none; }

                               
                                                                  
                                                  
@media (max-width: 1199px) {
    /* 右栏在 992–1199px **仍显示**（2026-10-11 用户要求：小笔记本/平板竖屏也要看到右栏），
       收单列的规则因此下移到 ≤991px 的块里（见下），这里只收紧间距。
       ⚠️ 下面单列那条必须用 minmax(0, 1fr) 而非裸 1fr：裸 1fr 的最小值是 auto（= min-content），
          正文里的 <pre>（overflow:auto 但自身 min-content 仍宽）与长合集名会把轨道撑到
          700+px → 窄屏整页横向滚动（2026-10-03 实测 500px 视口撑到 707px）。
          同理第 ⑬ 段的 print 单列也用 1fr，但打印无滚动条需求，保持原样。 */
    .app-main-inner { padding: 24px 20px 24px; gap: 20px; }
}

@media (max-width: 991px) {
    .app-main-inner.has-right {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
    .app-right { display: none; }
}

/* 2026-10-11：手机模式（≤991px，全站移动端）隐藏列表分类标签 .res-list-cat，避免标题栏横向拥挤。
   覆盖基础类与两种后代变体（.res-list-title / .resource-item，特异性 0,2,0，须同特异性压过 list.css）。
   responsive.css 全站无条件加载 → 会员收藏页（list.css 被 $__no_list_css 跳过）也生效。 */
@media (max-width: 991px) {
    .res-list-cat,
    .res-list-title .res-list-cat,
    .resource-item .res-list-cat { display: none; }
}

                                                 
@media (max-width: 991px) {
    .app-header { display: none; }
    .app-header-mobile { display: flex; }
    .app-drawer { display: flex; }

    .app-main-inner { padding: 20px 16px calc(60px + env(safe-area-inset-bottom)); gap: 16px; }

                                   
    .app-search-mobile {
        position: relative;
        display: flex;
        flex: 0 1 auto;
        min-width: 0;
        width: 200px;
        max-width: 200px;
        margin: 0 8px 0 auto;                     
        transition: width .25s ease, max-width .25s ease;
    }
                                       
    .app-search-mobile:focus-within {
        width: 100%;
        max-width: 100%;
    }
                                      
    .app-header-mobile .app-logo-mobile { flex-shrink: 0; }
                                                                      
                                              
                                             
    .app-header-mobile-actions { margin-left: 0; }
    .app-search-mobile-input {
        width: 100%;
        height: 36px;
        padding: 0 38px 0 12px;                   
        border: 1px solid var(--color-border);
        border-radius: 10px;
        background: var(--color-bg-card);
        color: var(--color-text-primary);
        font-size: 13px;
        outline: none;
    }
    .app-search-mobile-input:focus {
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px var(--color-accent-soft);
    }
                                 
    /* 移动顶栏放大镜按钮：与 documents 页 `.res-search-submit` / 桌面顶栏同款交互——
       内嵌输入框右侧、默认强调色图标、hover 实心强调底 + 反白（2026-10-01 同步）。 */
    .app-search-mobile-btn {
        position: absolute;
        right: 3px;
        top: 50%;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: none;
        background: transparent;
        color: var(--color-accent);
        font-size: 16px;
        cursor: pointer;
        border-radius: 8px;
        transition: background .2s, color .2s;
    }
    .app-search-mobile-btn:hover { background: var(--color-accent); color: var(--color-text-invert); }

                                                             
                                            
    .app-bottomnav { display: flex; }

    .app-bottomnav-item { position: relative; }
    .app-bottomnav-sub {
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-bottom: 10px;
        min-width: 130px;
        max-height: 46vh;
        overflow-y: auto;
        padding: 6px;
        background: var(--color-bg-card);
        border: 1px solid var(--color-border);
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
        display: none;
        z-index: 1600;
    }
                                                        
    .app-bottomnav-cat-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        width: 100%;
        padding: 4px 2px;
        border: none;
        background: transparent;
        color: inherit;
        font: inherit;
        cursor: pointer;
        border-radius: 8px;
    }
    .app-bottomnav-cat.expanded .app-bottomnav-sub { display: block; }
    .app-bottomnav-sublink {
        display: block;
        padding: 9px 12px;
        border-radius: 8px;
        color: var(--color-text-primary);
        text-decoration: none;
        font-size: 13px;
        white-space: nowrap;
    }
    .app-bottomnav-sublink:hover {
        background: var(--color-bg-page-soft);
        color: var(--color-accent);
    }

    /* 底部导航紧凑化：64px → 约 50px（2026-10-01 用户「底部菜单栏太大」）。
       原高度 64px = 上下 padding 各 6px + 条目 51px + 1px 上边框；条目 51px 里除图标/文字与
       条目自身 padding 外，还有「行内 svg 基线对齐」在图标下方多撑出的约 3px
       （.ic 实测 23px，而图标本身只有 20px）。
       ⚠️ 本块必须放在上面 .app-bottomnav-cat-btn（padding: 4px 2px）**之后**：
       二者选择器特异性相同（都是单个类），靠源码顺序才能覆盖。 */
    .app-bottomnav {
        padding: 4px 8px calc(4px + env(safe-area-inset-bottom));
        gap: 4px;
    }
    .app-bottomnav-item,
    .app-bottomnav-cat-btn { padding: 3px 2px; gap: 2px; }
    .app-bottomnav-item .ic { font-size: 18px; }
    /* 图标改块级：行盒不再为基线下沉留空隙，.ic 高度恰好等于字号 */
    .app-bottomnav-item .ic svg { display: block; }
    /* 标签禁止折行：中文标签没有空格（如「动画剧集」），在 320px 级窄屏里 6 个条目均分后
       内容宽只剩约 41px，标签一旦折成两行，底部导航高度就从 51px 涨到 61px
       （实测 320px → 61px，375px 及以上 → 51px）。窄屏再把左右内边距收紧，见下方 ≤479px 块。 */
    .app-bottomnav-item .lb { font-size: 10px; white-space: nowrap; }

                                          
    .doc-head { flex-direction: row; align-items: flex-start; }
    .doc-head-cover { width: 32%; max-width: 150px; flex-shrink: 0; }
    /* 信息区与封面按比例缩小：标题 26→18、英文副题 15→13、meta/summary 同步下调 */
    .doc-title { font-size: 18px; }
    .doc-title-en { font-size: 13px; }
    .doc-meta { font-size: 12px; margin: 14px 0 12px; }
    .doc-summary { font-size: 13px; padding: 10px 12px; }

    /* 帮助中心（≤991px）：容器左右内边距收紧，给内容让出宽度 */
    .help-container { padding: 24px 20px 30px; }
    .help-tab { width: 172px; }

    [data-theme="dark"] .app-header-mobile { border-bottom: 1px solid var(--color-border); }
}

                                       
@media (max-width: 767px) {
                                                   
    .app-main-inner { padding: 14px 0 calc(60px + env(safe-area-inset-bottom)); gap: 12px; }

                                                 
    .app-section-link { display: none; }

                                                    
                                                                               
                                    
    /* documents 页手机端 = 常规卡片式（2026-10-01 用户「不要完全贴边的出血效果」）：
       原先此处用 `.res-page{padding-left/right:0}` + `body.documents-page .res-page{padding:14px 0}`
       做「全宽出血」（去左右描边与圆角、内边距归零），现按用户要求删除，
       交回 style.css 的 `body.documents-page .res-page { padding:24px 24px 24px; border; border-radius }`
       生效 —— 左右留白 24px、描边与圆角保留。⚠️ 不要再加回出血覆盖。 */

                                          
                                                                         
                                                                 
                                          
                              
    .grid-card-overlay,
    .grid-card-overlay > * { opacity: 1; visibility: visible; }
    .res-card-cat { opacity: 1; visibility: visible; }
    .grid-card-ver { opacity: 1; visibility: visible; transform: none; }
                                                  
                                     
    .grid-card-overlay::before {
        background: linear-gradient(to top,
            rgba(0, 0, 0, .72) 0%,
            rgba(0, 0, 0, .28) 55%,
            rgba(0, 0, 0, 0) 100%);
    }
    .grid-card-overlay > * { text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }

                                                
    .app-section.mode-list,
    .app-section.mode-grid { padding: 12px 12px 14px; }

    /* 手机端 documents 容器（2026-10-08）：左右各留 12px + 容器底色改用「页面底色」。
       ⚠️ **列表 / 网格两种模式必须同一套**，否则切模式时界面会「跳」：
          · 只给网格加内边距 → 面包屑位置不一致（实测网格 left=13/宽294，列表 left=1/宽318）；
          · 只给网格换底色 → 容器底色不一致（实测网格 rgb(12,18,25)，列表 rgb(21,30,40)）。
          两条实测差异都是「只改网格模式」造成的，故此处统一挂在 body.documents-page 上。
       底色用 --color-bg-page 的目的：卡片之间的缝/留白才显出间隔（原 --color-bg-card 与
       卡片底色**完全相同**，缝与卡片同色 → 两列看起来粘成一块）。
       ⚠️ 两主题「页面色 vs 卡片色」对比只有 ~10/255 量级，**光改颜色看不出变化**，
          必须配合下面的内边距与列缝这类几何改动。
       注：2026-10-06 曾按用户要求把左右间距降到 0，现按新要求（要有一点间距）回加到 12px。 */
    body.documents-page .res-page {
        background: var(--color-bg-page);
        padding-left: 12px;
        padding-right: 12px;
    }
    /* 列缝 12 → 16px：两列之间的间隔带更明确（列表模式 .res-grid 为 display:none，不受影响） */
    body.documents-page .res-grid { gap: 16px; }

    /* 顶部「列表 / 网格」视图切换按钮：基础只隔 4px，手机上看着粘成一团，拉开到 10px */
    .res-toolbar .view-switch { gap: 10px; }

    /* 帮助中心（≤767px）：外层去边距靠边（容器已有 16px 内边距，双层会过挤）、
       二维码转单列、Tab 撑满、FAQ 答案左侧 52px 的 Q 徽标对齐缩进取消 */
    .help-page-wrap { padding: 18px 0 48px; }
    .help-container {
        padding: 22px 16px 28px;
        border-left: none;
        border-right: none;
        border-radius: 0;
    }
    .help-hero-title { font-size: 22px; }
    .help-hero-sub { font-size: 14px; }
    .help-tab { width: 100%; max-width: 240px; }
    .donate-qrs { grid-template-columns: minmax(0, 1fr); }
    .donate-qr-imgbox { max-width: 220px; }
    .faq-q { padding: 14px; gap: 10px; }
    .faq-a-body { padding-left: 16px; padding-right: 16px; }
    /* 详情页关联 FAQ 卡片（内容放大后同步收紧外框；左右留白随桌面端一并放宽） */
    .doc-faq-card { padding: 16px 22px; }
    .doc-faq-q { font-size: 16px; }

    /* ---------- 详情页头图区（2026-10-06「简介通栏 + 头部紧凑」；同日修「无标签时简介压封面」）----------
       竖版封面约 177px 高，右侧信息列（标题+徽章+标签+元信息）却常不足 177px →
       若把简介(.doc-summary)用负外边距上提破格通栏，上方内容不足时简介顶边会落在封面下沿之上、
       文字直接压住封面（标签少的条目必现，430px 宽更明显）。
       改用「浮动封面 + 简介 clear」：标题/徽章/元信息环绕封面右侧，简介 clear:both 必定
       落到封面下沿（含下方 12px 间距）再通栏 → 上方内容多寡都不再压封面。
       ⚠️ flow-root 给 .doc-head 建 BFC 包住浮动（否则无简介的条目浮动会溢出卡片边框）。
       ⚠️ 用 float 而非 grid + display:contents：后者会把徽章/元信息整体推到封面下方。
       ⚠️ 仅手机端生效，桌面 .doc-head 仍是 flex 两栏，模板不改。 */
    .doc-head { --hcover: 118px; --hgap: 14px; display: flow-root; padding: 14px; margin-bottom: 16px; }
    .doc-head-cover { float: left; width: var(--hcover); max-width: none; margin: 0 var(--hgap) 12px 0; }
    .doc-title { font-size: 18px; margin-bottom: 8px; }
    .doc-info-tags { margin: 12px 0 8px; gap: 8px; }
    .doc-head .doc-info-tag { padding: 4px 10px; }
    .doc-head .doc-fav-btn { padding: 5px 12px; }
    .doc-head .doc-qc-btn { padding: 5px 12px; }
    .doc-meta { margin: 8px 0 10px; }
    .doc-meta-tags { margin-bottom: 8px; }
    /* 简介通栏且必定在封面下方：clear 落到浮动封面下沿，margin-left 归零铺满整卡内容宽 */
    .doc-summary { clear: both; margin-left: 0; }
}

@media (max-width: 479px) {
    .app-main-inner { padding: 12px 0 calc(60px + env(safe-area-inset-bottom)); gap: 12px; }

    /* 320px 级窄屏：底部导航 6 个条目均分后每个约 45px，左右内边距 8px→4px、
       条目间距 4px→2px 可再喂宽约 3px，配合上面的 .lb nowrap，标签保持单行、
       导航高度恒为 51px（不再出现 61px 的抬升）。 */
    .app-bottomnav {
        padding: 4px 4px calc(4px + env(safe-area-inset-bottom));
        gap: 2px;
    }
                      
    .app-section.mode-list,
    .app-section.mode-grid { padding: 10px 8px 12px; }

                  
    .app-header-mobile { height: 52px; padding: 8px 12px; }
    .app-icon-btn { width: 36px; height: 36px; font-size: 16px; }
    .app-logo-mark { width: 28px; height: 28px; font-size: 16px; }
    /* 移动端图片版 LOGO：只缩尺寸 + 收敛微光（28px 上放满 4 层会糊）。
       容器需同样释放 .app-logo-mark 的写死宽高，见 header.css 的 .app-logo-img 注释。 */
    .app-logo-img { width: auto; height: auto; }
    .app-logo-img img {
        height: 28px;
        width: auto;
        filter:
            drop-shadow(0 0 calc(var(--logo-glow-blur) * .22 * var(--logo-glow-boost))
                color-mix(in srgb, var(--logo-glow-color) calc(var(--logo-glow-alpha) * 90% * var(--logo-glow-boost)), transparent))
            drop-shadow(0 0 calc(var(--logo-glow-blur) * .55 * var(--logo-glow-boost))
                color-mix(in srgb, var(--logo-glow-color) calc(var(--logo-glow-alpha) * 55% * var(--logo-glow-boost)), transparent))
            drop-shadow(0 0 calc(var(--logo-glow-blur) * 1.15 * var(--logo-glow-boost))
                color-mix(in srgb, var(--logo-glow-color) calc(var(--logo-glow-alpha) * 28% * var(--logo-glow-boost)), transparent))
            drop-shadow(0 1px 2px color-mix(in srgb, #000 14%, transparent));
    }
    .app-logo-mobile .app-logo-text { font-size: 12px; } 
    .app-search-mobile { width: 150px; max-width: 150px; }
}

                                                                 
                                       
.app-side { display: flex; }
.app-side-toggle-btn { display: flex; }
.member-center .app-side,
.member-center .app-side-toggle-btn,
.auth-fullscreen .app-side,
.auth-fullscreen .app-side-toggle-btn { display: none !important; }

                                                
                                                                    
@media (min-width: 1200px) and (max-width: 1660px) {
    .app-side-col { width: 240px; }
    .app-side { width: 240px; }
    .app-side-toggle-btn { left: 240px; }
    .app-shell { --side-w: 240px; }   /* 折叠态抵消的左栏宽（与 .app-side-col width 同步） */
}

@media (min-width: 1661px) {
    .app-side-col { width: 260px; }
    .app-side { width: 260px; }
    .app-side-toggle-btn { left: 260px; }
    .app-shell { --side-w: 260px; }   /* 折叠态抵消的左栏宽（与 .app-side-col width 同步） */
}

                                    
                                                          
                                               
                           
@media (max-width: 991px) {
    .app-side-col,
    .app-side,
    .app-side-toggle-btn { display: none !important; }
    .app-shell { grid-template-columns: minmax(0, 1fr); --side-w: 0; }   /* 左栏隐藏：折叠无意义，抵消量归零 */
    /* ⚠️ 收成单列后必须把 .app-main / .app-footer 拉回第 1 列：
       它们基础规则写的是 grid-column: 2（见 style.css 的 .app-main 与 footer.css 的 .app-footer），
       单列栅格里会让浏览器**隐式生成一个空的第 1 列**（宽度 = 1fr），
       当内容 max-content 小于容器时该空列就吃掉剩余空间 → 内容被整体右推、左右留白不等
       （2026-10-01 用户报「中间内容区没有居中」，实测 767px 时左空 114px）。
       改回第 1 列后空列不存在，内容自然铺满居中。 */
    .app-main,
    .app-footer { grid-column: 1; }
}

                             
@media (max-height: 500px) and (orientation: landscape) {
    .app-header-mobile { height: 48px; padding: 6px 12px; }
    .app-main-inner { padding-top: 12px; padding-bottom: 12px; }
    .app-bottomnav { height: 48px; }
    .app-bottomnav-item .ic { font-size: 16px; }
    .app-bottomnav-item .lb { font-size: 10px; }
}

                                               
@media (max-width: 991px) {
    .app-section .game-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .app-section .game-tabs::-webkit-scrollbar { display: none; }
    .app-section .game-tab { flex-shrink: 0; }

                      
    .resource-list { grid-template-columns: minmax(0, 1fr); }
    .resource-item { padding: 8px 10px; font-size: 12px; gap: 10px; }
    .resource-item .title { font-size: 12px; line-height: 1.4; }
    .res-item-icon { width: 36px; height: 36px; }
    .res-item-portrait { width: 32px; height: 48px; }

    /* 「补差价升级」弹窗（.upgrade-*）已于 2026-10-07 随徽章永久化删除，
       原此处的 .upgrade-compare/.upgrade-arrow 窄屏堆叠规则一并移除。 */
    /* 工具栏：面包屑与（排序组 + 视图切换）允许换行，避免挤压截断面包屑 */
    .res-toolbar { flex-wrap: wrap; gap: 10px; }
    .res-toolbar-right { margin-left: auto; }
    .view-switch { flex-shrink: 0; }

                                            
    .view-switch { padding: 4px 0; }
    .view-switch .view-btn { width: 30px; height: 30px; font-size: 13px; }
    .game-tab { padding: 5px 11px; font-size: 12px; }
}

                                               
@media (max-width: 767px) {
    .game-tab { padding: 4px 10px; font-size: 12px; }
    .app-btn { padding: 7px 14px; font-size: 12px; }
    .app-btn-primary { padding: 8px 16px; font-size: 13px; }
    .app-logo-mobile .app-logo-text { font-size: 14px; }
    .app-drawer { width: 260px; }

                                          
    .view-switch { padding: 2px 0; }
    .view-switch .view-btn { width: 28px; height: 28px; font-size: 12px; }

                                         
    .app-card-pager { gap: 3px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .app-card-pager::-webkit-scrollbar { display: none; }
    .app-card-pager .p-btn {
        min-width: 32px; height: 32px; padding: 0 4px;
        font-size: 12px; border-radius: 8px;
    }
    .app-card-pager .p-ellipsis { min-width: 16px; font-size: 12px; }
    /* 移动端隐藏页码跳转表单（仅保留按钮），避免分页条换行成两行 */
    .app-pager-jump-inline { display: none; }
    /* 搜索框/搜索结果页移动端适度收窄 */
    .res-search-info { padding: 12px 12px; gap: 10px; }
    .res-search-form { gap: 8px; }
    .res-search-submit { padding: 0 16px; }
    /* 热门搜索（手机端）：热门词为中文标题、普遍较长，只显示前 6 个控制占高，
       第 7 个起隐藏（桌面/平板 ≥768px 显示全部 15 个）。DOM 里仍输出全部，仅小屏视觉裁掉。 */
    .res-hot-tags .res-hot-tag:nth-child(n+7) { display: none; }
    /* 工具栏（手机）：面包屑与视图切换**同一行**，按钮恒贴右端（与桌面一致）。
       原先此处是 `.res-crumb { flex: 1 1 100% }` 把面包屑压成独占一行，再让
       `.res-toolbar-right { width: 100%; justify-content: space-between }` 吃满第二行；
       但该容器里只剩「视图切换」**一个**子项（排序组早已移除），
       space-between 对单个子项等价于 flex-start → 按钮被甩到手机屏**最左端**，与桌面端（最右）左右相反。
       实测 2026-10-01：≤767px 时 .view-switch.left = 0，而 820/991px 时为 720/885
       （用户报「documents 页按钮位置不对」）。改回单行后按钮位置不再随屏宽翻转；
       面包屑 flex:1 自适应、过长时裁切，按钮 flex-shrink:0 保证不被压缩。 */
    .res-toolbar { flex-wrap: nowrap; gap: 8px; }
    .res-crumb { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
    .res-toolbar-right { gap: 8px; }
    /* 列表模式缩略图（移动端）：有竖版封面（portrait）时换竖版 2:3 显示并隐藏横图；
       无竖图的老文章回退显示横图（保持横图比例完整显示，不裁切）。
       ⚠️ 游戏条目（.is-game-item）例外：小屏也强制横版，与桌面端口径一致。 */
    .res-list-thumb { width: 84px; aspect-ratio: 2 / 3; align-self: flex-start; }
    .res-list-thumb:has(.res-list-thumb-portrait) .res-list-thumb-cover { display: none; }
    .res-list-thumb:has(.res-list-thumb-portrait) .res-list-thumb-portrait { display: block; }
    .res-list-thumb:not(:has(.res-list-thumb-portrait)) { width: 120px; aspect-ratio: 460 / 215; }
    .res-list-item.is-game-item .res-list-thumb { width: 120px; aspect-ratio: 460 / 215; }
    .res-list-item.is-game-item .res-list-thumb .res-list-thumb-portrait { display: none !important; }
    /* ⚠️ 修复（2026-10-06）：Steam 游戏卡同时输出 cover + portrait 两张图，
       上方通用规则 `.res-list-thumb:has(.res-list-thumb-portrait) .res-list-thumb-cover{display:none}`
       把横图藏掉、改用竖图，而本段 `.is-game-item ... portrait{display:none!important}` 又把竖图藏掉
       → 游戏卡两张都隐藏、整卡空白（手机端列表模式，用户报「游戏分类不显示图片」）。
       这里显式让游戏卡横图显示（特异性 0,4,0 压通用规则 0,3,0）；
       仅当个别老游戏 cover 缺失（DOM 无 cover 图）时，保留 portrait 兜底防空白。 */
    .res-list-item.is-game-item .res-list-thumb .res-list-thumb-cover { display: block; }
    .res-list-item.is-game-item .res-list-thumb:not(:has(.res-list-thumb-cover)) .res-list-thumb-portrait { display: block !important; }

               
}

                              
                                      
                                                               
                                            
@media (max-width: 767px) {
    .guestbook-item { gap: 8px; padding: 12px 2px; }
    .guestbook-avatar { width: 32px; height: 32px; }
    .guestbook-avatar-default { font-size: 14px; }
    .gb-msg-head { flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
    .gb-msg-head-left { gap: 6px; flex: 1 1 100%; min-width: 0; }
    .gb-msg-head-right { gap: 4px; margin-left: auto; }
    .guestbook-username { font-size: 14px; max-width: 62%; }
    .guestbook-time { font-size: 11px; }
    .guestbook-guest-badge { font-size: 10px; padding: 2px 6px; }
    .guestbook-content { font-size: 14px; }
    .guestbook-reply-btn { padding: 3px 8px; font-size: 12px; }
    .guestbook-like-btn { padding: 3px 9px; font-size: 11.5px; }
    .guestbook-reply-item { gap: 6px; }
    .guestbook-reply-avatar { width: 26px; height: 26px; }
    .guestbook-reply-username { font-size: 13px; }
    .guestbook-reply-time { font-size: 11px; }
}

                                    
@media (max-width: 479px) {
    .form-control, .form-select { font-size: 13px; padding: 8px 10px; }

    .game-tab { padding: 5px 10px; font-size: 11px; }
    /* 圆角用 --radius-sm(8px) 而非 7px —— 7px 是体系外的孤值，
       基准 .app-btn 在 form.css 用 10px，这里只做「整体收窄」而非另立一套值。 */
    .app-btn { padding: 6px 12px; font-size: 11px; border-radius: var(--radius-sm); }
    .app-btn-primary { padding: 7px 14px; font-size: 12px; }
}

                                                        
                                                         
                                                                                        
                                        
:root {
    --home-cols: 3;
    --sub-cols: 2;
    --home-gap: 16px;
    --sub-gap: 16px;
}
.grid-wrap { grid-template-columns: repeat(var(--home-cols), 1fr); gap: var(--home-gap); }
.res-grid  { grid-template-columns: repeat(var(--sub-cols), 1fr); gap: var(--sub-gap); }

/* 分类页（/documents 的 .res-grid）：竖版封面卡（影视分类），桌面封顶一行 5 个。
   与首页 .grid-wrap 是**两套独立变量**（--sub-cols / --home-cols），别混改。
   逐级递减避免小屏把竖版卡挤成细条：<480 → 2 列；480~991 → 3 列（见下方 max-width 块）；
   ≥992 → 3；≥1200 → 4；≥1380 → 5（封顶，≥1700 不再加列）。
   ⚠️ 游戏分类不受此阶梯约束（恒 4 列，见下方 is-media-cover 硬规则）。 */
@media (min-width: 992px)  { :root { --sub-cols: 3; } }
@media (min-width: 1200px) { :root { --home-gap: 20px; --sub-gap: 18px; --sub-cols: 4; } }
@media (min-width: 1380px) { :root { --home-cols: 4; --sub-cols: 5; } }
@media (min-width: 1520px) { :root { --home-cols: 5; } }
@media (min-width: 1700px) { :root { --home-cols: 6; } }

/* 游戏分类（/documents?category=13 及其子分类 6/7/9/10，body.is-media-cover）
   网格**固定一行 4 个**，不随屏宽加列（2026-09-28 用户裁定）。
   原因：游戏用横版 cover（460/215）而非竖版海报，卡片本身更宽，6 列会把图压扁。
   ⚠️ 必须写在上面所有 min-width 块**之后** —— 带 body 前缀特异性更高（0,2,1 vs 0,1,0）
      本就够压住阶梯块，但放末尾可防以后有人给阶梯块也加 body 前缀后顺序失效。
      @media(min-width:768px) 限定桌面/平板，小屏（<768）走 --sub-cols 阶梯（480~767 = 3 列）。 */
@media (min-width: 768px) {
    body.is-media-cover .res-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

                                                    
/* 手机端（≤479px）：2 列 —— 375px 下卡片约 165px，竖屏手机保持原样
   （2026-09-15 用户曾明确要求手机首页网格 1 行 2 列，此处不动）。 */
@media (max-width: 479px) {
    :root { --home-cols: 2; --sub-cols: 2; --home-gap: 12px; --sub-gap: 12px; }
}
/* 大屏手机 / 竖屏平板（480–991px）：3 列
   （2026-10-01 用户「网格模式一行两栏导致卡片太大」）。
   原先该区间 --home-cols 在 ≤767 被压成 2、--sub-cols 全程 2 →
   767px 时卡片达 300px、820~991px 分类页卡片近 394px。提到 3 列后
   480→146px / 767→190px / 991→253px。768~991 的 --home-gap/--sub-gap 沿用基础值 16px。 */
@media (min-width: 480px) and (max-width: 767px) {
    :root { --home-cols: 3; --sub-cols: 3; --home-gap: 12px; --sub-gap: 12px; }
}
@media (min-width: 768px) and (max-width: 991px) {
    :root { --sub-cols: 3; }
}

/* 搜索页（/documents?kw= 结果页，body.is-search-mixed）网格模式列数：
   **与首页 .grid-wrap 完全同一套断点**（用户 2026-10-07「搜索结果页没有断点吗？让他和首页一样，
   手机模式也是」）。两页封面都是 2:3 竖版，列数没理由分叉。
   做法是直接复用首页的 --home-cols 变量，而不是再抄一份列数阶梯 —— 首页那套阶梯
   （<480→2；480~1379→3；≥1380→4；≥1520→5；≥1700→6，见上方 :root 块）以后调整，
   这里自动跟随，不会再现「搜索结果页 1200px 一行 6 个、首页却 3 个」的两套数字。
   ⚠️ 用 body 前缀（特异性 0,2,1）压过 .res-grid 的 --sub-cols 阶梯（0,1,0）；
      gap 仍沿用 .res-grid 的 --sub-gap，本行不改。 */
body.is-search-mixed .res-grid { grid-template-columns: repeat(var(--home-cols), minmax(0, 1fr)); }

                                            
                                                         
                                                                   
                                   
                                                    
                                                           

                                 
@media (max-width: 1023px) {
    .mc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

                               
@media (max-width: 991px) {
    .member-center .app-main-inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--mc-gap-lg, 16px);
    }

    /* 正文底部让位：站点底栏 + 会员菜单条（两条都是 fixed）。
       --bottomnav-h 由 main.js 实测底栏高度写入，且已含底栏自身的安全区内边距，
       故此处不再叠加 env(safe-area-inset-bottom)，避免重复让位。 */
    .member-center .app-main-inner {
        padding-bottom: calc(var(--bottomnav-h, 52px) + 84px);
    }

    /* ===== 个人中心菜单：手机端改为「常住底栏」 =====
       之前把它放在文档流末尾，会与 fixed 的站点底栏 .app-bottomnav 重叠
       （实测菜单 top:800、底栏覆盖 793–844 → 菜单被压在底栏后面露出半截）。
       现改为固定悬浮：紧贴底栏正上方，形态与底栏同款（毛玻璃 + 图标在上文字在下）。
       offset 取 --bottomnav-h 实测值 —— 底栏高度随断点变化（375px+→51px、
       320px→61px），硬编码任一常数都会在某个宽度失真。 */
    .member-center .mb-col {
        position: fixed;
        left: 0; right: 0;
        bottom: var(--bottomnav-h, 52px);
        z-index: 1390;          /* 低于 .app-bottomnav(1400)：分类子菜单浮起时压在菜单条之上 */
        padding: 0 8px;
        pointer-events: none;   /* 容器不吃点击，仅卡片本体可交互 */
    }
    .member-center .mb-side {
        position: static;
        top: auto;
        display: flex;
        flex-direction: row;   /* ⚠️ 基础样式是块级，这里显式行排（否则条目会竖着堆） */
        align-items: stretch;
        gap: 4px;
        max-width: 720px;
        margin: 0 auto;
        padding: 4px 6px;
        border-bottom: none;
        border-radius: 14px 14px 0 0;
        background: color-mix(in srgb, var(--color-bg-card) 92%, transparent);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        pointer-events: auto;
    }
    /* 「个人中心」标题行在底栏形态里冗余 */
    .member-center .mb-side-head { display: none; }
    .member-center .mb-side-group {
        display: flex;
        flex-direction: row;   /* ⚠️ 基础样式是 column（侧栏竖排），底栏形态必须改回横排 */
        flex: 1;
        min-width: 0;
        gap: 4px;
        padding: 0;
    }
    .member-center .mb-side-divider { display: none; }
    .member-center .mb-side-item {
        flex: 1;
        flex-direction: column;
        justify-content: center;
        gap: 1px;
        min-width: 0;
        min-height: 42px;       /* 与 .app-bottomnav-item 同高 → 两条栏等高（约 51px） */
        padding: 3px 2px;
        border-radius: 8px;
        background: none;
        font-size: 10px;
        text-align: center;
        white-space: nowrap;
    }
    /* 文字行高收紧：默认行高会把条目顶到 56px，比底栏条目高 14px */
    .member-center .mb-side-item .mb-txt { flex: 0 0 auto; line-height: 1.2; }
    .member-center .mb-side-item .ic {
        width: auto; height: auto; background: none; border-radius: 0;
        font-size: 18px; line-height: 1;
    }
    .member-center .mb-side-item .ic svg { display: block; }
    .member-center .mb-side-item:hover { background: none; }
    .member-center .mb-side-item.active { background: none; color: var(--color-accent); font-weight: 600; }
    .member-center .mb-side-item.active .ic { background: none; color: var(--color-accent); }
    /* 退出登录：与导航条目同形态，独占一格 */
    .member-center .mb-side > .logout-form { flex: 0 0 auto; display: flex; min-width: 0; }
    .member-center .mb-side-logout {
        flex-direction: column;
        gap: 2px;
        min-height: 46px;
        margin-top: 0;
        padding: 3px 2px;
        font-size: 10px;
        background: none;
        color: var(--red);
    }
    .member-center .mb-side-logout .ic { width: auto; height: auto; background: none; font-size: 18px; }
    .member-center .mb-side-logout:hover { background: none; color: var(--red); }
}

                                       
@media (max-width: 767px) {
    .member-center .form-control,
    .member-center .mc-code-row .mc-code-btn { min-height: 44px; }
    .mc-page-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: var(--mc-gap-md, 12px);
    }

    .mc-idcard { padding: var(--mc-gap-lg, 16px) 14px; border-radius: 14px; }
                                     
    .mc-idcard { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px var(--mc-gap-sm, 8px); }
    .mc-idcard-main { grid-column: 1 / -1; grid-row: auto; }
    .mc-idcard-act { grid-column: auto; width: 100%; min-width: 0; padding: 9px 6px; }
    .mc-idcard-main {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: var(--mc-gap-md, 12px);
    }
    .mc-idcard-avatar { width: 56px; height: 56px; font-size: 22px; }
    .mc-idcard-name { justify-content: flex-start; }
    /* 徽章选择器：窄屏两列网格，徽章块居中，整齐不参差 */
    .mc-badges { grid-column: 1 / -1; margin-top: var(--mc-gap-xs, 4px); padding-top: var(--mc-gap-md, 12px); }
    .mc-badges-head { flex-direction: column; align-items: flex-start; gap: var(--mc-gap-xs, 4px); margin-bottom: var(--mc-gap-sm, 8px); }
    .mc-badges-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mc-gap-sm, 8px); }
    .mc-badge-opt { display: flex; align-items: center; justify-content: center; padding: 7px 6px; }

    .mc-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mc-gap-sm, 8px);
        margin-top: var(--mc-gap-lg, 16px);
    }
    .mc-stat-card { padding: 14px 12px; border-radius: 14px; }
    .mc-stat-val { font-size: 22px; }

                                            
    .ci-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }

                     
    .mc-modal, .ui-modal { padding: 12px; }
    .mc-modal-card, .ui-modal-card { max-width: 100%; }
    .mc-modal-body, .ui-modal-body { padding: var(--mc-gap-lg, 16px); }
}

                                 
@media (max-width: 479px) {
    .mc-stats { gap: 6px; }
    .mc-stat-val { font-size: 20px; }
    .mc-stat-lbl { font-size: var(--mc-font-tiny, 12px); }
    .mc-idcard { padding: 14px 12px; }
    .mc-idcard-act { font-size: 11.5px; padding: 8px 2px; }

                                        
    .member-center .mc-code-row {
        flex-direction: column;
        gap: var(--mc-gap-sm, 8px);
    }
    .member-center .mc-code-row .mc-code-btn {
        width: 100%;
        min-width: 0;
    }
}

                        
@media (max-width: 767px) {
    .dl-head { flex-direction: column; gap: 10px; min-height: 0; }
    .dl-actions { position: static; transform: none; flex-wrap: wrap; justify-content: center; }
    .dl-panel { padding: 14px 14px; }
    .dl-body { grid-template-columns: minmax(0, 1fr); }
    /* 下载弹窗：窄屏收紧内边距 + 缩二维码（尺寸唯一来源是 --dlmodal-qr-size / -pad）
       卡片宽自适应 = width:100% 受 .dlmodal 的 14px 内边距限制，无需另设宽 */
    .dlmodal { padding: 14px; }
    .dlmodal-card { --dlmodal-qr-size: 150px; --dlmodal-qr-pad: 16px; }
    /* ⚠️ 卡片内边距归 .dlmodal-scroll（唯一滚动层），别再写回 .dlmodal-card：卡片自身 padding 恒为 0 */
    .dlmodal-scroll { padding: 18px 16px 16px; }
    .dlmodal-title { font-size: 16px; }
    /* 移动端形态（直链）：窄屏下链接与「复制」上下排，避免并排把链接挤成多行豆腐块 */
    .dlmodal-url { flex-direction: column; }
    .dlmodal-url-copy { padding: 9px 14px; }
}

/* ---------- ⑯ 合集条目（.doc-collection-*）窄屏收紧 ----------
   2026-10-03 自 style.css 的 @media (max-width:575px) 迁入：575 不在 5 档断点表内，
   语义上属手机档，故并入≤767px。
   2026-10-05 季卡片（.doc-seasons-*）与合集条目同构，收紧值完全一致，故合并到同一段
   （两套类名并行写，避免以后改一处忘一处导致窄屏下两种卡片尺寸不一）。 */
@media (max-width: 767px) {
    .doc-body .doc-collection-item,
    #article-content .doc-collection-item,
    .doc-body .doc-seasons-item,
    #article-content .doc-seasons-item {
        gap: 10px;
        padding: 10px;
    }
    .doc-body .doc-collection-poster,
    #article-content .doc-collection-poster,
    .doc-body .doc-collection-poster img,
    #article-content .doc-collection-poster img,
    .doc-body .doc-seasons-poster,
    #article-content .doc-seasons-poster,
    .doc-body .doc-seasons-poster img,
    #article-content .doc-seasons-poster img {
        flex-basis: 72px;
        width: 72px;
        height: 108px;
    }
}

/* ---------- ⑰ 桌面端窄视口（992–1199px）：顶部导航让出空间 ----------
   2026-10-03 自 header.css 迁入。宽度落在这一段时，.app-header-inner 里
   「logo + 导航 + 搜索(最小 380px) + 动作区」放不下，导航（flex:1）被压到只剩
   三百余像素 → 菜单文字逐字换行。这里同时收紧展示项，保证五个主导航始终单行。
   ⚠️ ≤991px 时 .app-header 整体 display:none 改用 .app-header-mobile，与本段不冲突。
   ⚠️ 本段必须晚于 header.css 的 .app-search / .app-header.shrunk 规则才能覆盖
      （同特异性靠顺序）—— responsive.css 在 base.html 加载更晚，天然满足。 */
@media (max-width: 1199px) {
    /* 这段宽度靠收紧间距腾地方，但 LOGO↔菜单的分区不能丢：
       导航（flex:1）被搜索框挤压时，最先被压扁的就是它，
       若 logo 侧不留出额外余量，菜单文字会提前逐字换行。
       故 gap 取 16（介于基准 26 与旧的 12 之间），logo margin 收到 4。 */
    .app-header-inner { gap: 16px; }
    .app-logo { margin-right: 4px; }
    .app-topnav-link { padding: 8px 14px; font-size: 13px; }
    .app-header.shrunk .app-topnav-link { padding: 5px 12px; font-size: 12.5px; }
    .app-search { min-width: 320px; }
    .app-header.shrunk .app-search { min-width: 280px; }
}

                                    
@media print {
    .app-drawer, .app-drawer-mask, .view-switch, .game-tabs,
    .dlmodal,
    .app-side, .app-side-col, .app-side-toggle-btn,
    .app-footer {
        display: none !important;
    }
    .app-shell { grid-template-columns: minmax(0, 1fr); }
    .app-main-inner { grid-template-columns: minmax(0, 1fr); padding: 0; }
    .app-section { box-shadow: none; break-inside: avoid; }
}

                                      
img, embed, object, video { max-width: 100%; }

                               
                                               
                                                         

@media (hover: none) {
                                                              
                                                        
                                                
    .grid-card-overlay,
    .grid-card-overlay > * { opacity: 1; visibility: visible; }
    .res-card-cat { opacity: 1; visibility: visible; }

    .resource-item:hover,
    .grid-card:hover,
    .game-tab:hover,
    .p-btn:hover,
    .app-side-item:hover,
    .app-side-subitem:hover,
    .app-drawer-link:hover {
        transform: none;
        box-shadow: none;
    }

                                    
    .resource-item:active,
    .grid-card:active,
    .game-tab:active,
    .p-btn:active,
    .app-side-item:active,
    .app-side-subitem:active,
    .app-drawer-link:active {
        background: var(--color-bg-page-soft);
        transition: none;
    }
}

                  
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}