/* ==========================================================================
   檐下成影 主题层（ya-theme.css）
   --------------------------------------------------------------------------
   职责：① 主题身份令牌（换肤只改这里的 :root）
        ② oklch 渐进增强（必须写在主题层，写在基础层会被本层覆盖 —— cine 的教训）
        ③ --ya-gap-block 第二处定义（房规：两层都定义）
        ④ 页面专属骨架（yx- 命名空间）

   命名边界：ya- = 结构层通用组件（ya-base.css）｜ yx- = 页面专属（本文件）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 主题身份：坯纸暖白 + 瓦青 + 朱门红
   改主题色改这一块（--ya-accent / --ya-accent-strong / --ya-zhu）
   -------------------------------------------------------------------------- */
:root {
    --ya-bg: #f2f1ea;
    --ya-bg-deep: #e9e8df;
    --ya-surface-1: #ffffff;
    --ya-surface-2: #f7f6f0;
    --ya-surface-3: #ecebe2;

    --ya-line: #c9cdc7;
    --ya-line-soft: #dcded8;

    --ya-text: #24282b;
    --ya-text-soft: #4e545a;
    --ya-text-muted: #878d92;

    --ya-accent: #4f626b;
    --ya-accent-strong: #3a4b53;
    --ya-accent-ink: #ffffff;
    --ya-accent-soft: rgba(79, 98, 107, .1);
    --ya-accent-soft-strong: rgba(79, 98, 107, .2);
    --ya-zhu: #b2422c;
    --ya-zhu-strong: #8e2f1c;
    /* 匾额衬线：品牌章 / 板块题字专用，正文不换衬线 */
    --ya-plaque: "Noto Serif SC", "Source Han Serif SC", "Songti SC", STSong, SimSun, serif;

    --ya-success: #3d7a5c;
    --ya-warning: #b0741a;
    --ya-danger: #c2413a;

    --ya-shell: 1460px;
    --ya-gutter: clamp(12px, 2.6vw, 36px);

    --ya-radius-sm: 6px;
    --ya-radius-md: 10px;
    --ya-radius-lg: 14px;
    --ya-radius-xl: 22px;

    --ya-shadow-sm: 0 1px 2px rgba(36, 40, 43, .04), 0 2px 8px rgba(36, 40, 43, .05);
    --ya-shadow-md: 0 2px 4px rgba(36, 40, 43, .04), 0 10px 26px rgba(36, 40, 43, .07);
    --ya-shadow-lg: 0 4px 10px rgba(36, 40, 43, .05), 0 26px 60px rgba(36, 40, 43, .11);

    --ya-display: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ya-body: var(--ya-display);
    --ya-ease: cubic-bezier(.22, .61, .36, 1);

    /* ⚠️ 房规：--ya-gap-block 必须在基础层与主题层【两层都定义】
       （cine 只在主题层定义 → 不加载主题层时全部 margin 失效回落到 0） */
    --ya-gap-block: clamp(16px, 1.7vw, 24px);
    --ya-gap-inline: clamp(12px, 1.3vw, 18px);

    --ya-header-h: 62px;

    color-scheme: light;
}

@media (max-width: 767.98px) {
    :root {
        --ya-gap-block: 14px;
        --ya-gap-inline: 10px;
        --ya-radius-lg: 12px;
        --ya-radius-xl: 18px;
    }
}

/* --------------------------------------------------------------------------
   2. oklch 渐进增强
   ⚠️ 必须写在这里（主题层），写在基础层会被本层的 :root 覆盖（cine/solar 的教训）
   色彩空间纪律：坯纸表面锁 105；瓦灰线锁 125~130；玄墨文字锁 255；
                瓦青强调锁 228；朱门点睛锁 30
   -------------------------------------------------------------------------- */
@supports (color: oklch(50% 0.1 20)) {
    :root {
        --ya-bg: oklch(95.6% .009 105);
        --ya-bg-deep: oklch(92.2% .013 105);
        --ya-surface-1: oklch(100% 0 0);
        --ya-surface-2: oklch(96.6% .009 105);
        --ya-surface-3: oklch(93.2% .013 105);
        --ya-line: oklch(83.6% .014 130);
        --ya-line-soft: oklch(89.6% .01 125);
        --ya-text: oklch(25% .013 255);
        --ya-text-soft: oklch(42% .014 255);
        --ya-text-muted: oklch(62% .012 255);
        --ya-accent: oklch(47% .027 228);
        --ya-accent-strong: oklch(38% .025 228);
        --ya-accent-soft: oklch(47% .027 228 / .1);
        --ya-accent-soft-strong: oklch(47% .027 228 / .2);
        --ya-zhu: oklch(50% .125 30);
        --ya-zhu-strong: oklch(40% .115 30);
    }
}

/* --------------------------------------------------------------------------
   3. 页面骨架：首页（yx-）
   布局身份 = 顶部焦点带 + 通栏单列内容流
   ⚠️ 本模板【没有左侧频道栏】：频道菜单是全站导航，常驻顶栏（见 ya-base.css 第 6 节）。
      不要再把首页改回两栏 —— 频道菜单跟随顶栏在任意页面都能切，左栏是重复入口。
   -------------------------------------------------------------------------- */

/* 3.0 首页根容器：本身不设内边距，纵向节奏交给下面 3.0b 的 .ya-shell */
.yx-home { display: block; }

/* 3.0b 页面纵向节奏的唯一承载者
   ⚠️ 房规：yx- 页面根只包一层 .ya-shell，若把 gap 写在根上（只有一个子元素）
      等于没写 → 所有板块会紧贴在一起。gap 必须落在 .ya-shell 上。 */
