/* ==========================================================================
   Atlas 模板 · page（页面层：首页 / 列表 / 筛选 / 详情 / 播放 / 资讯 / 认证 / 错误）
   --------------------------------------------------------------------------
   命名：yun- 前缀 = 页面版式。改版式只动本文件，结构组件都在 cl-base.css。
   密度约定：板块间距 14px、卡间隙 6–8px、区块内 padding 12–16px。
   ⚠️ 每个页面都是**单栏主内容**（需求硬约束）：不出现左侧菜单栏、
      也不把内容平均切成左中右三栏。多列只用于「卡片网格 / 榜单块」这类子网格。
   ========================================================================== */

/* ==========================================================================
   A. 首页
   ========================================================================== */

/* A1. 速报条：最新收录的一行文本链接（可索引文本，且不占高度） */
.yun-ticker {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px var(--cl-pad);
    background: var(--cl-surface);
    border: 1px solid var(--cl-line);
    border-left: 3px solid var(--cl-accent);
    border-radius: var(--cl-r-md);
    font-size: var(--cl-fs-sm);
}
.yun-ticker__label {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    height: 20px;
    padding: 0 7px;
    border-radius: var(--cl-r-sm);
    background: var(--cl-accent-s);
    color: var(--cl-accent-d);
    font-size: var(--cl-fs-xs);
    font-weight: 600;
}
.yun-ticker__list {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 8px;
    color: var(--cl-ink-2);
}
.yun-ticker__list a { white-space: nowrap; }
.yun-ticker__list a:hover { color: var(--cl-primary); text-decoration: underline; text-underline-offset: 2px; }
.yun-ticker__list i { font-style: normal; color: var(--cl-line-2); }
.yun-ticker__more { flex: 0 0 auto; font-size: var(--cl-fs-xs); color: var(--cl-primary); }
.yun-ticker__more:hover { text-decoration: underline; text-underline-offset: 2px; }

/* A2. 编辑推荐：全宽轮播（fade 切换，不写第二份 DOM） */
.yun-lead { position: relative; }
.yun-lead__stage {
    position: relative;
    border-radius: var(--cl-r-md);
    overflow: hidden;
    background: var(--cl-primary-d);
    aspect-ratio: 16 / 5.4;
    min-height: 200px;
}
.yun-slide {
    position: absolute;
    inset: 0;
    display: block;         /* 整张 slide 是一个 <a>：inline 会被行高撑出缝 */
    opacity: 0;
    visibility: hidden;
    transition: opacity .45s var(--cl-ease), visibility .45s;
}
.yun-slide.is-active { opacity: 1; visibility: visible; }
.yun-slide__bg { position: absolute; inset: 0; display: block; }
.yun-slide__bg img { width: 100%; height: 100%; object-fit: cover; }
.yun-slide__shade {
    position: absolute;
    inset: 0;
    /* 两层叠：横向负责左侧文案的可读性，纵向负责底部——幻灯图底部经常是浅色
       （雪地 / 沙滩 / 米色背景），只靠横向渐变时圆点和片名会糊在画面里。 */
    background:
        linear-gradient(180deg, rgba(8, 24, 30, 0) 52%, rgba(8, 24, 30, .62) 100%),
        linear-gradient(90deg, rgba(8, 24, 30, .88) 0%, rgba(8, 24, 30, .6) 44%, rgba(8, 24, 30, .14) 100%);
}
.yun-slide__cap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: clamp(14px, 2vw, 26px);
    max-width: min(720px, 78%);
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #fff;
}
.yun-slide__k {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--cl-fs-xs);
    color: rgba(255, 255, 255, .8);
}
.yun-slide__k b {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 7px;
    border-radius: var(--cl-r-sm);
    background: var(--cl-accent);
    color: var(--cl-accent-ink);
    font-size: var(--cl-fs-2xs);
    font-weight: 700;
}
/* 幻灯片文案：只留「片名 + 一行元信息」—— 需求方要的是幻灯片，不是头条位，
   所以不写摘要、不放按钮。整张 slide 本身就是一个 a（见 index 模板的 yun-lead 区块），
   点画面任意位置都进详情页，hover 态因此挂在 a.yun-slide 上。 */
.yun-slide__t {
    font-size: var(--cl-fs-max);
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: -.01em;
    color: #fff;
}
a.yun-slide:hover .yun-slide__t { text-decoration: underline; text-underline-offset: 3px; }
.yun-slide__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    font-size: var(--cl-fs-sm);
    color: rgba(255, 255, 255, .84);
}
.yun-slide__meta i { font-style: normal; color: rgba(255, 255, 255, .42); }
.yun-slide__meta em { font-style: normal; color: #ffd0a8; font-weight: 600; }
.yun-lead__nav { position: absolute; top: 50%; inset-inline: 0; transform: translateY(-50%); z-index: 3; display: flex; justify-content: space-between; padding-inline: 10px; pointer-events: none; }
.yun-lead__nav button {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: var(--cl-r-sm);
    background: rgba(8, 24, 30, .45);
    color: #fff;
    transition: background var(--cl-t) var(--cl-ease);
}
.yun-lead__nav button:hover { background: var(--cl-primary); }
.yun-lead__nav svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.yun-lead__dots {
    position: absolute;
    right: clamp(14px, 2vw, 26px);
    bottom: clamp(14px, 2vw, 22px);
    z-index: 3;
    display: flex;
    gap: 6px;
}
.yun-lead__dots button {
    width: 20px; height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .38);
    transition: background var(--cl-t) var(--cl-ease), width var(--cl-t) var(--cl-ease);
}
.yun-lead__dots button.is-active { background: var(--cl-accent); width: 30px; }

/* A3. 楼层：区块头 + 海报网格 + 楼层脚长尾内链 */
.yun-floor__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 var(--cl-gap);
}
.yun-floor__tags > span {
    flex: 0 0 auto;
    font-size: var(--cl-fs-xs);
    color: var(--cl-ink-3);
}
.yun-floor__tags a {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: var(--cl-r-sm);
    background: var(--cl-surface-2);
    font-size: var(--cl-fs-xs);
    color: var(--cl-ink-2);
    transition: background var(--cl-t) var(--cl-ease), color var(--cl-t) var(--cl-ease);
}
.yun-floor__tags a:hover { background: var(--cl-primary-s); color: var(--cl-primary); }

/* A4. 最新收录（行式大信息行，2 列网格） */
.yun-fresh__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }

/* A5. 榜单：周期 tab（榜单表本体在 F 段，这里只留 tab 排布） */
.yun-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
/* ⚠️ 面板默认 display:none，.is-active 才出 —— tab 只切这个类，DOM 全量并存。
   所以面板内部不要再套 grid，也不要用列数收窄来表达隐藏。 */
.yun-rank__panel { display: none; margin-top: 10px; }
.yun-rank__panel.is-active { display: block; }

/* A5b. 首页榜单：名次卡网格（不是细长的单列文字表）
   为什么改：24 行 × 4 列的 <table> 在 1340px 容器里每行只占半行字，大屏整片留白。
   名次卡给「名次 + 海报缩略图 + 片名 + 分类 / 状态」，4 列铺满，一屏读完 Top 24。
   ⚠️ 卡片**不是**一整块 a：片名与分类必须是两个独立内链（一块 a 只能有一个 href，
      而且 a 不能嵌套）。所以卡片是 div，内部两个 a 各自管自己的跳转。
   ⚠️ 前三名只给名次上色，不放大字号 —— 名次列宽度固定，换色不会让整列抖动。 */
