/**
 * 主题增强层 —— 视觉与交互优化（移动端优先）
 *
 * 设计原则：
 *   1. 本文件为覆盖层，不修改插件自带的 common.css，插件升级后仍可用
 *   2. 移动端优先：触摸目标 >=44px，避免 hover-only 交互
 *   3. 尊重用户偏好：prefers-reduced-motion / prefers-contrast
 *
 * 加载顺序须在 common.css 之后。
 */

:root {
    /* 间距刻度，避免各处出现随意的 px 值 */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;

    --radius-sm: 3px;
    --radius: 6px;
    --radius-lg: 10px;

    /* 中性色阶 */
    --c-text: #23282d;
    --c-text-soft: #6b7280;
    --c-text-faint: #9ca3af;
    --c-line: #e8eaed;
    --c-bg-soft: #f7f8fa;
    --c-accent: #d9534f;
    --c-accent-soft: rgba(217, 83, 79, .08);

    /* 阴影：低饱和、短距离，避免廉价的重投影 */
    --shadow-1: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --shadow-2: 0 4px 8px rgba(16, 24, 40, .06), 0 2px 4px rgba(16, 24, 40, .04);

    /* 最小触摸目标（移动端可访问性基线） */
    --tap: 44px;

    --ease: cubic-bezier(.4, 0, .2, 1);

    /* 缩略图悬停：单一时长与单一曲线，供所有相关属性共用，
       确保 transform 与 opacity 同时开始、同时结束。
       减速型曲线（起步快、收尾缓）比 ease 更"跟手"。
       时长偏长以求舒缓；若需更快可只改此处一个值。 */
    --dur-thumb: 640ms;
    --ease-thumb: cubic-bezier(.22, .61, .36, 1);

    /* 用户开启「减少动态效果」时的降级时长：
       保留可感知的反馈，但足够短以免引起不适 */
    --dur-thumb-reduced: 140ms;

    /* 标签 chip 悬停时的光晕色（深色层会重映射为更亮的强调色）。
       单独立令牌而非写死 rgba：强调色两个主题不同，写死会在深色下发灰。 */
    --tag-glow: rgba(217, 83, 79, .34);
    --dur-tag: 200ms;
}

/* ===================================================================
   1. 排版节奏
   =================================================================== */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--c-text);
}

/* 中文正文行高略放宽，提升长文可读性 */
.article-text,
.article-intro {
    line-height: 1.8;
}

.article-text {
    font-size: 16px;
    word-break: break-word;
}

/* 正文内图片自适应，防止溢出容器 */
.article-text img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}

/* ===================================================================
   2. 卡片与面板
   =================================================================== */

.panel {
    border-color: var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}

.panel-heading .panel-title {
    font-weight: 600;
    letter-spacing: .01em;
}

/* ===================================================================
   3. 交互反馈：仅在支持 hover 的设备启用悬停效果
   ------------------------------------------------------------------
   触屏设备上 :hover 会在点击后"粘住"，故用 media query 隔离；
   触屏改用 :active 提供即时反馈。
   =================================================================== */

@media (hover: hover) and (pointer: fine) {
    .panel:hover {
        box-shadow: var(--shadow-2);
    }

    .article-list .article-title a:hover {
        color: var(--c-accent);
    }
}

/* -------------------------------------------------------------------
   卡片悬停动画：唯一定义处
   ------------------------------------------------------------------
   此前 video.css / theme-enhance.css / theme-dark.css 三个文件都在动
   同一个 hover，造成三个问题：
     1. 容器与图片同时 scale，倍率复合为 1.04×1.012≈1.052，且两者
        时长（.3s/.28s）与曲线（ease/cubic-bezier）不同，不同时结束，
        肉眼看到两段错位位移 —— 这是"发涩"的主因
     2. filter: brightness() 参与过渡，不走合成器快路径，每帧重绘
     3. 未提升合成层，大位图 scale 时逐帧重新栅格化，既卡又发虚

   现统一为：只有图片做 transform，遮罩层用 opacity（均走合成器），
   单一时长与单一曲线，并预先提升图层。
   ------------------------------------------------------------------- */

.video-card .video-thumb {
    /* 建立层叠上下文，供遮罩层定位 */
    position: relative;
    /* 提前提升为合成层，避免 hover 瞬间才创建导致首帧卡顿 */
    transform: translateZ(0);
}

.video-card .video-thumb img {
    /* 单一属性过渡：transform 走合成器，不触发重排重绘 */
    transition: transform var(--dur-thumb) var(--ease-thumb);
    /* 提示浏览器预留图层，避免缩放时重新栅格化导致发虚 */
    will-change: transform;
    backface-visibility: hidden;
}

/* 亮度变化用遮罩层的 opacity 实现，而非 filter：
   filter 动画每帧触发重绘，opacity 可由合成器直接处理 */
.video-card .video-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-color: #000;
    opacity: var(--thumb-veil, 0);
    transition: opacity var(--dur-thumb) var(--ease-thumb);
}

/* 角标需盖在遮罩之上 */
.video-card .video-duration,
.video-card .video-resolution {
    z-index: 2;
}

@media (hover: hover) and (pointer: fine) {
    .video-card:hover .video-thumb img {
        transform: scale(1.06);
    }

    /* 悬停时遮罩淡出，图片恢复全亮 */
    .video-card:hover .video-thumb::after {
        opacity: 0;
    }

    .video-card:hover .video-title a {
        color: var(--c-accent);
    }
}

/* 动图封面：与主图同步淡入，共用同一时长与曲线 */
.video-card .video-thumb .gif-cover {
    transition: opacity var(--dur-thumb) var(--ease-thumb);
}

@media (hover: hover) and (pointer: fine) {
    .video-card:hover .video-thumb .gif-cover {
        opacity: 1;
    }
}

/* 触屏设备的按压反馈 */
@media (hover: none) {
    .video-card:active .video-thumb,
    .article-item:active {
        opacity: .72;
        transition: opacity .1s var(--ease);
    }

    /* 移除移动端点击时的灰色高亮块，改用自定义反馈 */
    a,
    button,
    .btn {
        -webkit-tap-highlight-color: transparent;
    }
}

/* ===================================================================
   4. 触摸目标尺寸
   ------------------------------------------------------------------
   导航、分页、标签在移动端需达到 44px 可点击高度。
   =================================================================== */

@media (max-width: 767px) {
    /* 导航项 */
    .navbar-nav > li > a {
        min-height: var(--tap);
        display: flex;
        align-items: center;
    }

    /* 分页按钮 */
    .pager .pagination > li > a,
    .pager .pagination > li > span {
        min-width: var(--tap);
        min-height: var(--tap);
        line-height: calc(var(--tap) - 2px);
        padding: 0 var(--sp-3);
    }

    /* 加载更多按钮：加宽至易点击 */
    .btn-loadmore {
        min-height: var(--tap);
        padding-left: var(--sp-6) !important;
        padding-right: var(--sp-6) !important;
        line-height: calc(var(--tap) - 12px);
    }

    /* 筛选标签 */
    .tabs-wrapper .tabs-group .content > li > a {
        display: inline-block;
        min-height: 36px;
        line-height: 36px;
        padding: 0 var(--sp-3);
    }

    /* 页脚链接间距，避免误触 */
    footer .list-inline > li {
        padding: var(--sp-2) var(--sp-3);
    }
}

/* ===================================================================
   5. 列表项移动端布局
   ------------------------------------------------------------------
   插件默认缩略图固定 160px，在 360px 宽的手机上占比过大，
   改为按比例分配。
   =================================================================== */

@media (max-width: 767px) {
    .article-list .media .media-left a {
        width: 120px;
    }

    .article-list .media .media-body {
        padding-left: var(--sp-3);
    }

    .article-list .article-title {
        font-size: 15px;
        line-height: 1.45;
    }

    /* 标题最多两行，避免长标题挤压布局 */
    .article-list .article-title a {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* 摘要在窄屏最多两行 */
    .article-list .article-intro {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 13px;
        color: var(--c-text-soft);
    }

    /* 注：article-tag 的绝对定位已由 common.css 的 1200px 断点改为 relative，此处无需重复 */
    .article-list .media-body .article-tag {
        font-size: 12px;
    }

    /* 插件用 hidden-xs 把浏览/点赞/评论在移动端全部隐藏，
       其中"浏览数"是列表页最有参考价值的指标，此处恢复显示。
       Bootstrap 3 的 .hidden-xs 带 !important，故需同等优先级覆盖。 */
    .article-list .article-tag span.hidden-xs[itemprop="views"] {
        display: inline !important;
    }
}

/* 超窄屏（<=360px）进一步收缩缩略图 */
@media (max-width: 360px) {
    .article-list .media .media-left a {
        width: 96px;
    }
}

/* ===================================================================
   6. 视频卡片（首页「最近更新」/ 各分类板块 / 全部列表页共用）
   ------------------------------------------------------------------
   卡片网格由 Bootstrap3 的 float 列（col-xs-6 col-sm-4 col-md-3）排布。
   float 列的问题：每个卡片高度由自身标题行数决定（1 行 or 2 行），于是
   同一行里各卡的 meta 行（浏览数/时间）落在不同基线上，整片网格看着
   参差 —— 这是「传统感」的结构性来源，改角标圆角之类的细节救不回来。

   改法：把 .row 覆盖为 CSS Grid（模板不动，仍输出 col-* 类，只是这些
   类的 float/width 被中和）。Grid 行内单元天然等高，再让卡片成为纵向
   flex 容器、meta 用 margin-top:auto 顶到底部，同一行 meta 即对齐。
   顺带用 gap 取代 float 时代的负 margin + 左右 padding 拼接。

   全站卡片网格统一走 .video-grid（channel_video.html 原用的 .video-list
   已随该页迁移到 .index-block 体系一并去掉）。
   =================================================================== */

.video-grid .row {
    display: grid;
    /* 桌面 4 列，与原 col-md-3 一致 */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5) var(--sp-4);
    /* 中和 .row 的负 margin（gap 已接管列间距） */
    margin-left: 0;
    margin-right: 0;
}

/* 必须干掉 .row 的 clearfix 伪元素
   ------------------------------------------------------------------
   Bootstrap 给 .row 设了 ::before/::after { content: " "; display: table }
   用于清浮动。在 float 布局里它们不可见；但容器一旦变成 display:grid，
   **带 content 的伪元素就是货真价实的网格项**——::before 占掉第 1 格、
   ::after 占掉末尾一格，于是首行左上出现一个空格子，整片卡片后移一位。
   （现象：5 列下第一行只剩 4 张卡，首格空白。） */
.video-grid .row::before,
.video-grid .row::after {
    display: none;
}

/* 中和 col-* 的 float 与 width：Grid 自行分配轨道。
   属性选择器 + 后代（0,2,0 加元素）足以压过 .col-md-3(0,1,0)，
   无需 !important。 */
.video-grid .row > [class*="col-"] {
    float: none;
    width: auto;
    padding-left: 0;
    padding-right: 0;
    /* 列容器本身也做 flex：卡片（.video-card）由此被拉满单元格高度，
       不必依赖 height:100% 对网格单元高度的百分比解析。 */
    display: flex;
    flex-direction: column;
}

/* 空数据提示（empty 参数输出 col-xs-12）需跨满整行 */
.video-grid .row > .col-xs-12 {
    grid-column: 1 / -1;
}

/* 卡片本体的样式（圆角、标题、meta、角标、等高 flex）全部在 video.css：
   那个文件由各模板在 <body> 内引入，加载顺序在本文件之后，同特异性下会
   反向覆盖。此处只保留 video.css 不涉及的网格容器规则。 */

/* ===================================================================
   7. 图片加载：淡入，避免闪烁
   =================================================================== */

img[loading="lazy"] {
    background-color: var(--c-bg-soft);
}

.img-fade {
    opacity: 0;
    transition: opacity .3s var(--ease);
}

.img-fade.is-loaded {
    opacity: 1;
}

/* 加载失败的图片：占位层（class 由 theme-enhance.js markBroken 添加）
   ------------------------------------------------------------------
   img 整个 display:none，连带去掉浏览器的破图图标与 alt 文字 —— 卡片里
   的 alt 与下方标题逐字重复，大面积失效时整页像每个标题印了两遍。
   可访问性不受损：链接有 title，紧邻的 h3 是同一标题，图片在此纯装饰。
   占位图形画在容器 ::before（.embed-responsive 用 padding-bottom 撑比例，
   ::before 未被占用，图片移除后高度不塌），只用令牌配色以跟随深浅主题。 */
img.is-broken {
    display: none;
}

/* .video-thumb 已是 relative；此处为 .thumbnail / .media-left 等容器兜底 */
.has-broken-img {
    position: relative;
}

.has-broken-img::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    content: "";
    background-color: var(--c-bg-soft);
    /* 45° 细斜纹：一眼看出「没有图」，又不像损坏 */
    background-image: repeating-linear-gradient(
        45deg,
        var(--c-line) 0,
        var(--c-line) 1px,
        transparent 1px,
        transparent 9px
    );
}

/* ===================================================================
   8. 无障碍：键盘焦点可见
   ------------------------------------------------------------------
   :focus-visible 仅在键盘操作时显示轮廓，不影响鼠标点击观感。
   =================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
.btn:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* 跳转到主内容（屏幕阅读器与键盘用户） */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: var(--sp-3) var(--sp-4);
    background: #fff;
    color: var(--c-text);
    box-shadow: var(--shadow-2);
    border-radius: 0 0 var(--radius) 0;
}

.skip-to-content:focus {
    left: 0;
}

/* ===================================================================
   9. 浮动按钮组（含返回顶部）
   ------------------------------------------------------------------
   插件用 right:50%; margin-right:-640px 定位 #floatbtn，这是固定宽度
   居中布局的写法：在 375px 宽的手机上按钮会被推到约 827px 处，
   即移动端「返回顶部」实际不可见。此处改为贴边定位。
   元素与点击逻辑插件已提供（layout.html / common.js），不重复实现。
   =================================================================== */

@media (max-width: 1300px) {
    #floatbtn {
        right: var(--sp-3);
        margin-right: 0;
    }
}

@media (max-width: 767px) {
    #floatbtn {
        right: var(--sp-2);
        /* 避开 iOS 底部手势区 */
        bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
        width: var(--tap);
    }

    #floatbtn > a,
    #floatbtn .floatbtn-item {
        width: var(--tap);
        height: var(--tap);
    }

    /* 窄屏隐藏按钮内的文字说明，仅留图标，避免拥挤 */
    #floatbtn > a em,
    #floatbtn .floatbtn-item em {
        display: none;
    }
}

/* ===================================================================
   10. 表格与长内容防溢出（移动端常见破版原因）
   =================================================================== */

@media (max-width: 767px) {
    .article-text table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .article-text pre {
        overflow-x: auto;
    }
}