.yx-home > .ya-shell,
.yx-channel > .ya-shell,
.yx-catalog > .ya-shell,
.yx-search > .ya-shell,
.yx-latest > .ya-shell,
.yx-detail > .ya-shell,
.yx-play > .ya-shell,
.yx-rank > .ya-shell,
.yx-art > .ya-shell,
.yx-simple > .ya-shell {
    display: grid;
    gap: var(--ya-gap-block);
    align-content: start;
    padding-block: clamp(10px, 1.1vw, 14px) clamp(30px, 3.6vw, 48px);
}

/* 3.1 焦点带：轮播主卡（自动轮换 + 左右切换 + 圆点）+ 3 条速览
   行为在 ya-main.js §9，JS 只切 data-active / aria-current / inert */
.yx-spot {
    display: grid;
    grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr);
    gap: var(--ya-gap-inline);
    align-items: stretch;
}

.yx-spot__hero {
    position: relative;
    min-height: 300px;
    border-radius: var(--ya-radius-lg);
    overflow: hidden;
    background: var(--ya-surface-3);
    box-shadow: var(--ya-shadow-md);
}
/* 轨道与所有 slide 都绝对定位铺满、叠在同一位置 —— 切换 = opacity 交叉淡入，
   JS 不需要算任何位移（房规：JS 只切 data-active，视觉全在 CSS）；
   容器自己管尺寸（桌面 min-height / 窄屏 aspect-ratio），轨道永远跟随 */
.yx-spot__track { position: absolute; inset: 0; }
.yx-spot__slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    transition: opacity .6s var(--ya-ease);
}
.yx-spot__slide[data-active] { opacity: 1; }
.yx-spot__slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--ya-ease);
}
.yx-spot__slide:hover img { transform: scale(1.035); }
.yx-spot__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgba(12, 18, 15, 0) 34%, rgba(12, 18, 15, .78) 100%);
}
.yx-spot__cap {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: grid;
    gap: 8px;
    padding: clamp(16px, 2vw, 26px);
    color: #f3f7f4;
}
.yx-spot__cap .k {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--ya-accent);
    color: var(--ya-accent-ink);
    font-size: 11.5px;
    font-weight: 600;
}
.yx-spot__cap h2 { font-size: clamp(20px, 2.3vw, 29px); }
.yx-spot__cap p {
    max-width: 56ch;
    font-size: 13.5px;
    opacity: .84;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.yx-spot__cap .acts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 4px; }

/* 轮播切换按钮：半透明白圆钮 + 柔和投影，照片上任意底色都可读；
   无 border（线条纪律），与顶栏抽屉按钮同一套「白卡片」语言。
   ⚠️ 钉在海报顶部（top:14px），不做垂直居中 —— 文案区是底部锚定且高度
      随数据浮动（角标/标题/2行简介/按钮 ≈ 190-280px），主卡高度又被右侧
      速览列撑成 300~850px 不等：任何居中/百分比位置在某个高度下都会压字，
      顶部是唯一永远碰不到文案的位置 */
.yx-spot__nav {
    position: absolute;
    top: 14px;
    z-index: 3;
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    appearance: none;
    background: rgba(255, 255, 255, .86);
    color: var(--ya-text);
    cursor: pointer;
    box-shadow: var(--ya-shadow-sm);
    backdrop-filter: blur(6px);
    transition: background-color .18s var(--ya-ease), transform .12s var(--ya-ease);
}
.yx-spot__nav:hover { background: #fff; }
.yx-spot__nav:active { transform: scale(.93); }
.yx-spot__nav--prev { left: 14px; }
.yx-spot__nav--next { right: 14px; }
.yx-spot__nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.1; }

/* 圆点指示器：按钮本体 18px 保证触控面积，圆点画在 ::before 上
   激活态拉长成胶囊；白色在底部暗渐变上最稳（海报底色不可控） */