.yun-rkcards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--cl-gap-xs);
}
.yun-rkcard {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-md);
    background: var(--cl-surface-2);
    transition: border-color var(--cl-t) var(--cl-ease), background var(--cl-t) var(--cl-ease);
}
.yun-rkcard:hover { border-color: var(--cl-primary); background: var(--cl-surface); }
.yun-rkcard__no {
    flex: 0 0 auto;
    width: 20px;
    text-align: center;
    font: 700 var(--cl-fs-sm)/1 var(--cl-mono);
    color: var(--cl-ink-3);
}
.yun-rkcard:nth-child(-n + 3) .yun-rkcard__no { color: var(--cl-accent); }
.yun-rkcard__pic {
    flex: 0 0 auto;
    width: 38px;
    aspect-ratio: 2 / 3;
    border-radius: var(--cl-r-xs);
    overflow: hidden;
    background: var(--cl-surface-3);
}
.yun-rkcard__pic img { width: 100%; height: 100%; object-fit: cover; }
.yun-rkcard__copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.yun-rkcard__copy b {
    font-size: var(--cl-fs-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.yun-rkcard__copy b a:hover { color: var(--cl-primary); }
.yun-rkcard__m {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    font-size: var(--cl-fs-2xs);
    color: var(--cl-ink-3);
}
.yun-rkcard__m a { flex: 0 0 auto; color: var(--cl-primary); }
.yun-rkcard__m a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* 状态是弹性项：片名长的时候让状态先被裁，而不是把卡片撑破（flex 项默认 min-width:auto） */
.yun-rkcard__m em {
    min-width: 0;
    flex: 1 1 auto;
    font-style: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A6. 资讯卡（横排：图 + 标题 + 摘要），2 列网格 */
.yun-arts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cl-gap-xs) var(--cl-gap); }
.yun-artcard {
    display: flex;
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-md);
    transition: border-color var(--cl-t) var(--cl-ease), box-shadow var(--cl-t) var(--cl-ease);
}
.yun-artcard:hover { border-color: var(--cl-primary); box-shadow: var(--cl-sh-1); }
.yun-artcard__pic {
    flex: 0 0 auto;
    width: 108px;
    aspect-ratio: 16 / 10;
    border-radius: var(--cl-r-sm);
    overflow: hidden;
    background: var(--cl-surface-3);
}
.yun-artcard__pic img { width: 100%; height: 100%; object-fit: cover; }
.yun-artcard__copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.yun-artcard__copy strong {
    font-size: var(--cl-fs-sm);
    font-weight: 600;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.yun-artcard:hover .yun-artcard__copy strong { color: var(--cl-primary); }
.yun-artcard__copy p {
    font-size: var(--cl-fs-xs);
    line-height: 1.66;
    color: var(--cl-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.yun-artcard__copy i { margin-top: auto; font-style: normal; font-size: var(--cl-fs-2xs); color: var(--cl-ink-3); }
.yun-artcard__copy i b { color: var(--cl-primary); font-weight: 600; }

/* A7. 站内导航：分类地图 + 标签云（内链密度） */
.yun-map__row {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 10px;
    padding: 7px 0;
}
.yun-map__row + .yun-map__row { border-top: 1px dashed var(--cl-line); }
.yun-map__row > dt {
    font-size: var(--cl-fs-xs);
    color: var(--cl-ink-3);
    line-height: 2;
}
.yun-map__row > dd { display: flex; flex-wrap: wrap; gap: 5px; }
.yun-map__row > dd a {
    padding: 3px 8px;
    border-radius: var(--cl-r-sm);
    background: var(--cl-surface-2);
    font-size: var(--cl-fs-xs);
    color: var(--cl-ink-2);
}
.yun-map__row > dd a:hover { background: var(--cl-primary-s); color: var(--cl-primary); }
.yun-map__row > dd a.is-strong { background: var(--cl-primary-s); color: var(--cl-primary); font-weight: 600; }

/* ---- A2. 更新清单 / 榜单：共用一套「表格」-------------------------------
   为什么用 table：同类站点 99% 用卡片网格，表格既是明显的形态差异，也让搜索
   引擎能按列抽取（影片 / 分类 / 进度 / 时间）四组结构化内容。
   ⚠️ table-layout: fixed 是必需的：auto 布局下 text-overflow: ellipsis 不生效，
      长片名会把表格撑破、窄屏直接横向溢出。所以必须给出各列宽度。 */
.yun-tablewrap {
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-md);
    background: var(--cl-surface);
    overflow: hidden;
}
.yun-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.yun-table thead th {
    padding: 7px 10px;
    background: var(--cl-surface-2);
    border-bottom: 1px solid var(--cl-line-2);
    font-size: var(--cl-fs-2xs);
    font-weight: 600;
    color: var(--cl-ink-3);
    text-align: left;
    letter-spacing: .04em;
    white-space: nowrap;
}
.yun-table tbody tr + tr { border-top: 1px solid var(--cl-line); }
.yun-table tbody tr:hover { background: var(--cl-primary-s); }
.yun-table td { padding: 7px 10px; vertical-align: middle; font-size: var(--cl-fs-sm); }
.yun-table__no { width: 50px; font: 600 var(--cl-fs-xs)/1.5 var(--cl-mono); color: var(--cl-ink-3); text-align: right; }
.yun-table tbody tr:nth-child(-n+3) .yun-table__no { color: var(--cl-accent); }
.yun-table__name { overflow: hidden; }
.yun-table__name > a { font-size: var(--cl-fs-md); font-weight: 600; }
.yun-table__name > a:hover { color: var(--cl-primary); }
.yun-table__name > span {
    display: block;
    margin-top: 2px;
    font-size: var(--cl-fs-xs);
    color: var(--cl-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.yun-table__c { width: 92px; white-space: nowrap; color: var(--cl-ink-2); overflow: hidden; text-overflow: ellipsis; }
.yun-table__c a { color: var(--cl-primary); }
.yun-table__c a:hover { text-decoration: underline; text-underline-offset: 2px; }
.yun-table__c em { font-style: normal; color: var(--cl-accent-d); font-weight: 600; }
.yun-table__time { width: 72px; font-family: var(--cl-mono); font-size: var(--cl-fs-xs); color: var(--cl-ink-3); }
/* 榜单页 2026-09-25 已改成「每个分类一块」的 .yun-rkbox 结构，不再有榜单表；
   这里只留 .yun-table 的通用形态给详情页的线路索引表用。 */

/* ---- A3. 今日焦点 → 幻灯片（样式在文件顶部 A2「编辑推荐」段，这里不再重复）
   原来的「1 条头条 + 3 条简讯」（.yun-focus / .yun-hero / .yun-briefs）已按要求撤掉：
   首页首屏改为 level=9 的 6 图幻灯片，另有一个「今日更新」表格也一并删除。
   两族类名已无模板引用，连同断点里的残余规则一起清空。 */

/* ---- A4. 楼层「本类最新」锚文本串：本页内链密度最高的区域 ----------------
   ⚠️ 分隔点用 CSS 的 a + a::before 生成，不要在模板里写条件判断 ——
      {volist} 的 $key 是数组键（0 起），用它判「最后一个」会错位。 */
.yun-floor__index {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin: 0 0 8px;
    padding: 8px var(--cl-pad);
    background: var(--cl-surface-2);
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-sm);
    font-size: var(--cl-fs-xs);
    line-height: 1.95;
}
.yun-floor__index > span { flex: 0 0 auto; margin-right: 10px; font-weight: 600; color: var(--cl-ink-3); }
.yun-floor__index a { color: var(--cl-ink-2); }
.yun-floor__index a:hover { color: var(--cl-primary); text-decoration: underline; text-underline-offset: 2px; }
.yun-floor__index a + a::before { content: '·'; margin: 0 7px; color: var(--cl-line-2); }

/* ---- A5c. 资讯卡网格：缩略图 + 标题 + 分类 / 日期 ------------------------
   上一版是「纯文本单列 10 行」，1340px 容器里一行只占半屏宽的字，大屏观感很差。
   改成 4 / 3 / 2 / 1 列卡片；取数同步从 10 改成 12 —— 12 是 4、3、2 的公倍数，
   任何断点都不留残行。
   ⚠️ 这是 .yun-artcard（资讯列表页那套横排卡）的**首页紧凑变体**：图在上、文在下，
      不放摘要 —— 首页这一块是「索引」，摘要留在分类页里给。
   ⚠️ 实测本站 23 篇资讯 art_pic 全非空，所以图位是常规项；万一为空也不留空洞，
      模板里整块图位不渲染，文字区仍能占满。 */
.yun-ncards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--cl-gap);
}
.yun-ncard {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-md);
    background: var(--cl-surface);
    overflow: hidden;
    transition: border-color var(--cl-t) var(--cl-ease), box-shadow var(--cl-t) var(--cl-ease);
}
.yun-ncard:hover { border-color: var(--cl-primary); box-shadow: var(--cl-sh-1); }
.yun-ncard__pic {
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--cl-surface-3);
    overflow: hidden;
}
.yun-ncard__pic img { width: 100%; height: 100%; object-fit: cover; }
.yun-ncard__copy {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px 9px;
}
.yun-ncard__copy b {
    font-size: var(--cl-fs-sm);
    font-weight: 600;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.yun-ncard:hover .yun-ncard__copy b { color: var(--cl-primary); }
.yun-ncard__m {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;      /* 同一行卡片标题行数不同时，日期仍然对齐到底 */
    font-size: var(--cl-fs-2xs);
    color: var(--cl-ink-3);
}
.yun-ncard__m a { color: var(--cl-primary); }
.yun-ncard__m a:hover { text-decoration: underline; text-underline-offset: 2px; }
.yun-ncard__m i { font-style: normal; margin-left: auto; font-family: var(--cl-mono); white-space: nowrap; }

/* ==========================================================================
   B. 列表页 / 频道页 / 筛选页 / 搜索页
   ========================================================================== */
.yun-sortbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px var(--cl-pad);
    background: var(--cl-surface);
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-md);
}
.yun-sortbar + .yun-sortbar { margin-top: 8px; }
.yun-sortbar > span {
    flex: 0 0 auto;
    font-size: var(--cl-fs-xs);
    color: var(--cl-ink-3);
    padding-right: 2px;
}

/* 筛选器（module/filter） */
.yun-filter {
    background: var(--cl-surface);
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-md);
    padding: 4px var(--cl-pad) 10px;
}
.yun-filter__row {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 10px;
    padding: 7px 0;
}
.yun-filter__row + .yun-filter__row { border-top: 1px dashed var(--cl-line); }
.yun-filter__row > strong {
    font-size: var(--cl-fs-xs);
    font-weight: 600;
    color: var(--cl-ink-3);
    line-height: 2.1;
}
.yun-filter__items { display: flex; flex-wrap: wrap; gap: 5px; }
.yun-filter__items a {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: var(--cl-r-sm);
    font-size: var(--cl-fs-xs);
    color: var(--cl-ink-2);
    transition: background var(--cl-t) var(--cl-ease), color var(--cl-t) var(--cl-ease);
}
.yun-filter__items a:hover { background: var(--cl-primary-s); color: var(--cl-primary); }
.yun-filter__items a.active { background: var(--cl-primary); color: var(--cl-primary-ink); font-weight: 600; }
/* 「更多筛选」额外行：桌面也生效，由 JS 切 data-open */
.yun-filter__extra { display: none; }
.yun-filter__extra[data-open="1"] { display: block; }
.yun-filter__actions { padding-top: 4px; }
.yun-filter__toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--cl-fs-xs);
    color: var(--cl-primary);
}
.yun-filter__toggle svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; transition: transform var(--cl-t) var(--cl-ease); }
.yun-filter__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* 搜索页的搜索框（2026-11-07 重做）
   ⚠️ .cl-search 是深色顶栏里的玻璃胶囊：文字与占位符都是白色/半透明白。
      直接放进浅色卡片会变成「白字白底」，必须在这里整套覆盖 ——
      底色、边框、图标描边、输入文字与占位符颜色一个都不能漏。
   字体按需求指定微软雅黑；输入框本身是白底墨青字。 */
.yun-searchbox {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: linear-gradient(180deg, var(--cl-surface), var(--cl-surface-2));
    border: 1px solid var(--cl-line-2);
    border-radius: var(--cl-r-lg);
}
.yun-searchbox .cl-search {
    flex: 1 1 260px;
    min-width: 0;
    height: 46px;
    padding: 0 18px;
    background: #fff;
    border: 1px solid var(--cl-line-2);
    border-radius: 999px;
}
.yun-searchbox .cl-search:focus-within {
    border-color: var(--cl-primary);
    background: #fff;
    box-shadow: 0 0 0 3px var(--cl-primary-s);
}
.yun-searchbox .cl-search svg { width: 17px; height: 17px; stroke: var(--cl-ink-3); }
.yun-searchbox .cl-search input {
    width: 100%;
    height: 100%;
    font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    font-size: var(--cl-fs-base);
    color: var(--cl-ink);
}
.yun-searchbox .cl-search input::placeholder { color: var(--cl-ink-3); }
.yun-searchbox .cl-btn { height: 46px; padding: 0 26px; border-radius: 999px; }
/* 窄屏：按钮独占一行铺满，别在输入框下面挂一个左对齐的小胶囊 */
@media (max-width: 599.98px) {
    .yun-searchbox .cl-btn { flex: 1 1 100%; }
}

