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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.ap-searchbox {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: var(--at-pad);
    background: var(--at-surface);
    border: 1px solid var(--at-line);
    border-radius: var(--at-r-md);
}
.ap-searchbox .at-search { flex: 1 1 260px; min-width: 0; }
.ap-searchbox .at-search input { width: 100%; }

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

/* ---- B3. 条件表：频道 / 排序 / 更多条件，一行一类 ----------------------
   用 <dl> 而不是圆角芯片条：芯片条是杂志型模板的通行做法，
   这里换成「条件表」的形态，顺带把每个条件都变成带语义的锚文本。 */
.ap-conds {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--at-line);
    border-radius: var(--at-r-md);
    background: var(--at-surface);
    overflow: hidden;
}
.ap-conds__row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 6px 10px;
    align-items: baseline;
    padding: 7px var(--at-pad);
}
.ap-conds__row + .ap-conds__row { border-top: 1px dashed var(--at-line); }
.ap-conds__row > dt { font-size: var(--at-fs-xs); font-weight: 600; color: var(--at-ink-3); }
.ap-conds__row > dd { display: flex; flex-wrap: wrap; font-size: var(--at-fs-xs); line-height: 1.9; }
.ap-conds__row a { color: var(--at-ink-2); }
.ap-conds__row a + a::before { content: '·'; margin: 0 8px; color: var(--at-line-2); }
.ap-conds__row a:hover { color: var(--at-navy); text-decoration: underline; text-underline-offset: 2px; }
.ap-conds__row a.is-strong { font-size: var(--at-fs-base); color: var(--at-ink); }
.ap-conds__row a.is-cur { color: var(--at-orange-d); font-weight: 600; }
/* 条件表嵌进 .at-sec（外层已经有边框/底色/padding）时，把自身的框和内缩去掉，
   否则会出现「框里再套一个框 + 双份留白」。详情页的「题材与标签」用这个形态。 */
.ap-conds--inset { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.ap-conds--inset .ap-conds__row { padding-inline: 0; }
.ap-conds--inset .ap-conds__row:first-child { padding-top: 2px; }
.ap-conds--inset .ap-conds__row:last-child { padding-bottom: 0; }

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

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

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

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

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

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

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

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

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

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

/* 深色底上的平台入口按钮（与浅色底的 .ap-src 成对，别互相套用） */
.at-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(--at-r-sm);
    background: rgba(255, 255, 255, .07);
    color: #e6eef7;
    font-size: var(--at-fs-xs);
    transition: background var(--at-t) var(--at-ease), color var(--at-t) var(--at-ease), border-color var(--at-t) var(--at-ease);
}
.at-plat img { width: 18px; height: 18px; border-radius: 3px; background: #fff; object-fit: contain; }
.at-plat:hover { background: #fff; border-color: #fff; color: var(--at-ink); }
.at-plat.is-cur { border-color: var(--at-orange); background: var(--at-orange); color: #fff; }

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

.ap-fold { border: 1px solid var(--at-line); border-radius: var(--at-r-md); overflow: hidden; background: var(--at-surface); }
.ap-fold > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px var(--at-pad);
    cursor: pointer;
}
.ap-fold > summary h2 { font-size: var(--at-fs-md); }
.ap-fold > summary em { font-style: normal; font-size: var(--at-fs-xs); color: var(--at-ink-3); }
.ap-fold__label { margin-left: auto; font-size: var(--at-fs-xs); color: var(--at-navy); }
.ap-fold > summary svg { width: 14px; height: 14px; fill: none; stroke: var(--at-ink-3); stroke-width: 2.4; transition: transform var(--at-t) var(--at-ease); }
.ap-fold[open] > summary svg { transform: rotate(180deg); }
.ap-fold__body { padding: 0 var(--at-pad) var(--at-pad); border-top: 1px solid var(--at-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 会把两个侧栏卡片拉到和正文一样高，
      卡片之间被撑出大片空白。 */
.ap-artwrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 312px;
    gap: var(--at-gap);
    align-items: start;
}
.ap-artmain { min-width: 0; display: grid; gap: var(--at-gap); align-content: start; }
.ap-artside {
    display: grid;
    gap: var(--at-gap);
}
/* 侧栏板块：复用区块的观感，但标题字号比正文区的 h2 小一档，不抢主栏 */
.ap-side {
    padding: var(--at-pad);
    background: var(--at-surface);
    border: 1px solid var(--at-line);
    border-radius: var(--at-r-md);
}
.ap-side__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ap-side__head h2 { font-size: var(--at-fs-md); }
.ap-side__head > a { margin-left: auto; font-size: var(--at-fs-2xs); color: var(--at-navy); }
.ap-side__head > a:hover { text-decoration: underline; text-underline-offset: 2px; }

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

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

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

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

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

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

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

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

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

/* ==========================================================================
   H. 错误 / 提示 / 空模板页
   ========================================================================== */
.ap-error { padding: 40px 16px; text-align: center; background: var(--at-surface); border: 1px solid var(--at-line); border-radius: var(--at-r-md); }
.ap-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(--at-orange);
    border-radius: var(--at-r-sm);
    color: var(--at-orange);
    font: 700 var(--at-fs-lg)/1 var(--at-mono);
}
.ap-error h1 { font-size: var(--at-fs-xl); }
.ap-error p { margin-top: 8px; font-size: var(--at-fs-sm); color: var(--at-ink-2); }
.ap-error__acts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.ap-error__wait { margin-top: 12px; font-size: var(--at-fs-xs); color: var(--at-ink-3); }
.ap-error__wait b { color: var(--at-orange-d); font-size: var(--at-fs-base); }

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

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

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

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

/* 试看结束提示（只出现在 vod/player 独立播放器页，受限播放时才有 DOM） */
.ap-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;
}
.ap-player-hint[hidden] { display: none; }
.ap-player-hint > div {
    max-width: 380px;
    padding: 22px 20px;
    background: rgba(14, 26, 43, .96);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--at-r-md);
}
.ap-player-hint > div > p:first-child { font-size: var(--at-fs-lg); font-weight: 700; }
.ap-player-hint__note { margin-top: 8px; font-size: var(--at-fs-sm); color: rgba(255, 255, 255, .72); }
.ap-player-hint__acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

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

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

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

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

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

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

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

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

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

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

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

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