/* ===================================================================
   11. 用户偏好
   =================================================================== */

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

    /* 例外：缩略图悬停过渡予以保留
       ------------------------------------------------------------------
       上面的通配规则会把过渡压成 .01ms，等于取消动画。但缩略图的悬停
       反馈是基本的交互提示（而非自动播放的装饰动效），全部取消会让界面
       显得"死板、不跟手"。

       此处降级而非取消：缩短时长并减小缩放幅度。
       依据：WCAG 2.3.3（交互动画）属 AAA 级，针对的是非必要动效；
       此效果由用户主动悬停触发、瞬时、不循环、且局限于小范围，
       保留一个更轻微的版本比彻底取消更合理。 */
    .video-card .video-thumb img,
    .video-card .video-thumb::after,
    .video-card .video-thumb .gif-cover {
        transition-duration: var(--dur-thumb-reduced) !important;
    }

    /* 缩放幅度减半，降低运动感但保留反馈 */
    .video-card:hover .video-thumb img {
        transform: scale(1.03);
    }

    /* 标签 chip：同上思路，区分「装饰动效」与「交互反馈」
       ------------------------------------------------------------------
       · 入场的错峰浮现属纯装饰、且是自动播放的位移，直接取消
         （JS 也不会加 .is-anim，这里是双保险：防止类被其它路径加上）
       · 悬停反馈保留但去掉位移：只留颜色与光晕，避免运动感 */
    .lf-tags.is-anim .tags .tag,
    .lf-tags.is-anim.is-in .tags .tag {
        opacity: 1;
        transform: none;
        transition-delay: 0ms !important;
    }

    /* 例外：标签跑马灯保持滚动
       ------------------------------------------------------------------
       站点决策：该组件不随系统「减少动态效果」停下（明确要求始终滚动）。

       但**必须**在此显式豁免，否则本块开头对 * 设的
         animation-duration: .01ms !important
         animation-iteration-count: 1 !important
       会把跑马灯压成「瞬间跑完一圈然后停住」—— 比不做更糟。
       这两条 !important 只能用同样的 !important 顶回去。

       --marquee-dur 由 JS 按各行内容宽度写在轨道的 style 上，
       故此处引用变量即可拿回正确时长。

       仍然保留的无障碍措施：悬停 / 键盘聚焦可暂停整条标签带
       （WCAG 2.2.2 要求的暂停机制），且入场错峰仍被关闭（见下）。 */
    .list-footer .lf-tags .tag-track.is-marquee {
        animation-duration: var(--marquee-dur) !important;
        animation-iteration-count: infinite !important;
    }

    .list-footer .lf-tags .tags .tag {
        transition-duration: var(--dur-thumb-reduced) !important;
    }

    .list-footer .lf-tags .tags .tag:hover,
    .list-footer .lf-tags .tags .tag:focus-visible {
        transform: none;
    }

    .list-footer .lf-tags .tags .tag:active {
        transform: scale(.98);
    }
}

@media (prefers-contrast: more) {
    :root {
        --c-text-soft: #4b5563;
        --c-line: #9ca3af;
    }
}

/* ===================================================================
   12. 通栏焦点图
   ------------------------------------------------------------------
   插件原本把轮播放在 col-md-8 内且固定 180px 高。此处移出 .container
   实现全宽，并按视口比例给高度，避免大屏上过于扁平。
   =================================================================== */

/* margin-top 用于消除顶部白条
   ------------------------------------------------------------------
   common.css 的 .skin-white 设了 padding-top:80px 为固定导航栏留位，
   而导航栏实际高度为 50px（.navbar min-height:50px；其 1px 下边框已被
   common.css 的 .navbar{border:none} 覆盖）。多出的 30px 原是内容区的
   呼吸间距，但通栏深色轮播作为首个元素时会显示为白条，故在此抵消。
   移动端 .skin-white 为 padding-top:70px，多余量相应为 20px。 */
.index-focus-full {
    position: relative;
    margin-top: -30px;
    margin-bottom: var(--sp-5);
    background-color: #1a1a1a;
    overflow: hidden;
}

/* 通栏焦点图的高度策略：固定比例 + 420px 上限（而非固定高度）
   ------------------------------------------------------------------
   须带 #index-focus 提升特异性：common.css 在 @media(min-width:768px) 用
   ID 选择器 #index-focus .item .carousel-img 设了 340px（还有基础规则的
   180px），ID 特异性高于纯 class。

   为什么不写 height: 420px：
   .carousel-img 用 background-size: cover，「能看到图的多少」取决于容器
   比例与图片比例之差。若把高度钉死 420px，容器比例会随视口摆动：
     1920px 宽 -> 4.57:1     375px 宽 -> 0.89:1
   同一张 4:1 的横幅图，在宽屏只裁掉一点，在手机上横向只剩正中间 22%
   —— 主体和文字基本被切掉。这就是「PC 手机共用一张图」翻车的地方。

   改为 aspect-ratio 定容器比例、max-height 兜住 420px：
     · 宽度 ≥ 980px 时 max-height 生效，高度正好 420px（即需求值）
     · 980px 以下按 21:9 等比缩小，容器比例恒定 -> 裁切范围恒定
   min-height 防止极窄屏塌成一条。手机段另有更高的比例，见下方断点。 */
.index-focus-full #index-focus .item .carousel-img {
    height: auto;
    aspect-ratio: 21 / 9;
    max-height: 420px;
    min-height: 220px;
}

/* 取消插件 hover 时的 1.02 倍放大：悬停不再缩放图片 */
.index-focus-full .carousel-focus:hover .carousel-img {
    transform: none;
}

/* 图片载入动画：进入当前页时淡入并轻微归位，替代原先的悬停缩放 */
@keyframes focusImgLoad {
    from {
        opacity: 0;
        transform: scale(1.04);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.index-focus-full .carousel-focus .item.active .carousel-img {
    animation: focusImgLoad .6s var(--ease) both;
}

/* 标题条：底部渐变加深加高，保证更大图片上文字仍清晰 */
.index-focus-full .carousel-caption {
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    text-align: left;
    background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .42) 55%, transparent 100%);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

/* 标题：随视口流式缩放，长标题折两行封顶，与下方内容左对齐 */
.index-focus-full .carousel-caption > h2 {
    max-width: 1170px;
    margin: 0 auto;
    font-size: clamp(20px, 2.6vw, 34px);
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 指示器：细长胶囊形，激活态加宽并取主色 */
.index-focus-full .carousel-indicators {
    bottom: var(--sp-2);
    z-index: 12;
}

.index-focus-full .carousel-indicators li {
    width: 8px;
    height: 4px;
    margin: 0 3px;
    border: none;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, .35);
    transition: width .3s var(--ease), background-color .3s var(--ease);
}

.index-focus-full .carousel-indicators li.active {
    width: 24px;
    background-color: var(--c-accent);
}

/* 左右箭头：默认半透明，hover 时加强 */
.index-focus-full .carousel-control {
    width: 8%;
    opacity: .55;
    transition: opacity .3s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .index-focus-full .carousel-control:hover {
        opacity: 1;
    }
}

@media (max-width: 767px) {
    .index-focus-full {
        /* 移动端 .skin-white 为 padding-top:70px，减去 50px 导航栏后多余 20px */
        margin-top: -20px;
        margin-bottom: var(--sp-4);
    }

    /* 手机段单独放高到 16:9：
       21:9 在 375px 宽下只有 161px，作为首屏主视觉太扁；而 16:9 能给到
       211px。代价是横向裁切更多（4:1 的图可见约 44%），但竖向多留出的
       空间对「一张图通吃」更有利 —— 手机上用户更能接受左右裁掉，
       不能接受主体被压成一条。
       须带 #index-focus 提升特异性，才能压过上方 21:9 那条规则。 */
    .index-focus-full #index-focus .item .carousel-img {
        aspect-ratio: 16 / 9;
        min-height: 200px;
        /* 上限放开：由比例决定，避免窄屏被 420px 之外的值意外裁短 */
        max-height: none;
    }

    .index-focus-full .carousel-caption {
        /* 左右留白与正文一致（见第 34 节），标题与下方内容左对齐 */
        padding: var(--sp-5) var(--sp-4) var(--sp-3);
    }

    /* 触屏依赖滑动，隐藏箭头 */
    .index-focus-full .carousel-control {
        display: none;
    }
}

/* ===================================================================
   13. 移动端底部固定导航
   ------------------------------------------------------------------
   仅在 <=767px 显示。桌面端完全不渲染（display:none）。
   =================================================================== */

.mobile-tabbar {
    display: none;
}

@media (max-width: 767px) {
    .mobile-tabbar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        background-color: rgba(255, 255, 255, .97);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        backdrop-filter: saturate(180%) blur(12px);
        border-top: 1px solid var(--c-line);
        /* 适配 iPhone 底部安全区 */
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -1px 6px rgba(16, 24, 40, .06);
    }

    .mobile-tabbar > a {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: var(--tap);
        padding: 6px 0 4px;
        color: var(--c-text-soft);
        font-size: 11px;
        line-height: 1.4;
        text-decoration: none;
        /* 防止长栏目名撑破布局 */
        overflow: hidden;
        white-space: nowrap;
    }

    .mobile-tabbar > a > i {
        font-size: 19px;
        line-height: 1;
        margin-bottom: 3px;
    }

    .mobile-tabbar > a.active {
        color: var(--c-accent);
    }

    .mobile-tabbar > a:active {
        background-color: var(--c-accent-soft);
    }

    /* 为底栏预留空间：加在页脚内部而非 body
       ------------------------------------------------------------------
       原先写的是 body.has-tabbar{padding-bottom}，但 body 的 padding 位于
       页脚之后，会在页脚下方露出一条页面底色的空白带（视觉上"底部多了很大
       的空间"）。改为给页脚内层加下内边距，页脚自身的背景即可填满该区域，
       底栏悬浮其上，不再出现空隙。 */
    body.has-tabbar #footer {
        padding-bottom: calc(var(--tap) + env(safe-area-inset-bottom, 0px));
    }

    /* 浮动按钮组上移，避免与底栏重叠 */
    body.has-tabbar #floatbtn {
        bottom: calc(var(--tap) + 16px + env(safe-area-inset-bottom, 0px));
    }
}

/* ===================================================================
   14. 区块标题与相关推荐
   ------------------------------------------------------------------
   related.html 原用 h5 导致 h1->h5->h3 层级乱序，已改为 h2+h3，
   此处补齐视觉层级，避免 h2/h3 默认字号过大破坏版式。
   =================================================================== */

.section-title {
    margin: 0 0 var(--sp-4);
    padding-bottom: var(--sp-2);
    font-size: 17px;
    font-weight: 600;
    color: var(--c-text);
    border-bottom: 1px solid var(--c-line);
}

.related-article {
    margin-top: var(--sp-5);
}

/* .related-title 的样式统一在第 23 节。勿在此加 .related-article .related-title
   (0,2,0)，其特异性高于第 23 节的 .related-title (0,1,0)，会把横向图文排版压掉。 */

@media (max-width: 767px) {
    .section-title {
        font-size: 15px;
        margin-bottom: var(--sp-3);
    }
}

/* ===================================================================
   15. 详情页正文区
   ------------------------------------------------------------------
   缩短 h1 与正文之间的装饰性间距，让内容更快进入视野。
   =================================================================== */

.article-content .article-metas {
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-line);
}

.article-content .metas-title {
    margin: 0 0 var(--sp-3);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.35;
}

.article-content .metas-body {
    font-size: 13px;
    color: var(--c-text-faint);
}

.article-content .metas-body > span {
    margin-right: var(--sp-3);
}

/* 上下篇导航：桌面端左右分栏，移动端上下堆叠 */
.entry-meta .article-prevnext {
    margin: var(--sp-4) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--c-line);
}

.entry-meta .article-prevnext > li {
    padding: var(--sp-3) 0;
    font-size: 13px;
    border-bottom: 1px solid var(--c-line);
}

.entry-meta .article-prevnext > li > span {
    color: var(--c-text-faint);
    margin-right: var(--sp-2);
}

@media (max-width: 767px) {
    .article-content .metas-title {
        font-size: 20px;
    }

    /* 上下篇标题过长时截断为单行，避免撑高页面 */
    .entry-meta .article-prevnext > li > a {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
    }
}

/* ===================================================================
   15b. 付费阅读提示（article-pay）
   ------------------------------------------------------------------
   详情页「付费内容 / VIP 专享」提示卡，替代 Bootstrap 浅色 alert。
   全部基于设计令牌，自动适配明暗主题。
   =================================================================== */

.article-pay {
    margin: var(--sp-4) 0;
}

.pay-card {
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    background: var(--c-bg-soft);
    overflow: hidden;
}

.pay-card + .pay-card {
    margin-top: var(--sp-3);
}

.pay-card-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    font-size: 14px;
    font-weight: 600;
    color: var(--c-accent);
    background: var(--c-accent-soft);
    border-bottom: 1px solid var(--c-line);
}

.pay-card-body {
    padding: var(--sp-4);
}

.pay-tip {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--c-text-soft);
}

.pay-tip b {
    color: var(--c-text);
}

.pay-price {
    color: var(--c-accent);
    font-size: 18px;
    font-weight: 700;
}

.pay-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.pay-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    min-width: 120px;
    padding: 0 var(--sp-4);
    font-size: 13px;
    line-height: 1;
    font-weight: 500;
    color: var(--c-text);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: transparent;
    transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}

/* 支付按钮内字体图标与渠道 logo 图标统一尺寸 */
.pay-btn .fa {
    font-size: 16px;
}

.pay-btn:hover,
.pay-btn:focus {
    color: var(--c-accent);
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
    text-decoration: none;
}

.pay-btn-primary {
    color: #fff;
    background: var(--c-accent);
    border-color: var(--c-accent);
}

.pay-btn-primary:hover,
.pay-btn-primary:focus {
    color: #fff;
    background: var(--accent-hi, #e0143c);
    border-color: var(--accent-hi, #e0143c);
}

/* 支付按钮内的渠道 logo 图标（_a 裁剪版） */
.paytype-img {
    height: 16px;
    width: auto;
    flex-shrink: 0;
}

/* ===================================================================
   16. 列表页：全宽网格（视频站风格）
   ------------------------------------------------------------------
   取消右侧栏，列表占满容器宽度：桌面 4 列 / 平板 3 列 / 手机 2 列。
   原侧栏内链移至列表之后（listfooter.html），保留内链权重又不挤占首屏。
   =================================================================== */

.list-header {
    margin-bottom: var(--sp-4);
}

.list-header .breadcrumb {
    margin-bottom: var(--sp-2);
    padding: 0;
    background: none;
    font-size: 12px;
}

.list-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--c-text);
}

/* 条目数徽标（标签页等）：与 .block-count / .banner-count 同一套形态，
   仅字号随 h1 略放大。数字用等宽，避免翻页时宽度跳动。 */
.list-title .list-count {
    display: inline-block;
    margin-left: var(--sp-2);
    padding: 2px var(--sp-2);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    vertical-align: middle;
    color: var(--c-text-soft);
    background-color: var(--c-bg-soft);
    border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
}

/* 栏目描述：为搜索引擎提供可索引正文 */
.list-desc {
    margin: var(--sp-2) 0 0;
    max-width: 60em;
    font-size: 14px;
    line-height: 1.75;
    color: var(--c-text-soft);
}

/* ---------- 工具条 ---------- */