/* 播放页资料带（2026-11-07 扩容）：字段变多，改成等宽自适应格 + 下虚线。
   不再沿用 .cl-facts--inline 的竖分隔壁 —— 多行换行时竖线会落在行尾。 */
.yun-facts--wide { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 22px; }
.yun-facts--wide > div { border-right: 0; padding: 4px 0; border-bottom: 1px dashed var(--cl-line); }
.yun-facts--wide > div:last-child { border-bottom: 0; }

/* ---- B2. 频道页标题：H1 挂在条件表「频道」行的 dt 上 --------------------
   2026-09-25：顶部那块 cl-pagehead（面包屑 + 大号 H1）按需求方要求整块删掉，
   H1 换挂到条件表第一行 —— 不额外占版面，页面也仍然只有一个 H1。
   ⚠️ 字号用 --cl-fs-lg（17px）而不是 --cl-fs-max（24px）：它现在坐在条件表里，
      24px 会把这一行的行高撑成别的两倍，条件表看起来就散了。
      全站「最大标题 24px」的约束仍然成立（这里是行内标题，不是板块标题）。 */
.yun-conds__row--chan { grid-template-columns: auto minmax(0, 1fr); }
.yun-conds__row--chan > dt { font-size: var(--cl-fs-lg); font-weight: 700; color: var(--cl-ink); letter-spacing: -.01em; }
/* h1 自带 margin 与字号，必须整体继承，否则会把 dt 列撑歪 */
.yun-chtitle { margin: 0; font: inherit; letter-spacing: inherit; }
/* 页面级 H1（榜单页 / 这类有独立页头的页面）
   ⚠️ 全站字号上限就是 --cl-fs-max（24px），别再往上加。 */
.yun-pagetitle { font-size: var(--cl-fs-max); font-weight: 700; letter-spacing: -.01em; }
.yun-pagetitle i { font-style: normal; margin: 0 6px; color: var(--cl-line-2); font-weight: 400; }
.yun-pagetitle span { font-size: var(--cl-fs-md); font-weight: 400; color: var(--cl-ink-3); }

/* ---- B3. 条件表：频道 / 排序 / 更多条件，一行一类 ----------------------
   用 <dl> 而不是圆角芯片条：芯片条是杂志型模板的通行做法，
   这里换成「条件表」的形态，顺带把每个条件都变成带语义的锚文本。 */
.yun-chtotal {
    margin: 0 0 10px;
    font-size: var(--cl-fs-xs);
    line-height: 1.9;
    color: var(--cl-ink-3);
}
.yun-chtotal b { color: var(--cl-primary); font-weight: 600; font-variant-numeric: tabular-nums; }

.yun-conds {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-md);
    background: var(--cl-surface);
    overflow: hidden;
}
.yun-conds__row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 6px 10px;
    align-items: baseline;
    padding: 7px var(--cl-pad);
}
.yun-conds__row + .yun-conds__row { border-top: 1px dashed var(--cl-line); }
.yun-conds__row > dt { font-size: var(--cl-fs-xs); font-weight: 600; color: var(--cl-ink-3); }
.yun-conds__row > dd { display: flex; flex-wrap: wrap; font-size: var(--cl-fs-xs); line-height: 1.9; }
.yun-conds__row a { color: var(--cl-ink-2); }
.yun-conds__row a + a::before { content: '·'; margin: 0 8px; color: var(--cl-line-2); }
.yun-conds__row a:hover { color: var(--cl-primary); text-decoration: underline; text-underline-offset: 2px; }
.yun-conds__row a.is-strong { font-size: var(--cl-fs-base); color: var(--cl-ink); }
.yun-conds__row a.is-cur { color: var(--cl-accent-d); font-weight: 600; }
/* 条件表嵌进 .cl-sec（外层已经有边框/底色/padding）时，把自身的框和内缩去掉，
   否则会出现「框里再套一个框 + 双份留白」。详情页的「题材与标签」用这个形态。 */
.yun-conds--inset { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.yun-conds--inset .yun-conds__row { padding-inline: 0; }
.yun-conds--inset .yun-conds__row:first-child { padding-top: 2px; }
.yun-conds--inset .yun-conds__row:last-child { padding-bottom: 0; }

/* ---- B4. 结果区：行式条目的响应式网格（频道页 / 详情页同类作品） ----------
   每条仍是「片名 + 分类 + 年份 + 地区 + 状态 + 摘要 + 主演」的大信息行 ——
   字段一个不留（这是本模板相对海报墙的主要取舍），只是不再一条独占一整行：
   1340px 容器下一条 1300px 宽、右侧一大片空白，大屏观感很差。
   ⚠️ 列数 4 / 3 / 2 要求条目数是公倍数：模板取 24 条（频道页）与 12 条（同类作品），
      24 与 12 都能被 4、3、2 整除 → 任何断点都不留残行。
   ⚠️ 只作用于 .yun-resultlist 的**直接子项**。map/index.html（最近更新）用的是裸
      .cl-linerow 列表、不在本容器内，仍是单列大信息行 —— 那边条数多、字段更多，
      网格化反而难读，刻意不动。
   ⚠️ 卡片模式下 .cl-linerow + .cl-linerow 的 border-top 与本卡片的 border 同色同宽，
      叠在一起看不出双线，不需要额外覆盖（改色时两处要一起改）。 */
.yun-resultlist {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--cl-gap-xs);
}
.yun-resultlist > .cl-linerow {
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-md);
    background: var(--cl-surface);
    transition: border-color var(--cl-t) var(--cl-ease), box-shadow var(--cl-t) var(--cl-ease);
}
.yun-resultlist > .cl-linerow:hover { border-color: var(--cl-primary); box-shadow: var(--cl-sh-1); }
/* 网格里海报收窄一档，把宽度让给文字（摘要与主演都在文字区） */
.yun-resultlist > .cl-linerow .cl-linerow__pic { width: 84px; }

/* ==========================================================================
   C. 详情页
   ========================================================================== */
.yun-detail__top {
    display: grid;
    grid-template-columns: 186px minmax(0, 1fr);
    gap: 0 18px;
    padding: var(--cl-pad);
    background: var(--cl-surface);
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-md);
}
.yun-detail__poster {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: var(--cl-r-md);
    overflow: hidden;
    background: var(--cl-surface-3);
}
.yun-detail__poster img { width: 100%; height: 100%; object-fit: cover; }
.yun-detail__score {
    position: absolute;
    left: 0; top: 0;
    padding: 3px 8px;
    background: rgba(18, 38, 46, .8);
    color: #fff;
    font: 700 var(--cl-fs-base)/1.4 var(--cl-mono);
    border-bottom-right-radius: var(--cl-r-sm);
}
.yun-detail__score i { font-style: normal; font-size: var(--cl-fs-2xs); opacity: .8; }
.yun-detail__main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.yun-detail__eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: var(--cl-fs-xs);
    color: var(--cl-ink-3);
}
.yun-detail__eyebrow a { color: var(--cl-primary); font-weight: 600; }
.yun-detail__eyebrow a:hover { text-decoration: underline; text-underline-offset: 2px; }
.yun-detail__eyebrow i { font-style: normal; color: var(--cl-line-2); }
.yun-detail__eyebrow span {
    padding: 2px 7px;
    border-radius: var(--cl-r-sm);
    background: var(--cl-surface-2);
}
.yun-detail__title { font-size: var(--cl-fs-max); letter-spacing: -.01em; }
.yun-detail__blurb { font-size: var(--cl-fs-sm); line-height: 1.75; color: var(--cl-ink-2); }
.yun-detail__acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- C1. 影片档案：两栏对齐的「键 / 值」记录表 ----------------------------
   为什么不沿用 .cl-facts--inline（folio 的横排资料带）：
   那是「auto-fit 220px 小格 + 左右 dt/dd + 竖向虚线」的横向资料带，
   folio 与本模板此前逐条一样 —— 改版要求详情页与 folio 有结构差异。
   这里换成：固定两栏网格、键列宽固定、键与值**上下排列**、每项一条虚线底边，
   读起来是一份「档案记录」，不是一排并排的标签。
   ⚠️ 缺字段整项不出（不显示 0 / 「暂无」占位）。 */