.yx-spot__dots {
    position: absolute;
    right: 16px;
    bottom: 14px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 2px;
}
.yx-spot__dot {
    display: inline-grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    appearance: none;
    background: none;
    cursor: pointer;
}
.yx-spot__dot::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(243, 247, 244, .55);
    transition: width .25s var(--ya-ease), background-color .25s var(--ya-ease);
}
.yx-spot__dot:hover::before { background: rgba(243, 247, 244, .85); }
.yx-spot__dot[aria-current]::before { width: 20px; background: #fff; }

.yx-spot__side {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 16px;
    border-radius: var(--ya-radius-lg);
    background: var(--ya-surface-1);
    box-shadow: var(--ya-shadow-sm);
}
.yx-spot__side h2 { display: flex; align-items: center; font-size: 15px; margin-bottom: 2px; }

.yx-spot__item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    padding: 7px;
    border-radius: var(--ya-radius-sm);
    transition: background-color .18s var(--ya-ease);
}
.yx-spot__item:hover { background: var(--ya-surface-2); }
.yx-spot__item .pic {
    position: relative;
    display: block;
    aspect-ratio: 2 / 3;
    border-radius: 9px;
    overflow: hidden;
    background: var(--ya-surface-3);
}
.yx-spot__item .pic img { width: 100%; height: 100%; object-fit: cover; }
.yx-spot__item .tt { display: grid; gap: 3px; min-width: 0; }
.yx-spot__item .tt b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yx-spot__item .tt em { font-style: normal; font-size: 12px; color: var(--ya-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 3.2 场景胶片带 */
.yx-strip { display: grid; gap: 10px; }
.yx-strip__head { display: flex; align-items: baseline; gap: 10px; }
.yx-strip__head h2 { font-size: 17px; }
.yx-strip__head em { font-style: normal; font-size: 12.5px; color: var(--ya-text-muted); }
.yx-strip__head a { margin-left: auto; font-size: 13px; color: var(--ya-accent-strong); }
.yx-strip__rail > * { width: 152px; }
@media (max-width: 767.98px) { .yx-strip__rail > * { width: 112px; } }

/* 3.3 频道楼层：等大网格
   num=12 与 6 列 × 2 行自洽（4 列断点 = 3 行，同样整除）
   ⚠️ 不设「首卡放大」：首卡 span 2×2 时海报要改成 3:4 才不塌，
      与同层其余 2:3 卡片不同高，整层会凸出一块大图；且首卡吃掉 4 格后
      num 只能取 9，6 列断点变成 1.5 行、末行残缺（需求方已明确否决该形态）。
      放大首卡属于 cine 的识别特征，本模板不做。 */
.yx-floor {
    display: grid;
    gap: 12px;
    padding: clamp(13px, 1.4vw, 18px);
    border-radius: var(--ya-radius-lg);
    background: var(--ya-surface-1);
    box-shadow: var(--ya-shadow-sm);
}
.yx-floor__head { display: flex; align-items: center; gap: 10px; }
.yx-floor__head .no {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: var(--ya-accent-soft);
    color: var(--ya-accent-strong);
    font-size: 12px;
    font-weight: 700;
}
.yx-floor__head h2 { font-size: 17px; }
.yx-floor__head h2 a:hover { color: var(--ya-accent-strong); }
.yx-floor__head em { font-style: normal; font-size: 12.5px; color: var(--ya-text-muted); }
.yx-floor__head .more { margin-left: auto; font-size: 13px; color: var(--ya-accent-strong); white-space: nowrap; }

.yx-floor__grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px 12px;
}

/* 列数断点：6 → 4 → auto-fill
   ⚠️ 断点必须让【num=12 能整除】，末行才不会残缺：
      6 列 = 正好 2 行、4 列 = 正好 3 行。
      不要照抄 .yx-grid--fixed6 的 5 列断点 —— 那是给分页列表用的（num=48，
      末行不满属正常，show.html 里有说明）；楼层是首页门面，
      12 张卡排成 5 列会剩 2 张孤零零挂在第三行，比整齐的 2 行难看得多。
   ⚠️ 改列数必须同改 index.html 的 num（12 是对 6 和 4 都整除的最小值）。 */
@media (max-width: 1199.98px) {
    .yx-floor__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* 焦点带 ⊿ 移动端适配（原缺失：≤1023.98 时 1.72fr/1fr 会把主推卡压到 ~200px）
   ≤1023.98 上下堆叠；≤767.98 主推卡转 16:10 裁切、速览列表转横排 */
@media (max-width: 1023.98px) {
    .yx-spot { grid-template-columns: minmax(0, 1fr); }
    .yx-spot__hero { min-height: 260px; }
    .yx-spot__side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .yx-spot__side h2 { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    .yx-spot__hero { min-height: 0; aspect-ratio: 16 / 10; }
    .yx-spot__cap { padding: 14px; }
    .yx-spot__cap p { display: none; }
    /* 箭头位置全局统一（钉在海报顶部，见基础规则注释），窄屏只改尺寸 */
    .yx-spot__nav { width: 30px; height: 30px; }
    .yx-spot__nav svg { width: 15px; height: 15px; }
    .yx-spot__nav--prev { left: 10px; }
    .yx-spot__nav--next { right: 10px; }
    .yx-spot__dots { right: 12px; bottom: 10px; }
    .yx-spot__side { grid-template-columns: minmax(0, 1fr); }
    /* 速览项改横排（左小图 + 右标题），比竖排卡片更省竖向空间 */
    .yx-spot__item { grid-template-columns: 48px minmax(0, 1fr); align-items: center; }
    .yx-spot__item .pic { aspect-ratio: 2 / 3; }
}

@media (max-width: 767.98px) {
    .yx-floor { padding: 14px; }
    .yx-floor__grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 12px 10px; }
}

/* 3.4 资讯带 */
.yx-news { display: grid; gap: 10px; }
.yx-news__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 1023.98px) { .yx-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .yx-news__grid { grid-template-columns: minmax(0, 1fr); } }

.yx-news-card {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: var(--ya-radius-md);
    background: var(--ya-surface-1);
    box-shadow: var(--ya-shadow-sm);
    transition: transform .2s var(--ya-ease), box-shadow .2s var(--ya-ease);
}
.yx-news-card:hover { transform: translateY(-2px); box-shadow: var(--ya-shadow-md); }
.yx-news-card .pic {
    aspect-ratio: 16 / 9;
    border-radius: 10px;
    overflow: hidden;
    background: var(--ya-surface-3);
}
.yx-news-card .pic img { width: 100%; height: 100%; object-fit: cover; }
.yx-news-card .k { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ya-text-muted); }
.yx-news-card .k b { color: var(--ya-accent-strong); font-weight: 600; }
.yx-news-card strong { font-size: 14.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yx-news-card em {
    font-style: normal;
    font-size: 12.5px;
    color: var(--ya-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   4. 页面骨架：频道页 / 筛选页 / 搜索页 / 最新页（同一族：紧凑页头 + 网格）
   ⚠️ 头部一律面包屑 + 12.5px 小字，禁止大字 Hero（项目硬约定）
   -------------------------------------------------------------------------- */
.yx-channel,
.yx-catalog,
.yx-search,
.yx-latest { display: block; }

/* 频道切换条：胶囊，无下划线 */
.yx-channel__switch { display: flex; flex-wrap: wrap; gap: 7px; }
.yx-channel__switch a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 15px;
    border-radius: 999px;
    background: var(--ya-surface-1);
    box-shadow: var(--ya-shadow-sm);
    font-size: 13px;
    color: var(--ya-text-soft);
}
.yx-channel__switch a:hover { color: var(--ya-accent-strong); }
.yx-channel__switch a.is-active {
    background: var(--ya-accent);
    color: var(--ya-accent-ink);
    font-weight: 600;
    box-shadow: none;
}
.yx-channel__switch .filter {
    background: var(--ya-surface-2);
    color: var(--ya-text-soft);
    box-shadow: none;
}
.yx-channel__switch .filter svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }

/* 影片网格：固定列 + 锁行（首页/详情/播放推荐）或 auto-fill（长列表）
   所有列一律 minmax(0, 1fr) 防内容撑破 */
.yx-grid {
    display: grid;
    gap: 16px 12px;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.yx-grid--fixed6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.yx-grid--wide { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

@media (max-width: 1499.98px) { .yx-grid--fixed6 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1199.98px) { .yx-grid--fixed6 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
    .yx-grid, .yx-grid--fixed6, .yx-grid--wide {
        grid-template-columns: repeat(auto-fill, minmax(106px, 1fr));
        gap: 12px 10px;
    }
}

/* 筛选页：单列（筛选面板整幅在上 + 结果网格在下），无分栏、无吸附侧栏。
   ⚠️ 结果网格直接复用 .yx-grid--fixed6（与频道页同一套列数断点）。
      曾经这里只有一句 display:grid 而没有列定义 → 隐式单列，
      每张卡占满整行、海报 2:3 拉到近千像素高，整页只剩「一张巨图」。 */

/* 搜索页自带搜索框：顶栏那款是「动作组内定宽」，搜索页要铺满整行 */
.yx-search__form { width: 100%; min-height: 48px; }

/* --------------------------------------------------------------------------
   5. 页面骨架：详情页 yx-detail
   顶卡：左海报 + 右信息；下方全宽信息块；再下维度墙
   -------------------------------------------------------------------------- */
.yx-detail { display: block; }

.yx-detail__hero {
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    gap: clamp(14px, 1.6vw, 22px);
    padding: clamp(14px, 1.5vw, 20px);
    border-radius: var(--ya-radius-lg);
    background: var(--ya-surface-1);
    box-shadow: var(--ya-shadow-md);
}
.yx-detail__poster {
    position: relative;
    /* ⚠️ 必须显式写 width:100%：本列在 ≥1024 会被 stretch 拉高，
       而 aspect-ratio 在「高已确定、宽为 auto」时会反算宽度（418 × 2/3 = 279px），
       宽出 224px 的列宽 → 海报直接压在正文上、把「导演/主演」这些 dt 标签盖掉。
       宽度定死成列宽后，aspect-ratio 只参与行高的最小贡献，不再参与定宽。 */
    width: 100%;
    border-radius: var(--ya-radius-md);
    overflow: hidden;
    background: var(--ya-surface-3);
    aspect-ratio: 2 / 3;
}
.yx-detail__poster img { width: 100%; height: 100%; object-fit: cover; }
.yx-detail__poster i {
    position: absolute;
    right: 8px;
    top: 8px;
    z-index: 2;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--ya-accent);
    color: var(--ya-accent-ink);
    font-size: 12.5px;
    font-style: normal;
    font-weight: 700;
}
.yx-detail__poster i strong { font-size: 15px; }

.yx-detail__body { display: grid; align-content: start; gap: 12px; min-width: 0; }
.yx-detail__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--ya-text-muted);
}
.yx-detail__eyebrow a { color: var(--ya-text-soft); }
.yx-detail__eyebrow a:hover { color: var(--ya-accent-strong); }
.yx-detail__eyebrow em { font-style: normal; padding: 3px 9px; border-radius: 999px; background: var(--ya-surface-2); }
.yx-detail__eyebrow svg.sep { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; opacity: .5; }
.yx-detail__title { font-size: clamp(21px, 2.4vw, 30px); }
.yx-detail__acts { display: flex; flex-wrap: wrap; gap: 9px; }
.yx-detail__dims { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.yx-detail__dims .dlab { font-size: 12px; color: var(--ya-text-muted); margin-left: 4px; }
.yx-detail__dims a {
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--ya-surface-2);
    font-size: 12.5px;
}
.yx-detail__dims a:hover { background: var(--ya-accent-soft); color: var(--ya-accent-strong); }