.list-toolbar {
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid var(--c-line);
}

.list-toolbar .list-order {
    margin: 0 0 var(--sp-2);
}

.list-toolbar .list-order > li {
    padding: 0 var(--sp-3) 0 0;
}

.list-toolbar .list-order a {
    display: inline-block;
    padding: var(--sp-1) var(--sp-3);
    font-size: 13px;
    color: var(--c-text-soft);
    border-radius: var(--radius-sm);
}

.list-toolbar .list-order a.active {
    color: #fff;
    background-color: var(--c-accent);
}

.list-filter .filter-group {
    display: flex;
    align-items: baseline;
    margin-top: var(--sp-2);
    font-size: 13px;
}

.list-filter .filter-label {
    flex: 0 0 auto;
    margin-right: var(--sp-2);
    color: var(--c-text-faint);
}

.list-filter .filter-items {
    margin: 0;
}

.list-filter .filter-items > li {
    padding: 0 var(--sp-2) var(--sp-1) 0;
}

.list-filter .filter-items a {
    display: inline-block;
    padding: 2px var(--sp-2);
    color: var(--c-text-soft);
    border-radius: var(--radius-sm);
}

.list-filter .filter-items a.active {
    color: var(--c-accent);
    background-color: var(--c-accent-soft);
}

@media (hover: hover) and (pointer: fine) {
    .list-toolbar .list-order a:hover,
    .list-filter .filter-items a:hover {
        color: var(--c-accent);
        text-decoration: none;
    }
}

/* ---------- 网格 ---------- */

.video-grid {
    margin-bottom: var(--sp-4);
}

/* 列数断点（网格轨道由第 6 节接管，col-* 的 width/float 已中和）：
   大屏 5 列 / 桌面 4 列（第 6 节默认）/ 平板 3 列 / 手机 2 列。
   数值沿用原 col-xs-6 · col-sm-4 · col-md-3 的分栏，观感不变，
   只是换成 Grid 以获得等高行。 */
@media (min-width: 1400px) {
    .video-grid .row {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .video-grid .row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- 列表底部内链 ---------- */

/* .list-footer 同时是 .index-block（下边距由后者提供），且其 .block-head 自带
   2px 下边框，故不再需要自己的 border-top + padding-top（否则与紧邻的标题
   下边框形成两道平行线），只留与上方内容的间距。货架布局见第 36 节。 */
.list-footer {
    margin-top: var(--sp-5);
}

/* ---------- 移动端 ---------- */

@media (max-width: 767px) {
    .list-title {
        font-size: 19px;
    }

    .list-desc {
        font-size: 13px;
        /* 移动端最多三行，避免描述过长挤走列表 */
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* 排序与筛选横向滚动，避免换行堆高 */
    .list-toolbar .list-order,
    .list-filter .filter-items {
        white-space: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* 隐藏滚动条但保留滚动能力 */
        scrollbar-width: none;
    }

    .list-toolbar .list-order::-webkit-scrollbar,
    .list-filter .filter-items::-webkit-scrollbar {
        display: none;
    }

    .list-toolbar .list-order > li,
    .list-filter .filter-items > li {
        display: inline-block;
    }

    /* 手机两列，间距收窄让卡片更大（原为负 margin + padding 拼接，
       改 Grid 后直接调 gap） */
    .video-grid .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-4) var(--sp-2);
    }

    .list-footer {
        margin-top: var(--sp-4);
    }
}

/* 工具条区块标题：语义上承接 h1（卡片为 h3），视觉上保持轻量 */
.list-toolbar .toolbar-title {
    margin: 0 0 var(--sp-3);
    font-size: 16px;
    font-weight: 600;
    color: var(--c-text);
}

@media (max-width: 767px) {
    .list-toolbar .toolbar-title {
        font-size: 15px;
        margin-bottom: var(--sp-2);
    }
}

/* ===================================================================
   17. 首页：分类菜单 + 栏目分块（视频站风格）
   =================================================================== */

/* ---------- 分类菜单 ---------- */

.category-nav {
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--c-line);
}

.category-nav > ul {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.category-nav a {
    display: inline-block;
    padding: var(--sp-2) var(--sp-4);
    font-size: 14px;
    color: var(--c-text);
    background-color: var(--c-bg-soft);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    transition: background-color .2s var(--ease), color .2s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .category-nav a:hover {
        color: #fff;
        background-color: var(--c-accent);
        text-decoration: none;
    }
}

@media (hover: none) {
    .category-nav a:active {
        color: #fff;
        background-color: var(--c-accent);
    }
}

/* ---------- 栏目分块 ---------- */

.index-block {
    margin-bottom: var(--sp-6);
}

.index-block .block-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0 var(--sp-4);
    padding-bottom: var(--sp-2);
    font-size: 18px;
    font-weight: 600;
    border-bottom: 2px solid var(--c-line);
}

.index-block .block-title > a:first-child,
.index-block .block-title > span:first-child {
    position: relative;
    padding-left: var(--sp-3);
    color: var(--c-text);
}

/* 标题前的强调竖条 */
.index-block .block-title > a:first-child::before,
.index-block .block-title > span:first-child::before {
    content: '';
    position: absolute;
    left: 0;
    top: .15em;
    bottom: .15em;
    width: 3px;
    background-color: var(--c-accent);
    border-radius: 2px;
}

.index-block .block-title .more {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 400;
    color: var(--c-text-faint);
}

.index-block .block-title .more i {
    margin-left: var(--sp-1);
}

@media (hover: hover) and (pointer: fine) {
    .index-block .block-title .more:hover {
        color: var(--c-accent);
        text-decoration: none;
    }
}

/* ---------- 热门导航：合作伙伴 Logo 墙 ---------- */

.list-partner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--sp-2);
    margin: 0;
}

/* 卡片：重置 common.css 遗留的 #313c47 固定宽度盒
   （inline-block / width:140px / content-box / margin），改为自适应网格卡片 */
.list-partner > li {
    display: flex;
    align-items: stretch;
    width: auto;
    min-height: 48px;
    margin: 0;
    background-color: var(--c-bg-soft);
    border-radius: var(--radius);
    box-sizing: border-box;
    overflow: hidden;
    transition: background-color .2s var(--ease), transform .2s var(--ease);
}

/* 整卡即链接：a 填满 li，Logo 居中，卡片空白区同样可点 */
.list-partner > li > a {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.list-partner img {
    width: auto;
    max-width: 100%;
    object-fit: contain;
    border-radius: 0;
    opacity: .85;
    transition: opacity .2s var(--ease), transform .2s var(--ease), filter .2s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .list-partner > li:hover {
        transform: translateY(-2px);
    }

    .list-partner > li:hover img {
        opacity: 1;
        transform: scale(1.04);
    }
}

/* ---------- 移动端 ---------- */

@media (max-width: 767px) {
    /* 分类菜单横向滚动，避免占据过多首屏高度 */
    .category-nav {
        margin-bottom: var(--sp-4);
        padding-bottom: var(--sp-2);
    }

    .category-nav > ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .category-nav > ul::-webkit-scrollbar {
        display: none;
    }

    .category-nav a {
        padding: 6px var(--sp-3);
        font-size: 13px;
        white-space: nowrap;
    }

    .index-block {
        margin-bottom: var(--sp-5);
    }

    .index-block .block-title {
        font-size: 16px;
        margin-bottom: var(--sp-3);
    }

    .list-partner {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }

    .list-partner > li {
        min-height: 40px;
    }
}

/* 板块内子分类菜单：跟随所属一级分类 */
/* ===================================================================
   18. 首页 Hero 条：主标题 + 分层分类导航
   ------------------------------------------------------------------
   替代原先游离的 h1 与单层分类菜单。一级分类为主胶囊（带内容数），
   二级分类为跟随其后的小标签，形成视觉层级。
   =================================================================== */

.site-hero {
    margin-bottom: var(--sp-5);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--c-line);
}

.site-hero .hero-title {
    margin: 0 0 var(--sp-4);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
}

.site-hero .hero-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-5);
}

/* 一级分类及其子分类构成一组 */
.hero-cate {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

/* 一级：主胶囊 */
.hero-cate .cate-main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px var(--sp-4);
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--radius-lg);
    background-color: var(--c-bg-soft);
    color: var(--c-text);
    white-space: nowrap;
}

/* 内容数：弱化为角标 */
.hero-cate .cate-count {
    font-size: 11px;
    font-weight: 400;
    opacity: .65;
    font-variant-numeric: tabular-nums;
}

/* 二级：小标签 */
.hero-cate .cate-sub {
    display: inline-block;
    padding: 4px var(--sp-3);
    font-size: 12.5px;
    border-radius: var(--radius-sm);
    color: var(--c-text-soft);
    white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
    .hero-cate .cate-main:hover {
        background-color: var(--c-accent);
        color: #fff;
        text-decoration: none;
    }

    .hero-cate .cate-sub:hover {
        background-color: var(--c-accent-soft);
        color: var(--c-accent);
        text-decoration: none;
    }
}

@media (hover: none) {
    .hero-cate .cate-main:active {
        background-color: var(--c-accent);
        color: #fff;
    }
}

@media (max-width: 767px) {
    .site-hero {
        margin-bottom: var(--sp-4);
        padding-bottom: var(--sp-3);
    }

    .site-hero .hero-title {
        font-size: 17px;
        margin-bottom: var(--sp-3);
    }

    /* 移动端整条横向滚动，避免多层分类堆高挤走内容 */
    .site-hero .hero-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: var(--sp-4);
        /* 抵消容器内边距，让滚动区贴边（16px，与第 34 节留白一致） */
        margin: 0 calc(var(--sp-4) * -1);
        padding: 0 var(--sp-4);
    }

    .site-hero .hero-nav::-webkit-scrollbar {
        display: none;
    }

    .hero-cate {
        flex-wrap: nowrap;
    }

    .hero-cate .cate-main {
        padding: 6px var(--sp-3);
        font-size: 13px;
    }

    .hero-cate .cate-sub {
        font-size: 12px;
    }
}

/* ===================================================================
   19. 板块头重构：标题 + 子分类 + 筛选 + 更多（整合为一行）
   ------------------------------------------------------------------
   替代原先「标题一行、子分类另起一行」的堆叠结构，减少竖向占用，
   并让标题行同时承载导航、筛选、入口三种功能。
   =================================================================== */

.block-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-2);
    border-bottom: 2px solid var(--c-line);
}

/* 覆盖第 17 节中 .block-title 的旧 flex 规则（结构已变） */
.index-block .block-head .block-title {
    display: block;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: none;
    font-size: 18px;
    font-weight: 700;
}

.block-head .block-title > a,
.block-head .block-title > span {
    position: relative;
    padding-left: var(--sp-3);
    color: var(--c-text);
}

/* 标题前的强调竖条 */
.block-head .block-title > a::before,
.block-head .block-title > span::before {
    content: '';
    position: absolute;
    left: 0;
    top: .18em;
    bottom: .18em;
    width: 3px;
    background-color: var(--c-accent);
    border-radius: 2px;
}

/* 子分类 chip：紧随标题，字号与权重均低一级 */
.block-head .block-subs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1) 6px;
    flex: 1 1 auto;
    min-width: 0;
}

.block-head .block-subs a {
    display: inline-block;
    padding: 2px var(--sp-2);
    font-size: 12.5px;
    color: var(--c-text-soft);
    background-color: var(--c-bg-soft);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* 筛选切换：紧凑分段控件 */
.block-head .block-tabs {
    display: flex;
    flex: 0 0 auto;
    gap: 2px;
    margin-left: auto;
    padding: 2px;
    background-color: var(--c-bg-soft);
    border-radius: var(--radius);
}

.block-head .block-tabs button {
    padding: 4px var(--sp-3);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--c-text-soft);
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .18s var(--ease), color .18s var(--ease);
}

.block-head .block-tabs button.is-active {
    color: #fff;
    background-color: var(--c-accent);
    font-weight: 500;
}

.block-head .block-more {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--c-text-faint);
}

/* 无子分类/筛选的板块头（如「热门导航」仅标题 + 更多），
   更多链接靠右对齐：仅当 .block-more 直接紧随 .block-title 时成立，
   带 .block-subs/.block-tabs 的板块由 tabs 的 margin-left:auto 负责。 */
.block-head .block-title + .block-more {
    margin-left: auto;
}

.block-head .block-more i {
    margin-left: var(--sp-1);
}

@media (hover: hover) and (pointer: fine) {
    .block-head .block-subs a:hover {
        background-color: var(--c-accent-soft);
        color: var(--c-accent);
        text-decoration: none;
    }

    .block-head .block-tabs button:not(.is-active):hover {
        color: var(--c-text);
        background-color: rgba(0, 0, 0, .04);
    }

    .block-head .block-more:hover {
        color: var(--c-accent);
        text-decoration: none;
    }
}

/* 数据面板：hidden 属性控制显隐，JS 仅切换该属性 */
.block-pane[hidden] {
    display: none;
}