.yun-spec {
    grid-column: 1 / -1;
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--cl-line);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 26px;
}
.yun-spec__i {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
    padding: 5px 0;
    border-bottom: 1px dashed var(--cl-line);
}
/* 最后一行（两栏各一项）不留线，否则档案区底部会挂一条悬空横线 */
.yun-spec__i:nth-last-child(-n + 2) { border-bottom: 0; }
.yun-spec__i > dt { font-size: var(--cl-fs-xs); color: var(--cl-ink-3); }
.yun-spec__i > dd {
    min-width: 0;
    font-size: var(--cl-fs-sm);
    line-height: 1.6;
    color: var(--cl-ink);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 线路与选集（<details> 折叠，首条默认展开） */
.yun-lines { border: 1px solid var(--cl-line); border-radius: var(--cl-r-md); overflow: hidden; }
.yun-lines__item + .yun-lines__item { border-top: 1px solid var(--cl-line); }
.yun-lines__item > summary {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    font-size: var(--cl-fs-sm);
    background: var(--cl-surface-2);
    transition: background var(--cl-t) var(--cl-ease);
}
.yun-lines__item > summary:hover { background: var(--cl-primary-s); }
.yun-lines__item[open] > summary { background: var(--cl-surface); border-bottom: 1px solid var(--cl-line); }
.yun-lines__name { font-weight: 700; color: var(--cl-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yun-lines__num { color: var(--cl-ink-3); font-size: var(--cl-fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yun-lines__go { display: inline-flex; align-items: center; gap: 5px; justify-self: end; font-size: var(--cl-fs-xs); color: var(--cl-primary); }
.yun-lines__go em { font-style: normal; }
.yun-lines__unfold { display: none; }
.yun-lines__item[open] .yun-lines__fold { display: none; }
.yun-lines__item[open] .yun-lines__unfold { display: inline; }
.yun-lines__caret {
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform var(--cl-t) var(--cl-ease);
}
.yun-lines__item[open] .yun-lines__caret { transform: rotate(180deg); }
.yun-lines__eps { padding: 10px 12px 12px; }

/* 选集胶囊 */
.yun-episodes { display: flex; flex-wrap: wrap; gap: 5px; }
.yun-episodes a {
    flex: 0 0 auto;
    min-width: 46px;
    padding: 5px 9px;
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-sm);
    background: var(--cl-surface-2);
    font-size: var(--cl-fs-xs);
    text-align: center;
    color: var(--cl-ink-2);
    transition: background var(--cl-t) var(--cl-ease), color var(--cl-t) var(--cl-ease), border-color var(--cl-t) var(--cl-ease);
}
.yun-episodes a:hover { border-color: var(--cl-primary); color: var(--cl-primary); background: var(--cl-primary-s); }
.yun-episodes a.is-active { background: var(--cl-accent); border-color: var(--cl-accent); color: var(--cl-accent-ink); font-weight: 700; }
.yun-episodes__group + .yun-episodes__group { margin-top: 10px; }
.yun-episodes__group h3 { font-size: var(--cl-fs-xs); color: var(--cl-ink-3); margin-bottom: 6px; font-weight: 600; }

/* ---- C2. 线路索引表（真 <table>；>1 条线路时才输出） ---------------------
   线路是「可枚举的固定几列」，表格是它的自然形态，也便于搜索引擎把
   「线路 / 集数 / 首末集」抽成结构化内容。folio 的详情页用的是 <details>
   折叠手风琴，两者结构完全不同。
   ⚠️ 列宽必须落在 <th> 上：.yun-table 设了 table-layout: fixed，固定布局只读
      第一行（thead）的宽度，写在 td 上不生效。
   ⚠️ 窄屏隐藏「首集」列由断点里的 .yun-table th:nth-child(3) 顺带完成，
      这里再显式写一次 .yun-ltab__first{display:none}，避免以后改了首页表格列序
      把线路表一起带歪。 */
.yun-ltab { margin-bottom: 12px; }
/* ⚠️ 必须显式写 text-align: left —— <th> 的用户代理样式默认是 center，
   而这一列既可能是表头（scope=col）也可能是行首（scope=row），
   不写就会看到「表头左对齐、行首居中」的错位。 */
.yun-ltab__name { width: 30%; text-align: left; font-weight: 600; color: var(--cl-ink); }
.yun-ltab__cnt { width: 72px; white-space: nowrap; color: var(--cl-ink-2); font-variant-numeric: tabular-nums; }
.yun-ltab__ep { width: 94px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--cl-ink-2); }
.yun-ltab__go { width: 88px; white-space: nowrap; }
.yun-ltab__go a { color: var(--cl-primary); font-weight: 600; }
.yun-ltab__go a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- C3. 选集目录：按线路分段、全量平铺 -------------------------------
   刻意**不做折叠**：<details> 会把绝大部分选集留在不可见状态，而「全量选集」
   正是本页最大的一片内链面与可索引文本面。
   分段头里的「线路名 · N 集」是数据本身，不是解释性文案。 */
.yun-eplist { border-top: 1px solid var(--cl-line); }
.yun-eplist__grp { padding: 11px 0 12px; }
.yun-eplist__grp + .yun-eplist__grp { border-top: 1px dashed var(--cl-line); }
.yun-eplist__hd { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.yun-eplist__src { font-size: var(--cl-fs-sm); font-weight: 700; color: var(--cl-primary); }
.yun-eplist__cnt { font-size: var(--cl-fs-xs); color: var(--cl-ink-3); font-variant-numeric: tabular-nums; }
.yun-eplist__note { font-size: var(--cl-fs-2xs); color: var(--cl-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yun-epgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 4px;
}
.yun-epgrid a {
    padding: 5px 4px;
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-sm);
    background: var(--cl-surface-2);
    font-size: var(--cl-fs-xs);
    text-align: center;
    color: var(--cl-ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background var(--cl-t) var(--cl-ease), color var(--cl-t) var(--cl-ease), border-color var(--cl-t) var(--cl-ease);
}
.yun-epgrid a:hover { border-color: var(--cl-primary); background: var(--cl-primary-s); color: var(--cl-primary); }

/* ---- C4. 常见问答：平铺 Q/A（不是折叠手风琴） --------------------------
   折叠态把答案留在 DOM 里但不可见，而本页 FAQ 与 FAQPage 结构化数据同源；
   平铺后「可见文本」与「结构化数据」逐字对应，页面可索引文本也多出一截。
   fol.io 用的是 <details> 手风琴，这里是它的反面。
   Q / A 两个前缀用伪元素出，不进正文文本，避免污染结构化数据比对。 */
.yun-qa { border-top: 1px solid var(--cl-line); }
.yun-qa__i { padding: 11px 0; }
.yun-qa__i + .yun-qa__i { border-top: 1px dashed var(--cl-line); }
.yun-qa__q {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 5px;
    font-size: var(--cl-fs-base);
    font-weight: 700;
    color: var(--cl-ink);
}
.yun-qa__q::before { content: 'Q'; flex: 0 0 auto; font: 700 var(--cl-fs-sm)/1.4 var(--cl-mono); color: var(--cl-accent); }
.yun-qa__a { display: flex; align-items: baseline; gap: 7px; font-size: var(--cl-fs-sm); line-height: 1.8; color: var(--cl-ink-2); }
.yun-qa__a::before { content: 'A'; flex: 0 0 auto; font: 700 var(--cl-fs-sm)/1.4 var(--cl-mono); color: var(--cl-ink-3); }

/* ==========================================================================
   D. 播放页（单栏：播放器在上，信息与推荐在下方，不使用右侧栏）
   ========================================================================== */
.yun-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #08181d;
    border-radius: var(--cl-r-md);
    overflow: hidden;
}
/* 无内嵌播放源时：16:9 在窄屏会矮到放不下入口面板 → 换成保底高度。
   ⚠️ 只在「面板模式」下换，有内嵌 iframe 时必须保持 16:9，否则播放器被拉伸。 */
.yun-player--ext { aspect-ratio: auto; min-height: clamp(290px, 33vw, 410px); }
.yun-player iframe, .yun-player video { width: 100%; height: 100%; border: 0; }

/* ---- D2. 播放器内的「正版观看入口」面板 ----------------------------------
   面板绝对铺满 .yun-player，三层：氛围底图 z0 → 渐变遮罩 z1 → 内容 z2。
   ⚠️ 这一族此前在 CSS 里**一条定义都没有**（yun-thirdparty / yun-thirdparty__poster
      / __hud 全是裸类名）→ 海报按图片自然尺寸落在左边、右边露出播放器深色底，
      看起来就是"播放器完全没对齐"。
   ⚠️ 氛围底图只用 blur(46px 以上) + opacity ≤ .3；中等模糊会显脏。
   ⚠️ 面板里绝不嵌套 <a>：可见的按钮用 span/div 渲染，唯一可点的热区是外面那层 <a>。 */
.yun-ext {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(14px, 2.2vw, 30px);
    text-align: center;
    overflow: hidden;
}
.yun-ext__bg {
    position: absolute;
    inset: -6%;
    z-index: 0;
    background-position: center 24%;
    background-size: cover;
    filter: blur(46px) saturate(.85);
    opacity: .3;
}
.yun-ext__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(6, 16, 29, .58) 0%, rgba(6, 16, 29, .93) 100%);
}
.yun-ext__in {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 660px;
}
.yun-ext__brand {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 28px;
    padding: 0 12px 0 4px;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
    color: #dfe8f3;
    font-size: var(--cl-fs-xs);
}
.yun-ext__brand img { width: 20px; height: 20px; border-radius: 50%; background: #fff; object-fit: contain; }
.yun-ext__title {
    margin-top: 11px;
    color: #fff;
    font-size: clamp(15px, 1.5vw, 20px);
    font-weight: 700;
    line-height: 1.4;
}
.yun-ext__title i { font-style: normal; color: #ffd8b8; }
.yun-ext__note { margin-top: 6px; color: rgba(223, 232, 243, .7); font-size: var(--cl-fs-sm); line-height: 1.7; }
.yun-ext__acts { margin-top: 14px; }
.yun-ext__go {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding: 0 20px;
    border-radius: var(--cl-r-sm);
    background: var(--cl-accent);
    color: #fff;
    font-size: var(--cl-fs-md);
    font-weight: 700;
    transition: background var(--cl-t) var(--cl-ease);
}
.yun-ext__go:hover { background: var(--cl-accent-d); color: #fff; }
.yun-ext__go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; flex: 0 0 auto; }
.yun-ext__plats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.yun-ext__plats > em {
    flex: 0 0 100%;
    font-style: normal;
    color: rgba(223, 232, 243, .58);
    font-size: var(--cl-fs-2xs);
}

/* 深色底上的平台入口按钮（与浅色底的 .yun-src 成对，别互相套用） */
.cl-plat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px 0 5px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--cl-r-sm);
    background: rgba(255, 255, 255, .07);
    color: #e6eef7;
    font-size: var(--cl-fs-xs);
    transition: background var(--cl-t) var(--cl-ease), color var(--cl-t) var(--cl-ease), border-color var(--cl-t) var(--cl-ease);
}
.cl-plat img { width: 18px; height: 18px; border-radius: 3px; background: #fff; object-fit: contain; }
.cl-plat:hover { background: #fff; border-color: #fff; color: var(--cl-ink); }
.cl-plat.is-cur { border-color: var(--cl-accent); background: var(--cl-accent); color: #fff; }

/* ---- D3. 播放器下方的「正版观看入口」条（有内嵌播放源时也出） -------------- */
.yun-srcsbar {
    display: flex;
    align-items: center;
    gap: 8px 12px;
    flex-wrap: wrap;
    padding: 9px var(--cl-pad);
    background: var(--cl-surface);
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-md);
}
.yun-srcsbar__label { font-size: var(--cl-fs-xs); font-weight: 600; color: var(--cl-ink-2); }
.yun-srcsbar__label i { font-style: normal; color: var(--cl-ink-3); font-weight: 400; margin-left: 5px; }
.yun-srcsbar__list { display: flex; flex-wrap: wrap; gap: 7px; margin-left: auto; }
.yun-src {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px 0 5px;
    border: 1px solid var(--cl-line-2);
    border-radius: var(--cl-r-sm);
    font-size: var(--cl-fs-xs);
    color: var(--cl-ink-2);
    transition: border-color var(--cl-t) var(--cl-ease), color var(--cl-t) var(--cl-ease), background var(--cl-t) var(--cl-ease);
}
.yun-src img { width: 18px; height: 18px; border-radius: 3px; object-fit: contain; }
.yun-src:hover { border-color: var(--cl-primary); background: var(--cl-primary-s); color: var(--cl-primary); }
.yun-src.is-cur { border-color: var(--cl-accent); background: var(--cl-accent-s); color: var(--cl-accent-d); font-weight: 600; }
.yun-nowbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px var(--cl-pad);
    background: var(--cl-surface);
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-md);
}
.yun-nowbar strong { font-size: var(--cl-fs-md); }
.yun-nowbar em { font-style: normal; font-size: var(--cl-fs-xs); color: var(--cl-accent-d); font-weight: 600; }
.yun-nowbar__switch { margin-left: auto; }
.yun-switch { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.yun-switch__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 260px;
    height: 30px;
    padding: 0 11px;
    border: 1px solid var(--cl-line-2);
    border-radius: var(--cl-r-sm);
    font-size: var(--cl-fs-xs);
    color: var(--cl-ink-2);
    transition: border-color var(--cl-t) var(--cl-ease), color var(--cl-t) var(--cl-ease), background var(--cl-t) var(--cl-ease);
}
.yun-switch__btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yun-switch__btn:hover { border-color: var(--cl-primary); color: var(--cl-primary); background: var(--cl-primary-s); }
.yun-switch__btn.is-disabled { color: var(--cl-ink-3); opacity: .55; pointer-events: none; }
.yun-switch__btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4; flex: 0 0 auto; }

.yun-fold { border: 1px solid var(--cl-line); border-radius: var(--cl-r-md); overflow: hidden; background: var(--cl-surface); }
.yun-fold > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px var(--cl-pad);
    cursor: pointer;
}
.yun-fold > summary h2 { font-size: var(--cl-fs-md); }
.yun-fold > summary em { font-style: normal; font-size: var(--cl-fs-xs); color: var(--cl-ink-3); }
.yun-fold__label { margin-left: auto; font-size: var(--cl-fs-xs); color: var(--cl-primary); }
.yun-fold > summary svg { width: 14px; height: 14px; fill: none; stroke: var(--cl-ink-3); stroke-width: 2.4; transition: transform var(--cl-t) var(--cl-ease); }
.yun-fold[open] > summary svg { transform: rotate(180deg); }
.yun-fold__body { padding: 0 var(--cl-pad) var(--cl-pad); border-top: 1px solid var(--cl-line); padding-top: 10px; }