/* 顶卡第三栏「速览」—— 填掉右侧那片空白。
   ⚠️ ≥1024 才升三栏：更窄时正文列会被挤到 320px 以下，长片名会折成多行反而更难看；
      窄屏让它整幅落到顶卡下方（grid-column: 1 / -1），呈一条横向信息带。
   ⚠️ 列宽给 minmax 下限而不是固定值：aside 只在 260~320px 间浮动，
      正文列用 minmax(320px, 1fr) 兜住「长片名 + 事实表」的最小可读宽度。 */
@media (min-width: 1024px) {
    .yx-detail__hero {
        grid-template-columns: 224px minmax(320px, 1fr) minmax(260px, 320px);
        /* ⚠️ 用 stretch 而不是 start：右栏内容比海报高时，start 会把海报留在原高度、
           海报下方空出一块 —— 空白只是从右边挪到左下角。
           stretch 让海报跟着行高走（海报带 aspect-ratio，仍会为行贡献 336px 的最小高度，
           所以不会被压扁，只会被拉长后多裁掉一点边）。 */
        align-items: stretch;
    }
}
/* ≤1023.98px：顶卡退回「海报 + 信息」两列，此时必须把 body 的内容拆成顶卡的直接 grid 项。
   ⚠️ 不拆的话「维度标签 + 事实表」会被关在第二列里（实测只有 216px 宽），
      而海报只占 108×162 —— 海报下方那一整块（约 108×280px）永远是空白（需求方截图反馈）。
   做法：.yx-detail__body 用 display:contents「消失」，它的子元素直接参与顶卡的网格，
      再把后三块显式跨满整行。
   ⚠️ 显式写 grid-row 是必须的：auto-placement 会把它们塞进海报旁边剩余的空格里，
      跨列根本生效不了。
   ⚠️ 海报保持 aspect-ratio（整行高度由它自己贡献），不要改成 stretch ——
      在 768~1023 这个区间海报列有 224px 宽，压扁成"跟随行高"会变成一张横向矮图。 */