@media (max-width: 767px) {
    .block-head {
        gap: var(--sp-2);
        margin-bottom: var(--sp-3);
    }

    .index-block .block-head .block-title {
        font-size: 16px;
    }

    /* 标题与「更多」占第一行，子分类与筛选各自横向滚动 */
    .block-head .block-title {
        order: 1;
    }

    .block-head .block-more {
        order: 2;
        margin-left: auto;
    }

    .block-head .block-subs,
    .block-head .block-tabs {
        order: 3;
        flex-basis: 100%;
        margin-left: 0;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .block-head .block-subs::-webkit-scrollbar,
    .block-head .block-tabs::-webkit-scrollbar {
        display: none;
    }

    /* 筛选控件在移动端不撑满，按内容宽度居左 */
    .block-head .block-tabs {
        flex-basis: auto;
        align-self: flex-start;
    }

    .block-head .block-tabs button {
        min-height: 32px;
    }
}

/* ===================================================================
   20. 导航栏重构
   ------------------------------------------------------------------
   修正两处既有缺陷：
     1. common.css 在 768-991px 设 .navbar-header{width:44px;overflow:hidden}，
        平板宽度下 Logo 被裁切
     2. 搜索框原带 hidden-sm，768-991px 区间搜索功能完全不可见
   =================================================================== */

/* 修复平板下 Logo 被裁切 */
@media (min-width: 768px) and (max-width: 991px) {
    .navbar .navbar-header,
    .navbar-header {
        width: auto;
        overflow: visible;
    }
}

/* 搜索表单定位
   ------------------------------------------------------------------
   不使用 bootstrap 的 navbar-right：common.css 将
   .navbar .navbar-collapse .navbar-right 设为 position:absolute;right:0，
   会与同样绝对定位的会员中心重叠。此处改用 float 并为会员中心留出间距。 */
.navbar .nav-search {
    margin-top: 12px;
    margin-bottom: 0;
    padding: 0;
    border: none;
    box-shadow: none;
}

@media (min-width: 768px) {
    .navbar .nav-search {
        float: right;
        /* 为绝对定位的会员中心（.navbar-right）留出横向空间，避免重叠 */
        margin-right: 110px;
    }
}

.navbar .nav-search .form-search {
    position: relative;
}

/* 覆盖 common.css 的 input 尺寸与配色，改为胶囊形 */
.navbar .nav-search .form-search input[type=search] {
    width: 200px;
    height: 34px;
    padding: 0 var(--sp-4) 0 34px;
    font-size: 13px;
    border: none;
    border-radius: 17px;
    background-position: 11px center;
    background-size: 15px 15px;
    transition: width .25s var(--ease), background-color .2s var(--ease);
}

.navbar .nav-search .form-search input[type=search]:focus {
    width: 260px;
    padding-left: 34px;
    border: none;
    box-shadow: none;
}

/* 平板（768-991px）：logo + 栏目 + 会员中心在 750px 内已占满，
   搜索框放不进同一行；改为独占一行（同移动端做法），避免被挤出导航栏。 */
@media (min-width: 768px) and (max-width: 991px) {
    .navbar .nav-search {
        float: none;
        width: 100%;
        clear: both;
        margin: 8px 0 10px;
    }
    .navbar .nav-search .form-search input[type=search],
    .navbar .nav-search .form-search input[type=search]:focus {
        width: 100%;
        height: 38px;
    }
    /* 导航栏由单行增至两行，同步加大 body 预留位，避免搜索行压住下方内容 */
    body.skin-white {
        padding-top: 112px;
    }
}

/* 窄桌面（992-1199px）：栏目(约 504px) + logo(约 165px) + 会员中心(约 101px)
   挤占 940px 内容宽，搜索框收窄以落回同一行。 */
@media (min-width: 992px) and (max-width: 1199px) {
    .navbar .nav-search {
        margin-right: 105px;
    }
    .navbar .nav-search .form-search input[type=search] {
        width: 160px;
    }
    .navbar .nav-search .form-search input[type=search]:focus {
        width: 200px;
    }
}

/* 占位符默认可见（common.css 将其设为 transparent，导致输入框像空白块） */
.navbar .nav-search .form-search input::-webkit-input-placeholder {
    color: var(--c-text-faint);
}

.navbar .nav-search .form-search input::-moz-placeholder {
    color: var(--c-text-faint);
}

/* 当前栏目：底部强调条替代背景块 */
@media (min-width: 768px) {
    .navbar-nav > li > a {
        position: relative;
        font-weight: 400;
    }

    .navbar-nav > .active > a {
        font-weight: 600;
    }
}

@media (max-width: 767px) {
    /* 移动端：搜索提到菜单最顶部，方便单手触达 */
    #navbar-collapse {
        display: flex;
        flex-direction: column;
    }

    #navbar-collapse .nav-search {
        order: 1;
        margin: var(--sp-3) 0;
    }

    #navbar-collapse .navbar-nav:not(.navbar-right) {
        order: 2;
        margin: 0;
    }

    #navbar-collapse .navbar-right {
        order: 3;
        margin: 0;
    }

    /* 移动端搜索框占满宽度 */
    .navbar .nav-search .form-search input[type=search],
    .navbar .nav-search .form-search input[type=search]:focus {
        width: 100%;
        height: 40px;
    }
}

/* -------------------------------------------------------------------
   移动端导航抽屉：结构重构（配色见 theme-dark.css 第 4 节后）
   ------------------------------------------------------------------
   覆盖 common.css 基于 margin-left 的旧抽屉（250px、单侧浅投影、透明遮罩）：
   - transform 滑动（走合成器，比 margin-left 更顺滑、无重排）
   - 条目由「灰底圆角卡片」改为扁平清单 + 分隔线
   - caret 内联跟随、展开时旋转；子菜单内缩分层
   ------------------------------------------------------------------- */
@media (max-width: 767px) {
    #navbar-collapse {
        position: fixed;
        top: 0;
        z-index: 9999;
        left: 0;
        width: 280px;
        max-width: 82vw;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin-left: 0;
        padding: var(--sp-4);
        padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        transform: translateX(-105%);
        transition: transform .32s var(--ease);
    }

    #navbar-collapse::-webkit-scrollbar {
        display: none;
    }

    #navbar-collapse.active {
        margin-left: 0;
        transform: translateX(0);
    }

    /* 条目：扁平清单，去掉 common.css 的灰底圆角卡片 */
    #navbar-collapse .navbar-nav > li {
        margin-bottom: 0;
        border-radius: 0;
        overflow: visible;
        background: none;
    }

    #navbar-collapse .navbar-nav > li > a {
        padding: var(--sp-3) var(--sp-1);
        font-size: 15px;
    }

    /* caret 内联跟随（覆盖 common.css 的绝对定位），展开时旋转 */
    #navbar-collapse .navbar-nav li > a b.caret {
        position: static;
        margin: 0 0 0 6px;
        transition: transform .2s var(--ease);
    }

    #navbar-collapse .navbar-nav li.open > a b.caret {
        transform: rotate(180deg);
    }

    /* 子菜单：抽屉内静态展开，左缩进 + 左侧细线区分层级 */
    #navbar-collapse .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: none;
        border-left: 1px solid var(--c-line);
        border-radius: 0;
        box-shadow: none;
    }

    #navbar-collapse .navbar-nav .open .dropdown-menu > li > a {
        padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
        font-size: 14px;
    }
}

/* 抽屉遮罩淡入（背景色见 theme-dark.css） */
.navbar-collapse-bg {
    animation: navbarBackdropFade .3s var(--ease) both;
}

@keyframes navbarBackdropFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===================================================================
   21. 页脚重构：三列 + 版权条
   ------------------------------------------------------------------
   复用 common.css 已内置但原模板未使用的 .footer-inner h3 / .links 样式。
   「内容分类」列输出各一级栏目，为每个页面提供指向栏目的内链。
   =================================================================== */

.footer-col h3 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: var(--sp-3);
}

.footer-desc {
    font-size: 13px;
    line-height: 1.7;
    color: var(--c-text-soft);
    max-width: 30em;
}

.footer-inner .links li {
    padding: 3px 0;
}

.footer-inner .links li a {
    font-size: 13px;
    color: var(--c-text-soft);
}

@media (hover: hover) and (pointer: fine) {
    .footer-inner .links li a:hover {
        color: var(--c-accent);
        text-decoration: none;
    }
}

/* 版权条 */
.footer-bottom {
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--c-line);
    font-size: 12px;
    color: var(--c-text-faint);
}

.footer-bottom .copyright-text {
    margin-right: var(--sp-3);
}

@media (max-width: 767px) {
    .footer-inner {
        padding: var(--sp-5) 0 var(--sp-3) !important;
    }

    .footer-col {
        margin-bottom: var(--sp-4);
    }

    .footer-col h3 {
        font-size: 14px;
        margin-bottom: var(--sp-2);
    }

    .footer-bottom {
        padding: var(--sp-3) 0;
        text-align: center;
        line-height: 1.8;
    }

    /* 注：底栏预留空间已改为给 #footer 加下内边距（见本文件第 13 节），
       此处不再重复添加，否则会与之叠加造成底部空白过大。 */
}

/* ===================================================================
   22. 详情页元信息 + 上下篇（metainfo.html 重构后）
   =================================================================== */

.entry-meta {
    margin-top: var(--sp-5);
}

/* 归档信息：标签与值成对，两列自适应 */
.meta-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--sp-2) var(--sp-3);
    margin: 0 0 var(--sp-4);
    padding: var(--sp-4);
    background-color: var(--c-bg-soft);
    border-radius: var(--radius);
    font-size: 13px;
}

.meta-facts > dt {
    font-weight: 400;
    color: var(--c-text-faint);
    white-space: nowrap;
}

.meta-facts > dd {
    margin: 0;
    color: var(--c-text);
    min-width: 0;
}

.meta-facts .meta-tags .tag {
    margin: 0 var(--sp-1) var(--sp-1) 0;
    display: inline-block;
}

/* 上下篇：左右两块，移动端堆叠 */
.entry-nav {
    display: flex;
    gap: var(--sp-3);
}

.entry-nav-item {
    flex: 1 1 0;
    min-width: 0;
    padding: var(--sp-3) var(--sp-4);
    background-color: var(--c-bg-soft);
    border-radius: var(--radius);
    color: var(--c-text);
    text-decoration: none;
}

.entry-nav-item.is-next {
    text-align: right;
}

.entry-nav-item .nav-label {
    display: block;
    margin-bottom: var(--sp-1);
    font-size: 12px;
    color: var(--c-text-faint);
}

.entry-nav-item .nav-title {
    display: block;
    font-size: 13.5px;
    line-height: 1.5;
    /* 最多两行，长标题不撑高 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (hover: hover) and (pointer: fine) {
    .entry-nav-item:hover {
        background-color: var(--c-accent-soft);
        text-decoration: none;
    }

    .entry-nav-item:hover .nav-title {
        color: var(--c-accent);
    }
}

/* ===================================================================
   23. 相关推荐（related.html 重构后：横向图文条目）
   =================================================================== */

.related-list {
    margin: 0;
}

.related-item {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--c-line);
}

.related-item:last-child {
    border-bottom: none;
}

.related-thumb {
    flex: 0 0 112px;
    position: relative;
    overflow: hidden;
    height: 68px;
    border-radius: var(--radius-sm);
    background-color: var(--c-bg-soft);
}

.related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-body {
    flex: 1 1 auto;
    min-width: 0;
}

.related-title {
    margin: 0 0 var(--sp-1);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.related-title a {
    color: var(--c-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-meta {
    font-size: 12px;
    color: var(--c-text-faint);
}

.related-meta > span,
.related-meta > time {
    margin-right: var(--sp-3);
}

@media (hover: hover) and (pointer: fine) {
    .related-title a:hover {
        color: var(--c-accent);
    }
}

@media (max-width: 767px) {
    .related-thumb {
        flex-basis: 92px;
        height: 56px;
    }

    .related-title {
        font-size: 13px;
    }
}

/* ===================================================================
   24. 评论区
   ------------------------------------------------------------------
   仅调整样式，不改 DOM：common.js 依赖 dl>dt/dd、div.parent、
   small:first>a.reply（以 .parent().parent() 定位）、#postcomment>h3>a
   等结构，改动会破坏回复功能。
   =================================================================== */

#commentlist dl {
    display: flex;
    gap: var(--sp-3);
    margin: 0;
    padding: var(--sp-4) 0;
    border-bottom: 1px solid var(--c-line);
}

#commentlist dl:last-of-type {
    border-bottom: none;
}

#commentlist dl dt {
    flex: 0 0 auto;
}

#commentlist dl dt img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

#commentlist dl dd {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

#commentlist cite {
    font-style: normal;
    font-weight: 600;
    font-size: 13.5px;
}

#commentlist cite a {
    color: var(--c-text);
}

#commentlist small {
    margin-left: var(--sp-2);
    font-size: 12px;
    color: var(--c-text-faint);
}

/* 回复按钮：插件用 JS 控制 display，此处只定样式 */
#commentlist small a.reply {
    display: none;
    margin-left: var(--sp-2);
    color: var(--c-accent);
}

#commentlist dd p {
    margin: var(--sp-2) 0 0;
    font-size: 14px;
    line-height: 1.75;
    color: var(--c-text);
    word-break: break-word;
}

/* 嵌套回复：缩进并加左侧引导线 */
#commentlist dl dd dl {
    margin-top: var(--sp-3);
    padding: var(--sp-3) 0 0 var(--sp-3);
    border-top: 1px solid var(--c-line);
    border-bottom: none;
    border-left: 2px solid var(--c-line);
}

/* 发表评论 */
#postcomment {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-line);
}

#postcomment h3 {
    margin: 0 0 var(--sp-3);
    font-size: 15px;
    font-weight: 600;
}

#postcomment h3 a {
    display: none;
}

#postcomment textarea.form-control {
    min-height: 96px;
    font-size: 14px;
    line-height: 1.7;
    resize: vertical;
}

#postcomment .checkbox label {
    font-size: 12.5px;
    color: var(--c-text-soft);
}

#actiontips {
    margin-left: var(--sp-3);
    font-size: 13px;
}

@media (max-width: 767px) {
    #commentlist dl {
        padding: var(--sp-3) 0;
    }

    #commentlist dl dt img {
        width: 32px;
        height: 32px;
    }

    #commentlist dd p {
        font-size: 13.5px;
    }
}

/* ===================================================================
   26. 栏目顶部通栏图
   ------------------------------------------------------------------
   取代原 list-header 中的纯文字页头。图片来自栏目自身设置，
   未设置时回退到站点配置 channelbanner，均无则不输出本区块。
   全部走设计令牌，深色主题自动适配。
   =================================================================== */

.channel-banner {
    position: relative;
    /* 抵消 .skin-white 的 padding-top 中多出的呼吸间距，使横幅紧贴导航栏
       （与首页轮播同理：导航栏实际 50px，padding 为 80px） */
    margin-top: -30px;
    margin-bottom: var(--sp-5);
    background-color: #14141a;
    overflow: hidden;
}

.channel-banner .banner-media {
    height: 22vw;
    min-height: 180px;
    max-height: 320px;
}

.channel-banner .banner-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 文字层：底部渐变保证任意图片上都可读 */
.channel-banner .banner-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: var(--sp-6) 0 var(--sp-4);
    background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .45) 60%, transparent 100%);
}

.channel-banner .breadcrumb {
    margin-bottom: var(--sp-2);
    padding: 0;
    background: none;
    font-size: 12px;
}

.channel-banner .breadcrumb,
.channel-banner .breadcrumb a {
    color: rgba(255, 255, 255, .75);
}

.channel-banner .breadcrumb > li + li::before {
    color: rgba(255, 255, 255, .45);
}

@media (hover: hover) and (pointer: fine) {
    .channel-banner .breadcrumb a:hover {
        color: #fff;
    }
}

.channel-banner .banner-title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.channel-banner .banner-desc {
    margin: var(--sp-2) 0 0;
    max-width: 46em;
    font-size: 13.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .82);
    /* 最多两行，长描述不挤占横幅 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 991px) {
    .channel-banner .banner-title {
        font-size: 22px;
    }
}

@media (max-width: 767px) {
    .channel-banner {
        margin-top: -20px;   /* 移动端 .skin-white padding 为 70px */
        margin-bottom: var(--sp-4);
    }

    .channel-banner .banner-media {
        height: 34vw;
        min-height: 120px;
        max-height: 180px;
    }

    .channel-banner .banner-overlay {
        padding: var(--sp-5) 0 var(--sp-3);
    }

    .channel-banner .banner-title {
        font-size: 17px;
    }

    /* 移动端隐藏描述，避免占满横幅 */
    .channel-banner .banner-desc {
        display: none;
    }
}

/* ===================================================================
   27. 栏目横幅：文字排版重构 + 入场动画（方案 A：克制）
   ------------------------------------------------------------------
   本节位于第 26 节之后，故在同特异性下胜出，用于替代其排版声明。
   26 节的移动端媒体查询在本节之前，因此本节必须自带全断点覆盖，
   否则基础规则会反向覆盖掉那些移动端设置。

   动画说明：
     - 交错淡入上浮，480ms，竖线→标题→描述→面包屑 各差 80ms
     - 纯 CSS animation + animation-delay，无 JS，每次进入页面均播放
     - 用户开启「减少动态效果」时降级为 140ms 纯淡入（见文末例外规则）
   =================================================================== */