/* ==========================================================================
   E. 文章 / 资讯详情
   ========================================================================== */
/* ---- E1. 资讯详情两栏骨架：正文栏 + 右侧栏 ------------------------------
   为什么加：正文单栏铺满 1340px 时每行 60+ 个汉字，读起来很累，右侧还整片空着。
   两栏之后正文行宽收到 ~950px（一行 40 字左右），右栏承接「热门文章 / 推荐视频」。
   ⚠️ 侧栏**不吸顶，跟随页面一起滚**（2026-09-25 需求方拍板）。
      第一版做过 sticky + max-height + overflow-y:auto，实测出现两个问题：
        ① 侧栏内容超过一屏 → 侧栏自己长出一条内嵌滚动条，鼠标在侧栏上滚不动正文；
        ② 侧栏吸住不动、正文继续滚，视觉上像两块内容各自为政。
      需求方要的是「整页一条滚动条」→ 直接回到自然文档流。
      （sticky 若日后要复活，前提是：父网格 align-items: start + 侧栏 max-height 兜底
        + 祖先无 overflow: hidden/auto，三缺一都会静默失效。）
   ⚠️ align-items: start 仍然要留：默认的 stretch 会把两个侧栏卡片拉到和正文一样高，
      卡片之间被撑出大片空白。 */
.yun-artwrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 312px;
    gap: var(--cl-gap);
    align-items: start;
}
.yun-artmain { min-width: 0; display: grid; gap: var(--cl-gap); align-content: start; }
.yun-artside {
    display: grid;
    gap: var(--cl-gap);
}
/* 侧栏板块：复用区块的观感，但标题字号比正文区的 h2 小一档，不抢主栏 */
.yun-side {
    padding: var(--cl-pad);
    background: var(--cl-surface);
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-md);
}
.yun-side__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.yun-side__head h2 { font-size: var(--cl-fs-md); }
.yun-side__head > a { margin-left: auto; font-size: var(--cl-fs-2xs); color: var(--cl-primary); }
.yun-side__head > a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* 名次列表（热门文章）：序号 + 标题 */
.yun-sidelist { display: flex; flex-direction: column; }
.yun-sidelist > li { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; }
.yun-sidelist > li + li { border-top: 1px dashed var(--cl-line); }
.yun-sidelist__no {
    flex: 0 0 auto;
    width: 18px;
    text-align: center;
    font: 700 var(--cl-fs-xs)/1.7 var(--cl-mono);
    color: var(--cl-ink-3);
}
.yun-sidelist > li:nth-child(-n + 3) .yun-sidelist__no { color: var(--cl-accent); }
.yun-sidelist__t {
    min-width: 0;
    font-size: var(--cl-fs-sm);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.yun-sidelist__t:hover { color: var(--cl-primary); }

/* 小海报列表（推荐视频）：竖版缩略图 + 片名 + 元信息 */
.yun-sidevod { display: flex; flex-direction: column; gap: 8px; }
.yun-sidevod a { display: flex; gap: 8px; align-items: center; }
.yun-sidevod__pic {
    flex: 0 0 auto;
    width: 52px;
    aspect-ratio: 2 / 3;
    border-radius: var(--cl-r-xs);
    overflow: hidden;
    background: var(--cl-surface-3);
}
.yun-sidevod__pic img { width: 100%; height: 100%; object-fit: cover; }
.yun-sidevod__copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.yun-sidevod__copy b {
    font-size: var(--cl-fs-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.yun-sidevod a:hover b { color: var(--cl-primary); }
.yun-sidevod__copy i {
    font-style: normal;
    font-size: var(--cl-fs-2xs);
    color: var(--cl-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.yun-article {
    padding: clamp(14px, 1.6vw, 22px);
    background: var(--cl-surface);
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-md);
}
.yun-article h1 { font-size: var(--cl-fs-max); line-height: 1.4; }
.yun-article__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cl-line);
    font-size: var(--cl-fs-xs);
    color: var(--cl-ink-3);
}
.yun-article__meta a { color: var(--cl-primary); }
.yun-article__body { font-size: var(--cl-fs-md); line-height: 1.9; color: var(--cl-ink-2); overflow-wrap: anywhere; }
.yun-article__body p + p { margin-top: 10px; }
.yun-article__body h2 { font-size: var(--cl-fs-lg); margin: 16px 0 8px; }
.yun-article__body h3 { font-size: var(--cl-fs-md); margin: 12px 0 6px; }
.yun-article__body img { margin: 12px auto; border-radius: var(--cl-r-sm); }
.yun-article__body a { color: var(--cl-primary); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   F. 排行榜（label/rank）—— 两层结构：主榜表格 + 分类榜索引表
   --------------------------------------------------------------------------
   folio 是「8 个等权卡片块 × 10 行文字榜」，信息层级是平的。
   atlas 改成两张真表格：主榜给排名（名次/片名/分类/状态/更新），
   分类榜索引给「每类前三」+ 分类入口。表格能承载分类、状态、日期三类
   可索引文本，是榜单页相对海报墙的核心优势。
   ⚠️ 两张表都用 .yun-table（table-layout: fixed）—— 列宽只认第一行的 th，
      写在 td 上无效；后面的列宽由 .yun-table__no / __c / __time 提供。
   ========================================================================== */
.yun-rank__tabs { display: flex; gap: 6px; flex-wrap: wrap; padding: var(--cl-pad); background: var(--cl-surface); border: 1px solid var(--cl-line); border-radius: var(--cl-r-md); }
/* 周期芯片里的「近 7 天」这类副标：小一号降饱和，不跟主词抢 */
.yun-rank__tabs .cl-chip i { font-style: normal; margin-left: 4px; font-size: var(--cl-fs-2xs); opacity: .7; }
.yun-rank__tabs .cl-chip.is-active i { opacity: .9; }

/* ---- 榜单页主体：每个分类一块独立榜（每块 10 条） ------------------------
   2026-09-25 重做：上一版是「全站 Top20 主表 + 分类榜索引表（每类只给前三）」，
   需求方反馈「数据不完整」→ 改成**每个分类一块、每块给足 10 条**，块之间平级排网格。
   ⚠️ 列数定义在 .yun-rkgrid（它在面板**内部**，每个周期面板各一份）——
      绝不能定义到面板外层容器：display:none 的面板不占网格位，
      定义在外层会把可见面板压成半宽（prism/folio/vela 都踩过这个）。
   ⚠️ .yun-rkbox 与首页的 .yun-rkcard 是**两个东西**，别合并：
      首页那张是「名次 + 海报 + 片名 + 分类」的横排小卡（一次铺 72 张），
      这里是「分类块 + 10 行名次列表」的竖块。 */
.yun-rkgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cl-gap); }
.yun-rkbox {
    min-width: 0;
    padding: var(--cl-pad);
    background: var(--cl-surface);
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-md);
}
.yun-rkbox__head {
    display: flex; align-items: baseline; gap: 8px;
    margin-bottom: 4px; padding-bottom: 6px;
    border-bottom: 1px solid var(--cl-line);
}
.yun-rkbox__head h2 { font-size: var(--cl-fs-md); font-weight: 700; }
.yun-rkbox__head h2 a:hover { color: var(--cl-primary); }
.yun-rkbox__more { margin-left: auto; font-size: var(--cl-fs-2xs); color: var(--cl-primary); white-space: nowrap; }
.yun-rkbox__more:hover { text-decoration: underline; text-underline-offset: 2px; }
.yun-rkbox__list { display: flex; flex-direction: column; }
.yun-rkbox__list > li + li { border-top: 1px dashed var(--cl-line); }
.yun-rkbox__row { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.yun-rkbox__no {
    flex: 0 0 auto; width: 20px; text-align: center;
    font: 700 var(--cl-fs-xs)/1 var(--cl-mono); color: var(--cl-ink-3);
}
/* 前三用橙色名次 —— 榜单页没有海报墙，名次颜色是唯一的强弱信号 */
.yun-rkbox__list > li:nth-child(-n + 3) .yun-rkbox__no { color: var(--cl-accent); }
.yun-rkbox__pic {
    flex: 0 0 auto; width: 30px; aspect-ratio: 2 / 3;
    border-radius: 2px; overflow: hidden; background: var(--cl-surface-3);
}
.yun-rkbox__pic img { width: 100%; height: 100%; object-fit: cover; }
/* ⚠️ min-width: 0 是 ellipsis 的前提 —— flex 项默认 min-width:auto 不肯收缩，
   不写这行省略号永远不出现，片名会把状态位挤出块外。 */
.yun-rkbox__tt {
    flex: 1 1 auto; min-width: 0;
    font-size: var(--cl-fs-sm);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.yun-rkbox__row:hover .yun-rkbox__tt { color: var(--cl-primary); }
.yun-rkbox__st {
    flex: 0 0 auto; max-width: 40%;
    font-style: normal; font-size: var(--cl-fs-2xs); color: var(--cl-ink-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ==========================================================================
   G. 认证页（登录 / 注册 / 找回密码）—— 单栏居中卡片，不做左右说明栏
   ========================================================================== */
.yun-auth { display: flex; justify-content: center; }
.yun-auth__card {
    width: 100%;
    max-width: 460px;
    padding: clamp(16px, 2vw, 24px);
    background: var(--cl-surface);
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-md);
    box-shadow: var(--cl-sh-1);
}
.yun-auth__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.yun-auth__head h2 { font-size: var(--cl-fs-xl); }
.yun-auth__head span { margin-left: auto; font-size: var(--cl-fs-xs); color: var(--cl-ink-3); }
.yun-auth__head span a { color: var(--cl-primary); font-weight: 600; }
.yun-auth__note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--cl-line);
    font-size: var(--cl-fs-xs);
    color: var(--cl-ink-3);
    line-height: 1.7;
}
.yun-auth__note svg { width: 14px; height: 14px; flex: 0 0 auto; margin-top: 2px; fill: none; stroke: var(--cl-primary); stroke-width: 1.8; }
.yun-auth__helper {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: var(--cl-fs-xs);
    color: var(--cl-ink-3);
}
.yun-auth__helper a { color: var(--cl-primary); }
.yun-auth__helper a:last-child { margin-left: auto; }
.yun-auth__submit { width: 100%; height: 40px; font-size: var(--cl-fs-base); }
/* 备选路径块（找回密码的邮箱/手机/留言板入口）：与主表单同一张卡内，不另开侧栏 */
.yun-auth__alt { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--cl-line); }
.yun-auth__alt h3 { font-size: var(--cl-fs-xs); font-weight: 600; color: var(--cl-ink-2); margin-bottom: 7px; }