@media (max-width: 1023.98px) {
    .yx-detail__hero { align-items: start; }
    .yx-detail__body { display: contents; }
    .yx-detail__poster  { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
    .yx-detail__eyebrow { grid-column: 2; grid-row: 1; }
    .yx-detail__title   { grid-column: 2; grid-row: 2; }
    .yx-detail__acts    { grid-column: 2; grid-row: 3; }
    .yx-detail__dims,
    .yx-detail__body .ya-facts { grid-column: 1 / -1; }
    .yx-detail__dims    { grid-row: 4; }
    .yx-detail__body .ya-facts { grid-row: 5; }
    .yx-detail__aside   { grid-column: 1 / -1; grid-row: 6; }
}

/* 768~1023.98：顶卡回到【三栏】（海报 / 首屏信息 / 速览）。
   ⚠️ 这一档如果只用两栏，右侧会出现约 600×170 的空白 ——
      海报列 224px 时海报有 336px 高，而首屏文字（类别行+片名+按钮）只有 ~170px，
      整行高度被海报顶到 336，文字下方那一大片就空着。
   实测速览块高度（数字格+相关搜索+热播榜）也在 270~300px 量级，
   放进第三栏正好补齐这段高度，两侧都不再有空白。
   ⚠️ 必须写在上面那条 ≤1023.98 之后：两个媒体查询在此区间同时命中，
      靠源码顺序决定 .yx-detail__aside 的 grid-column 归属。 */
@media (min-width: 768px) and (max-width: 1023.98px) {
    /* 列宽用 clamp 而不是写死：海报列跟着视口走，让海报高度尽量贴近右栏高度
       （海报 2:3，右栏实测 ~390px；海报列 240px 时海报 360px，两者基本齐平，
       左侧不会再留一大块空白）。768px 时收到 200px，把宽度让给中间的片名与按钮。 */
    .yx-detail__hero { grid-template-columns: clamp(200px, 26vw, 240px) minmax(0, 1fr) 260px; }
    .yx-detail__poster  { grid-column: 1; grid-row: 1 / span 3; }
    .yx-detail__eyebrow { grid-column: 2; grid-row: 1; }
    .yx-detail__title   { grid-column: 2; grid-row: 2; }
    .yx-detail__acts    { grid-column: 2; grid-row: 3; }
    .yx-detail__aside   { grid-column: 3; grid-row: 1 / span 3; }
}

.yx-detail__aside { display: grid; align-content: start; gap: 12px; min-width: 0; }

/* 数字格用 auto-fit 而不是写死列数：格数由数据决定（子站常常只有 1~3 格），
   写死 2 列时单格只占半行、右边又空一块 —— 等于把刚填上的空白换了个地方出现。
   98px 是实测值：320px 右栏里正好放下 3 格（98*3+16=310），格内放得下 4 位数 + 5 字标签。 */
.yx-detail__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(98px, 1fr)); gap: 8px; }
.yx-detail__stat {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border-radius: var(--ya-radius-md);
    background: var(--ya-surface-2);
}
.yx-detail__stat b { font-size: 19px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.yx-detail__stat span { font-size: 11.5px; color: var(--ya-text-muted); }

.yx-detail__meta { display: grid; gap: 4px; }
.yx-detail__meta > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.yx-detail__meta dt { font-size: 12.5px; color: var(--ya-text-muted); }
.yx-detail__meta dd { font-size: 13px; overflow-wrap: anywhere; }

.yx-detail__related { display: grid; gap: 8px; }
.yx-detail__related h3 { font-size: 12px; letter-spacing: .05em; color: var(--ya-text-muted); }
.yx-detail__related-list { display: flex; flex-wrap: wrap; gap: 6px; }
.yx-detail__related-list a {
    /* ⚠️ flex 行内必须 flex:0 0 auto：少这条会被压到比文字还窄、折成两行竖排 */
    flex: 0 0 auto;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--ya-surface-2);
    color: var(--ya-text-soft);
    font-size: 12.5px;
}
.yx-detail__related-list a:hover { background: var(--ya-accent-soft); color: var(--ya-accent-strong); }