@keyframes bannerRise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bannerRuleGrow {
    from {
        opacity: 0;
        transform: scaleY(0);
    }
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

/* 背景图极缓放大（Ken Burns），营造纵深而不抢注意力 */
@keyframes bannerKenBurns {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.06);
    }
}

.channel-banner .banner-media img {
    /* 8s 单次缓动放大，结束后停在终态 */
    animation: bannerKenBurns 8s var(--ease) both;
}

/* 文字区：竖线 + 文本块 */
.channel-banner .banner-inner {
    display: flex;
    align-items: stretch;
    gap: var(--sp-4);
}

.channel-banner .banner-rule {
    flex: 0 0 auto;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(to bottom, var(--c-accent), rgba(255, 255, 255, .35));
    transform-origin: bottom center;
    animation: bannerRuleGrow .48s var(--ease) both;
    transition: width .3s var(--ease);
}

.channel-banner .banner-text {
    flex: 1 1 auto;
    min-width: 0;
}

/* 标题：字号与字重同时加大，深色背景上更有力量 */
.channel-banner .banner-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .45);
    animation: bannerRise .48s var(--ease) both;
    animation-delay: .08s;
}

/* 内容数徽章 */
.channel-banner .banner-count {
    flex: 0 0 auto;
    padding: 2px var(--sp-2);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0;
    color: #fff;
    background-color: rgba(255, 255, 255, .16);
    border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
    text-shadow: none;
}

.channel-banner .banner-desc {
    margin: var(--sp-3) 0 0;
    /* 收窄至 42em，长句更易读 */
    max-width: 42em;
    font-size: 14px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .85);
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    animation: bannerRise .48s var(--ease) both;
    animation-delay: .16s;
}

/* 面包屑移到标题下方，作为次要信息 */
.channel-banner .breadcrumb {
    margin: var(--sp-3) 0 0;
    padding: 0;
    background: none;
    font-size: 12px;
    animation: bannerRise .48s var(--ease) both;
    animation-delay: .24s;
}

@media (hover: hover) and (pointer: fine) {
    /* 悬停：竖线加宽，作为唯一的悬停反馈 */
    .channel-banner:hover .banner-rule {
        width: 6px;
    }
}

/* ---------- 平板 ---------- */
@media (max-width: 991px) {
    .channel-banner .banner-title {
        font-size: 26px;
    }
}

/* ---------- 移动端（须重申，否则被上方基础规则覆盖） ---------- */
@media (max-width: 767px) {
    .channel-banner .banner-inner {
        gap: var(--sp-3);
    }

    .channel-banner .banner-rule {
        width: 3px;
    }

    .channel-banner .banner-title {
        font-size: 20px;
        gap: var(--sp-2);
    }

    .channel-banner .banner-count {
        font-size: 11px;
    }

    /* 移动端隐藏描述，避免占满横幅 */
    .channel-banner .banner-desc {
        display: none;
    }

    .channel-banner .breadcrumb {
        margin-top: var(--sp-2);
    }

    /* 移动端取消背景缓放：省电，且小屏上位移几乎不可察 */
    .channel-banner .banner-media img {
        animation: none;
    }
}

/* ---------- 减少动态效果：降级而非取消 ----------
   文件前部的通配规则会把 animation-duration 压成 .01ms（等于无动画）。
   此处保留可感知的淡入但去掉位移与背景缩放 —— 既不引发前庭不适，
   也不至于让横幅显得死板。需 !important 以对抗通配规则。 */
@media (prefers-reduced-motion: reduce) {
    .channel-banner .banner-rule,
    .channel-banner .banner-title,
    .channel-banner .banner-desc,
    .channel-banner .breadcrumb {
        animation-name: bannerFadeOnly !important;
        animation-duration: var(--dur-thumb-reduced) !important;
        animation-delay: 0s !important;
    }

    /* 背景缓放对动效敏感者影响最大，直接取消 */
    .channel-banner .banner-media img {
        animation: none !important;
    }
}

@keyframes bannerFadeOnly {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ===================================================================
   28. 修复鼠标点击后出现虚线焦点框
   ------------------------------------------------------------------
   根因：Bootstrap 3 早于 :focus-visible 标准，对所有 focus 都画轮廓：
     a:focus                        { outline: thin dotted }
     .btn:focus, .btn:active:focus  { outline: thin dotted }
     input[type=file/radio/checkbox]:focus { outline: thin dotted }
   鼠标点击会使元素获得 focus，于是虚线框出现并滞留到点击别处。

   做法：清掉 :focus 的轮廓，改由 :focus-visible 承担 —— 后者仅在键盘
   操作时匹配，鼠标点击不会触发，既去掉观感问题又保留无障碍能力。

   注意顺序：本节位于第 8 节（:focus-visible 轮廓）之后，若只写重置会
   把键盘轮廓一并清掉，故此处必须重新声明一次 :focus-visible。
   =================================================================== */

a:focus,
button:focus,
.btn:focus,
.btn:active:focus,
.btn.active:focus,
.navbar-toggle:focus,
.dropdown-toggle:focus,
.carousel-control:focus,
[role="button"]:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
select:focus,
summary:focus {
    outline: 0;
    outline-offset: 0;
}

/* Firefox 的按钮内部虚线边框 */
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* 重新声明键盘焦点轮廓：仅键盘导航可见，鼠标点击不触发 */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.navbar-toggle:focus-visible,
.dropdown-toggle:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--c-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* 输入框已有 border/box-shadow 表达聚焦态，无需再加轮廓 */
.form-control:focus,
.form-control:focus-visible {
    outline: 0;
}

/* ===================================================================
   29. 列表页分类切换
   ------------------------------------------------------------------
   位于 list-toolbar 上方，展示当前栏目所属分类组。
   沿用首页 Hero 的胶囊语汇，保持整站一致。
   =================================================================== */

.cate-switch {
    margin-bottom: var(--sp-4);
}

.cate-switch > ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: 0;
}

.cate-switch a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px var(--sp-4);
    font-size: 13.5px;
    color: var(--c-text-soft);
    background-color: var(--c-bg-soft);
    border-radius: var(--radius-lg);
    white-space: nowrap;
    transition: background-color .2s var(--ease), color .2s var(--ease);
}

/* 数量角标：弱化，不与分类名争夺注意力 */
.cate-switch .cate-num {
    font-size: 11px;
    opacity: .6;
    font-variant-numeric: tabular-nums;
}

.cate-switch a.is-active {
    color: #fff;
    background-color: var(--c-accent);
    font-weight: 500;
}

.cate-switch a.is-active .cate-num {
    opacity: .8;
}

@media (hover: hover) and (pointer: fine) {
    .cate-switch a:not(.is-active):hover {
        color: var(--c-accent);
        background-color: var(--c-accent-soft);
        text-decoration: none;
    }
}

@media (hover: none) {
    .cate-switch a:active {
        color: var(--c-accent);
        background-color: var(--c-accent-soft);
    }
}

@media (max-width: 767px) {
    .cate-switch {
        margin-bottom: var(--sp-3);
    }

    /* 横向滚动并贴边，避免多分类换行堆高挤走列表 */
    .cate-switch > ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin: 0 calc(var(--sp-3) * -1);
        padding: 0 var(--sp-3);
    }

    .cate-switch > ul::-webkit-scrollbar {
        display: none;
    }

    .cate-switch a {
        padding: 5px var(--sp-3);
        font-size: 12.5px;
    }
}

/* ===================================================================
   30. 工具条重构：分类 / 排序 / 筛选 视觉分层
   ------------------------------------------------------------------
   原先三者视觉语言撞车，尤其分类切换与排序的选中态完全相同
   （都是「强调色实底 + 白字」），但功能截然不同：
     - 分类切换 -> 跳转到别的页面
     - 排序     -> 只改变当前页排序
   用户无法从外观判断哪个会离开当前页，这是体验差的主因。

   现按层级分配三种不同形态：
     分类 = 胶囊 + 强调色实底（导航，权重最强，见第 29 节）
     排序 = 分段控件（同一灰底框内切换，形态上即表达"就地切换"）
     筛选 = 纯文字 + 下划线（权重最弱）

   另：toolbar-title 与横幅 h1 内容重复（如「女主播」+「全部人物」），
   但不可直接删除 —— 卡片标题是 h3，删掉 h2 会退回 h1->h3 层级跳跃。
   故保留于 DOM 供搜索引擎与屏幕阅读器读取，仅视觉隐藏。

   特异性说明：既有规则中 .list-order a.active 为 (0,3,0)、
   .toolbar-title 为 (0,2,0)，本节选择器均达到或超过该量级方能生效。
   =================================================================== */

/* ---------- 标题：视觉隐藏但保留于 DOM ---------- */
.list-toolbar .toolbar-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- 工具条：排序与筛选并排，四行压到两行 ---------- */
.list-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3) var(--sp-5);
}

/* ---------- 排序：分段控件 ---------- */
.list-toolbar .list-order {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 2px;
    margin: 0;
    padding: 2px;
    background-color: var(--c-bg-soft);
    border-radius: var(--radius);
}

.list-toolbar .list-order > li {
    padding: 0;
    display: block;
}

.list-toolbar .list-order a {
    display: block;
    padding: 5px var(--sp-3);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--c-text-soft);
    background-color: transparent;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: background-color .18s var(--ease), color .18s var(--ease);
}

/* 选中项：控件内的实心块，与分类胶囊的圆角形态区分 */
.list-toolbar .list-order a.active {
    color: #fff;
    background-color: var(--c-accent);
    font-weight: 500;
}

/* ---------- 筛选：纯文字，权重最弱 ---------- */
.list-toolbar .list-filter {
    flex: 1 1 auto;
    min-width: 0;
}

.list-filter .filter-group {
    margin-top: 0;
}

.list-filter .filter-items a {
    padding: 2px 0;
    background-color: transparent;
    border-radius: 0;
}

.list-filter .filter-items > li {
    padding: 0 var(--sp-3) 0 0;
}

/* 选中项：仅变色 + 下划线，不加底色 */
.list-filter .filter-items a.active {
    color: var(--c-accent);
    background-color: transparent;
    font-weight: 500;
    border-bottom: 2px solid var(--c-accent);
}

@media (hover: hover) and (pointer: fine) {
    .list-toolbar .list-order a:not(.active):hover {
        color: var(--c-text);
        background-color: rgba(0, 0, 0, .05);
    }

    .list-filter .filter-items a:not(.active):hover {
        color: var(--c-accent);
        background-color: transparent;
    }
}

/* ---------- 移动端：上下堆叠，各自横向滚动 ---------- */
@media (max-width: 767px) {
    .list-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-3);
    }

    .list-toolbar .list-order {
        /* 分段控件按内容宽度居左，不撑满 */
        align-self: flex-start;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .list-toolbar .list-order::-webkit-scrollbar {
        display: none;
    }

    .list-toolbar .list-order > li {
        display: block;
    }

    .list-toolbar .list-order a {
        padding: 5px var(--sp-2);
        font-size: 12px;
    }
}

/* ===================================================================
   31. 筛选区：标签列对齐的堆叠块（可容纳任意组数）
   ------------------------------------------------------------------
   第 30 节把排序与筛选并排，那是按「筛选只有一组」设计的。但筛选组数
   由后台的可筛选字段决定：人物模型已配置 4 个（所在地/角色/职业/爱好），
   数据填齐后即 4 组。并排布局下右侧被撑成 4 行、左侧排序仅 1 行，
   整块高度失衡，组数再增更糟。

   现改为：排序独占一行，筛选自成一块，每组一行（固定标签列 + 流式选项）。
   组数增加只是向下延伸，不会失衡。超过 3 组时第 4 组起默认折叠，
   由 theme-enhance.js 插入「更多筛选」按钮（常规情况零点击）。

   本节位于第 30 节之后，同特异性下胜出。
   =================================================================== */

/* 工具条改为纵向：排序一行，筛选另起一块 */
.list-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
}

/* 排序控件按内容宽度居左，不再与筛选争夺横向空间 */
.list-toolbar .list-order {
    align-self: flex-start;
}

/* ---------- 筛选块 ---------- */
.list-toolbar .list-filter {
    flex: none;
    width: 100%;
    padding-top: var(--sp-3);
    border-top: 1px solid var(--c-line);
}

/* 每组一行：标签列固定宽度，选项流式排列并与标签基线对齐 */
.list-filter .filter-group {
    display: grid;
    grid-template-columns: 68px 1fr;
    gap: var(--sp-2);
    align-items: baseline;
    margin: 0;
    padding: 3px 0;
}

.list-filter .filter-label {
    margin: 0;
    font-size: 12.5px;
    color: var(--c-text-faint);
    white-space: nowrap;
}

.list-filter .filter-items {
    display: flex;
    flex-wrap: wrap;
    gap: 2px var(--sp-3);
    margin: 0;
    min-width: 0;
}

.list-filter .filter-items > li {
    padding: 0;
    display: block;
}

.list-filter .filter-items a {
    display: inline-block;
    padding: 2px 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--c-text-soft);
    background-color: transparent;
    border-radius: 0;
    white-space: nowrap;
}

.list-filter .filter-items a.active {
    color: var(--c-accent);
    background-color: transparent;
    font-weight: 500;
    border-bottom: 2px solid var(--c-accent);
}

/* ---------- 超过 3 组时折叠 ----------
   button 由 JS 追加为 .list-filter 的末位子元素，
   故 :nth-child(n+4) 仍准确对应第 4 组起的筛选组。 */
.list-filter .filter-group:nth-child(n+4) {
    display: none;
}

.list-filter.is-expanded .filter-group:nth-child(n+4) {
    display: grid;
}

.filter-more {
    margin-top: var(--sp-2);
    padding: 3px 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--c-accent);
    background: none;
    border: none;
    cursor: pointer;
}

.filter-more .fa {
    margin-left: 4px;
    transition: transform .2s var(--ease);
}

.list-filter.is-expanded .filter-more .fa {
    transform: rotate(180deg);
}

@media (hover: hover) and (pointer: fine) {
    .list-filter .filter-items a:not(.active):hover {
        color: var(--c-accent);
        background-color: transparent;
    }

    .filter-more:hover {
        text-decoration: underline;
    }
}

@media (max-width: 767px) {
    /* 移动端标签列收窄；选项换行而非横向滚动，
       因为筛选是「看全所有维度」的场景，藏起来反而难用 */
    .list-filter .filter-group {
        grid-template-columns: 56px 1fr;
        gap: var(--sp-1) var(--sp-2);
    }

    .list-filter .filter-label {
        font-size: 12px;
    }

    .list-filter .filter-items {
        gap: 2px var(--sp-3);
    }

    .list-filter .filter-items a {
        font-size: 12.5px;
    }
}

/* ===================================================================
   32. 文章频道封面：焦点区
   ------------------------------------------------------------------
   左侧一张大图 + 右侧四张小图，共 5 篇焦点内容。
   不复用 common.css 的 .focus-img / .channel-list —— 后者对
   .col-xs-12 设了 min-height:315px 且样式基于 h3，与新结构冲突。
   =================================================================== */