.yun-form { display: flex; flex-direction: column; gap: 11px; }
.yun-form__field { display: flex; flex-direction: column; gap: 5px; }
.yun-form__field > label { font-size: var(--cl-fs-xs); color: var(--cl-ink-2); font-weight: 600; }
.yun-form__field input[type="text"],
.yun-form__field input[type="password"],
.yun-form__field input[type="email"],
.yun-form__field select,
.yun-form__field textarea {
    width: 100%;
    height: 38px;
    padding: 0 11px;
    background: var(--cl-surface-2);
    border: 1px solid var(--cl-line-2);
    border-radius: var(--cl-r-sm);
    font-size: var(--cl-fs-sm);
    outline: none;
    transition: border-color var(--cl-t) var(--cl-ease), background var(--cl-t) var(--cl-ease);
}
.yun-form__field textarea { height: auto; min-height: 90px; padding: 9px 11px; line-height: 1.7; }
.yun-form__field select { appearance: none; }
.yun-form__field input:focus, .yun-form__field select:focus, .yun-form__field textarea:focus {
    border-color: var(--cl-primary);
    background: var(--cl-surface);
}
.yun-form__pw, .yun-form__code { position: relative; display: flex; align-items: center; gap: 8px; }
.yun-form__pw input { padding-right: 40px; }
.yun-form__eye {
    position: absolute;
    right: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: var(--cl-r-sm);
    color: var(--cl-ink-3);
}
.yun-form__eye:hover { color: var(--cl-primary); background: var(--cl-primary-s); }
.yun-form__eye svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.yun-form__eye[aria-pressed="true"] { color: var(--cl-accent); }
.yun-form__code { align-items: stretch; }
.yun-form__code input { flex: 1 1 auto; min-width: 0; }
.yun-form__code img {
    flex: 0 0 auto;
    width: 104px;
    height: 38px;
    object-fit: cover;
    border: 1px solid var(--cl-line-2);
    border-radius: var(--cl-r-sm);
    background: var(--cl-surface-2);
    cursor: pointer;
}
.yun-form__send { height: 38px; white-space: nowrap; }
.yun-form__error {
    display: none;
    padding: 7px 10px;
    border-radius: var(--cl-r-sm);
    background: var(--cl-danger-s);
    border-left: 3px solid var(--cl-danger);
    color: var(--cl-danger);
    font-size: var(--cl-fs-xs);
    line-height: 1.7;
}
.yun-form__error[data-show="1"] { display: block; }
.yun-form__notice {
    display: none;
    padding: 7px 10px;
    border-radius: var(--cl-r-sm);
    background: var(--cl-primary-s);
    border-left: 3px solid var(--cl-primary);
    color: var(--cl-primary);
    font-size: var(--cl-fs-xs);
}
.yun-form__notice[data-show="1"] { display: block; }
.yun-form__steps { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 2px; }
.yun-form__steps li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--cl-fs-xs);
    color: var(--cl-ink-3);
}
.yun-form__steps li::before {
    content: attr(data-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px; height: 17px;
    border-radius: 50%;
    background: var(--cl-surface-3);
    color: var(--cl-ink-3);
    font-size: 10px;
    font-weight: 700;
}
.yun-form__steps li.is-active { color: var(--cl-primary); font-weight: 600; }
.yun-form__steps li.is-active::before { background: var(--cl-primary); color: var(--cl-primary-ink); }
.yun-step[data-show="0"] { display: none; }

.yun-auth__done { display: none; text-align: center; padding: 6px 0 2px; }
.yun-auth__done[data-show="1"] { display: block; }
.yun-auth__done h3 { font-size: var(--cl-fs-lg); margin-bottom: 6px; }
.yun-auth__done p { font-size: var(--cl-fs-sm); line-height: 1.8; color: var(--cl-ink-2); }
.yun-auth__done p b { color: var(--cl-accent-d); }
.yun-auth__alt-links { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }

/* 会员中心：顶部胶囊导航（不做左侧栏） */
.yun-user__nav {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px var(--cl-pad);
    background: var(--cl-surface);
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-md);
}
.yun-user__box { margin-top: var(--cl-gap); }

/* ==========================================================================
   H. 错误 / 提示 / 空模板页
   ========================================================================== */
.yun-error { padding: 40px 16px; text-align: center; background: var(--cl-surface); border: 1px solid var(--cl-line); border-radius: var(--cl-r-md); }
.yun-error__code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 30px;
    padding: 0 10px;
    margin-bottom: 10px;
    border: 1px solid var(--cl-accent);
    border-radius: var(--cl-r-sm);
    color: var(--cl-accent);
    font: 700 var(--cl-fs-lg)/1 var(--cl-mono);
}
.yun-error h1 { font-size: var(--cl-fs-xl); }
.yun-error p { margin-top: 8px; font-size: var(--cl-fs-sm); color: var(--cl-ink-2); }
.yun-error__acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.yun-error__wait { margin-top: 12px; font-size: var(--cl-fs-xs); color: var(--cl-ink-3); }
.yun-error__wait b { color: var(--cl-accent-d); font-size: var(--cl-fs-base); }

/* ==========================================================================
   I. 人物（演员 / 角色）网格
   --------------------------------------------------------------------------
   人像比例 3 / 4（不是海报的 2 / 3，避免与影片卡混淆）。
   ⚠️ 取数固定 24 条 → 列数只能取 6 / 4 / 3 / 2（同 cl-grid 的约束）。
   ========================================================================== */