/* 右栏第三块：同频道口碑榜（紧凑三/四行，标题即锚文本） */
.yx-detail__top { display: grid; gap: 8px; }
.yx-detail__top h3 { font-size: 12px; letter-spacing: .05em; color: var(--ya-text-muted); }
.yx-detail__top ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.yx-detail__top a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    padding: 4px;
    border-radius: var(--ya-radius-sm);
}
.yx-detail__top a:hover { background: var(--ya-surface-2); }
.yx-detail__top .pic { aspect-ratio: 2 / 3; border-radius: 5px; overflow: hidden; background: var(--ya-surface-3); }
.yx-detail__top .pic img { width: 100%; height: 100%; object-fit: cover; }
.yx-detail__top .tt { display: grid; gap: 2px; min-width: 0; }
.yx-detail__top .tt b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yx-detail__top .tt em { font-style: normal; font-size: 11px; color: var(--ya-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 767.98px) {
    .yx-detail__hero { grid-template-columns: 108px minmax(0, 1fr); gap: 14px; padding: 14px; }
    .yx-detail__title { font-size: 19px; }
    .yx-detail__acts .ya-action { flex: 1 1 auto; }
    /* 手机上海报列只有 108px，让它跟随首屏信息块的高度（stretch）：
       片名一长，首屏块就比 2:3 的海报高，海报下方会重新出现一条空白。
       ⚠️ 只在小屏这么做：768~1023 的海报列有 224px 宽，跟随行高会变成一张横向矮图。
       海报内部是 object-fit:cover，所以拉高只是多裁掉一点边。 */
    .yx-detail__poster { align-self: stretch; min-height: 150px; max-height: 320px; }
    /* 评分胶囊：桌面档的海报列有 224px，55×35 的胶囊占宽度 24%，是正常角标比例；
       但手机上海报列只有 108px，同一个胶囊会占到【宽度 51% + 高度 22%】，
       比旁边的片名还抢眼（需求方截图反馈）。
       ⚠️ 尺寸要【整组一起缩】：光调 font-size 压不下去高度 ——
          胶囊高度实际由 strong(15px) × 继承的 line-height(1.65) = 24.75px 撑起来的，
          所以必须显式写 line-height，否则 35px 的高度纹丝不动。
       缩放后约 40×20px（占海报宽 37%、高 12%），与桌面档的观感对齐。 */
    .yx-detail__poster i {
        right: 6px;
        top: 6px;
        padding: 3px 6px;
        font-size: 10px;
        line-height: 1.25;
    }
    .yx-detail__poster i strong { font-size: 11.5px; }
}

/* 常见问答（详情页专属）。桌面两列铺开，避免六条问答把页面拉得过长 */
.yx-faq { display: grid; gap: 10px; }
.yx-faq__list { display: grid; gap: 10px; margin: 0; }
@media (min-width: 1024px) {
    .yx-faq__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
.yx-faq__item {
    padding: 14px 16px;
    border-radius: var(--ya-radius-md);
    background: var(--ya-surface-1);
    box-shadow: var(--ya-shadow-sm);
}
.yx-faq__item dt h3 { margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.yx-faq__item dd { font-size: 13.5px; line-height: 1.85; color: var(--ya-text-soft); }
.yx-faq__item dd a { color: var(--ya-accent-strong); }
.yx-faq__item dd a:hover { text-decoration: underline; }

/* 维度墙（猜你爱看 / 猜你喜欢） */
.yx-dims { display: grid; gap: var(--ya-gap-block); }
.yx-dim { display: grid; gap: 10px; }

/* --------------------------------------------------------------------------
   6. 页面骨架：播放页 yx-play
   左播放器 + 右速览（桌面）→ 上下堆叠（移动）
   -------------------------------------------------------------------------- */
.yx-play { display: block; }

/* 简介挂载点（详情页 #ya-story / 播放页 #ya-play-story）：
   上下节奏由 .ya-shell 的 gap 承担，这里只兜「内链跳转后标题被吸顶顶栏盖住」的补偿。
   ⚠️ 两页共用同一补偿令牌 --ya-anchor-offset；新增简介挂载点必须登记到这里，
      否则新页面跳转过去标题又会藏到顶栏底下 */
.yx-detail__story,
.yx-play__story { scroll-margin-top: var(--ya-anchor-offset); }

.yx-play__top {
    display: grid;
    grid-template-columns: minmax(0, 2.5fr) minmax(0, .9fr);
    gap: var(--ya-gap-inline);
    align-items: start;
}
@media (max-width: 1023.98px) { .yx-play__top { grid-template-columns: minmax(0, 1fr); } }

.yx-play__side {
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 14px;
    border-radius: var(--ya-radius-lg);
    background: var(--ya-surface-1);
    box-shadow: var(--ya-shadow-sm);
}
.yx-play__side-head { display: flex; align-items: center; gap: 8px; }
.yx-play__side-head h2 { font-size: 14.5px; }
.yx-play__side-head a { margin-left: auto; font-size: 12.5px; color: var(--ya-accent-strong); }
.yx-play__side-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 6px;
    border-radius: var(--ya-radius-sm);
}
.yx-play__side-item:hover { background: var(--ya-surface-2); }
.yx-play__side-item .pic { position: relative; aspect-ratio: 2 / 3; border-radius: 7px; overflow: hidden; background: var(--ya-surface-3); }
.yx-play__side-item .pic img { width: 100%; height: 100%; object-fit: cover; }
.yx-play__side-item .pic i {
    position: absolute;
    right: 3px;
    bottom: 3px;
    padding: 1px 5px;
    border-radius: 999px;
    background: rgba(20, 26, 22, .68);
    color: #f2f6f3;
    font-size: 10.5px;
    font-style: normal;
}
.yx-play__side-item .tt { display: grid; gap: 2px; min-width: 0; }
.yx-play__side-item .tt b { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yx-play__side-item .tt em { font-style: normal; font-size: 11.5px; color: var(--ya-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ≥1024：右栏与左侧播放器【严格等高】
   三件套缺一不可（需求方反馈「右边板块跟左边对不齐」）：
     ① .yx-play__top 的 align-items 由 start 改 stretch
        —— 否则右栏按内容收缩，永远比播放器矮一截（这是最主要的一条）
     ② 右栏转 flex 竖排 + 列表 flex:1
        —— 让列表吃掉「头部以下」的全部高度
     ③ 列表 grid-auto-rows: minmax(0, 1fr)
        —— 6 条均分剩余高度；写成默认的 auto 又回到「按内容堆」了
   海报改「按行高自适应」：列宽 auto + 图片 height:100% 配 aspect-ratio 2/3，
   行高越高海报越大，不必为每个断点手调那个 46px。
   ⚠️ <1024 两栏上下堆叠，等高没有意义，以下全部不生效。 */
@media (min-width: 1024px) {
    /* 行高由播放器令牌决定 —— 这是等高真正的支点。
       ⚠️ 只写 align-items:stretch 是不够的：网格隐式行按【最高子项的内容】定高，
          右栏内容一多（实测 6 条 = 781px）反而会把行撑高，播放器（518px）被留在原地，
          两边差 262px。行高必须由播放器侧给定。 */
    .yx-play__top {
        align-items: stretch;
        grid-template-rows: var(--ya-player-h);
    }
    .yx-play__side {
        display: flex;
        flex-direction: column;
        align-content: normal;
        min-height: 0;
    }
    .yx-play__side-head { flex: 0 0 auto; }
    .yx-play__side-list {
        display: grid;
        grid-auto-rows: minmax(0, 1fr);
        gap: 6px;
        flex: 1 1 auto;
        min-height: 0;
    }
    /* 条目本层改 flex：海报要「按行高定宽」，grid 的 auto 列跟 aspect-ratio 会互相等对方，
       算不出宽度；flex + 显式 height:100% 才是确定的 */
    .yx-play__side-item {
        display: flex;
        align-items: center;
        min-height: 0;
        overflow: hidden;
        grid-template-columns: none;
    }
    .yx-play__side-item .pic {
        flex: 0 0 auto;
        width: auto;
        height: 100%;
        /* 取数不足 6 条时行高会变大，不给上限海报会撑成一张大图 */
        max-height: 104px;
        aspect-ratio: 2 / 3;
    }
    .yx-play__side-item .tt { flex: 1 1 auto; min-width: 0; align-content: center; }
}

/* 播放信息行 */
.yx-nowbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--ya-radius-lg);
    background: var(--ya-surface-1);
    box-shadow: var(--ya-shadow-sm);
}
.yx-nowbar h1,
.yx-nowbar h2 { font-size: clamp(17px, 1.9vw, 22px); }
.yx-nowbar .ep {
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--ya-accent-soft);
    color: var(--ya-accent-strong);
    font-size: 12.5px;
    font-weight: 600;
}
.yx-nowbar__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.yx-nowbar__tags a {
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--ya-surface-2);
    font-size: 12.5px;
    color: var(--ya-text-soft);
}
.yx-nowbar__tags a:hover { background: var(--ya-accent-soft); color: var(--ya-accent-strong); }

@media (max-width: 767.98px) {
    .yx-nowbar { padding: 12px 14px; }
    .yx-nowbar__tags { margin-left: 0; width: 100%; }
}

/* --------------------------------------------------------------------------
   7. 页面骨架：排行榜 yx-rank
   3 个面板 DOM 并存，靠 is-active 切换（房规保留；num 别调太大）
   -------------------------------------------------------------------------- */
.yx-rank { display: block; }
/* ⚠️ 三个面板是 .yx-rank__grid 的兄弟子元素，同时只有 1 个可见。
   若把 2 列定义放在 .yx-rank__grid 上，只有 1 个可见子元素时会缩成半宽 ——
   所以 2 列必须定义在「面板自己」上。 */
.yx-rank__grid { display: grid; }
.yx-rank__panel { display: none; }
.yx-rank__panel.is-active {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ya-gap-inline);
}
@media (max-width: 767.98px) { .yx-rank__panel.is-active { grid-template-columns: minmax(0, 1fr); } }