.focus-hero {
    display: flex;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

/* ---------- 主图 ---------- */
.focus-hero .focus-main {
    position: relative;
    flex: 1 1 58%;
    min-width: 0;
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    background-color: var(--c-bg-soft);
}

.focus-hero .focus-main img {
    width: 100%;
    height: 100%;
    /* 16:9 裁切，避免不同尺寸原图导致左右两栏高度参差 */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-thumb) var(--ease-thumb);
}

.focus-hero .focus-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: var(--sp-5) var(--sp-4) var(--sp-4);
}

.focus-hero .focus-caption h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.focus-hero .focus-caption p {
    margin: var(--sp-2) 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .82);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- 右侧小图 ---------- */
.focus-hero .focus-side {
    flex: 1 1 42%;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
}

.focus-hero .focus-item {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--radius);
    background-color: var(--c-bg-soft);
}

.focus-hero .focus-item img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-thumb) var(--ease-thumb);
}

.focus-hero .focus-name {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: var(--sp-4) var(--sp-3) var(--sp-2);
    font-size: 13px;
    line-height: 1.45;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 渐变遮罩，保证任意图片上文字都可读 */
.focus-hero .focus-mask {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .32) 46%, transparent 100%);
}

@media (hover: hover) and (pointer: fine) {
    .focus-hero .focus-main:hover img,
    .focus-hero .focus-item:hover img {
        transform: scale(1.05);
    }
}

/* 板块头的内容数徽章 */
.block-head .block-count {
    flex: 0 0 auto;
    padding: 1px 7px;
    font-size: 11px;
    line-height: 1.7;
    color: var(--c-text-soft);
    background-color: var(--c-bg-soft);
    border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
}

/* ---------- 平板 ---------- */
@media (max-width: 991px) {
    .focus-hero .focus-caption h2 {
        font-size: 17px;
    }

    .focus-hero .focus-caption p {
        display: none;
    }
}

/* ---------- 移动端：改为上下堆叠 ---------- */
@media (max-width: 767px) {
    .focus-hero {
        flex-direction: column;
        gap: var(--sp-2);
        margin-bottom: var(--sp-4);
    }

    .focus-hero .focus-main,
    .focus-hero .focus-side {
        flex: none;
        width: 100%;
    }

    .focus-hero .focus-side {
        gap: var(--sp-2);
    }

    .focus-hero .focus-caption {
        padding: var(--sp-4) var(--sp-3) var(--sp-3);
    }

    .focus-hero .focus-caption h2 {
        font-size: 15px;
    }

    .focus-hero .focus-name {
        font-size: 12px;
        padding: var(--sp-3) var(--sp-2) 6px;
    }
}

/* ===================================================================
   33. 侧栏推荐板块（人物/视频/文章共用）
   ------------------------------------------------------------------
   详情页右侧栏的推荐区块，替换原先硬编码文章模型的「热门资讯」。
   三个模型共用一套外框（panel + 标题 + 列表），差异仅在条目内部形态。
   区块顺序由当前内容模型决定（见 application/common.php），此处只负责样式。
   全部走设计令牌，深色主题自动适配（theme-dark.css 再补必要覆盖）。
   =================================================================== */

.sidebar-recommend .panel-body {
    padding: var(--sp-2) var(--sp-3) var(--sp-3);
}

.sr-list {
    margin: 0;
}

.sr-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--c-line);
}

.sr-item:last-child {
    border-bottom: none;
}

/* 标题：三种形态共用，默认单行截断 */
.sr-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--c-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
    .sr-title:hover {
        color: var(--c-accent);
        text-decoration: none;
    }
}

/* ---------- 视频：16:9 缩略图 + 右下时长角标 ---------- */
.sr-video .sr-thumb {
    position: relative;
    flex: 0 0 96px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background-color: var(--c-bg-soft);
}

.sr-video .sr-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sr-video .sr-duration {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 1.6;
    color: #fff;
    background-color: rgba(0, 0, 0, .78);
    border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
}

/* 视频标题：两行，与缩略图等高区域更饱满 */
.sr-video .sr-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- 人物：圆形头像 + 昵称 + 城市/角色 ---------- */
.sr-person .sr-avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--c-bg-soft);
}

.sr-person .sr-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sr-person .sr-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.sr-person .sr-sub {
    font-size: 12px;
    line-height: 1.5;
    color: var(--c-text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- 文章：排名序号 + 标题 ---------- */
.sr-article .sr-num {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    font-size: 11px;
    line-height: 20px;
    text-align: center;
    color: var(--c-text-faint);
    background-color: var(--c-bg-soft);
    border-radius: var(--radius-sm);
    font-variant-numeric: tabular-nums;
}

/* 前三名高亮 */
.sr-article .sr-num.is-top {
    color: #fff;
    background-color: var(--c-accent);
}

/* 移动端：缩略图略收窄 */
@media (max-width: 767px) {
    .sr-video .sr-thumb {
        flex-basis: 84px;
    }
}

/* ===================================================================
   34. 移动端全局左右留白
   ------------------------------------------------------------------
   common.css 在 <=768px 时把 .main-content > .container 的内边距清为 0
   并 overflow-x:hidden，使正文贴边（原插件移动端为满宽卡片）。深色影院
   主题需要留白呼吸，故在此恢复统一的移动端侧边距（16px）。
   断点用 768px 以完全覆盖 common.css 的清零范围（含 768px 整）。
   =================================================================== */

@media (max-width: 768px) {
    .main-content > .container {
        padding-left: var(--sp-4);
        padding-right: var(--sp-4);
    }
}

/* ===================================================================
   35. 关于作者卡片（authorinfo.html）
   ------------------------------------------------------------------
   common.css 用硬编码白底/白环/灰字，深色主题下整卡仍为白色、与暗色
   面板割裂。改用语义令牌（--c-*，深色下自动重映射）并做排版微调：
   卡片透明继承面板底色、头像外环贴合表面色、正文与统计间加分隔线。
   =================================================================== */

.about-author .author-card {
    background: transparent;
    border-radius: var(--radius);
    padding-bottom: var(--sp-4);
}

/* 顶部横幅：铺满、只切上缘圆角 */
.about-author .author-head {
    height: 100px;
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    background-position: center;
    background-size: cover;
}

/* 头像：上移压住横幅下缘，外环贴合卡片表面色 */
.about-author .author-avatar {
    margin-top: -40px;
}

.about-author .author-avatar > a {
    margin: 0;
    padding: 0;
    background-color: transparent;
    border-radius: 50%;
}

.about-author .author-avatar > a > img {
    height: 80px;
    width: 80px;
    border: 3px solid var(--c-bg-soft);
    border-radius: 50%;
}

/* 昵称 + 简介 */
.about-author .author-basic {
    margin: var(--sp-3) 0 0;
    padding: 0 var(--sp-4);
}

.about-author .author-basic .author-nickname {
    margin-bottom: var(--sp-1);
}

.about-author .author-basic .author-nickname > a {
    font-size: 17px;
    font-weight: 700;
    color: var(--c-text);
}

.about-author .author-basic .text-muted {
    color: var(--c-text-soft);
    font-size: 13px;
}

/* 统计：与正文分隔，标签弱化、数字突出 */
.about-author .author-statistics {
    margin: var(--sp-3) 0 0;
    padding: var(--sp-3) 0 0;
    border-top: 1px solid var(--c-line);
}

.about-author .author-statistics .statistics-text {
    color: var(--c-text-faint);
    font-size: 12px;
    margin-bottom: var(--sp-1);
}

.about-author .author-statistics .statistics-nums {
    font-size: 16px;
    font-weight: 600;
    color: var(--c-text);
}

.about-author .author-statistics .statistics-nums a {
    color: inherit;
}

@media (hover: hover) and (pointer: fine) {
    .about-author .author-nickname > a:hover,
    .about-author .author-statistics .statistics-nums a:hover {
        color: var(--c-accent);
        text-decoration: none;
    }
}

/* ===================================================================
   36. 底部推荐区（listfooter：通栏卡片货架 + 标签带）
   ------------------------------------------------------------------
   演进过程（两次都是同一个错的延伸，记下来免得再走一遍）：
     1. 原始：col-md-8 竖叠三个 panel + col-md-4 标签。推荐块复用的
        .sr-* 是按侧栏约 300px 设计的（缩略图 96px、头像 40px），塞进
        750px 后每行大半空白，竖向又叠出 1000px+。
     2. 改三等分列：每栏约 350px 回到 .sr-* 的设计宽度，尺寸对了，但
        「三栏等宽文字榜 + 分隔线」是门户时代的版式，且三类内容条数
        天然不等（视频 6 / 人物 8 / 文章 12），等宽列必然一栏满一栏空。

   现在改为**通栏货架**：三类内容各占一整行，按各自的天然形态排布——
     视频 = 16:9 大缩略图卡片网格（缩略图从 96px 放大到约 190px，
            与首页 .video-card 同一视觉语言）
     人物 = 圆形头像卡片网格（头像 40px -> 64px，居中）
     文章 = 无分隔线的多列文字网格
   收益：图像成为视觉主体（视频站的底部推荐本该如此）；横向空间不再
   空转；各货架高度由自身内容决定，不再被等宽列绑死；去掉全部分隔线，
   改用留白 + 悬停浮起分层（现代做法，线条是传统感的主要来源）。

   条目内部形态全部由 CSS 改写（flex row -> column 等），模板未动，
   故详情页侧栏的 .panel 形态不受影响（作用域一律限定 .lf-col）。
   =================================================================== */

/* 三个货架竖向排列，彼此靠留白分隔，不用线 */
.lf-cols {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

.lf-col {
    min-width: 0;
}

/* 货架标题：小字号 + 弱化色 + 字距，明确低于 h2（18px/700）一档。
   不加下边框——线条是传统感来源，分层交给留白。 */
.lf-col-title {
    margin: 0 0 var(--sp-4);
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--c-text-soft);
    letter-spacing: .04em;
    border: none;
}

.lf-col-body {
    padding: 0;
}

/* 条目间的分隔线全部去掉（.sr-item 在侧栏形态下带 border-bottom），
   货架形态改用 gap 留白。 */
.lf-col .sr-item {
    border-bottom: none;
    padding: 0;
}

/* ---------- 视频货架：16:9 大缩略图卡片 ----------
   固定列数 = 条目数，让卡片刚好铺满整行，不留空轨道。
   此前用 auto-fill + minmax：按容器宽度塞满列，与条目数无关——
   视频仅 2 条，宽屏下被摊成 6 列轨道，右侧空 4 格，货架看着像坏了。
   列数变化需与 listfooter.html 里 sidebar_recommend_blocks 的
   $rows 取数同步（视频 2 条 -> 2 列）。 */
.lf-col.sr-video .sr-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
}

/* 条目由「横向 flex 行」改为「纵向卡片」 */
.lf-col.sr-video .sr-item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    align-items: stretch;
}

/* 缩略图从固定 96px 放开为满宽，圆角加大到 --radius-lg（现代卡片观感） */
.lf-col.sr-video .sr-thumb {
    flex: 0 0 auto;
    width: 100%;
    border-radius: var(--radius-lg);
    /* 供缩放动画建立层叠上下文与合成层，同 .video-card 的做法 */
    transform: translateZ(0);
}

.lf-col.sr-video .sr-title {
    font-size: 13.5px;
    line-height: 1.45;
    font-weight: 500;
}

/* 悬停：沿用第 3 节 .video-card 的方案——只让图片做 transform，
   走合成器快路径，不用 filter（每帧重绘）。时长/曲线共用同一组令牌，
   保证与首页卡片手感一致。 */
.lf-col.sr-video .sr-thumb img {
    transition: transform var(--dur-thumb) var(--ease-thumb);
    will-change: transform;
    backface-visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
    .lf-col.sr-video .sr-item:hover .sr-thumb img {
        transform: scale(1.06);
    }
}

/* 时长角标：贴合放大后的卡片，半透明 + 模糊底（现代播放器观感） */
.lf-col.sr-video .sr-duration {
    right: var(--sp-2);
    bottom: var(--sp-2);
    padding: 1px 6px;
    font-size: 11.5px;
    background-color: rgba(0, 0, 0, .62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: var(--radius);
}

/* ---------- 人物货架：圆形头像卡片 ----------
   固定 8 列：与推荐取数（8 条）一致，头像墙恰好一整排，
   避免 auto-fill 在宽屏算出 9 列、末行空 1 格。 */
.lf-col.sr-person .sr-list {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--sp-4) var(--sp-3);
}

/* 横向 flex 行 -> 居中纵向卡片 */
.lf-col.sr-person .sr-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-2);
}

/* 头像 40px -> 64px：人物货架的视觉主体是脸 */
.lf-col.sr-person .sr-avatar {
    width: 64px;
    height: 64px;
    transform: translateZ(0);
}

.lf-col.sr-person .sr-avatar img {
    transition: transform var(--dur-thumb) var(--ease-thumb);
    will-change: transform;
    backface-visibility: hidden;
}

@media (hover: hover) and (pointer: fine) {
    .lf-col.sr-person .sr-item:hover .sr-avatar img {
        transform: scale(1.08);
    }
}

/* 昵称与城市/角色：居中排布，宽度受限故都截断 */
.lf-col.sr-person .sr-body {
    align-items: center;
    width: 100%;
}

.lf-col.sr-person .sr-title {
    width: 100%;
    font-size: 13px;
    font-weight: 500;
}

.lf-col.sr-person .sr-sub {
    width: 100%;
    font-size: 11.5px;
}

/* ---------- 文章货架：多列文字网格 ----------
   用 grid 而非 CSS columns：columns 的填充顺序是「先填满第一列再换列」，
   12 条 4 列时阅读顺序变成竖向蛇形；grid 按行填充，与榜单序号一致。 */
.lf-col.sr-article .sr-list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px var(--sp-5);
}

/* 条目做成可悬停的行：去掉描线，靠悬停底色反馈（现代列表做法）。
   不用负 margin 外扩悬停区——横向 gap 只有 sp-5，负 margin 会吃掉大半，
   相邻两列的悬停底色几乎贴在一起。 */
.lf-col.sr-article .sr-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2);
    border-radius: var(--radius);
    transition: background-color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .lf-col.sr-article .sr-item:hover {
        background-color: var(--c-bg-soft);
    }
}

/* 序号去掉方块底：红底白字方块是门户榜单的标志性元素。
   改为纯数字，前三名用强调色 + 加粗区分。 */
.lf-col.sr-article .sr-num {
    width: auto;
    /* 右对齐 + 等宽数字：1~12 混排时个位与十位不会把标题推得参差
       （.sr-num 已有 font-variant-numeric: tabular-nums） */
    min-width: 15px;
    height: auto;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
    text-align: right;
    color: var(--c-text-faint);
    background-color: transparent;
    border-radius: 0;
}

.lf-col.sr-article .sr-num.is-top {
    color: var(--c-accent);
    background-color: transparent;
    font-weight: 700;
}

.lf-col.sr-article .sr-title {
    font-size: 13.5px;
}