.yun-people {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--cl-gap-xs);
}
.yun-person {
    background: var(--cl-surface);
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-md);
    overflow: hidden;
    transition: border-color var(--cl-t) var(--cl-ease), box-shadow var(--cl-t) var(--cl-ease);
}
.yun-person:hover { border-color: var(--cl-primary); box-shadow: var(--cl-sh-1); }
.yun-person > a { display: block; }
.yun-person__pic {
    display: block;
    aspect-ratio: 3 / 4;
    background: var(--cl-surface-3);
    overflow: hidden;
}
.yun-person__pic img { width: 100%; height: 100%; object-fit: cover; }
.yun-person__body { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px 8px; }
.yun-person__body strong {
    font-size: var(--cl-fs-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.yun-person:hover .yun-person__body strong { color: var(--cl-primary); }
.yun-person__body span {
    font-size: var(--cl-fs-2xs);
    color: var(--cl-ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==========================================================================
   J. 留言 / 评论（gbook / comment 共用一套版式）
   ========================================================================== */
.yun-cmt { display: block; }
.yun-cmt__item { display: flex; gap: 10px; padding: 10px 0; }
.yun-cmt__item + .yun-cmt__item { border-top: 1px dashed var(--cl-line); }
.yun-cmt__avatar {
    flex: 0 0 auto;
    width: 32px; height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--cl-surface-3);
}
.yun-cmt__avatar img { width: 100%; height: 100%; object-fit: cover; }
.yun-cmt__copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.yun-cmt__copy > header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.yun-cmt__copy > header b { font-size: var(--cl-fs-sm); font-weight: 600; }
.yun-cmt__copy > header span { font-size: var(--cl-fs-2xs); color: var(--cl-ink-3); }
.yun-cmt__copy > p {
    font-size: var(--cl-fs-sm);
    line-height: 1.75;
    color: var(--cl-ink-2);
    overflow-wrap: anywhere;
}
/* 管理员回复：缩进一块，不另起新卡（列表里出现嵌套卡会显得零碎） */
.yun-cmt__reply {
    margin-top: 5px;
    padding: 6px 9px;
    border-left: 2px solid var(--cl-primary);
    border-radius: 0 var(--cl-r-sm) var(--cl-r-sm) 0;
    background: var(--cl-surface-2);
    font-size: var(--cl-fs-xs);
    line-height: 1.7;
    color: var(--cl-ink-2);
}
.yun-cmt__reply b { color: var(--cl-primary); font-weight: 600; }
/* 「我的评论」里标注评论对象的一行（比正文更弱）。
   注意必须写成 .yun-cmt__copy > p.yun-cmt__meta —— 上面 .yun-cmt__copy > p 的
   特异度(0,1,1)高于单个类名(0,1,0)，只写 .yun-cmt__meta 会被它盖掉。 */
.yun-cmt__copy > p.yun-cmt__meta { font-size: var(--cl-fs-2xs); color: var(--cl-ink-3); line-height: 1.6; }
/* 子级评论（comment 的 $vo.sub）同样缩进，不再递归 */
.yun-cmt__sub { margin-top: 6px; padding-left: 10px; border-left: 1px dashed var(--cl-line-2); }
.yun-cmt__sub .yun-cmt__item:first-child { padding-top: 0; }

/* ==========================================================================
   K. 关卡式单栏卡（二次确认 / 访问密码 / 播放密码）
   ⚠️ 只用一个窄卡，不做左右说明栏。
   ========================================================================== */
.yun-gate { max-width: 460px; }
.yun-gate__acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* 播放器容器页（vod/player，AJAX 换线路时只渲染这一块） */
.yun-playerwrap { background: #08181d; border-radius: var(--cl-r-md); overflow: hidden; }

/* 试看结束提示（只出现在 vod/player 独立播放器页，受限播放时才有 DOM） */
.yun-player-hint {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(6, 16, 29, .82);
    color: #fff;
    text-align: center;
}
.yun-player-hint[hidden] { display: none; }
.yun-player-hint > div {
    max-width: 380px;
    padding: 22px 20px;
    background: rgba(18, 38, 46, .96);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--cl-r-md);
}
.yun-player-hint > div > p:first-child { font-size: var(--cl-fs-lg); font-weight: 700; }
.yun-player-hint__note { margin-top: 8px; font-size: var(--cl-fs-sm); color: rgba(255, 255, 255, .72); }
.yun-player-hint__acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

/* 命中统计行（详情 / 播放）：标签与数字分开两个元素 —— 同一个元素里放标签和数字，
   回填后 ::before 的标签会连字号颜色一起被 .mac_hits 的样式接管。 */
.yun-hits {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    padding: 9px var(--cl-pad);
    margin-top: var(--cl-gap);
    background: var(--cl-surface);
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-md);
    font-size: var(--cl-fs-xs);
}
.yun-hits__i { display: inline-flex; align-items: baseline; gap: 5px; color: var(--cl-ink-3); }
.yun-hits__i em { font-style: normal; }
.yun-hits__i .mac_hits:empty::after { content: "—"; color: var(--cl-line-2); }
.yun-hits__i .mac_hits:not(:empty) {
    font: 700 var(--cl-fs-sm)/1 var(--cl-mono);
    color: var(--cl-primary);
}

/* ==========================================================================
   L. 分集剧情（vod/plot）
   ========================================================================== */
.yun-plots { border: 1px solid var(--cl-line); border-radius: var(--cl-r-md); overflow: hidden; }
.yun-plots__item { padding: 10px var(--cl-pad); }
.yun-plots__item + .yun-plots__item { border-top: 1px dashed var(--cl-line); }
.yun-plots__item h3 { font-size: var(--cl-fs-md); margin-bottom: 4px; }
.yun-plots__item h3 b { color: var(--cl-accent); font: 600 var(--cl-fs-sm)/1 var(--cl-mono); margin-right: 5px; }
.yun-plots__item p { font-size: var(--cl-fs-sm); line-height: 1.78; color: var(--cl-ink-2); overflow-wrap: anywhere; }

/* 下载线路（vod/down）：复用 cl-rows 的文字榜形态 */
.yun-dl__from {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--cl-line);
    font-size: var(--cl-fs-sm);
    font-weight: 700;
    color: var(--cl-primary);
}
.yun-dl__from span { margin-left: auto; font-size: var(--cl-fs-2xs); font-weight: 400; color: var(--cl-ink-3); }

/* ==========================================================================
   M. 会员中心数据区（收藏 / 播放记录 / 订单 / 积分…）
   --------------------------------------------------------------------------
   两套形态，按数据形状选：
     · .yun-ulog  —— 一条一条的「有缩略图的内容记录」（收藏 / 观看 / 下载）
     · .yun-table —— 列结构固定的账目流水（订单 / 充值卡 / 提现 / 积分）
   ========================================================================== */
.yun-ulog { border: 1px solid var(--cl-line); border-radius: var(--cl-r-md); overflow: hidden; }
.yun-ulog__item { display: flex; align-items: center; gap: 10px; padding: 8px var(--cl-pad); }
.yun-ulog__item + .yun-ulog__item { border-top: 1px dashed var(--cl-line); }
.yun-ulog__pic {
    flex: 0 0 auto;
    width: 44px;
    aspect-ratio: 2 / 3;
    border-radius: var(--cl-r-sm);
    overflow: hidden;
    background: var(--cl-surface-3);
}
.yun-ulog__pic img { width: 100%; height: 100%; object-fit: cover; }
.yun-ulog__copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.yun-ulog__copy b { font-size: var(--cl-fs-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yun-ulog__copy b a:hover { color: var(--cl-primary); }
.yun-ulog__copy span { font-size: var(--cl-fs-2xs); color: var(--cl-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yun-ulog__meta { flex: 0 0 auto; text-align: right; font-size: var(--cl-fs-2xs); color: var(--cl-ink-3); font-variant-numeric: tabular-nums; }
.yun-ulog__meta em { display: block; font-style: normal; color: var(--cl-primary); font-weight: 600; }

/* ⚠️ 类名是 .yun-mtable 不是 .yun-table —— 首页更新清单已经占了 .yun-table
   （见本文档 A2 段）。两者曾经同名，M 段在源序靠后 → 把首页表格的
   td padding / vertical-align 一起改掉、还给每行加了条虚线底边。
   会员中心这族表格的列结构固定（账目流水），跟首页的「影片清单」不是一回事，
   分开命名后两边互不干扰。 */
.yun-mtable { width: 100%; border-collapse: collapse; font-size: var(--cl-fs-sm); }
.yun-mtable th,
.yun-mtable td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px dashed var(--cl-line); }
.yun-mtable th {
    font-size: var(--cl-fs-xs);
    font-weight: 600;
    color: var(--cl-ink-3);
    background: var(--cl-surface-2);
    border-bottom: 1px solid var(--cl-line);
    white-space: nowrap;
}
.yun-mtable td { color: var(--cl-ink-2); }
.yun-mtable tbody tr:last-child td { border-bottom: 0; }
.yun-mtable tbody tr:hover td { background: var(--cl-primary-s); }
.yun-mtable__wrap { border: 1px solid var(--cl-line); border-radius: var(--cl-r-md); overflow-x: auto; }
.yun-mtable__wrap .cl-pager { padding-inline: var(--cl-pad); }
/* 金额 / 积分列：等宽数字 + 正负区分（不加「+」号 —— 负数会拼成 "+-100"） */
.yun-mtable__num { font-variant-numeric: tabular-nums; font-weight: 600; }
.yun-mtable__num.is-plus { color: var(--cl-accent-d); }
.yun-mtable__num.is-minus { color: var(--cl-ink-3); }

/* 权限矩阵（user/popedom）：用真实 <table>（.yun-table）而不是自造 grid ——
   Controller 给每个分类填充的维度数**不固定**（mid=1 填 5 列，mid≠1 只填 2 列，
   见 User::popedom() 里的 break），固定列的 grid 一定会在某一类上错位。 */
.yun-pd { font-style: normal; font-weight: 600; white-space: nowrap; }
.yun-pd.is-ok { color: var(--cl-accent-d); }
.yun-pd.is-no { color: var(--cl-line-2); }
.yun-pd__name { font-weight: 600; color: var(--cl-ink); }
.yun-pd__name i { font-style: normal; font-weight: 400; font-size: var(--cl-fs-2xs); color: var(--cl-ink-3); padding-left: 6px; }

/* 会员组卡片（user/upgrade） */
.yun-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--cl-gap-xs); }
.yun-group {
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-md);
    padding: var(--cl-pad);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.yun-group.is-cur { border-color: var(--cl-accent); background: var(--cl-accent-s); }
.yun-group h3 { font-size: var(--cl-fs-md); }
.yun-group h3 i { font-style: normal; font-size: var(--cl-fs-2xs); color: var(--cl-accent-d); padding-left: 5px; }
.yun-group p { font-size: var(--cl-fs-xs); line-height: 1.7; color: var(--cl-ink-2); }
.yun-group p b { color: var(--cl-primary); font: 700 var(--cl-fs-base)/1.4 var(--cl-mono); }

/* 提交行：按钮 + 右侧说明（留言/评论/报错/关卡页共用） */
.yun-form__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.yun-form__actions .yun-form__notice { margin-top: 0; }

/* 扫码支付（user/payment_weixin）：单栏居中，不做左右分栏 */
.yun-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.yun-qr img {
    width: 200px;
    height: 200px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-sm);
}
.yun-qr > p { font-size: var(--cl-fs-sm); color: var(--cl-ink-2); }
.yun-qr > p b { color: var(--cl-primary); font-size: var(--cl-fs-md); }
.yun-qr__hint { color: var(--cl-ink-3); font-size: var(--cl-fs-xs); }

/* 头像上传（user/portrait）：预览 + 选文件一行放，窄屏自动换行 */
.yun-upload { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.yun-upload__pic {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--cl-surface-3);
    border: 1px solid var(--cl-line);
}
.yun-upload__pic img { width: 100%; height: 100%; object-fit: cover; }
.yun-upload__field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.yun-upload__field > label { font-size: var(--cl-fs-xs); color: var(--cl-ink-2); font-weight: 600; }
.yun-upload input[type="file"] { font-size: var(--cl-fs-sm); color: var(--cl-ink-2); }

/* ==========================================================================
   M2. 资讯正文的上下篇 / 相关资讯（art/detail）
   --------------------------------------------------------------------------
   上下篇做成 2 列等高链接条；相关资讯复用 .yun-arts + .yun-artcard（同一套资讯卡，
   不再造第二份样式）。
   ========================================================================== */
.yun-neighbor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cl-gap-xs);
    margin-top: var(--cl-gap);
}
.yun-neighbor > a,
.yun-neighbor > span {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 9px var(--cl-pad);
    background: var(--cl-surface);
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-md);
    min-width: 0;
}
.yun-neighbor > a:hover { border-color: var(--cl-primary); }
.yun-neighbor em {
    font-style: normal;
    font-size: var(--cl-fs-2xs);
    color: var(--cl-ink-3);
}
.yun-neighbor b {
    font-size: var(--cl-fs-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.yun-neighbor > a:hover b { color: var(--cl-primary); }
.yun-neighbor > span { color: var(--cl-ink-3); }

/* ==========================================================================
   N. 断点（页面层）
   ========================================================================== */
@media (max-width: 1279.98px) {
    /* 结果网格 / 首页名次卡 / 资讯卡一起降一档：4 → 3 列。
       断点取 1280 而不是 1440：容器 max-width 是 1340px，
       1440 与 1366 两个视口下容器同宽，放在 1440 会出现「同一宽度两种列数」的跳变。 */
    .yun-resultlist,
    .yun-rkcards,
    .yun-ncards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    /* 榜单页分类块：3 → 2 列（块内是 10 行名次，2 列时一块仍有 ~430px） */
    .yun-rkgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) {
    .yun-people { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .yun-fresh__list { grid-template-columns: minmax(0, 1fr); }
    /* 结果网格 / 首页两套卡片再降一档：3 → 2 列 */
    .yun-resultlist,
    .yun-rkcards,
    .yun-ncards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* 资讯详情：两栏并一栏，侧栏落到正文下方 */
    .yun-artwrap { grid-template-columns: minmax(0, 1fr); }
    /* 分类榜索引的分类列收窄一档，把宽度让给「本类前三」 */
    .yun-arts { grid-template-columns: minmax(0, 1fr); }
    .yun-detail__top { grid-template-columns: 150px minmax(0, 1fr); gap: 0 14px; }
    .yun-lines__item > summary { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; }
    .yun-lines__item > summary .yun-lines__num:nth-of-type(2),
    .yun-lines__item > summary .yun-lines__num:nth-of-type(3) { display: none; }
    .yun-map__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 767.98px) {
    .yun-people { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .yun-lead__stage { aspect-ratio: 16 / 9; min-height: 0; }
    .yun-slide__cap { max-width: 100%; padding: 12px; }
    .yun-slide__t { font-size: var(--cl-fs-lg); }
    .yun-slide__meta { display: none; }           /* 窄屏只留片名，别盖住画面 */
    .yun-detail__top { grid-template-columns: 108px minmax(0, 1fr); }
    .yun-detail__title { font-size: var(--cl-fs-lg); }
    .yun-linerow { gap: 10px; }
    .yun-filter__row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
    .yun-filter__row > strong { line-height: 1.6; }
    /* 详情页：档案表改单栏（末项线要重新算，两栏的 nth-last-child 规则此时不成立）；
       选集编号格收窄一档；线路表的「首集」列让位（与上面 .yun-table 的 nth-child(3)
       同一列，这里显式再写一次，防止以后改了首页表格列序把线路表带歪）。 */
    .yun-spec { grid-template-columns: minmax(0, 1fr); }
    .yun-spec__i:nth-last-child(-n + 2) { border-bottom: 1px dashed var(--cl-line); }
    .yun-spec__i:last-child { border-bottom: 0; }
    .yun-epgrid { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
    .yun-eplist__hd { flex-wrap: wrap; }
    .yun-ltab__first { display: none; }
    .yun-artcard__pic { width: 84px; }
    .yun-nowbar__switch { margin-left: 0; width: 100%; }
    .yun-switch { width: 100%; }
    .yun-switch__btn { flex: 1 1 auto; max-width: none; justify-content: center; }
    .yun-searchbox .cl-search { display: flex; }
    .yun-neighbor { grid-template-columns: minmax(0, 1fr); }
    /* 播放器内的入口面板：窄屏优先保住主按钮，说明文字让位 */
    .yun-ext__note { display: none; }
    .yun-ext__plats > em { display: none; }
    .yun-ext { padding: 14px; }
    .yun-srcsbar__list { margin-left: 0; }
    /* 线路表：窄屏让掉「首集」列（与「最新集」重复，留一个入口就够）。
       ⚠️ 这里改成只认 .yun-ltab__first —— 原先写的是 .yun-table 的第 3 个 th/td，
         那是给榜单页那张 5 列表格定的；榜单页 2026-09-25 已改成分类块（不再有表），
         通用 nth-child 规则从此变成「未来任何 yun-table 都会被砍掉第 3 列」的雷。 */
    .yun-ltab__first { display: none; }
    /* 结果网格：一行一条，回到大信息行的读法 */
    .yun-resultlist { grid-template-columns: minmax(0, 1fr); }
    /* 榜单页分类块：2 → 1 列（窄屏下 2 列每块只剩 ~170px，片名 3 个字就截断） */
    .yun-rkgrid { grid-template-columns: minmax(0, 1fr); }
    /* 条件表「频道」行：20 个频道名在窄屏会折成三四行，把筛选表撑到半屏高
       → 只藏 dd（那排频道链接），dt 留着 —— 页面唯一 H1 就挂在 dt 上，藏不得。 */
    .yun-conds__row--chan { grid-template-columns: minmax(0, 1fr); }
    .yun-conds__row--chan > dd { display: none; }
}
@media (max-width: 639.98px) {
    /* 首页两套卡片在手机上再降一档：2 → 1 列。
       375px 视口下 2 列的名次卡只有 ~170px，名次 + 海报占掉 66px，
       片名只剩 100px（3 个汉字就截断），不如一行一条。 */
    .yun-rkcards,
    .yun-ncards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 479.98px) {
    .yun-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .yun-cmt__avatar { width: 26px; height: 26px; }
    .yun-ext__brand { display: none; }
    .cl-plat, .yun-src { padding: 0 9px 0 4px; }
    .cl-plat img, .yun-src img { width: 16px; height: 16px; }
}

/* ==========================================================================
   A6b. 资讯列表（art/index）剪报墙
   --------------------------------------------------------------------------
   两列横向卡：图右文左，序号做右上角水印，卡片顶沿一条墨青→鬃橙细线。
   与资讯详情页的两栏、首页的缩略图卡网格都不是同一套视觉；
   每张卡固定输出「分类 / 标题 / 摘要 / 相关标签 / 作者 / 分钟时间 /
   阅读量 / 阅读全文」八组文本，其中分类与标题、阅读全文是真实内链 ——
   比纯日期条目多出可索引文本与内链密度。
   ========================================================================== */
.yun-press {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.yun-press__i {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 156px;
    gap: 14px;
    padding: 15px;
    border: 1px solid var(--cl-line);
    border-radius: var(--cl-r-lg);
    background: var(--cl-surface);
    overflow: hidden;
    transition: border-color var(--cl-t) var(--cl-ease), box-shadow var(--cl-t) var(--cl-ease);
}
/* 顶沿双色细线：悬停自左铺开（与海报卡的封面底线同一套交互语言） */
.yun-press__i::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cl-primary), var(--cl-accent));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--cl-t) var(--cl-ease);
}
.yun-press__i:hover { border-color: var(--cl-line-2); box-shadow: 0 10px 24px rgba(23, 69, 79, .07); }
.yun-press__i:hover::before { transform: scaleX(1); }
.yun-press__body { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.yun-press__top { display: flex; align-items: center; gap: 8px; }
.yun-press__cat {
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--cl-primary-s);
    font-size: var(--cl-fs-2xs);
    font-weight: 600;
    color: var(--cl-primary);
    transition: background var(--cl-t) var(--cl-ease), color var(--cl-t) var(--cl-ease);
}
.yun-press__cat:hover { background: var(--cl-primary); color: var(--cl-primary-ink); }
.yun-press__no {
    margin-left: auto;
    font: 800 28px/1 var(--cl-mono);
    letter-spacing: -.03em;
    color: var(--cl-line);
    font-variant-numeric: tabular-nums;
}
.yun-press__t { font-size: var(--cl-fs-md); font-weight: 700; line-height: 1.5; }
.yun-press__t a { color: var(--cl-ink); }
.yun-press__i:hover .yun-press__t a { color: var(--cl-accent-d); }
.yun-press__ex {
    font-size: var(--cl-fs-xs);
    line-height: 1.75;
    color: var(--cl-ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.yun-press__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.yun-press__tag {
    padding: 1px 8px;
    border: 1px solid var(--cl-line);
    border-radius: 999px;
    background: var(--cl-surface-2);
    font-size: var(--cl-fs-2xs);
    line-height: 1.6;
    color: var(--cl-ink-3);
}
.yun-press__foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: var(--cl-fs-2xs);
    color: var(--cl-ink-3);
}
.yun-press__time { font-style: normal; font-variant-numeric: tabular-nums; }
.yun-press__hits { font-style: normal; }
.yun-press__more { margin-left: auto; font-weight: 600; color: var(--cl-primary); }
.yun-press__more:hover { color: var(--cl-accent-d); }
.yun-press__pic {
    align-self: stretch;
    min-height: 148px;
    border-radius: var(--cl-r-sm);
    overflow: hidden;
    background: var(--cl-surface-3);
}
.yun-press__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--cl-t) var(--cl-ease); }
.yun-press__i:hover .yun-press__pic img { transform: scale(1.05); }

@media (max-width: 1023.98px) {
    .yun-press { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    .yun-press__i { grid-template-columns: minmax(0, 1fr) 104px; gap: 10px; padding: 12px; }
    .yun-press__no { font-size: 23px; }
    .yun-press__pic { min-height: 118px; }
}
@media (max-width: 519.98px) {
    .yun-press__i { grid-template-columns: minmax(0, 1fr); }
    .yun-press__pic { display: none; }
}