.yx-rank__card {
    padding: clamp(14px, 1.8vw, 20px);
    border-radius: var(--ya-radius-lg);
    background: var(--ya-surface-1);
    box-shadow: var(--ya-shadow-sm);
}
.yx-rank__card > header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.yx-rank__card > header h3 { font-size: 15px; }
.yx-rank__card > header a { margin-left: auto; font-size: 12.5px; color: var(--ya-accent-strong); }

.yx-rank__item {
    display: grid;
    grid-template-columns: 30px 48px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    min-height: 62px;
    padding: 6px 8px;
    border-radius: var(--ya-radius-sm);
}
.yx-rank__item:hover { background: var(--ya-surface-2); }
.yx-rank__item .no {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--ya-text-muted);
    text-align: center;
}
.yx-rank__item .pic { aspect-ratio: 2 / 3; border-radius: 7px; overflow: hidden; background: var(--ya-surface-3); }
.yx-rank__item .pic img { width: 100%; height: 100%; object-fit: cover; }
.yx-rank__item .tt { display: grid; gap: 2px; min-width: 0; }
.yx-rank__item .tt b { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yx-rank__item .tt em { font-style: normal; font-size: 12px; color: var(--ya-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yx-rank__item .sc { font-size: 13px; font-weight: 700; color: var(--ya-accent-strong); font-variant-numeric: tabular-nums; }
/* 无评分态：破折号弱化。子站多数频道没有评分数据，这是常态而非异常 */
.yx-rank__item .sc--none { color: var(--ya-text-muted); font-weight: 400; }

.yx-rank__card .ya-rows > li:nth-child(1) .no { color: var(--ya-warning); }

@media (max-width: 767.98px) {
    .yx-rank__item { grid-template-columns: 24px minmax(0, 1fr) auto; min-height: 54px; }
    .yx-rank__item .pic { display: none; }
}

/* --------------------------------------------------------------------------
   8. 页面骨架：资讯 yx-art
   -------------------------------------------------------------------------- */
.yx-art { display: block; }
.yx-art__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 316px;
    gap: clamp(20px, 2.6vw, 40px);
    align-items: start;
}
@media (max-width: 1023.98px) { .yx-art__layout { grid-template-columns: minmax(0, 1fr); } }

.yx-art__side { display: grid; gap: 14px; position: sticky; top: calc(var(--ya-header-h) + 16px); }
@media (max-width: 1023.98px) { .yx-art__side { position: static; } }

.yx-art__list { display: grid; gap: 12px; }

.yx-art-card {
    display: grid;
    grid-template-columns: 178px minmax(0, 1fr);
    gap: 14px;
    padding: 12px;
    border-radius: var(--ya-radius-md);
    background: var(--ya-surface-1);
    box-shadow: var(--ya-shadow-sm);
    transition: transform .2s var(--ya-ease), box-shadow .2s var(--ya-ease);
}
.yx-art-card:hover { transform: translateY(-2px); box-shadow: var(--ya-shadow-md); }
/* ⚠️ 卡片网格在 <li> 上、内容在 <a> 里：必须 display:contents，
   否则单个 <a> 只会占第 1 列（178px），正文被挤到旁边 */
.yx-art-card > a { display: contents; }
.yx-art-card .pic { aspect-ratio: 16 / 11; border-radius: 10px; overflow: hidden; background: var(--ya-surface-3); }
.yx-art-card .pic img { width: 100%; height: 100%; object-fit: cover; }
.yx-art-card .bd { display: grid; align-content: start; gap: 7px; min-width: 0; }
.yx-art-card .k { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ya-text-muted); }
.yx-art-card .k b { color: var(--ya-accent-strong); font-weight: 600; }
.yx-art-card h3 { font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.yx-art-card p {
    font-size: 13px;
    color: var(--ya-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (max-width: 767.98px) {
    .yx-art-card { grid-template-columns: 104px minmax(0, 1fr); gap: 11px; }
    .yx-art-card h3 { font-size: 14px; }
    .yx-art-card p { -webkit-line-clamp: 2; }
}

/* 无图卡片（纯文字资讯）：去掉左栏，正文顶到左边 */
.yx-art-card--text-only { grid-template-columns: minmax(0, 1fr); }

/* 侧栏卡片（热门资讯 / 热门影片） */
.yx-art__side-card {
    padding: 14px;
    border-radius: var(--ya-radius-lg);
    background: var(--ya-surface-1);
    box-shadow: var(--ya-shadow-sm);
    display: grid;
    gap: 8px;
}
.yx-art__side-card .ya-section__head h3 { font-size: 15px; }
.yx-art__side-vods { display: grid; gap: 4px; }

/* 正文与上下篇（无分割线，用面层级） */
.yx-art__article {
    padding: clamp(16px, 2vw, 28px);
    border-radius: var(--ya-radius-lg);
    background: var(--ya-surface-1);
    box-shadow: var(--ya-shadow-sm);
    display: grid;
    gap: 16px;
}
.yx-art__article h1 { font-size: clamp(20px, 2.2vw, 26px); }
.yx-art__meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--ya-text-muted); }
.yx-art__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.yx-art__nav a,
.yx-art__nav span {
    padding: 12px 14px;
    border-radius: var(--ya-radius-sm);
    background: var(--ya-surface-2);
    font-size: 13px;
    min-height: 44px;
}
.yx-art__nav span.is-disabled { color: var(--ya-text-muted); opacity: .7; }
@media (max-width: 767.98px) { .yx-art__nav { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------------------------
   9. 页面骨架：演员 / 角色 / 剧情 / 留言（通用简版）
   -------------------------------------------------------------------------- */
.yx-simple { display: block; }
.yx-simple__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 12px;
}
@media (max-width: 767.98px) { .yx-simple__grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); } }

.yx-person {
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: var(--ya-radius-md);
    background: var(--ya-surface-1);
    box-shadow: var(--ya-shadow-sm);
}
.yx-person .pic { aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; background: var(--ya-surface-3); }
.yx-person .pic img { width: 100%; height: 100%; object-fit: cover; }
.yx-person b { font-size: 13.5px; }
.yx-person em { font-style: normal; font-size: 12px; color: var(--ya-text-muted); }
/* 与事实表并排的窄版人物卡 */
.yx-person--mini { width: 140px; flex: 0 0 auto; }

/* 评论 / 留言：无行分割线 */
.yx-comment { display: grid; gap: 12px; }
.yx-comment__item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-radius: var(--ya-radius-md);
    background: var(--ya-surface-2);
}
.yx-comment__item .av {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--ya-surface-3);
}
.yx-comment__item .av img { width: 100%; height: 100%; object-fit: cover; }
.yx-comment__item .bd { display: grid; gap: 5px; min-width: 0; }
.yx-comment__item .bd .k { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; }
.yx-comment__item .bd .k b { font-size: 13px; }
.yx-comment__item .bd .k span { color: var(--ya-text-muted); }

/* --------------------------------------------------------------------------
   10. 工具类（仅布局，不含主题色）
   ⚠️ 排布类只在结构层定义一次（.ya-cluster / .ya-cluster--top），此处不重复
   -------------------------------------------------------------------------- */