/* 栏标题去掉下边框后，h2 通栏线与栏签之间需要更明确的留白，
   否则两层标题仍会读成一层。只放大本区块的，不动首页其它板块。 */
.list-footer .block-head {
    margin-bottom: var(--sp-5);
}

/* ---------- 通栏标签带 ---------- */

.lf-tags {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-line);
}

/* .tags 在 common.css 里是 inline-block（为窄侧栏设计），通栏下需块级。
   跑马灯结构下它是「行的容器」：三行竖向排列，行内再横向滚动。 */
.list-footer .lf-tags .tags {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    align-items: stretch;
}

/* ---------- 行 ----------
   overflow:hidden 裁掉滚出视野的 chip；两端用 mask 做淡出（见下）。
   上下留 padding：chip 悬停会上浮 3px 并带光晕，overflow 会把它裁掉。 */
.list-footer .lf-tags .tag-row {
    position: relative;
    overflow: hidden;
    padding: 6px 0;
}

/* ---------- 轨道 ----------
   未启用跑马灯时（JS 未跑 / 已降级）保持 wrap，chip 全部可见、正常折行，
   与改动前的观感一致 —— 渐进增强，不依赖 JS 才能看到内容。 */
.list-footer .lf-tags .tag-track {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
    /* 供 JS 覆写：一份 chip 的滚动时长（由内容宽度 ÷ 速度算出） */
    --marquee-dur: 40s;
}

/* chip 改胶囊形：common.css 的 border-radius: 2px 是方角小标签（传统观感），
   胶囊 + 稍宽的横向内边距是现在通行的标签形态。 */
.list-footer .lf-tags .tags .tag {
    margin: 0;
    padding: 0 12px;
    border-radius: 999px;
    font-weight: 500;
    /* transform 与 box-shadow 分列：前者走合成器，后者虽会重绘但仅限
       当前悬停的单个 chip，范围可控。时长统一走 --dur-tag。 */
    transition: transform var(--dur-tag) var(--ease),
                box-shadow var(--dur-tag) var(--ease),
                background-color var(--dur-tag) var(--ease),
                color var(--dur-tag) var(--ease),
                opacity var(--dur-tag) var(--ease);
    /* 提前提升合成层，避免首次悬停才创建图层导致第一帧发涩 */
    will-change: transform;
}

.list-footer .lf-tags .tags .tag.tag-lg {
    padding: 0 14px;
}

/* ---------- 悬停：浮起 + 光晕 + 反色 ---------- */
@media (hover: hover) and (pointer: fine) {
    .list-footer .lf-tags .tags .tag:hover {
        transform: translateY(-3px);
        background-color: var(--c-accent);
        color: #fff;
        box-shadow: 0 6px 16px -4px var(--tag-glow);
    }

    /* 焦点态给同样的反馈：键盘用户不该只看到浏览器默认描边 */
    .list-footer .lf-tags .tags .tag:focus-visible {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px -4px var(--tag-glow);
    }

    /* 悬停某个 chip 时，同排其余 chip 轻微淡出，把注意力聚到当前项。
       用 :has() + 兄弟选择器实现，无需 JS；不支持 :has() 的浏览器
       只是没有这层效果，其余交互不受影响。 */
    .list-footer .lf-tags .tags:has(.tag:hover) .tag:not(:hover) {
        opacity: .45;
    }
}

/* 按下时回落并缩小，给出「点到了」的即时反馈（触屏同样生效） */
.list-footer .lf-tags .tags .tag:active {
    transform: translateY(-1px) scale(.96);
    box-shadow: none;
}

/* ---------- 跑马灯：逐行反向滚动 ----------
   ------------------------------------------------------------------
   .is-marquee 由 JS 在克隆完 chip 后添加；JS 不跑时轨道退化为静态标签云。

   无缝原理：JS 把每行 chip 复制成「两份等宽的半区」，轨道总宽 = 2×半区，
   动画平移 -50%（正好一个半区），终点画面与起点一致，回跳无感。
   百分比基于轨道自身宽度，故无需 JS 传像素值。

   方向用 nth-child 区分（奇数行 -50%→0 向右，偶数行 0→-50% 向左），
   不给行加 class，行数变化不必改 JS。 */
.list-footer .lf-tags .tag-track.is-marquee {
    flex-wrap: nowrap;
    /* 轨道要能超出行宽才有的可滚 */
    width: max-content;
    animation: tagMarqueeLeft var(--marquee-dur) linear infinite;
    /* 提前提层，避免起步首帧栅格化卡顿 */
    will-change: transform;
    /* 间距从 flex gap 改为 chip 自带的 margin-right：
       gap 只存在于「相邻」chip 之间，两个半区拼接处那一道 gap 不重复，
       于是 -50% 与「一个半区的视觉宽度」相差半个 gap，每圈会跳一下（4px）。
       改成每个 chip 自带右外边距后，半区宽度 = n×(chip+margin) 精确相等。 */
    gap: 0;
}

.list-footer .lf-tags .tag-track.is-marquee > .tag {
    margin-right: var(--sp-2);
}

.list-footer .lf-tags .tag-row:nth-child(odd) .tag-track.is-marquee {
    animation-name: tagMarqueeRight;
}

@keyframes tagMarqueeLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes tagMarqueeRight {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* 仅在滚入视口后才跑，避免页面底部的动画在不可见时空转耗 CPU。
   .is-running 由同一个 IntersectionObserver 开关。 */
.list-footer .lf-tags .tag-track.is-marquee {
    animation-play-state: paused;
}

.list-footer .lf-tags.is-running .tag-track.is-marquee {
    animation-play-state: running;
}

/* ---------- 悬停/聚焦暂停 ----------
   暂停整个标签带而非单行：鼠标停在某个 chip 上时，其它行继续滚会让人
   觉得「这一行卡住了」。整体静止才读得清。
   :focus-within 覆盖键盘 Tab 到 chip 的情况。 */
.list-footer .lf-tags.is-running .tags-marquee:hover .tag-track.is-marquee,
.list-footer .lf-tags.is-running .tags-marquee:focus-within .tag-track.is-marquee {
    animation-play-state: paused;
}

/* ---------- 两端淡出 ----------
   用 mask 而非叠渐变遮罩层：遮罩层需要与页面底色同色，深浅两套主题
   得各写一份；mask 直接让像素透明，与底色无关，两个主题通用。
   Safari 需 -webkit- 前缀。

   作用域限定 .tag-row.is-marquee（该类由 JS 与轨道一同添加）：
   淡出是「内容正在滚进滚出」的视觉交代，静态折行时不该有 —— 否则
   首尾 chip 会无故半透明，看着像渲染错误。JS 未跑或用户要求减少动效时
   这个类不存在，淡出自然消失，无需再去 reduced-motion 块里覆盖
   （那里位于本文件上方，同特异性下反而压不过这条）。 */
.list-footer .lf-tags .tag-row.is-marquee {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

/* ---------- 入场：滚动到视口时逐个错峰浮现 ----------
   ------------------------------------------------------------------
   两个 class 由 theme-enhance.js 打：
     .is-anim  = 「本次要播入场动画」，JS 在确认标签带位于首屏之外、
                 且用户未开启减少动态效果时才加
     .is-in    = 标签带进入视口，开始播
   隐藏态挂在 .is-anim 下而非默认态，这样 JS 未执行 / 不支持
   IntersectionObserver 时，chip 保持正常可见（渐进增强，不会白屏）。

   错峰用 --i（模板内联的序号）乘一个步长；上限 clamp 住，
   避免条数多时最后几个等太久。 */
.lf-tags.is-anim .tags .tag {
    opacity: 0;
    transform: translateY(12px) scale(.96);
}

.lf-tags.is-anim.is-in .tags .tag {
    opacity: 1;
    transform: none;
    transition: opacity 420ms var(--ease), transform 420ms var(--ease);
    /* 步长 26ms，最多累积到 620ms */
    transition-delay: min(calc(var(--i, 0) * 26ms), 620ms);
}

/* 平板（≤991px）：固定列数需在窄屏减列，否则 8 列人物墙/4 列文章过挤。
   视频 2 条维持 2 列（大图货架），人物 8->4 列（头像墙折两行），
   文章 4->2 列（文字列表加宽）。 */
@media (max-width: 991px) {
    .lf-col.sr-person .sr-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lf-col.sr-article .sr-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- 手机：单栏 + 截断 ----------
   单栏后 6+8+12 条会叠出约 1000px，用户要滑很久才到标签。条目已由服务端
   输出，此处纯 CSS 隐藏（无额外请求）：每栏留 4 条、标签留 15 个，
   总高压到约 450px。 */
@media (max-width: 767px) {
    .lf-cols {
        gap: var(--sp-5);
    }

    /* 视频：两列（约 165px/卡），保留 16:9 大图，不退回小缩略图 */
    .lf-col.sr-video .sr-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--sp-3);
    }

    /* 人物：三列（约 105px/卡），头像略收 */
    .lf-col.sr-person .sr-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lf-col.sr-person .sr-avatar {
        width: 56px;
        height: 56px;
    }

    /* 文章：单列 */
    .lf-col.sr-article .sr-list {
        grid-template-columns: minmax(0, 1fr);
    }

    /* 各货架截断，压缩总高：视频/人物留 4 条（各占一行整数倍），
       文章留 5 条，标签留 15 个。条目已由服务端输出，纯 CSS 隐藏。 */
    .lf-col.sr-video .sr-item:nth-child(n+5),
    .lf-col.sr-person .sr-item:nth-child(n+5),
    .lf-col.sr-article .sr-item:nth-child(n+6) {
        display: none;
    }

    /* 压到两行：整行隐藏而非按 chip 序号截断 —— 跑马灯会克隆 chip，序号已无意义 */
    .list-footer .lf-tags .tag-row:nth-child(n+3) {
        display: none;
    }

    .lf-tags {
        margin-top: var(--sp-4);
    }
}

/* ===================================================================
   38. 首页底部「推荐内容」编辑式版式（common/home_footer.html）
   ------------------------------------------------------------------
   与 listfooter 的通栏货架（第 36 节）不同，首页底部改成有主次、有节奏的
   编辑排版，避免与上方各板块「同一语法无限重复」的传统门户感：
     视频 = 主角，一张大卡（5/12 宽）+ 右侧小卡轨
     文章 = 右侧数字榜单（配在视频下方）
     人物 = 横向滑动的「模卡」（竖版人物卡）
   标签带复用第 36 节的 .list-footer .lf-tags 跑马灯，只去掉顶部分隔线。
   数据与侧栏/列表底部同源（sidebar_recommend_blocks），此节只管版式。
   =================================================================== */

/* 统领头：标题左，分类锚点右 */
.recommend-editorial .rec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.rec-anchors {
    display: flex;
    gap: var(--sp-3);
    flex-shrink: 0;
}

.rec-anchors a {
    font-size: 13px;
    font-weight: 500;
    color: var(--c-text-soft, #666);
    letter-spacing: .03em;
    transition: color 160ms ease;
}

.rec-anchors a:hover {
    color: var(--c-accent, #d9534f);
    text-decoration: none;
}

/* 主区：左视频（7/12） + 右文章榜单（5/12） */
.rec-main {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--sp-5);
    align-items: start;
}

/* 栏目标题（视频轨/榜单/人物共用的小标题） */
.rec-col-title {
    margin: 0 0 var(--sp-3);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--c-text-soft, #666);
    letter-spacing: .04em;
}

/* 视频主角容器：大卡 + 右侧小卡轨（并排，降低栏高，避免相邻栏下方空一大块） */
.rec-video {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
}

/* ---------- 视频主角 ---------- */
.rec-hero {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-lg, 10px);
    background-color: var(--c-bg-soft, #1a1a1a);
}

.rec-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-thumb, 300ms) var(--ease-thumb, ease);
}

.rec-hero-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .72));
    pointer-events: none;
}

