/* ==========================================================================
Cine 深色剧集引擎模板 —— 主题覆盖层（覆盖 wf-base.css 的设计令牌 + 页面骨架）
--------------------------------------------------------------------------
加载顺序：wf-reset.css → wf-base.css → wf.css
- wf-base.css 提供全部页面结构 / 布局组件，且 100% 走 CSS 变量。
- wf.css 只做三件事：
1) 覆写 :root 变量 → 换成"近黑沉浸 + 影院红"独立色板（与其他主题的亮色强调区分）
2) 收紧凑距、精修排版（SEO 语义化友好）
3) 新增 wf-* 命名空间类：详情页/播放页"内容维度驱动"推荐骨架，二者结构刻意不同
========================================================================== */
/* --------------------------------------------------------------------------
1. 设计令牌覆写（后加载、同特异性 → 整站换肤，modern 浏览器同样压过 oklch 块）
-------------------------------------------------------------------------- */
:root {
/* 基底：玄青墨蓝夜海，冷调（长风夜航 · 意境长风影院） */
--wf-bg: #0b1216;
--wf-bg-deep: #070d10;
--wf-surface-1: #111c22;
--wf-surface-2: #16252c;
--wf-surface-3: #1d3038;
--wf-line: #2b434d;
--wf-line-soft: #1a2a31;
--wf-text: #e9f1f3; /* 月白 */
--wf-text-soft: #b6c8ce;
--wf-text-muted: #7e949c;
/* 强调色：霁青冰蓝（长风掠过的冷光，区别于影院红 / 酸柠绿） */
--wf-accent: #40cfd2;
--wf-accent-strong: #74e2e4;
--wf-accent-ink: #04212a;
--wf-accent-soft: rgba(64, 207, 210, .14);
--wf-success: #57d3a3;
--wf-warning: #e9c46a;
--wf-danger: #f2746b;
/* 几何：风帆流线，卡片顶大底小不对称圆角 */
--wf-radius-sm: 6px;
--wf-radius-md: 12px;
--wf-radius-lg: 16px;
--wf-radius-xl: 22px;
--wf-shadow-lg: 0 26px 60px rgba(3, 10, 13, .55);
--wf-shadow-md: 0 12px 30px rgba(3, 10, 13, .42);
--wf-shadow-sm: 0 4px 14px rgba(3, 10, 13, .34);
--wf-shell: 1440px; /* 长风远航，略收窄聚焦 */
--wf-gutter: clamp(12px, 2.6vw, 36px);
--wf-gap-block: clamp(22px, 3.2vw, 40px); /* 板块纵向间隔，比基础层更紧凑 */
/* 长风掠影签名令牌：斜向风掠光带 + 风纹发丝线 */
--wf-gust: linear-gradient(112deg, transparent 0 40%, rgba(116, 226, 228, .16) 47%, rgba(233, 241, 243, .30) 50%, rgba(116, 226, 228, .16) 53%, transparent 60% 100%);
--wf-windline: repeating-linear-gradient(112deg, rgba(64, 207, 210, .18) 0 1px, transparent 1px 10px);
}
/* 连续观看/播放链路上的站点级强调条 */
.wf-action--acid, .wf-btn--primary {
background: var(--wf-accent) !important;
color: #fff !important;
}
.wf-action--acid:hover, .wf-btn--primary:hover {
background: var(--wf-accent-strong) !important;
}
/* --------------------------------------------------------------------------
2. 紧凑与 SEO 语义精修
-------------------------------------------------------------------------- */
body { line-height: 1.6; }
/* 标题锚点语义更好、间距更贴 */
.wf-block-title h2, .wf-section__head h2 { letter-spacing: .01em; }
/* 区块默认纵向节奏略收紧（覆盖基础层的大留白） */
.wf-section, .wf-detail-more, .wf-home-block { margin-bottom: var(--wf-gap-block); }
/* 缩略名：标题不再换得过多，海报卡正文收紧 */
.wf-vod-card__body p { color: var(--wf-text-muted); }
/* 正文阅读优化：max-width 段落控制，利于长文本可读性与 SEO */
.wf-copy, .wf-synopsis, .wf-plot p { max-width: 78ch; }
/* --------------------------------------------------------------------------
3. 内容维度推荐骨架（wf-*：详情页专用 —— 信息中枢，分维度堆叠成行）
detail 页：海报驱动 + 维度标签，纵向往下延展，信息密度高
-------------------------------------------------------------------------- */
.wf-detail-page { padding-bottom: 0; }
.wf-detail-page .wf-shell { display: block; }
/* 面包屑（detail 顶部） */
.wf-crumb {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
font-size: 13px; color: var(--wf-text-muted); padding: 14px 0 2px;
}
.wf-crumb a { color: var(--wf-text-soft); text-decoration: none; }
.wf-crumb a:hover { color: var(--wf-accent); }
.wf-crumb svg { width: 14px; height: 14px; opacity: .6; }
.wf-crumb [aria-current="page"] { color: var(--wf-text); }
/* 内页顶部统一走第 13 节 .wf-pagehead / .wf-pagebar（原 .wf-filter-head / .wf-filter-crumb 已并入） */
/* 维度行（detail 主区一块块往下） */
.wf-dims { margin-top: var(--wf-gap-block); }
.wf-dim + .wf-dim { margin-top: var(--wf-gap-block); }
.wf-dim__head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; margin-bottom: 12px;
}
.wf-dim__title {
display: flex; align-items: center; gap: 8px; min-width: 0;
}
.wf-dim__title svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--wf-accent); }
.wf-dim__title h2 {
font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; line-height: 1.2; margin: 0;
}
.wf-dim__why {
font-size: 13px; color: var(--wf-text-muted); font-weight: 400; margin-left: 4px;
}
.wf-dim__more {
font-size: 13px; color: var(--wf-text-muted); text-decoration: none; white-space: nowrap;
}
.wf-dim__more:hover { color: var(--wf-accent); }
/* 维度行海报墙：横向 auto-fill，最多两行（复用两行自适应思想） */
.wf-dim__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
gap: 12px 12px;
}
/* 维度"胶囊索引"：把当前影片的多个情绪/场景打成可跳转 chip 条，SEO 内链丰富 */
.wf-chipbar {
display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px;
}
.wf-chipbar a {
display: inline-flex; align-items: center; gap: 5px;
font-size: 12.5px; line-height: 1; color: var(--wf-text-soft);
background: var(--wf-surface-2); border: 1px solid var(--wf-line-soft);
border-radius: 999px; padding: 7px 12px; text-decoration: none;
transition: border-color .2s, color .2s, background .2s;
}
.wf-chipbar a:hover { color: var(--wf-accent); border-color: var(--wf-accent); background: var(--wf-accent-soft); }
.wf-chipbar a::before { content: "#"; color: var(--wf-accent); opacity: .85; }
/* 维度块体：默认收两行，超长折叠为"展开"（保持信息可发现又不冗长） */
.wf-dim__body { position: relative; }
.wf-dim__grid.is-clamped { overflow: hidden; }
/* 播放入口 hero 操作区微调 */
.wf-feature-sheet__title h1 { line-height: 1.1; }
/* --------------------------------------------------------------------------
4. 播放页骨架（wf-*：影院沉浸 —— 与 detail 刻意不同）
play 页：播放器为绝对焦点，选集内嵌抽屉，推荐区极简"续看/同氛围"，
不堆大板块，避免打扰观看
-------------------------------------------------------------------------- */
.wf-play-page .wf-shell { display: block; }
/* 播放器舱体，深色沉浸：近黑，无其它视觉干扰 */
.wf-player-box {
position: relative; width: 100%;
aspect-ratio: 16 / 9;
max-height: min(70vh, 760px);
background: #000; border-radius: var(--wf-radius-lg);
overflow: hidden; margin-top: 0px;
box-shadow: var(--wf-shadow-lg);
}
.wf-player-box iframe, .wf-player-box video,
.wf-player-box .wf-third-party, .wf-player-box #player,
.wf-player-box > * { width: 100%; height: 100%; }
/* 播放页顶部左右布局：左播放器(宽) / 右同类速览(窄) */
.wf-play-top {
display: grid; grid-template-columns: minmax(0, 2.55fr) minmax(0, 0.85fr);
gap: 16px; align-items: start; margin-top: 10px;
}
.wf-play-side {
background: var(--wf-surface-1); border: 1px solid var(--wf-line-soft);
border-radius: var(--wf-radius-lg); padding: 14px 16px;
display: flex; flex-direction: column; min-height: 0; height: 100%;
}
.wf-play-side__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.wf-play-side__head h2 { font-size: 15px; font-weight: 800; margin: 0; }
.wf-play-side__more { font-size: 12.5px; color: var(--wf-text-muted); text-decoration: none; }
.wf-play-side__more:hover { color: var(--wf-accent); }
.wf-play-side__list { display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.wf-play-side__item {
display: flex; align-items: center; gap: 10px; padding: 6px;
border-radius: 8px; text-decoration: none; color: inherit; transition: background .15s;
}
.wf-play-side__item:hover { background: var(--wf-surface-2); }
.wf-play-side__item .pic { position: relative; flex: 0 0 52px; width: 52px; height: 70px; border-radius: 6px; overflow: hidden; background: var(--wf-surface-2); }
.wf-play-side__item .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wf-play-side__item .sc {
position: absolute; top: 4px; right: 4px; font-style: normal; font-size: 10px; font-weight: 800;
color: #fff; background: rgba(0,0,0,.6); padding: 1px 5px; border-radius: 4px;
}
.wf-play-side__item .tt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wf-play-side__item .tt b { font-size: 13.5px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s; }
.wf-play-side__item:hover .tt b { color: var(--wf-accent); }
.wf-play-side__item .tt em { font-style: normal; font-size: 12px; color: var(--wf-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 选集抽屉：整个"标题栏 + 播放列表"是同一张面板，靠内部分割线分区，而不是两块卡片 */
.wf-episodes {
margin-top: 14px;
background: var(--wf-surface-1);
border: 1px solid var(--wf-line-soft);
border-radius: var(--wf-radius-md);
overflow: hidden;
}
.wf-episodes__bar {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 11px 14px; cursor: pointer;
transition: background .18s;
}
.wf-episodes__bar:hover { background: rgba(255, 255, 255, .03); }
.wf-episodes__bar:focus-visible { outline: 2px solid var(--wf-accent-strong); outline-offset: -3px; }
/* 展开时用一条内部分割线把"标题"与"播放列表"连成一体 */
.wf-episodes[data-open="1"] .wf-episodes__bar { border-bottom: 1px solid var(--wf-line-soft); }
.wf-episodes__bar-info { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.wf-episodes__bar-info strong { font-size: 15px; white-space: nowrap; }
.wf-episodes__bar-info span { font-size: 12.5px; color: var(--wf-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-episodes__bar-toggle {
display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--wf-text-soft);
background: var(--wf-surface-2); border: 1px solid var(--wf-line); border-radius: 999px;
padding: 6px 12px; transition: .2s;
}
.wf-episodes__bar-toggle svg { width: 14px; height: 14px; transition: transform .3s cubic-bezier(.4,0,.2,1); }
.wf-episodes[data-open="1"] .wf-episodes__bar-toggle svg { transform: rotate(180deg); }
.wf-episodes__wrap {
display: grid; grid-template-rows: 0fr;
transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1);
}
.wf-episodes[data-open="1"] .wf-episodes__wrap { grid-template-rows: 1fr; }
/* 列表内边距只在展开时给，收起态高度才能真到 0 */
.wf-episodes__inner { min-height: 0; overflow: hidden; padding: 0 14px; }
.wf-episodes[data-open="1"] .wf-episodes__inner { padding-bottom: 14px; }
/* 来源分组（内部可再含线路切换）：同一面板内的分区，用分割线区分而不是另起卡片 */
.wf-source { padding-top: 12px; }
.wf-source + .wf-source { margin-top: 12px; border-top: 1px solid var(--wf-line-soft); }
.wf-source__head { display: flex; align-items: center; gap: 8px; padding-bottom: 9px; }
.wf-source__head h3 {
display: inline-flex; align-items: center; gap: 7px;
font-size: 13px; color: var(--wf-text-soft); font-weight: 700;
}
/* 来源名前的"线路"标识点，让这条属于哪个源一眼可辨 */
.wf-source__head h3::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--wf-text-muted);
}
/* 正在播放的那条线路，圆点用强调色点亮（不支持 :has 时退化为中性灰点） */
.wf-source:has(.is-active) .wf-source__head h3::before {
background: var(--wf-accent);
box-shadow: 0 0 0 3px var(--wf-accent-soft);
}
.wf-source__head i {
font-style: normal; font-size: 11px; color: var(--wf-accent);
border: 1px solid var(--wf-accent); border-radius: 999px; padding: 1px 7px; opacity: .85;
}
.wf-source__episodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.wf-source__episodes a {
display: block; text-align: center; font-size: 13px; color: var(--wf-text-soft);
background: var(--wf-surface-2); border: 1px solid var(--wf-line-soft);
border-radius: var(--wf-radius-sm); padding: 7px 2px; text-decoration: none;
transition: .15s;
}
.wf-source__episodes a:hover { color: #fff; border-color: var(--wf-accent); }
.wf-source__episodes a.is-active {
background: var(--wf-accent); color: #fff; border-color: var(--wf-accent); font-weight: 600;
}
.wf-source__episodes a[aria-current="page"] { box-shadow: var(--wf-shadow-sm); }
/* 播放页"播放中/同氛围"：单行极简推荐，避免打扰观看 */
.wf-play-rel { margin-top: var(--wf-gap-block); }
.wf-play-rel__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.wf-play-rel__head h2 {
display: flex; align-items: center; gap: 8px;
font-size: clamp(16px, 1.5vw, 20px); margin: 0;
}
.wf-play-rel__head h2 svg { width: 19px; height: 19px; color: var(--wf-accent); }
.wf-play-rel__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.wf-play-rel__more { font-size: 13px; color: var(--wf-text-muted); text-decoration: none; }
.wf-play-rel__more:hover { color: var(--wf-accent); }
/* 返回详情等轻动作 */
.wf-backline { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--wf-text-muted); text-decoration: none; margin-top: 10px; width: max-content; }
.wf-backline:hover { color: var(--wf-accent); }
.wf-backline svg { width: 15px; height: 15px; }
/* 播放页顶部"现在观看"卡：比 detail 更克制 */
.wf-nowbar { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; margin-top: 18px; }
/* 关键：基础层的 .wf-meta 自带 margin-bottom:18px，会让标签行在 flex 垂直居中时整体上偏——必须清零 */
.wf-nowbar .wf-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
/* 若选集数据为空也占位不破版 */
.wf-episodes:empty, .wf-source__episodes:empty { display: none; }
/* 播放页补充：页头/播放器居中限宽/简介折叠 */
.wf-play-page { padding-top: 4px; }
.wf-play-shell { max-width: 1280px; margin: 0 auto; }
.wf-player-head { padding: 14px 0 4px; }
.wf-nowbar-t { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wf-nowbar-t h1 { color: var(--wf-text); }
.wf-nowbar-ep {
font-size: 12.5px; color: var(--wf-accent); background: var(--wf-accent-soft);
border: 1px solid var(--wf-accent); border-radius: 999px; padding: 3px 10px; font-weight: 600;
}
.wf-player-box { max-width: 1280px; margin-left: auto; margin-right: auto; }
.wf-episodes, .wf-play-rel { max-width: 1280px; margin-left: auto; margin-right: auto; }
/* 简介折叠细节 */
.wf-synopsis summary {
cursor: pointer; list-style: none; font-size: 13px; color: var(--wf-text-muted);
padding: 8px 2px; width: max-content;
}
.wf-synopsis summary::-webkit-details-marker { display: none; }
.wf-synopsis summary::before { content: "▸ "; color: var(--wf-accent); }
.wf-synopsis[open] summary::before { content: "▾ "; }
.wf-synopsis p { color: var(--wf-text-soft); margin-top: 6px; }
/* --------------------------------------------------------------------------
5. 移动端收敛
-------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
:root { --wf-gap-block: 22px; }
.wf-dim__grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.wf-play-rel__grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.wf-dim__why { display: none; }
.wf-crumb { font-size: 12px; }
.wf-play-top { grid-template-columns: 1fr; gap: 12px; }
.wf-play-side { height: auto; }
.wf-play-side__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.wf-episodes__bar { padding: 10px 12px; }
.wf-episodes__inner { padding: 0 12px; }
.wf-episodes[data-open="1"] .wf-episodes__inner { padding-bottom: 12px; }
.wf-episodes__bar-toggle { padding: 5px 10px; font-size: 12.5px; }
.wf-source__episodes { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 7px; }
}
/* ==========================================================================
6. Cine 首页（wf-home-*）—— 与基础层截然不同
设计意图：60/40 非对称主推 + 今日维度发现 + 类型流 + 文字榜
========================================================================== */
.wf-home { padding-top: 16px; padding-bottom: 32px; }
/* 60/40 主推：左侧大卡（带文字 + 按钮），右侧 stack 数量按视口自适应
默认给 3 张（大屏），JS 会在小屏按 lead 实际高度决定显示几张 */
.wf-home-feature { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; }
.wf-home-feature__lead {
position: relative; border-radius: var(--wf-radius-lg); overflow: hidden;
aspect-ratio: 16 / 9; background: var(--wf-surface-1);
border: 1px solid var(--wf-line-soft);
}
.wf-home-feature__lead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wf-home-feature__lead::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(10,10,13,.95) 0%, rgba(10,10,13,.4) 38%, transparent 60%),
linear-gradient(90deg, rgba(10,10,13,.85) 0%, transparent 30%);
}
.wf-home-feature__lead-copy {
position: absolute; left: 0; bottom: 0; right: 30%; padding: 28px;
z-index: 2; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.wf-home-feature__lead-eyebrow {
font-size: 12px; color: var(--wf-accent); letter-spacing: .12em; font-weight: 700;
text-transform: uppercase;
}
.wf-home-feature__lead h2 {
font-size: clamp(24px, 3.4vw, 40px); font-weight: 950; line-height: 1.06; letter-spacing: -.02em;
margin: 0; color: #fff;
}
.wf-home-feature__lead h2 a { color: inherit; text-decoration: none; }
.wf-home-feature__lead h2 a:hover { color: var(--wf-accent); }
.wf-home-feature__lead-meta {
display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; color: var(--wf-text-soft);
}
.wf-home-feature__lead-meta strong { color: var(--wf-accent); font-weight: 700; }
.wf-home-feature__lead-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* 默认显示 3 张（>1482 大屏），按视口降级 */
.wf-home-feature__stack { display: grid; grid-template-rows: repeat(3, 1fr); gap: 10px; align-content: stretch; }
.wf-home-feature__stack > .wf-home-feature__card { display: none; }
.wf-home-feature__stack > .wf-home-feature__card:nth-child(-n+3) { display: grid; }
@media (max-width: 1481.98px) {
.wf-home-feature__stack > .wf-home-feature__card:nth-child(n+3) { display: none; }
}
@media (max-width: 1180.98px) {
.wf-home-feature__stack > .wf-home-feature__card:nth-child(n+2) { display: none; }
.wf-home-feature__stack { grid-template-rows: 1fr; }
}
@media (max-width: 767.98px) {
.wf-home-feature { grid-template-columns: 1fr; }
.wf-home-feature__stack { grid-template-rows: repeat(3, 1fr); gap: 8px; }
.wf-home-feature__stack > .wf-home-feature__card { display: grid; }
.wf-home-feature__stack > .wf-home-feature__card:nth-child(n+4) { display: none; }
.wf-home-feature__lead-blurb { display: none; } /* 移动端 lead 不显示简介 */
.wf-home-feature__lead-copy { right: 0; padding: 18px; }
.wf-home-feature__lead h2 { font-size: 22px; }
}
.wf-home-feature__card {
position: relative; border-radius: var(--wf-radius-md); overflow: hidden;
background: var(--wf-surface-1); border: 1px solid var(--wf-line-soft);
display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center;
padding: 8px 12px 8px 8px; text-decoration: none; color: inherit;
transition: border-color .15s;
min-height: 0;
}
.wf-home-feature__card:hover { border-color: var(--wf-accent); }
.wf-home-feature__card-poster { aspect-ratio: 2/3; border-radius: 6px; overflow: hidden; background: var(--wf-surface-2); position: relative; }
.wf-home-feature__card-poster img { width: 100%; height: 100%; object-fit: cover; }
.wf-home-feature__card-body { min-width: 0; }
.wf-home-feature__card-num { color: var(--wf-accent); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.wf-home-feature__card-title {
font-size: 15px; font-weight: 700; line-height: 1.25; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; margin: 2px 0 4px;
}
.wf-home-feature__card-meta { font-size: 12px; color: var(--wf-text-muted); }
/* 维度发现条：一行 chip 标签 + 9 张海报（自动填充，2行锁定） */
.wf-home-rails { margin-top: 32px; }
.wf-home-rail { margin-bottom: 24px; }
.wf-home-rail__head {
display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px;
}
.wf-home-rail__head h3 {
font-size: 18px; font-weight: 800; margin: 0; letter-spacing: -.005em;
display: flex; align-items: center; gap: 8px;
}
.wf-home-rail__head h3::before {
content: ""; display: inline-block; width: 3px; height: 18px;
background: var(--wf-accent); border-radius: 2px;
}
.wf-home-rail__head em { font-size: 12.5px; color: var(--wf-text-muted); font-style: normal; }
.wf-home-rail__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; overflow: hidden; }
.wf-home-rail__more { margin-left: auto; font-size: 13px; color: var(--wf-text-muted); text-decoration: none; }
.wf-home-rail__more:hover { color: var(--wf-accent); }
/* 类型区段：每类一行海报（2行锁定） */
.wf-home-types { margin-top: 40px; }
.wf-home-type { margin-bottom: 36px; }
.wf-home-type__head {
display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px;
}
.wf-home-type__head h2 {
font-size: 24px; font-weight: 900; margin: 0; letter-spacing: -.01em;
}
.wf-home-type__head em { color: var(--wf-text-muted); font-size: 13px; font-style: normal; }
.wf-home-type__head a { margin-left: auto; font-size: 13px; color: var(--wf-text-muted); text-decoration: none; }
.wf-home-type__head a:hover { color: var(--wf-accent); }
.wf-home-type__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 12px; overflow: hidden; }
/* 资讯：以时间倒序的紧凑列表 */
.wf-home-news { margin-top: 40px; }
.wf-home-news__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.wf-home-news__head h2 { font-size: 20px; font-weight: 800; margin: 0; }
.wf-home-news__list { display: flex; flex-direction: column; }
.wf-home-news__item {
display: grid; grid-template-columns: 32px 88px minmax(0, 1fr) auto; gap: 16px;
align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--wf-line-soft);
text-decoration: none; color: inherit;
}
.wf-home-news__item:hover { background: var(--wf-surface-1); }
.wf-home-news__num { color: var(--wf-accent); font-weight: 900; font-size: 14px; }
.wf-home-news__pic { aspect-ratio: 16/9; border-radius: 4px; overflow: hidden; background: var(--wf-surface-2); }
.wf-home-news__pic img { width: 100%; height: 100%; object-fit: cover; }
.wf-home-news__t { min-width: 0; }
.wf-home-news__t h3 { font-size: 15px; font-weight: 600; line-height: 1.35; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wf-home-news__t em { font-size: 12px; color: var(--wf-text-muted); font-style: normal; }
.wf-home-news__date { font-size: 12px; color: var(--wf-text-muted); white-space: nowrap; }
/* 移动端 */
@media (max-width: 767.98px) {
.wf-home-feature { grid-template-columns: 1fr; }
.wf-home-feature__stack { grid-template-rows: auto; grid-template-columns: repeat(3, 1fr); }
.wf-home-feature__card { grid-template-columns: 1fr; padding: 4px; }
.wf-home-feature__card-body { display: none; }
.wf-home-feature__lead-copy { right: 0; padding: 18px; }
.wf-home-rail__grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.wf-home-type__grid { grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); }
.wf-home-news__item { grid-template-columns: 28px 70px minmax(0, 1fr); }
.wf-home-news__date { display: none; }
}
/* ==========================================================================
7. Cine 频道/分类页（wf-channel-*）—— 上下结构主体居中
设计意图：紧凑面包屑 + 横向频道条（含筛选入口）+ 紧凑 head + 网格 + 分页
========================================================================== */
.wf-channel { padding-top: 16px; padding-bottom: 32px; }
.wf-channel > .wf-shell { display: flex; flex-direction: column; gap: 12px; }
.wf-channel__crumb {
font-size: 12.5px; color: var(--wf-text-muted);
display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.wf-channel__crumb a { color: var(--wf-text-soft); text-decoration: none; }
.wf-channel__crumb a:hover { color: var(--wf-accent); }
.wf-channel__crumb svg { width: 12px; height: 12px; opacity: .6; }
.wf-channel__crumb [aria-current="page"] { color: var(--wf-text); font-weight: 600; }
/* 频道横排：同级兄弟频道 + 右侧"筛选"入口 */
.wf-channel__topbar {
display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
padding: 10px 14px; background: var(--wf-surface-1);
border: 1px solid var(--wf-line-soft); border-radius: var(--wf-radius-md);
}
.wf-channel__topbar-item {
font-size: 13.5px; padding: 6px 14px; border-radius: 999px;
color: var(--wf-text-soft); text-decoration: none;
border: 1px solid transparent; transition: all .15s;
}
.wf-channel__topbar-item:hover { color: var(--wf-accent); border-color: var(--wf-line-soft); }
.wf-channel__topbar-item.is-active {
background: var(--wf-accent); color: #fff; font-weight: 700;
}
.wf-channel__topbar-filter {
margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; padding: 6px 14px; border-radius: 999px;
background: var(--wf-surface-2); color: var(--wf-text);
text-decoration: none; border: 1px solid var(--wf-line-soft);
}
.wf-channel__topbar-filter svg { width: 14px; height: 14px; }
.wf-channel__topbar-filter:hover { color: var(--wf-accent); border-color: var(--wf-accent); }
.wf-channel__head {
display: flex; align-items: baseline; gap: 10px;
margin-top: 4px;
}
.wf-channel__head h1 {
font-size: 22px; font-weight: 900; margin: 0; letter-spacing: -.01em;
}
.wf-channel__head em { color: var(--wf-text-muted); font-size: 13px; font-style: normal; }
.wf-channel__sort { margin-left: auto; display: flex; gap: 6px; }
.wf-channel__sort a {
font-size: 12.5px; padding: 4px 10px; border-radius: 999px;
background: var(--wf-surface-2); color: var(--wf-text-muted);
text-decoration: none; border: 1px solid var(--wf-line-soft);
}
.wf-channel__sort a:hover, .wf-channel__sort a.is-active { color: var(--wf-accent); border-color: var(--wf-accent); }
.wf-channel__grid {
display: grid; grid-template-columns: repeat(9, minmax(0, 1fr));
gap: 14px 12px;
}
.wf-channel__pager { margin-top: 24px; display: flex; justify-content: center; }
/* 移动端频道 */
@media (max-width: 767.98px) {
.wf-channel__grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.wf-channel__head h1 { font-size: 18px; }
.wf-channel__sort { display: none; }
}
/* ==========================================================================
9. Cine 详情页紧凑居中布局（替代基础层 feature-sheet 全宽）
========================================================================== */
.wf-detail-shell { max-width: 1180px; margin: 0 auto; padding-top: 18px; }
.wf-detail-hero {
display: grid; grid-template-columns: 220px minmax(0, 1fr);
gap: 28px; align-items: start;
padding: 24px 26px;
background: var(--wf-surface-1); border: 1px solid var(--wf-line-soft);
border-radius: var(--wf-radius-lg);
margin-top: 12px; margin-bottom: 18px;
}
.wf-detail-hero__poster {
position: relative; aspect-ratio: 2/3; border-radius: var(--wf-radius-md);
overflow: hidden; background: var(--wf-surface-2);
}
.wf-detail-hero__poster img { width: 100%; height: 100%; object-fit: cover; }
.wf-detail-hero__body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.wf-detail-hero__eyebrow {
font-size: 12.5px; color: var(--wf-text-muted); display: flex; flex-wrap: wrap; gap: 4px 0;
}
.wf-detail-hero__eyebrow a { color: var(--wf-accent); text-decoration: none; }
.wf-detail-hero__eyebrow a:hover { text-decoration: underline; }
.wf-detail-hero__title {
font-size: clamp(24px, 3vw, 36px); font-weight: 900; line-height: 1.15;
letter-spacing: -.015em; color: #fff; margin: 0;
}
.wf-detail-hero__meta {
display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--wf-text-soft);
align-items: baseline;
}
.wf-detail-hero__meta strong { color: var(--wf-accent); font-weight: 900; font-size: 22px; }
.wf-detail-hero__blurb {
color: var(--wf-text-soft); font-size: 14px; line-height: 1.6; margin: 6px 0 0;
max-width: 60ch; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.wf-detail-hero__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
@media (max-width: 767.98px) {
.wf-detail-hero { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
.wf-detail-hero__poster { max-width: 220px; }
}
/* ==========================================================================
9b. Cine 详情页 v3：高密度信息块 + 选集预览 + 移动端海报+信息紧凑布局
========================================================================== */
.wf-detail-shell { max-width: 1180px; margin: 0 auto; padding-top: 0px; }
.wf-detail-hero {
display: grid; grid-template-columns: 240px minmax(0, 1fr);
gap: 24px; align-items: start;
padding: 22px 24px;
background: var(--wf-surface-1); border: 1px solid var(--wf-line-soft);
border-radius: var(--wf-radius-lg);
margin-top: 12px; margin-bottom: 18px;
}
.wf-detail-hero__poster {
position: relative; aspect-ratio: 2/3; border-radius: var(--wf-radius-md);
overflow: hidden; background: var(--wf-surface-2);
}
.wf-detail-hero__poster img { width: 100%; height: 100%; object-fit: cover; }
.wf-detail-hero__body { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.wf-detail-hero__eyebrow {
font-size: 12.5px; color: var(--wf-text-muted); display: flex; flex-wrap: wrap; gap: 4px 0;
}
.wf-detail-hero__eyebrow a { color: var(--wf-accent); text-decoration: none; }
.wf-detail-hero__eyebrow a:hover { text-decoration: underline; }
.wf-detail-hero__eyebrow em { font-style: normal; color: var(--wf-text-soft); }
.wf-detail-hero__title {
font-size: clamp(22px, 2.6vw, 32px); font-weight: 900; line-height: 1.15;
letter-spacing: -.015em; color: #fff; margin: 0;
}
.wf-detail-hero__scorerow {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 2px;
}
/* 评分角标：主图右上角 */
.wf-detail-hero__poster-score {
position: absolute; top: 10px; right: 10px; z-index: 2;
display: inline-flex; align-items: baseline; gap: 3px;
padding: 5px 11px; border-radius: 999px;
background: rgba(10,10,13,.78); border: 1px solid var(--wf-accent);
color: var(--wf-accent); font-style: normal;
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
font-variant-numeric: tabular-nums;
}
.wf-detail-hero__poster-score strong { font-size: 16px; font-weight: 900; line-height: 1; }
.wf-detail-hero__acts { display: flex; gap: 8px; flex-wrap: wrap; }
/* 高密度信息块 dl/dt/dd：导演/主演/类型/地区/年代/语言 */
.wf-detail-hero__facts {
margin: 8px 0 0; padding: 14px 0 4px;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 24px;
border-top: 1px solid var(--wf-line-soft);
}
.wf-detail-hero__facts .r { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 10px; align-items: baseline; min-width: 0; }
.wf-detail-hero__facts .r.full { grid-column: 1 / -1; }
.wf-detail-hero__facts dt {
color: var(--wf-text-muted); font-size: 12.5px; font-weight: 600;
text-transform: uppercase; letter-spacing: .04em;
}
.wf-detail-hero__facts dd {
color: var(--wf-text); font-size: 13.5px; line-height: 1.45;
overflow: hidden; text-overflow: ellipsis;
}
.wf-detail-hero__facts dd.wf-facts-links a { color: var(--wf-accent); text-decoration: none; }
.wf-detail-hero__facts dd.wf-facts-links a:hover { text-decoration: underline; }
/* 扩展维度：情绪/场景/亮点 直接标注 */
.wf-detail-hero__dims {
display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center;
margin-top: 4px;
}
.wf-detail-hero__dims .dlab {
font-size: 11.5px; color: var(--wf-text-muted); font-weight: 700;
text-transform: uppercase; letter-spacing: .06em; margin-right: 4px;
}
.wf-detail-hero__dims a {
display: inline-flex; align-items: center; gap: 4px;
font-size: 12.5px; line-height: 1; color: var(--wf-text-soft);
background: var(--wf-surface-2); border: 1px solid var(--wf-line-soft);
border-radius: 999px; padding: 5px 10px; text-decoration: none;
transition: .15s;
}
.wf-detail-hero__dims a:hover { color: var(--wf-accent); border-color: var(--wf-accent); background: var(--wf-accent-soft); }
.wf-detail-hero__dims a::before { content: "#"; color: var(--wf-accent); }
/* 选集预览（详情页中部） */
.wf-detail-ep {
margin: 18px 0;
background: var(--wf-surface-1); border: 1px solid var(--wf-line-soft);
border-radius: var(--wf-radius-lg); padding: 18px 22px;
}
.wf-detail-ep__head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 10px; margin-bottom: 12px;
}
.wf-detail-ep__head h2 {
font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; line-height: 1.2; margin: 0;
display: flex; align-items: baseline; gap: 8px;
}
.wf-detail-ep__head h2 small {
font-size: 12.5px; font-weight: 400; color: var(--wf-text-muted);
}
.wf-detail-ep__more { font-size: 13px; color: var(--wf-text-muted); text-decoration: none; white-space: nowrap; }
.wf-detail-ep__more:hover { color: var(--wf-accent); }
.wf-detail-ep__body { display: flex; flex-direction: column; gap: 14px; }
.wf-detail-ep__src { display: flex; flex-direction: column; gap: 8px; }
.wf-detail-ep__src-head {
display: flex; align-items: baseline; gap: 8px;
border-bottom: 1px solid var(--wf-line-soft); padding-bottom: 6px;
}
.wf-detail-ep__src-head h3 { font-size: 13.5px; font-weight: 700; color: var(--wf-text); margin: 0; }
.wf-detail-ep__src-head em { font-style: normal; font-size: 12px; color: var(--wf-text-muted); }
.wf-detail-ep__src-list {
display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
gap: 6px;
}
.wf-detail-ep__src-list a {
display: block; text-align: center; font-size: 12.5px; color: var(--wf-text-soft);
background: var(--wf-surface-2); border: 1px solid var(--wf-line-soft);
border-radius: var(--wf-radius-sm); padding: 6px 4px; text-decoration: none;
transition: .15s;
}
.wf-detail-ep__src-list a:hover { color: #fff; border-color: var(--wf-accent); background: var(--wf-accent-soft); }
.wf-detail-ep__src-list a.more {
grid-column: 1 / -1; background: transparent; border-style: dashed;
color: var(--wf-accent); font-weight: 600;
}
/* 剧情简介面板（取消 78ch，走 shell 全宽） */
.wf-synopsis-panel { background: var(--wf-surface-1); border: 1px solid var(--wf-line-soft); border-radius: var(--wf-radius-lg); padding: 18px 22px; margin: 18px 0; }
.wf-synopsis-panel .wf-dim__title h2 { font-size: clamp(17px, 1.6vw, 21px); margin: 0 0 10px; }
.wf-synopsis-panel .wf-copy, .wf-synopsis-panel .wf-synopsis { max-width: none; }
.wf-synopsis-panel p { color: var(--wf-text-soft); line-height: 1.8; font-size: 14.5px; margin: 0; }
/* 移动端详情页：海报+标题按钮左右，属性块下移通栏两列铺满 */
@media (max-width: 767.98px) {
.wf-detail-hero {
grid-template-columns: 118px minmax(0, 1fr);
grid-template-rows: auto auto auto auto auto;
gap: 10px 14px; padding: 14px; align-items: start;
}
/* 左列海报跨标题组三行，顶部对齐不拉伸 */
.wf-detail-hero__poster { grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 2/3; max-width: 118px; align-self: start; }
/* 拆散 body，让子元素直接参与 hero 栅格排布 */
.wf-detail-hero__body { display: contents; }
.wf-detail-hero__eyebrow { grid-column: 2; grid-row: 1; }
.wf-detail-hero__title { grid-column: 2; grid-row: 2; font-size: 19px; }
.wf-detail-hero__scorerow { grid-column: 2; grid-row: 3; flex-direction: column; align-items: flex-start; gap: 8px; }
/* 属性信息移到主图下方：通栏 + 左右两列铺满 */
.wf-detail-hero__facts {
grid-column: 1 / -1; grid-row: 4;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 16px; padding-top: 12px; margin-top: 6px;
}
.wf-detail-hero__facts .r { grid-template-columns: 46px minmax(0, 1fr); gap: 6px; align-items: start; }
.wf-detail-hero__facts .r.full { grid-column: 1 / -1; }
/* 主演/类型等过长时允许换行，避免被截断 */
.wf-detail-hero__facts dd { overflow: visible; text-overflow: clip; white-space: normal; }
.wf-detail-hero__facts dd.wf-facts-links { overflow-wrap: anywhere; }
.wf-detail-hero__dims { grid-column: 1 / -1; grid-row: 5; margin-top: 2px; }
/* 移动端评分角标缩小，避免占比过大 */
.wf-detail-hero__poster-score {
top: 6px; right: 6px; gap: 2px;
padding: 3px 8px; border-width: 1px;
font-size: 10px; border-radius: 999px;
}
.wf-detail-hero__poster-score strong { font-size: 13px; }
.wf-detail-ep__head { flex-wrap: wrap; }
.wf-detail-ep__src-list { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
}
/* ==========================================================================
10. Cine 首页 v2（参考 solar sr-hero/sr-news-grid）
顶部编辑推荐：6 张幻灯 + 10 条热门文字榜
维度轨 3 条 + 分类板块 + 资讯 3 列
========================================================================== */
.wf-home { padding-top: 16px; padding-bottom: 32px; }
/* 顶部推荐：左幻灯 + 右文字榜（6 : 4，幻灯 6 份 / 热门内容 4 份） */
.wf-feature {
display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 2fr);
gap: 16px;
}
.wf-feature__lead {
position: relative; overflow: hidden;
/* 扁比例 + 像素上限：宽屏下轮播不再吃掉大半首屏（原 16/9 高约 660px） */
aspect-ratio: 2.35 / 1; max-height: 500px; border-radius: var(--wf-radius-lg);
background: var(--wf-surface-1); border: 1px solid var(--wf-line-soft);
width: 100%; min-height: 100%; /* 锁宽防比例反推溢列；右榜更高时撑满整行不留缝 */
}
.wf-feature__lead > .wf-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .55s ease; pointer-events: none; }
.wf-feature__lead > .wf-slide.is-active { opacity: 1; pointer-events: auto; z-index: 1; }
/* 整卡可点：点图片/空白处直接进详情（z 位于 cap 之下，按钮仍可点） */
.wf-slide { cursor: pointer; }
.wf-slide .wf-slide__link { position: absolute; inset: 0; z-index: 1; display: block; }
.wf-slide .cap { pointer-events: none; }
.wf-slide .cap a { pointer-events: auto; }
.wf-slide .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wf-slide .shade {
position: absolute; inset: 0;
background:
linear-gradient(0deg, rgba(10,10,13,.92) 0%, rgba(10,10,13,.4) 38%, transparent 62%),
linear-gradient(90deg, rgba(10,10,13,.86) 0%, transparent 32%);
}
.wf-slide .cap {
position: absolute; left: 0; bottom: 0; right: 0; padding: 24px 28px;
z-index: 2; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.wf-slide .k {
font-size: 12px; color: var(--wf-accent); letter-spacing: .12em; font-weight: 700;
text-transform: uppercase;
}
.wf-slide h2 {
font-size: clamp(22px, 3vw, 38px); font-weight: 950; line-height: 1.05;
letter-spacing: -.02em; margin: 0; color: #fff;
}
.wf-slide h2 a { color: inherit; text-decoration: none; }
.wf-slide h2 a:hover { color: var(--wf-accent); }
.wf-slide .blurb {
color: var(--wf-text-soft); font-size: 13.5px; line-height: 1.55; margin: 4px 0 0;
max-width: 60ch;
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.wf-slide .acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
/* 轮播控制：圆点 + 左右箭头 */
.wf-hero__controls {
position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3;
display: flex; align-items: center; justify-content: center; gap: 8px;
pointer-events: none;
}
.wf-hero__controls > * { pointer-events: auto; }
.wf-hero__dots { display: flex; gap: 6px; padding: 0; margin: 0; list-style: none; }
.wf-hero__dots li button {
position: relative;
width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0;
background: rgba(255,255,255,.32); cursor: pointer; transition: background .2s, transform .2s;
}
/* 圆点视觉仍是 8px，但用伪元素把可点区域扩到 20px，避免移动端点不中 */
.wf-hero__dots li button::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
.wf-hero__dots li button:hover { background: rgba(255,255,255,.55); }
.wf-hero__dots li.is-active button,
.wf-hero__dots li button[aria-current="true"] {
background: var(--wf-accent); transform: scale(1.35);
}
.wf-hero__arrow {
width: 32px; height: 32px; border-radius: 50%;
background: rgba(20,20,28,.7); border: 1px solid rgba(255,255,255,.18);
color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background .2s, border-color .2s;
}
.wf-hero__arrow:hover { background: var(--wf-accent); border-color: var(--wf-accent); }
/* 右侧文字榜 */
.wf-feature__list {
background: var(--wf-surface-1); border: 1px solid var(--wf-line-soft);
border-radius: var(--wf-radius-lg); padding: 14px 16px;
display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.wf-feature__list-title {
font-size: 14px; font-weight: 800; margin: 0 0 10px;
display: flex; align-items: baseline; justify-content: space-between;
letter-spacing: .01em;
}
.wf-feature__list-title a {
font-size: 12px; font-weight: 500; color: var(--wf-text-muted);
text-decoration: none;
}
.wf-feature__list-title a:hover { color: var(--wf-accent); }
.wf-feature__row {
flex: 1 1 auto;
display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px;
align-items: center; padding: 8px 2px; border-bottom: 1px solid var(--wf-line-soft);
text-decoration: none; color: inherit; min-height: 0;
}
.wf-feature__row:last-child { border-bottom: 0; }
.wf-feature__row:hover .tt b { color: var(--wf-accent); }
.wf-feature__row .no { color: var(--wf-accent); font-weight: 900; font-size: 13px; letter-spacing: .04em; }
.wf-feature__row .tt { min-width: 0; }
.wf-feature__row .tt b {
font-size: 14px; font-weight: 600; line-height: 1.3;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
transition: color .15s;
}
.wf-feature__row .tt em {
display: block; font-style: normal; font-size: 12px; color: var(--wf-text-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px;
}
.wf-feature__row .sc {
font-size: 12px; font-weight: 800; color: var(--wf-accent); white-space: nowrap;
}
/* 维度轨（3 条） */
.wf-rails { margin-top: 28px; display: flex; flex-direction: column; gap: 22px; }
.wf-rail__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.wf-rail__head h3 {
font-size: 18px; font-weight: 800; margin: 0; letter-spacing: -.005em;
display: flex; align-items: center; gap: 8px;
}
.wf-rail__head h3::before {
content: ""; display: inline-block; width: 3px; height: 18px;
background: var(--wf-accent); border-radius: 2px;
}
.wf-rail__head em { font-size: 12.5px; color: var(--wf-text-muted); font-style: normal; }
.wf-rail__more { margin-left: auto; font-size: 13px; color: var(--wf-text-muted); text-decoration: none; }
.wf-rail__more:hover { color: var(--wf-accent); }
.wf-rail__grid {
display: grid; grid-template-columns: repeat(10, minmax(0, 1fr));
gap: 14px 12px; overflow: hidden;
}
/* 类型板块（每类一行海报 + 文字榜） */
.wf-types { margin-top: 36px; display: flex; flex-direction: column; gap: 28px; }
.wf-type__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.wf-type__head .no {
color: var(--wf-accent); font-size: 14px; font-weight: 900; letter-spacing: .08em;
}
.wf-type__head h2 {
font-size: 22px; font-weight: 900; margin: 0; letter-spacing: -.01em;
}
.wf-type__head h2 a { color: inherit; text-decoration: none; }
.wf-type__head h2 a:hover { color: var(--wf-accent); }
.wf-type__head .more { margin-left: auto; font-size: 13px; color: var(--wf-text-muted); text-decoration: none; }
.wf-type__head .more:hover { color: var(--wf-accent); }
.wf-type__body {
display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
gap: 16px;
}
.wf-type__grid {
display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 14px 12px; overflow: hidden;
}
.wf-type__rank {
list-style: none; padding: 8px; margin: 0;
display: flex; flex-direction: column; justify-content: space-between;
gap: 6px; overflow: hidden;
background: var(--wf-surface-1); border: 1px solid var(--wf-line-soft);
border-radius: var(--wf-radius-md);
}
.wf-type__rank li { display: block; }
.wf-type__rank-card {
display: flex; align-items: center; gap: 10px;
padding: 5px 8px; border-radius: 8px; text-decoration: none; color: inherit;
transition: background .15s;
}
.wf-type__rank-card:hover { background: var(--wf-surface-2); }
.wf-type__rank-card:hover .wf-type__rank-title b { color: var(--wf-accent); }
.wf-type__rank-pic {
position: relative; flex: 0 0 46px; width: 46px; height: 62px;
border-radius: 6px; overflow: hidden; background: var(--wf-surface-2);
}
.wf-type__rank-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wf-type__rank-pic i {
position: absolute; left: 3px; top: 3px;
font-style: normal; font-weight: 900; font-size: 10px; letter-spacing: .02em;
color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.wf-type__rank-title { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wf-type__rank-title b {
font-size: 13.5px; font-weight: 600; line-height: 1.3; transition: color .15s;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wf-type__rank-title em {
font-style: normal; font-size: 12px; color: var(--wf-text-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 资讯（3 列卡片，参考 solar sr-news-grid） */
.wf-news { margin-top: 36px; }
.wf-news__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.wf-news__head .no {
color: var(--wf-accent); font-size: 14px; font-weight: 900; letter-spacing: .08em;
}
.wf-news__head h2 {
font-size: 22px; font-weight: 900; margin: 0; letter-spacing: -.01em;
}
.wf-news__head h2 a { color: inherit; text-decoration: none; }
.wf-news__head h2 a:hover { color: var(--wf-accent); }
.wf-news__head .more { margin-left: auto; font-size: 13px; color: var(--wf-text-muted); text-decoration: none; }
.wf-news__head .more:hover { color: var(--wf-accent); }
.wf-news__grid {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.wf-news-card {
display: flex; flex-direction: row; align-items: stretch; gap: 12px;
background: var(--wf-surface-1); border: 1px solid var(--wf-line-soft);
border-radius: var(--wf-radius-md); padding: 12px 14px;
text-decoration: none; color: inherit; min-height: 96px;
transition: border-color .15s, transform .15s;
}
.wf-news-card:hover { border-color: var(--wf-accent); transform: translateY(-2px); }
.wf-news-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.wf-news-card .k {
font-size: 11.5px; color: var(--wf-text-muted); letter-spacing: .04em;
text-transform: uppercase; font-weight: 700;
}
.wf-news-card strong {
font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--wf-text);
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.wf-news-card em {
font-style: normal; font-size: 12.5px; color: var(--wf-text-muted); line-height: 1.5;
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.wf-news-card__pic {
flex: 0 0 92px; width: 92px; border-radius: 8px; overflow: hidden;
background: var(--wf-surface-2); align-self: center;
}
.wf-news-card__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 移动端收敛 */
@media (max-width: 1180.98px) {
.wf-feature { grid-template-columns: 1fr; }
.wf-type__body { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.wf-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wf-channel__grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.wf-rail__grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.wf-type__grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
}
@media (max-width: 767.98px) {
.wf-feature { grid-template-columns: 1fr; gap: 12px; }
.wf-feature__lead { aspect-ratio: 4 / 3; }
.wf-slide .cap { padding: 14px 16px; }
.wf-slide h2 { font-size: 18px; }
.wf-slide .blurb { display: none; }
/* 幻灯控制条：窄屏下 cap 里的 CTA 会横跨整行，原先 bottom:14px 居中会正好压在按钮上
（z-index 3 > cap 的 2）导致按钮点不动。
移动端改为「右下角 + 只保留左右箭头」：CTA 占左侧 ~230px，右侧还剩 ~130px 空位，
箭头贴右下既够放又完全不压按钮；圆点隐藏，靠左右箭头与横滑切换。 */
.wf-hero__controls {
left: auto; right: 12px; bottom: 12px; top: auto;
justify-content: flex-end; gap: 8px; padding: 0;
background: none; border: 0;
-webkit-backdrop-filter: none; backdrop-filter: none;
}
.wf-hero__dots { display: none; }
.wf-hero__arrow { width: 32px; height: 32px; font-size: 16px; }
/* 给 CTA 行右侧预留箭头宽度：类型名偏长时按钮改为换行，绝不铺到箭头底下 */
.wf-slide .acts { padding-right: 74px; }
.wf-rail__grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
.wf-type__body { grid-template-columns: 1fr; }
.wf-type__rank { display: none; }
.wf-type__grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.wf-news__grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
11. Cine 登录 / 注册 / 找回密码 —— 左侧信息舞台
保持「近黑 + 影院红」调性（覆写 wf-base.css 的整块红色 stage）：
用左上径向红光 + 细网格 + 右下同心环塑造纵深与"引擎台面"质感，
把原来的裸标签行升级为带图标的权益卡片，右侧表单保持克制不抢戏。
========================================================================== */
.wf-auth-stage {
position: relative;
display: flex;
flex-direction: column;
gap: 0;
overflow: hidden;
background:
radial-gradient(120% 86% at 0% 0%, rgba(64, 207, 210, .22), transparent 56%),
radial-gradient(95% 80% at 100% 108%, rgba(255, 122, 103, .14), transparent 58%),
linear-gradient(180deg, #101014, #0a0a0d 62%) !important;
color: var(--wf-text) !important;
isolation: isolate;
}
/* 细网格：从左上角淡入，向右下消隐 */
.wf-auth-stage::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(to right, rgba(255, 255, 255, .04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, .04) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: radial-gradient(150% 118% at 12% 0%, #000 0%, transparent 76%);
mask-image: radial-gradient(150% 118% at 12% 0%, #000 0%, transparent 76%);
pointer-events: none;
}
/* 右下角同心环（放映光斑） */
.wf-auth-stage::after {
content: "";
position: absolute;
right: -104px;
bottom: -124px;
width: 330px;
height: 330px;
border-radius: 50%;
border: 1px solid rgba(64, 207, 210, .30);
box-shadow:
0 0 0 30px rgba(64, 207, 210, .07),
0 0 0 62px rgba(64, 207, 210, .035),
inset 0 0 90px rgba(64, 207, 210, .10);
pointer-events: none;
}
/* 装饰层不进流：所有直接子元素抬到装饰之上 */
.wf-auth-stage > * { position: relative; z-index: 1; }
/* 右侧中段的"播放键"水印：影院语义最强的一枚图形，补掉中右侧的大片留白 */
.wf-auth-stage__deco {
position: absolute;
top: 50%;
right: 74px;
z-index: 0;
width: 94px;
height: 94px;
margin-top: -47px;
border: 1px solid rgba(64, 207, 210, .30);
border-radius: 50%;
background: radial-gradient(closest-side, rgba(64, 207, 210, .17), transparent 80%);
box-shadow:
0 0 0 20px rgba(64, 207, 210, .05),
0 0 0 42px rgba(64, 207, 210, .026);
pointer-events: none;
}
.wf-auth-stage__deco::before {
content: "";
position: absolute;
inset: 0;
width: 0;
height: 0;
margin: auto;
border-style: solid;
border-width: 12px 0 12px 20px;
border-color: transparent transparent transparent rgba(255, 122, 103, .55);
transform: translateX(4px);
}
.wf-auth-stage__brand { margin-bottom: 30px; }
.wf-auth-stage__eyebrow {
display: inline-block;
margin-bottom: 10px;
padding: 4px 10px;
border: 1px solid rgba(64, 207, 210, .38);
border-radius: 999px;
background: var(--wf-accent-soft);
color: var(--wf-accent-strong) !important;
letter-spacing: .04em;
}
.wf-auth-stage__copy { margin-bottom: 26px; }
.wf-auth-stage__copy h1 { font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.15; }
.wf-auth-stage__copy p { max-width: 40ch; color: var(--wf-text-muted) !important; }
/* 权益卡片列表（替代原来的裸标签行） */
.wf-auth-stage__features {
display: grid;
gap: 10px;
max-width: 430px;
margin: 0 0 24px;
padding: 0;
list-style: none;
}
.wf-auth-stage__features li {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
align-items: center;
gap: 12px;
padding: 11px 13px;
border: 1px solid var(--wf-line-soft);
border-radius: var(--wf-radius-md);
background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .012));
transition: border-color .25s var(--wf-ease), transform .25s var(--wf-ease);
}
.wf-auth-stage__features li:hover { border-color: rgba(64, 207, 210, .42); transform: translateX(3px); }
.wf-auth-stage__ico {
display: grid;
width: 36px;
height: 36px;
place-items: center;
border-radius: 11px;
background: var(--wf-accent-soft);
color: var(--wf-accent-strong);
}
.wf-auth-stage__ico svg { width: 18px; height: 18px; stroke-width: 1.9; }
.wf-auth-stage__ftx { display: block; min-width: 0; }
.wf-auth-stage__ftx b { display: block; font-size: .86rem; font-weight: 800; color: var(--wf-text); }
.wf-auth-stage__ftx em { display: block; margin-top: 2px; color: var(--wf-text-muted); font-size: .74rem; font-style: normal; line-height: 1.5; }
/* 底部安全提示：贴底对齐（stage 高 620px 时落到底部） */
.wf-auth-stage__note {
display: flex;
align-items: center;
gap: 8px;
margin: auto 0 0;
padding-top: 16px;
border-top: 1px solid var(--wf-line-soft);
color: var(--wf-text-muted);
font-size: .74rem;
}
.wf-auth-stage__note svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--wf-accent-strong); }
@media (max-width: 767.98px) {
.wf-auth-stage { padding: 22px !important; min-height: 0 !important; }
.wf-auth-stage__brand { margin-bottom: 18px; }
.wf-auth-stage__copy { margin-bottom: 18px; }
.wf-auth-stage__copy h1 { font-size: clamp(1.5rem, 7vw, 1.9rem); }
.wf-auth-stage__features { max-width: none; margin-bottom: 18px; }
.wf-auth-stage__features li { grid-template-columns: 32px minmax(0, 1fr); padding: 9px 11px; }
.wf-auth-stage__features li:nth-child(n + 3) { display: none; }
.wf-auth-stage__ico { width: 32px; height: 32px; border-radius: 10px; }
.wf-auth-stage__ico svg { width: 16px; height: 16px; }
.wf-auth-stage__note { font-size: .7rem; }
/* 移动端：播放键缩成右上角的小水印，避免与文案抢位 */
.wf-auth-stage__deco {
top: 22px;
right: 16px;
width: 58px;
height: 58px;
margin-top: 0;
box-shadow: 0 0 0 12px rgba(64, 207, 210, .05);
}
.wf-auth-stage__deco::before { border-width: 8px 0 8px 13px; transform: translateX(3px); }
}
/* ==========================================================================
12. 播放页 · 外部播放平台播放器（third-party player）
--------------------------------------------------------------------------
问题：原面板与页面同为近黑（面板 #0a0a0d / 页面 #101014），层级几乎为零，
且只有"图标+标题+按钮"，缺少播放器的视觉语言。
方案：
12.1 舱体加"设备边框"(bezel)：金属渐变 + 分层阴影 + 品牌光晕 → 明确脱离页面
12.2 屏体纯黑 + 电影感遮罩，顶部源标识条 / 居中大播放键 / 底部仿真控制条
12.3 品牌色变量（qq / youku / iqiyi / bilibili / default）
12.4 动效：播放键呼吸脉冲环 + 控制条加载流光（prefers-reduced-motion 降级）
12.5 移动端三档收敛
注意：所有样式只作用于 cine 模板（本文件仅 cine 加载），不影响其它模板
========================================================================== */
/* ---- 12.1 舱体：设备边框，与近黑页面拉开明显层级 ---- */
.wf-player-box--external {
padding: 12px;
background: linear-gradient(180deg, #33333e 0%, #1d1d24 34%, #121217 100%);
border: 1px solid rgba(255, 255, 255, .14);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, .14),
0 0 0 1px rgba(0, 0, 0, .9),
0 30px 78px rgba(0, 0, 0, .8),
0 0 100px rgba(64, 207, 210, .08);
}
.wf-player-box--external .wf-third-party {
border-radius: var(--wf-radius-md);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
/* ---- 12.2 屏体与三层 HUD ---- */
.wf-third-party {
--tpb: #40cfd2;
--tpb-soft: rgba(64, 207, 210, .16);
--tpb-line: rgba(64, 207, 210, .44);
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
background: #000;
color: var(--wf-text);
isolation: isolate;
text-decoration: none;
}
/* 氛围底图：海报模糊化只提供色彩倾向，深色遮罩保证文字对比度 */
.wf-third-party__poster {
position: absolute;
inset: -30%;
z-index: 0;
background-position: center;
background-size: cover;
filter: blur(84px) saturate(1.45) brightness(.6);
opacity: .4;
}
.wf-third-party__glow {
position: absolute;
inset: 0;
z-index: 1;
background:
radial-gradient(76% 66% at 12% 2%, rgba(64, 207, 210, .3), transparent 62%),
radial-gradient(70% 62% at 94% 102%, rgba(56, 163, 255, .2), transparent 64%),
linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 46%);
pointer-events: none;
}
/* 电影感遮罩：细网格（银幕质感）+ 上下压暗（HUD 可读）+ 四角收暗（聚焦播放键） */
.wf-third-party__scrim {
position: absolute;
inset: 0;
z-index: 2;
background:
repeating-linear-gradient(90deg, rgba(255, 255, 255, .026) 0 1px, transparent 1px 48px),
repeating-linear-gradient(0deg, rgba(255, 255, 255, .026) 0 1px, transparent 1px 48px),
linear-gradient(180deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .22) 26%, rgba(0, 0, 0, .34) 60%, rgba(0, 0, 0, .94) 100%),
radial-gradient(118% 100% at 50% 48%, transparent 32%, rgba(0, 0, 0, .7) 100%);
pointer-events: none;
}
/* 整块播放器即跳转热区（保持单一 a 层，避免嵌套链接） */
.wf-third-party__hit {
position: absolute;
inset: 0;
z-index: 6;
display: block;
cursor: pointer;
}
.wf-third-party__hit:focus-visible {
outline: 2px solid var(--wf-accent-strong);
outline-offset: -4px;
}
.wf-third-party__hud {
position: relative;
z-index: 4;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
height: 100%;
padding: clamp(14px, 1.9vw, 20px) clamp(16px, 2.3vw, 26px);
pointer-events: none; /* 点击穿透到 __hit */
}
/* -- 顶部：源标识条 -- */
.wf-third-party__top {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.wf-third-party__brand {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 7px;
padding: 5px 12px 5px 9px;
border: 1px solid var(--tpb-line);
border-radius: 999px;
background: var(--tpb-soft);
color: #fff;
font-size: .78rem;
font-weight: 800;
}
.wf-third-party__brand i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--tpb);
box-shadow: 0 0 0 3px var(--tpb-soft), 0 0 12px var(--tpb);
}
.wf-third-party__tag {
flex: 0 0 auto;
padding: 4px 9px;
border: 1px solid rgba(255, 255, 255, .16);
border-radius: 6px;
background: rgba(255, 255, 255, .05);
color: var(--wf-text-soft);
font-size: .7rem;
font-weight: 700;
}
.wf-third-party__now {
min-width: 0;
margin-left: auto;
overflow: hidden;
color: var(--wf-text-soft);
font-size: .78rem;
text-overflow: ellipsis;
white-space: nowrap;
}
/* -- 中部：大播放键 + 提示 -- */
.wf-third-party__center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 6px 0;
text-align: center;
}
/* 播放键走中性玻璃质感：让红色只留给主按钮，避免"两个红块"抢焦点 */
.wf-third-party__play {
position: relative;
display: grid;
width: 68px;
height: 68px;
place-items: center;
border: 1px solid rgba(255, 255, 255, .34);
border-radius: 50%;
background: rgba(255, 255, 255, .12);
color: #fff;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
box-shadow: 0 12px 34px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 255, 255, .3);
transition: transform .24s cubic-bezier(.22, 1, .36, 1), background .24s, color .24s, box-shadow .24s;
}
.wf-third-party__play svg { width: 28px; height: 28px; margin-left: 4px; }
.wf-third-party__play::after {
content: "";
position: absolute;
inset: -7px;
border: 1px solid rgba(255, 255, 255, .45);
border-radius: 50%;
animation: wf-tp-pulse 2.6s ease-out infinite;
}
@keyframes wf-tp-pulse {
0% { opacity: .8; transform: scale(.9); }
70% { opacity: 0; transform: scale(1.26); }
100% { opacity: 0; transform: scale(1.26); }
}
/* 主 CTA：做成"真按钮"（实心 + 描边 + 阴影 + 外链箭头），明确"点了会跳转" */
.wf-third-party__cta {
display: inline-flex;
min-height: 48px;
align-items: center;
gap: 9px;
padding: 0 26px;
border: 1px solid rgba(255, 255, 255, .24);
border-radius: 999px;
background: var(--wf-accent);
color: #fff;
font-size: clamp(1rem, 1.5vw, 1.12rem);
font-weight: 900;
letter-spacing: .01em;
box-shadow: 0 12px 32px rgba(64, 207, 210, .38), inset 0 1px 0 rgba(255, 255, 255, .34);
transition: transform .22s cubic-bezier(.22, 1, .36, 1), background .22s, box-shadow .22s;
}
.wf-third-party__cta-ic { flex: 0 0 auto; width: 17px; height: 17px; }
.wf-third-party:hover .wf-third-party__cta {
transform: translateY(-1px);
background: var(--wf-accent-strong);
box-shadow: 0 16px 42px rgba(64, 207, 210, .5), inset 0 1px 0 rgba(255, 255, 255, .34);
}
/* 键盘聚焦：支持 :has 时焦点环画在按钮上；不支持则回退为整块面板描边 */
.wf-third-party:has(.wf-third-party__hit:focus-visible) .wf-third-party__hit { outline: none; }
.wf-third-party:has(.wf-third-party__hit:focus-visible) .wf-third-party__cta {
outline: 2px solid #fff;
outline-offset: 3px;
}
/* 直达说明：胶囊化 + 提亮 + 闪电图标，不再是"可有可无的小字" */
.wf-third-party__hint {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 13px;
border: 1px solid rgba(255, 255, 255, .15);
border-radius: 999px;
background: rgba(255, 255, 255, .075);
color: rgba(255, 255, 255, .86);
font-size: .78rem;
font-weight: 600;
text-align: center;
}
.wf-third-party__hint svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--wf-accent-strong); }
.wf-third-party:hover .wf-third-party__play {
background: #fff;
color: #14141a;
transform: scale(1.06);
box-shadow: 0 16px 44px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .5);
}
/* -- 底部：信息胶囊 + 仿真控制条 -- */
.wf-third-party__bottom {
display: flex;
flex-direction: column;
gap: 10px;
}
.wf-third-party__meta {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.wf-third-party__meta > div {
display: inline-flex;
min-width: 0;
align-items: baseline;
gap: 6px;
padding: 5px 12px;
border: 1px solid rgba(255, 255, 255, .13);
border-radius: 999px;
background: rgba(255, 255, 255, .055);
}
.wf-third-party__meta dt {
flex: 0 0 auto;
color: rgba(255, 255, 255, .5);
font-size: .68rem;
}
.wf-third-party__meta dd {
margin: 0;
overflow: hidden;
color: #fff;
font-size: .78rem;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}
.wf-third-party__bar {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 14px;
border: 1px solid rgba(255, 255, 255, .11);
border-radius: 10px;
background: linear-gradient(180deg, rgba(26, 26, 33, .86), rgba(11, 11, 15, .92));
box-shadow: 0 10px 28px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .07);
color: rgba(255, 255, 255, .86);
}
.wf-third-party__bar-ic { flex: 0 0 auto; width: 15px; height: 15px; }
.wf-third-party__track {
position: relative;
flex: 1 1 auto;
height: 4px;
border-radius: 999px;
background: rgba(255, 255, 255, .17);
overflow: hidden;
}
.wf-third-party__track i {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 7%;
border-radius: 999px;
background: var(--wf-accent);
}
/* 加载流光：真实播放器"正在准备"的观感 */
.wf-third-party__track::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
transform: translateX(-100%);
animation: wf-tp-scan 2.8s linear infinite;
}
@keyframes wf-tp-scan { to { transform: translateX(100%); } }
.wf-third-party__time {
flex: 0 0 auto;
color: rgba(255, 255, 255, .74);
font-size: .72rem;
font-variant-numeric: tabular-nums;
letter-spacing: .02em;
}
.wf-third-party__time span { margin: 0 5px; color: rgba(255, 255, 255, .34); }
.wf-third-party__bar-icons {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 12px;
color: rgba(255, 255, 255, .74);
}
.wf-third-party__bar-icons svg { width: 15px; height: 15px; }
.wf-third-party__hd {
padding: 1px 5px;
border: 1px solid rgba(255, 255, 255, .3);
border-radius: 4px;
font-size: .62rem;
font-weight: 900;
letter-spacing: .04em;
}
/* ---- 12.3 品牌色（用于源标识胶囊，CTA 仍走站点红保持一致性） ---- */
.wf-third-party[data-brand="qq"] { --tpb: #38a3ff; --tpb-soft: rgba(56, 163, 255, .16); --tpb-line: rgba(56, 163, 255, .46); }
.wf-third-party[data-brand="youku"] { --tpb: #1f9dff; --tpb-soft: rgba(31, 157, 255, .16); --tpb-line: rgba(31, 157, 255, .46); }
.wf-third-party[data-brand="iqiyi"] { --tpb: #16c96a; --tpb-soft: rgba(22, 201, 106, .16); --tpb-line: rgba(22, 201, 106, .46); }
.wf-third-party[data-brand="bilibili"] { --tpb: #fb7299; --tpb-soft: rgba(251, 114, 153, .18); --tpb-line: rgba(251, 114, 153, .48); }
/* ---- 12.4 动效降级 ---- */
@media (prefers-reduced-motion: reduce) {
.wf-third-party__play,
.wf-third-party__cta { transition: none; }
.wf-third-party__play::after { animation: none; opacity: 0; }
.wf-third-party__track::after { animation: none; opacity: 0; }
}
/* ---- 12.5 移动端收敛 ---- */
@media (max-width: 1023.98px) {
.wf-player-box--external { padding: 8px; border-radius: var(--wf-radius-md); }
.wf-third-party__play { width: 64px; height: 64px; }
.wf-third-party__play svg { width: 27px; height: 27px; }
.wf-third-party__center { gap: 10px; }
}
@media (max-width: 767.98px) {
.wf-player-box--external { padding: 6px; }
.wf-third-party__hud { padding: 11px 12px; }
.wf-third-party__brand { padding: 4px 10px 4px 7px; font-size: .72rem; }
.wf-third-party__tag,
.wf-third-party__now,
.wf-third-party__meta { display: none; }
/* 移动端：播放键与按钮并排一行，提示独占一行 → 省高度、点击目标更大 */
.wf-third-party__center { flex-flow: row wrap; gap: 8px; padding: 0; }
.wf-third-party__play { width: 44px; height: 44px; }
.wf-third-party__play svg { width: 19px; height: 19px; margin-left: 2px; }
.wf-third-party__play::after { inset: -4px; }
.wf-third-party__cta { min-height: 44px; gap: 7px; padding: 0 16px; font-size: .87rem; }
.wf-third-party__cta-ic { width: 15px; height: 15px; }
.wf-third-party__hint { flex-basis: 100%; justify-content: center; padding: 4px 10px; font-size: .66rem; }
.wf-third-party__hint svg { width: 12px; height: 12px; }
.wf-third-party__bottom { gap: 0; }
.wf-third-party__bar { gap: 9px; padding: 7px 10px; }
.wf-third-party__bar-icons { gap: 9px; }
.wf-third-party__time { font-size: .66rem; }
}
@media (max-width: 420px) {
.wf-third-party__bar-icons { display: none; }
}
/* ==========================================================================
13. Cine 内页统一「紧凑页头」（wf-pagehead / wf-pagebar）
--------------------------------------------------------------------------
约定（2026-09-11 起，本模板所有内页一律遵守）：
内页顶部不再使用大字 Hero ——
.wf-search-hero / .wf-rank-hero / .wf-latest-hero / .wf-directory-head
的标题字号 clamp(2rem,6vw,4rem)~clamp(4rem,11vw,11rem) + 内距 clamp(32px,6vw,80px)
在深色沉浸式布局里"占位远大于信息量"，一屏被吃掉一大块。
统一改为「单行页头条」：左侧小字面包屑（首页 › 当前页），右侧页内控件/统计。
字号 12.5px、条高 42px、上下总占位 ≈ 56px（原 Hero ≈ 190~260px）。
结构契约：
SEO：大字标题被移除后，页面仍保留一个视觉隐藏的 ，
不要直接删掉 h1。
========================================================================== */
.wf-pagehead { padding: 14px 0 0; }
.wf-pagebar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
min-height: 42px;
padding: 7px 14px;
background: var(--wf-surface-1);
border: 1px solid var(--wf-line-soft);
border-radius: var(--wf-radius-md);
}
.wf-pagebar__crumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
min-width: 0;
font-size: 12.5px;
color: var(--wf-text-muted);
}
.wf-pagebar__crumb a { color: var(--wf-text-soft); text-decoration: none; }
.wf-pagebar__crumb a:hover { color: var(--wf-accent); }
.wf-pagebar__crumb svg { flex: 0 0 auto; width: 12px; height: 12px; opacity: .55; }
.wf-pagebar__crumb [aria-current="page"] { color: var(--wf-text); font-weight: 600; }
.wf-pagebar__side { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.wf-pagebar__hint { color: var(--wf-text-muted); font-size: 12px; }
.wf-pagebar__hint b { color: var(--wf-text-soft); font-weight: 700; }
.wf-pagebar__hint i { font-style: normal; margin: 0 6px; opacity: .4; }
/* 页头条内的控件（排行榜 周/月/总 切换等）压到 28px 高 */
.wf-pagebar .wf-rank-tabs { gap: 2px; padding: 2px; background: var(--wf-bg-deep); border-color: var(--wf-line-soft); border-radius: var(--wf-radius-sm); }
.wf-pagebar .wf-rank-tabs__btn { min-height: 28px; padding: 0 13px; font-size: 12.5px; border-radius: 4px; }
/* 页头条紧贴下方内容，收掉 wf-section / wf-directory-body 的顶部留白 */
.wf-pagehead + .wf-section,
.wf-pagehead + .wf-directory-body { padding-top: 16px; }
/* 无障碍隐藏（保留语义、不占视觉） */
.wf-sr-only {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
border: 0;
white-space: nowrap;
}
@media (max-width: 767.98px) {
.wf-pagehead { padding-top: 10px; }
.wf-pagebar { gap: 6px 10px; padding: 7px 12px; }
.wf-pagebar__crumb { font-size: 12px; }
.wf-pagebar__hint { font-size: 11.5px; }
.wf-pagehead + .wf-section,
.wf-pagehead + .wf-directory-body { padding-top: 12px; }
.wf-pagebar__side { width: 100%; margin-left: 0; }
.wf-pagebar .wf-rank-tabs { width: 100%; }
.wf-pagebar .wf-rank-tabs__btn { flex: 1 1 0; }
}