.rec-hero-title {
    position: absolute;
    left: var(--sp-4);
    right: var(--sp-4);
    bottom: var(--sp-4);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

@media (hover: hover) and (pointer: fine) {
    .rec-hero:hover img {
        transform: scale(1.04);
    }
}

/* 大卡上的时长角标（复用 .sr-duration 的形状，重新定位到右上） */
.rec-hero .sr-duration {
    position: absolute;
    right: var(--sp-3);
    top: var(--sp-3);
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.6;
    color: #fff;
    background-color: rgba(0, 0, 0, .72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: var(--radius, 6px);
    font-variant-numeric: tabular-nums;
}

/* 视频小卡轨：纵向列表，每条「小图 + 标题」横排（与 .rec-hero 并排） */
.rec-video-rail {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-top: 0;
}

.rec-mini {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.rec-mini-thumb {
    position: relative;
    flex: 0 0 112px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius, 6px);
    background-color: var(--c-bg-soft, #1a1a1a);
}

.rec-mini-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-thumb, 300ms) var(--ease-thumb, ease);
}

@media (hover: hover) and (pointer: fine) {
    .rec-mini:hover .rec-mini-thumb img {
        transform: scale(1.06);
    }
}

.rec-mini-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--c-text, #333);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rec-mini:hover .rec-mini-title {
    color: var(--c-accent, #d9534f);
}

/* ---------- 文章榜单 ---------- */
.rec-rank {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rec-rank li {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-2);
    border-radius: var(--radius, 6px);
    transition: background-color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .rec-rank li:hover {
        background-color: var(--c-bg-soft, #f2f2f5);
    }
}

.rec-rank-num {
    flex: 0 0 auto;
    min-width: 16px;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    color: var(--c-text-faint, #999);
    font-variant-numeric: tabular-nums;
}

.rec-rank-num.is-top {
    color: var(--c-accent, #d9534f);
    font-weight: 700;
}

.rec-rank a {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--c-text, #333);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rec-rank a:hover {
    color: var(--c-accent, #d9534f);
    text-decoration: none;
}

/* ---------- 人物模卡：横向滑动 ---------- */
.rec-person {
    margin-top: var(--sp-6);
}

/* 人物轨头部：标题在左，左右箭头在右（PC 鼠标无法横向滚动时的显式入口） */
.rec-person-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}

.rec-person-head .rec-col-title {
    margin: 0;
}

.rec-person-arrows {
    display: flex;
    gap: var(--sp-2);
    flex-shrink: 0;
}

.rec-scroll-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--c-line, #e5e5e5);
    border-radius: 50%;
    background: transparent;
    color: var(--c-text-soft, #666);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: color var(--dur-fast, 160ms) ease, border-color var(--dur-fast, 160ms) ease,
        background-color var(--dur-fast, 160ms) ease;
}

.rec-scroll-btn:hover {
    color: var(--c-accent, #d9534f);
    border-color: var(--c-accent, #d9534f);
}

.rec-scroll-btn.swiper-button-disabled {
    opacity: .35;
    cursor: default;
}

.rec-scroll-btn.swiper-button-disabled:hover {
    color: var(--c-text-soft, #666);
    border-color: var(--c-line, #e5e5e5);
}

/* Swiper 容器：两端淡出遮罩（Swiper 用 transform 滚动，遮罩静态合成，不卡） */
.rec-person-swiper {
    overflow: hidden;
    padding: 4px 2px 12px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent);
}

/* slidesPerView: 'auto' 要求每张幻灯片有确定宽度，卡片宽即原 160px；
   height:auto 抵消 swiper 默认 .swiper-slide 的 height:100%，避免塌陷 */
.rec-person-swiper .swiper-slide {
    width: 160px;
    height: auto;
}

.rec-card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.rec-card-photo {
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--radius, 6px);
    background-color: var(--c-bg-soft, #1a1a1a);
}

.rec-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-thumb, 300ms) var(--ease-thumb, ease);
}

@media (hover: hover) and (pointer: fine) {
    .rec-card:hover .rec-card-photo img {
        transform: scale(1.05);
    }
}

.rec-card-name {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--c-text, #333);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rec-card:hover .rec-card-name {
    color: var(--c-accent, #d9534f);
}

.rec-card-sub {
    font-size: 12px;
    line-height: 1.4;
    color: var(--c-text-faint, #999);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- 标签带：去掉第 36 节的顶部分隔线 ----------
   .lf-tags 外层套了 .list-footer（见 home_footer.html），故此处用
   .list-footer .lf-tags 组合选择器覆盖第 36 节的 border-top / margin。 */
.recommend-editorial .list-footer .lf-tags {
    border-top: none;
    padding-top: 0;
    margin-top: var(--sp-6);
}

.recommend-editorial .list-footer .lf-tags .rec-col-title {
    margin-bottom: var(--sp-4);
}

/* ---------- 响应式 ---------- */
@media (max-width: 991px) {
    /* 主区折单列：视频 + 视频轨在上，文章榜单在下 */
    .rec-main {
        grid-template-columns: minmax(0, 1fr);
    }

    .rec-video {
        grid-template-columns: minmax(0, 1fr);
    }

    .rec-video-rail {
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: var(--sp-4);
    }

    .rec-mini {
        flex: 1 1 220px;
    }

    .rec-person-swiper .swiper-slide {
        width: 140px;
    }
}

@media (max-width: 767px) {
    .rec-main {
        gap: var(--sp-4);
    }

    .rec-mini-thumb {
        flex-basis: 96px;
    }

    .rec-person {
        margin-top: var(--sp-5);
    }

    .rec-person-swiper .swiper-slide {
        width: 124px;
    }

    .recommend-editorial .lf-tags {
        margin-top: var(--sp-5);
    }
}

/* ===================================================================
   39. 频道封面页底部「跨类型推荐」（三栏异构，轻量编辑式）
   ===================================================================
   与首页 38 节「重编辑版」同语言、更轻：频道页上方已有 banner/hero 与
   自己的内容，底部只做收尾的跨类型引流，故用三栏并置（视频 | 文章 | 人物），
   靠形状差异形成编辑节奏，而非再来一个大 hero。
   条目组件复用全局 .rec-hero / .rec-mini / .rec-rank / .rec-col-title /
   .sr-duration；此处只管三栏容器与人物栏形态。
   =================================================================== */

/* 统领头复用 .rec-head 的「标题左 / 锚点右」布局（首页 .rec-head 作用域
   是 .recommend-editorial，此处另挂 .channel-footer 作用域） */
.channel-footer .rec-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

/* 三栏：视频 5 / 文章 4 / 人物 3，栏间以细竖线分隔（杂志感） */
.cf-main {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
    align-items: start;
}

.cf-col {
    padding: 0 var(--sp-5);
}

.cf-col:first-child {
    padding-left: 0;
}

.cf-col:last-child {
    padding-right: 0;
}

.cf-col + .cf-col {
    border-left: 1px solid var(--c-line, #e5e5e5);
}

/* 视频栏内：大卡在上、小卡轨横排在下（与文章榜高度对齐） */
.cf-video .rec-hero {
    aspect-ratio: 16 / 9;
}

.cf-video .rec-video-rail {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: var(--sp-4);
}

/* 人物栏：竖向圆头像列表（窄栏放不下横滑模卡，圆头像列表更合适） */
.cf-person-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cf-person-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
}

.cf-person-avatar {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--c-bg-soft, #1a1a1a);
}

.cf-person-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cf-person-body {
    min-width: 0;
}

.cf-person-name {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--c-text, #333);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-person-name:hover {
    color: var(--c-accent, #d9534f);
}

.cf-person-sub {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--c-text-faint, #999);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 标签带：沿用第 36 节跑马灯，去掉顶部分隔线（同首页处理） */
.channel-footer .list-footer .lf-tags {
    border-top: none;
    padding-top: 0;
    margin-top: var(--sp-6);
}

/* ---------- 响应式 ---------- */
@media (max-width: 991px) {
    .cf-main {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--sp-5);
    }

    .cf-col {
        padding: 0;
    }

    .cf-col + .cf-col {
        border-left: none;
        border-top: 1px solid var(--c-line, #e5e5e5);
        padding-top: var(--sp-5);
    }
}

/* ---------- 全局链接悬停样式 ----------
   bootstrap-structure.css 的 a:hover / a:focus 默认加下划线，这里全局去掉，
   让卡片 / 导航等链接悬停只靠颜色变化（--c-accent）反馈，视觉更干净。
   键盘焦点可访问性不依赖下划线：a:focus-visible 仍有 2px outline。
   文章正文链接不受影响——暗色主题由 theme-dark.css 的 .article-text a
   （后加载）保留常驻下划线；浅色主题用 border-bottom，二者均非悬停装饰。 */
a:hover,
a:focus {
    text-decoration: none;
}

/* ===================================================================
   40. 会员中心（现代 APP 个人中心风格）
   ===================================================================
   去掉传统 FastAdmin 的左侧 sidenav + Bootstrap panel，改为单列 APP 布局：
   顶部用户卡（头像/昵称/简介 + 数据统计）+ cell 菜单列表 + 退出。
   全部基于设计令牌（--c-* / --sp-* / --radius），自动适配明暗主题，
   高亮统一为全站红色主色（--c-accent）。
   =================================================================== */

/* 单列容器：居中、限宽，营造 App 屏幕感 */
.user-center {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--sp-3) 0 var(--sp-4);
}

/* ---------- 顶部用户卡 ---------- */
.uc-hero {
    position: relative;
    overflow: hidden;
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-line);
    background:
        radial-gradient(120% 90% at 100% 0%, var(--c-accent-soft), transparent 60%),
        var(--c-bg-soft);
}

.uc-hero-top {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.uc-avatar {
    flex: 0 0 auto;
    display: block;
}

.uc-avatar img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--c-accent);
}

.uc-hero-main {
    flex: 1 1 auto;
    min-width: 0;
}

.uc-name {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-text);
}

.uc-bio {
    margin: var(--sp-1) 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--c-text-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.uc-edit {
    flex: 0 0 auto;
    padding: var(--sp-1) var(--sp-3);
    font-size: 13px;
    color: var(--c-text-soft);
    border: 1px solid var(--c-line);
    border-radius: 999px;
    transition: color var(--dur-fast, 160ms) ease, border-color var(--dur-fast, 160ms) ease;
}

.uc-edit:hover {
    color: var(--c-accent);
    border-color: var(--c-accent);
}

/* 数据统计 */
.uc-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-3);
    margin-top: var(--sp-5);
}

.uc-stat {
    text-align: center;
    padding: var(--sp-3) var(--sp-2);
    border-radius: var(--radius);
    background: var(--s-0, var(--c-bg-soft));
    transition: transform var(--dur-fast, 160ms) ease, background-color var(--dur-fast, 160ms) ease;
}

.uc-stat:hover {
    background: var(--c-accent-soft);
}

.uc-stat-num {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--c-accent);
}

.uc-stat-label {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--c-text-faint);
}

/* ---------- 菜单 ---------- */
.uc-menu {
    margin-top: var(--sp-5);
}

.uc-menu-title {
    margin: 0 0 var(--sp-2);
    padding: 0 var(--sp-1);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--c-text-faint);
}

.uc-menu-list {
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    background: var(--c-bg-soft);
    overflow: hidden;
    margin-bottom: var(--sp-5);
}

.uc-cell {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-4);
    color: var(--c-text);
    transition: background-color var(--dur-fast, 160ms) ease;
}

.uc-cell + .uc-cell {
    border-top: 1px solid var(--c-line);
}

.uc-cell:hover {
    background: var(--s-2, var(--c-bg-soft));
}

.uc-cell-icon {
    flex: 0 0 auto;
    width: 20px;
    text-align: center;
    font-size: 16px;
    color: var(--c-accent);
}

.uc-cell-label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
}

.uc-cell-value {
    flex: 0 0 auto;
    font-size: 13px;
    color: var(--c-text-faint);
}

.uc-cell-arrow {
    flex: 0 0 auto;
    font-size: 14px;
    color: var(--c-text-faint);
}

/* ---------- 退出 ---------- */
.uc-logout {
    text-align: center;
    margin-top: var(--sp-6);
}

.uc-logout-btn {
    display: inline-block;
    padding: var(--sp-3) 0;
    font-size: 15px;
    color: var(--c-accent);
    transition: color var(--dur-fast, 160ms) ease;
}

.uc-logout-btn:hover {
    color: var(--c-accent);
    text-decoration: none;
}

/* ---------- 响应式 ---------- */
@media (max-width: 767px) {
    .uc-hero {
        padding: var(--sp-5) var(--sp-4) var(--sp-4);
    }

    .uc-avatar img {
        width: 60px;
        height: 60px;
    }

    .uc-name {
        font-size: 18px;
    }
}

/* ---------- 会员中心子页面：页头 + 卡片 ---------- */
.uc-page-header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.uc-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid var(--c-line);
    border-radius: 50%;
    color: var(--c-text-soft);
    font-size: 16px;
    transition: color var(--dur-fast, 160ms) ease, border-color var(--dur-fast, 160ms) ease;
}

.uc-back:hover {
    color: var(--c-accent);
    border-color: var(--c-accent);
}

.uc-page-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--c-text);
}

.uc-page-extra {
    margin-left: auto;
    font-size: 13px;
    color: var(--c-text-faint);
}

.uc-page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: var(--sp-2);
    margin-left: auto;
}

/* 移动端：页头标题缩小、间距收紧，保证标题 + 操作按钮在一行 */
@media (max-width: 767px) {
    .uc-page-header {
        gap: var(--sp-2);
    }

    .uc-page-title {
        font-size: 17px;
        white-space: nowrap;
    }

    .uc-page-actions {
        gap: var(--sp-1);
    }
}

.uc-card {
    padding: var(--sp-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-line);
    background: var(--c-bg-soft);
}

/* 插件注入菜单（钩子输出的 .list-group）对齐 .uc-cell 卡片风格
   VIP中心 / 内容管理 / 每日签到 等菜单由各插件的 user_sidenav_after 钩子
   以 .list-group 输出，此处重涂成与 .uc-cell 一致的分组卡片。 */
.uc-menu .list-group {
    margin: 0 0 var(--sp-5);
    padding: 0;
    list-style: none;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    background: var(--c-bg-soft);
    overflow: hidden;
}

.uc-menu .list-group-heading {
    margin: 0;
    padding: var(--sp-3) var(--sp-4);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--c-text-faint);
    border-bottom: 1px solid var(--c-line);
}

.uc-menu .list-group-item {
    margin: 0;
    padding: 0;
    border: none;
    border-bottom: 1px solid var(--c-line);
    border-radius: 0;
    background: transparent;
}

.uc-menu .list-group-item:last-child {
    border-bottom: none;
}

.uc-menu .list-group-item > a {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-4);
    color: var(--c-text);
    transition: background-color var(--dur-fast, 160ms) ease;
}

.uc-menu .list-group-item > a:hover {
    background: var(--s-2, var(--c-bg-soft));
}

.uc-menu .list-group-item > a i {
    width: 20px;
    text-align: center;
    color: var(--c-accent);
}

/* ---------- 附件页（数据表）在会员中心内呈现为卡片 ---------- */
.user-center .panel-intro {
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--c-bg-soft);
}

.user-center .panel-intro .panel-heading {
    background: transparent;
    border-color: var(--c-line);
    padding: 0 var(--sp-4);
}

.user-center .panel-intro .panel-body {
    padding: var(--sp-4);
}

.user-center .panel-intro .toolbar {
    margin-bottom: var(--sp-3);
}

/* bootstrap-table 容器去浅色边框（.fixed-table-container 特异性 0,2,0 胜过后加载的插件 CSS） */
.user-center .fixed-table-container {
    border-color: var(--c-line);
}

/* 附件页是数据表，需比表单页更宽，去掉 720px 限宽 */
.user-center.uc-wide {
    max-width: none;
}

/* ---------- bootstrap-table 卡片视图（iOS/移动端） ----------
   cardView 开启时每个字段渲染为 .card-view（.title 标签 + .value 值），
   默认只有 .title 是 inline-block，值紧跟其后且各行无间距，显得挤在一起。
   此处改成「标签 + 值」的纵向行，行间加分隔线。 */
.card-views .card-view {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--c-line);
}

.card-views .card-view:last-child {
    border-bottom: none;
}

.card-views .card-view .title {
    flex: 0 0 auto !important;
    min-width: 90px !important;
    font-weight: 600 !important;
    color: var(--c-text-faint) !important;
    text-align: left !important;
}

.card-views .card-view .value {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--c-text);
    text-align: left;
}

/* ---------- bootstrap-table 固定列 + 表格外边框 深色适配 ----------
   fixed-columns 插件给「操作」固定列写死 background:#fff、粘性表头白底、
   .table-bordered 外边框 #ddd，深色主题下呈白色块/白边，此处重涂。 */
.fixed-columns,
.fixed-columns-right {
    background-color: var(--c-bg-soft) !important;
    box-shadow: -1px 0 8px rgba(0, 0, 0, .35);
}

.fix-sticky thead {
    background: var(--c-bg-soft) !important;
}

.fix-sticky thead th,
.fix-sticky thead th:first-child {
    border-bottom: 1px solid var(--c-line) !important;
}

.table-bordered {
    border-color: var(--c-line) !important;
}

/* 抽屉遮罩（index 布局无 common.css，此处补定位；配色见 theme-dark.css） */
.navbar .navbar-collapse-bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .55);
    animation: navbarBackdropFade .3s ease both;
}

/* 会员中心：sidenav 抽屉（sidebar-toggle）仅在移动端显示，桌面端隐藏（APP 单列布局） */
@media (min-width: 992px) {
    .uc-sidenav {
        display: none;
    }
}

/* 顶栏汉堡：复用 .sidebar-toggle 触发 sidenav 抽屉，但保持 navbar-toggle 的外形与定位
   （user.css 把 .sidebar-toggle 写成了右下角浮动圆钮，这里针对顶栏汉堡重置） */
.navbar-toggle.sidebar-toggle {
    position: relative;
    right: auto;
    bottom: auto;
    border-radius: 4px;
    background: transparent;
    font-size: inherit;
    padding: 9px 10px;
    line-height: normal;
    height: auto;
    width: auto;
    text-align: center;
    z-index: auto;
    margin-top: 9px;
    margin-bottom: 9px;
}