/* ============================================================
   UAA · CINEMA（影院流媒体）发现层引擎 —— 全新产品形态
   一份样式服务 首页 + 四频道。彻底告别「顶栏+居中Hero+筛选条+卡片网格+右侧榜」骨架，
   改为：① 极简贴顶细条玻璃导航(半透明压在内容上) + ⌘K 搜索浮层
        ② 整宽自动轮播大 Hero (backdrop 模糊 + 暗角 + 衬线大标题 + CTA + 圆点)
        ③ 横向片架 rail (大海报，悬停上浮+辉光+浮出信息)
        ④ Netflix Top10 rail (海报背后压超大描边名次)
        ⑤ 频道：聚焦 Hero + 吸顶 chip 条 + 密集海报墙 + 无限加载
   视觉身份沿用 Noir：暗红 #FF3B5C / 金 #E6B873 / 暖炭背景，Playfair 衬线，明暗双主题。
   颜色全部消费 noir.css 的 token；本文件只负责【新形态】的布局与动效。
   引入顺序：tokens.css → reset.css → components.css → noir.css → cine.css
   ============================================================ */

/* ---- 强调色：每个频道用 body 上的 --m 覆盖局部强调（小说红/视频珊瑚/漫画金/有声紫） ---- */
.cine{--mc:var(--m,var(--crimson));--uaa-wide-shell-max:1440px;--uaa-wide-shell-gutter:calc((100vw - var(--uaa-wide-shell-max)) / 2)}

/* 全屏沉浸：去掉默认页脚的大留白感，让内容边到边 */
.cine{background:var(--paper);color:var(--ink);min-height:100vh;overflow-x:hidden}
.cine::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--bg-glow),var(--paper)}
.cine ::selection{background:var(--mc);color:#fff}

/* 超宽屏：只在 >=1800px 收住整站内容，左右留出当前主题背景。 */
@media(min-width:1800px){
  html{background:var(--paper)}
  body.cine{width:100%;max-width:var(--uaa-wide-shell-max);margin-inline:auto}
  body.cine .cn-nav{left:50%;right:auto;width:100%;max-width:var(--uaa-wide-shell-max);transform:translateX(-50%)}
  body.cine .cn-allnav__panel{left:calc(var(--uaa-wide-shell-gutter) + clamp(10px,3vw,40px))}
}

/* ---- 键盘焦点环（:focus-visible，暗红/金 noir 描边；鼠标点击不显示） ---- */
.cine a:focus-visible,
.cine button:focus-visible,
.cine input:focus-visible,
.cine [tabindex]:focus-visible,
.cn-poster:focus-visible,
.cn-rank:focus-visible,
.cn-dot:focus-visible,
.cn-res:focus-visible{
  outline:2px solid var(--mc);
  outline-offset:2px;
  border-radius:6px;
}
/* 文本输入框 / 文本域：焦点仅保留自身的单层描边（与登录框一致），不再叠加键盘焦点环，避免「双层红框」。
   勾选框 / 单选 / 滑块 / 文件 / 颜色 / 按钮类仍保留焦点环以保证可达性。 */
.cine input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="submit"]):not([type="button"]):focus-visible,
.cine textarea:focus-visible{outline:none}
/* 大图卡片焦点：描边贴合圆角封面，避免方框压在圆角外 */
.cn-poster:focus-visible{outline-offset:3px}
.cn-rank:focus-visible{outline-offset:4px}
/* 圆形图标/箭头按钮焦点环走圆形 */
.cn-ico:focus-visible,
.cn-rail__nav:focus-visible,
.cn-hero__arrow:focus-visible,
.cn-dot:focus-visible{border-radius:999px}
/* rail 两侧滑动箭头：键盘聚焦时强制可见（默认仅 hover 显示） */
.cn-rail__nav:focus-visible{display:grid;opacity:1}

/* ============================================================
   1 · 极简贴顶细条导航（半透明玻璃，压在内容上，非粗顶栏）
   ============================================================ */
.cn-nav{position:fixed;top:0;left:0;right:0;z-index:var(--z-sticky);height:58px;
  display:flex;align-items:center;gap:6px;padding:0 clamp(14px,3vw,34px);
  background:linear-gradient(180deg,rgba(7,7,11,.74) 0%,rgba(7,7,11,.40) 48%,transparent 100%);transition:background .3s,backdrop-filter .3s,border-color .3s}
/* 滚动后凝结成玻璃条 */
.cn-nav.is-stuck{background:var(--bar-bg);backdrop-filter:saturate(150%) blur(20px);-webkit-backdrop-filter:saturate(150%) blur(20px);
  border-bottom:1px solid var(--hair)}
/* 悬浮态(未凝结)：压在大图/海报上 —— 文字与按钮一律亮色玻璃 + 轻阴影，任何底图都可读
   (修复：亮色主题下导航深字压在黑底图片上看不清) */
.cn-nav:not(.is-stuck) .cn-brand b,
.cn-nav:not(.is-stuck) .cn-link{color:rgba(255,255,255,.9);text-shadow:0 1px 10px rgba(0,0,0,.55)}
.cn-nav:not(.is-stuck) .cn-link:hover,
.cn-nav:not(.is-stuck) .cn-link--on{color:#fff;background:rgba(255,255,255,.12)}
.cn-nav:not(.is-stuck) .cn-kbtn,
.cn-nav:not(.is-stuck) .cn-ico{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.92)}
.cn-nav:not(.is-stuck) .cn-kbtn .kbd{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.24);color:#fff}
.cn-brand{display:flex;align-items:center;gap:9px;flex-shrink:0;margin-right:8px}
.cn-brand img{height:26px;width:auto;filter:drop-shadow(0 0 12px rgba(255,59,92,.6))}
/* 品牌"有爱爱"= 全部内容开关（PC/H5 常显，点击弹出全站栏目面板） */
.cn-brand__all{display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 9px;margin-right:2px;border-radius:9px;cursor:pointer;transition:.15s;white-space:nowrap;flex-shrink:0}
.cn-brand__all b{font-family:var(--font-serif);font-weight:900;font-style:italic;font-size:15px;color:var(--title);letter-spacing:.02em}
.cn-brand__all svg{opacity:.55;color:var(--title);transition:transform .2s}
.cn-brand__all:hover{background:var(--fill-hover)}
.cn-brand__all.on svg{transform:rotate(180deg)}
.cn-nav:not(.is-stuck) .cn-brand__all b,.cn-nav:not(.is-stuck) .cn-brand__all svg{color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.55)}
/* 全部内容弹层：顶栏下玻璃面板（参考原站 toggleNav），点外/ESC 关闭 */
.cn-allnav{position:fixed;inset:0;z-index:calc(var(--z-sticky) - 1);display:none}
.cn-allnav.open{display:block}
.cn-allnav__veil{position:absolute;inset:0;background:rgba(8,8,12,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.cn-allnav__panel{position:absolute;top:66px;left:clamp(10px,3vw,40px);width:min(720px,calc(100vw - 20px));max-height:calc(100vh - 90px);overflow:auto;
  border-radius:18px;border:1px solid var(--hair);background:var(--bar-bg);
  backdrop-filter:saturate(150%) blur(24px);-webkit-backdrop-filter:saturate(150%) blur(24px);
  padding:20px 22px 24px;box-shadow:0 30px 80px -20px rgba(0,0,0,.7);animation:cnAllIn .22s ease both}
@keyframes cnAllIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.cn-allnav__sec+.cn-allnav__sec{margin-top:18px}
.cn-allnav__sec h4{display:flex;align-items:center;gap:8px;font-family:var(--font-serif);font-weight:800;font-size:14px;color:var(--title);margin-bottom:10px}
.cn-allnav__sec h4::before{content:"";width:4px;height:15px;border-radius:3px;background:var(--mc);box-shadow:0 0 10px -2px var(--mc)}
.cn-allnav__grid{display:flex;flex-wrap:wrap;gap:8px}
.cn-allnav__grid a{height:32px;display:inline-flex;align-items:center;padding:0 13px;border-radius:9px;font-size:13px;color:var(--ink-2);
  background:var(--fill-1);border:1px solid var(--line);transition:.15s}
.cn-allnav__grid a:hover{color:#fff;background:var(--mc);border-color:var(--mc);box-shadow:0 0 14px -4px var(--mc)}
.cn-allnav__app{display:inline-grid;place-items:center;margin-left:5px;color:var(--mc);opacity:.85}
.cn-allnav__grid a:hover .cn-allnav__app{color:#fff;opacity:1}
@media(max-width:760px){.cn-allnav__panel{left:10px;right:10px;width:auto;top:62px;padding:16px 14px 20px}}
@media (prefers-reduced-motion:reduce){.cn-allnav__panel{animation:none}}

.cn-links{display:none;align-items:center;gap:2px}
@media(min-width:860px){.cn-links{display:flex}}
.cn-link{position:relative;height:36px;padding:0 13px;display:inline-flex;align-items:center;gap:6px;border-radius:9px;
  font-size:13.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-2);transition:.18s}
.cn-link:hover{color:var(--title);background:var(--fill-hover)}
.cn-link--on{color:var(--title)}
.cn-link--on::after{content:"";position:absolute;left:13px;right:13px;bottom:3px;height:2px;border-radius:2px;
  background:var(--mc);box-shadow:0 0 10px var(--mc)}
.cn-link .dot{position:absolute;top:6px;right:8px;width:6px;height:6px;border-radius:50%;background:var(--crimson);box-shadow:0 0 8px var(--crimson)}
/* 快捷区 APP/VIP：PC 紧随主链(AI创作)右侧；<860 主链隐藏后落在 logo 左区 */
.cn-quick{display:flex;align-items:center;gap:2px}
.cn-quick .cn-link{padding:0 11px}
/* VIP 始终醒目金色：滚动凝结(.is-stuck)后用主题金 + 柔和金光防止变暗失金；悬浮态(压图)用更亮的金 + 暗影保证可读 */
.cn-link--vip,.cn-link--vip:hover{color:var(--gold);font-weight:800;text-shadow:0 0 13px color-mix(in srgb,var(--gold) 52%,transparent)}
.cn-link--vip:hover{background:color-mix(in srgb,var(--gold) 14%,transparent)}
.cn-nav:not(.is-stuck) .cn-link--vip,.cn-nav:not(.is-stuck) .cn-link--vip:hover{color:#F8E6BE;text-shadow:0 0 12px rgba(230,184,115,.55),0 1px 10px rgba(0,0,0,.5)}
/* 暗色/默认主题悬浮态(压深色 hero)：#F8E6BE 香槟在深色上发白失金，改用更亮更饱和的真金，皇冠图标(stroke=currentColor)随之转金。:not([data-theme="light"]) 兼顾未设属性的首屏默认(深色)与显式 dark；亮色不动 */
:root:not([data-theme="light"]) .cn-nav:not(.is-stuck) .cn-link--vip,:root:not([data-theme="light"]) .cn-nav:not(.is-stuck) .cn-link--vip:hover{color:#EFC76F;text-shadow:0 0 13px rgba(230,184,115,.6),0 1px 10px rgba(0,0,0,.55)}
/* 亮色主题滚动凝结后顶栏变白：--gold(#E6B873)在白底偏淡发灰，改用更深更饱和的金，确保仍是醒目金色 */
:root[data-theme="light"] .cn-nav.is-stuck .cn-link--vip,:root[data-theme="light"] .cn-nav.is-stuck .cn-link--vip:hover{color:#C8941E;text-shadow:0 0 10px rgba(200,148,30,.32)}
/* 暗色/默认主题滚动凝结(.is-stuck 玻璃条)后:显式给金。原先此态无暗色专属规则、仅靠 .cn-link--vip 的 var(--gold)(#E6B873 偏哑的茶金),压在深色玻璃条上读作灰白；改与悬浮态同一亮金 #EFC76F,滚动前后 VIP 颜色一致。皇冠 svg stroke=currentColor 随之转金 */
:root:not([data-theme="light"]) .cn-nav.is-stuck .cn-link--vip,:root:not([data-theme="light"]) .cn-nav.is-stuck .cn-link--vip:hover{color:#EFC76F;text-shadow:0 0 12px color-mix(in srgb,#EFC76F 50%,transparent)}
@media(max-width:859px){.cn-quick .cn-link{padding:0 9px;font-size:13px}}
/* ≤480 紧凑档：顶栏 8 元素一行放下,登录钮不出界 */
@media(max-width:479px){
  .cn-nav{gap:4px;padding:0 10px}
  .cn-brand{margin-right:2px}
  .cn-brand__all{padding:0 6px;gap:3px}
  .cn-brand__all b{font-size:14px}
  .cn-quick .cn-link{padding:0 7px}
  .cn-quick .cn-link svg{display:none}      /* 窄屏 APP/VIP 只留文字(VIP金色仍醒目) */
  .cn-kbtn{width:38px;padding:0;justify-content:center}
  .cn-login{width:38px;padding:0;justify-content:center;background:var(--fill-1);border:1px solid var(--line);color:var(--ink-2);box-shadow:none}
  .cn-login:hover{transform:none;box-shadow:none;border-color:var(--mc);color:var(--mc)}
  .cn-act{gap:6px}
}

.cn-sp{flex:1}
.cn-act{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* ⌘K 搜索触发：桌面显示成药丸，移动端只剩放大镜 */
.cn-kbtn{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 12px 0 14px;border-radius:var(--r-pill);
  background:var(--fill-1);border:1px solid var(--line);color:var(--ink-3);font-size:13px;font-weight:500;transition:.2s}
.cn-kbtn:hover{border-color:var(--line-2);color:var(--ink-2)}
.cn-kbtn svg{width:17px;height:17px;opacity:.8}
.cn-kbtn .kbd{display:none;font-family:var(--font-latin);font-size:11px;font-weight:700;letter-spacing:.04em;
  padding:2px 7px;border-radius:6px;background:var(--fill-2);border:1px solid var(--line);color:var(--ink-3)}
.cn-kbtn .ph{display:none}
@media(min-width:680px){.cn-kbtn{width:230px}.cn-kbtn .kbd,.cn-kbtn .ph{display:inline}.cn-kbtn .ph{flex:1;text-align:left}}

.cn-ico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);
  background:var(--fill-1);border:1px solid var(--line);transition:.2s}
.cn-ico:hover{border-color:var(--mc);color:var(--mc)}
.cn-ico svg{width:18px;height:18px}
.cn-login{height:38px;padding:0 18px;border-radius:var(--r-pill);font-size:13.5px;font-weight:700;
  background:linear-gradient(135deg,#FF3B5C,#FF6177);color:#fff;box-shadow:var(--shadow-primary);transition:.2s;display:inline-flex;align-items:center;gap:7px}
.cn-login:hover{transform:translateY(-1px);box-shadow:var(--shadow-primary-h)}
.cn-login svg{width:16px;height:16px}
.cn-login .t{display:none}
@media(min-width:480px){.cn-login .t{display:inline}}
/* 已登录：顶栏头像(评论区同款占位)，加载失败回退柔和绯红 + 用户字形 */
.cn-avatar{width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0;display:block;padding:0;
  border:2px solid rgba(230,184,115,.6);background:var(--fill-2);transition:.2s}
.cn-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.cn-avatar:hover{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 16px -4px rgba(230,184,115,.75)}
.cn-avatar--fb{background:var(--crimson-soft) center/54% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF3B5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E")}

/* ============================================================
   2 · 搜索 / 命令浮层（⌘K）
   ============================================================ */
.cn-search{position:fixed;inset:0;z-index:var(--z-modal);display:none;justify-content:center;align-items:flex-start;
  padding:11vh 18px 18px;background:var(--mask);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cn-search.open{display:flex;animation:cnFade .2s ease}
@keyframes cnFade{from{opacity:0}to{opacity:1}}
.cn-search__box{width:100%;max-width:680px;background:var(--surface);border:1px solid var(--line-2);border-radius:20px;
  box-shadow:var(--shadow-m);overflow:hidden;animation:cnPop .24s cubic-bezier(.2,.8,.2,1)}
@keyframes cnPop{from{opacity:0;transform:translateY(-14px) scale(.98)}to{opacity:1;transform:none}}
.cn-search__in{display:flex;align-items:center;gap:13px;padding:0 20px;height:64px;border-bottom:1px solid var(--line)}
.cn-search__in svg{width:22px;height:22px;color:var(--mc);flex-shrink:0}
.cn-search__in input{flex:1;border:none;outline:none;background:none;font-size:18px;color:var(--ink);font-family:var(--font-sans)}
.cn-search__in input::placeholder{color:var(--ink-3)}
.cn-search__res{max-height:54vh;overflow-y:auto;padding:8px}
.cn-search__res::-webkit-scrollbar{width:8px}
.cn-search__res::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:8px}
.cn-search__grouptitle{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  padding:14px 12px 7px;font-family:var(--font-latin)}
.cn-res{display:flex;align-items:center;gap:13px;padding:9px 12px;border-radius:12px;cursor:pointer;transition:.15s}
.cn-res:hover,.cn-res.sel{background:var(--fill-hover)}
.cn-res__cv{width:40px;height:54px;border-radius:5px;overflow:hidden;flex-shrink:0;background:var(--surface-2);box-shadow:var(--shadow-cover)}
.cn-res__cv--ico{display:grid;place-items:center;color:var(--mc);background:color-mix(in srgb,var(--mc) 14%,transparent);box-shadow:none}
.cn-res__cv img{width:100%;height:100%;object-fit:cover}
.cn-res__b{min-width:0;flex:1}
.cn-res__t{font-family:var(--font-serif);font-weight:700;font-size:14.5px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn-res__m{font-size:12px;color:var(--ink-3);margin-top:2px;display:flex;gap:8px}
.cn-res__m .tag{color:var(--mc);font-weight:700}
.cn-res__go{margin-left:auto;color:var(--ink-3);flex-shrink:0}
.cn-res__go svg{width:16px;height:16px}
.cn-search__empty{padding:40px 12px;text-align:center;color:var(--ink-3);font-size:14px}
.cn-search__empty b{display:block;font-family:var(--font-serif);font-size:18px;color:var(--ink-2);margin-bottom:6px}

/* ============================================================
   3 · 整宽自动轮播大 Hero
   ============================================================ */
.cn-hero{position:relative;width:100%;height:clamp(460px,82vh,760px);overflow:hidden;isolation:isolate}
.cn-hero__track{position:absolute;inset:0}
.cn-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;pointer-events:none}
.cn-slide.on{opacity:1;pointer-events:auto}
.cn-slide__bg{position:absolute;inset:0;z-index:0}
.cn-slide__bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);filter:saturate(1.05)}
.cn-slide.on .cn-slide__bg img{animation:cnKen 8s ease-in-out forwards}
/* E方案:底图主色光晕,仅PC显示。这里的频道主色渐变是兜底,
   CINE.applyGlow 取到封面主色后会覆盖 background(取色跨域失败时就保留这份) */
.cn-slide__glow{display:none;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(92% 120% at 15% 50%,color-mix(in srgb,var(--m) 32%,transparent),transparent 60%),
    radial-gradient(80% 100% at 86% 16%,color-mix(in srgb,var(--m) 20%,transparent),transparent 60%)}
.cn-slide__txt{display:contents}  /* 默认透明:k/标题/简介等视作 .cn-slide__in 直接子级(H5原样);PC-E 时转为文字列 */
/* Ken Burns：从整图(scale 1，最清晰、放大最少)缓缓推近到局部(scale 1.1)。
   ease-in-out 使开头停留在最清晰状态更久——停留短的用户看到的就是最不模糊的一帧。 */
@keyframes cnKen{from{transform:scale(1.06)}to{transform:scale(1.14)}}   /* 始终 ≥1.06 满溢覆盖:杜绝 scale(1) 时图片边缘与裁切边重合、分数 DPR 露 1px 缝 */
.cn-slide__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,var(--hero-veil-bot) 0%,var(--hero-veil-mid) 52%,transparent 78%),
    linear-gradient(0deg,var(--paper) 1%,transparent 36%),
    radial-gradient(120% 80% at 80% 30%,var(--hero-glow),transparent 60%)}
.cn-slide__veil::after{content:"";position:absolute;inset:0;
  box-shadow:inset 0 -120px 160px -60px var(--paper),inset 0 0 200px 40px var(--vignette)}
.cn-slide__in{position:absolute;z-index:2;left:clamp(16px,5vw,72px);right:clamp(16px,5vw,72px);
  bottom:clamp(78px,14vh,150px);max-width:680px}
.cn-slide__k{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-latin);font-style:italic;
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mc);margin-bottom:14px}
.cn-slide__k::before{content:"";width:30px;height:1.5px;background:var(--mc);box-shadow:0 0 8px var(--mc)}
.cn-slide__k .badge{font-style:normal;font-family:var(--font-sans);letter-spacing:.02em;text-transform:none;
  padding:3px 10px;border-radius:var(--r-pill);background:rgba(255,59,92,.16);border:1px solid rgba(255,59,92,.4);color:var(--on-cover);font-weight:700}
.cn-slide__t{font-family:var(--font-serif);font-weight:900;color:var(--on-cover);
  font-size:clamp(34px,6.4vw,76px);line-height:1.02;letter-spacing:-.01em;
  text-shadow:0 8px 40px rgba(0,0,0,.6);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cn-slide__d{margin-top:18px;font-size:clamp(14px,1.5vw,16px);line-height:1.7;color:rgba(255,255,255,.82);
  max-width:560px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  text-shadow:0 2px 14px rgba(0,0,0,.6)}
.cn-slide__meta{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:9px 14px;font-size:13px;color:rgba(255,255,255,.7)}
.cn-slide__meta .pill{padding:4px 11px;border-radius:var(--r-pill);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  color:#fff;font-weight:600;backdrop-filter:blur(4px)}
.cn-slide__meta .hot{color:var(--gold);font-family:var(--font-latin);font-weight:700;font-size:15px}
.cn-slide__cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
.cn-slide__cta .ds-btn--ghost{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:#fff;backdrop-filter:blur(8px)}
.cn-slide__cta .ds-btn--ghost:hover{background:rgba(255,255,255,.2);border-color:#fff;color:#fff}

/* 圆点指示 + 进度 */
/* 整条恒定水平居中，并且永远不铺满：宽度封顶 640px、两侧至少留出与页面同宽的边距。
   张数多到放不下时由 index-home.js 平移 __track，把当前那颗顶到中间，两侧多出来的滑出可视区、
   再由 .is-clipped 的边缘遮罩渐隐（硬切边不好看）。
   上下 20px padding 是给 .cn-dot::after 那圈触摸热区留的——外层 overflow:hidden 会把它裁掉，
   热区没了触摸目标就只剩 4px 高；bottom 同步减掉 20px，视觉位置与加 padding 前一致。 */
.cn-dots{position:absolute;z-index:3;left:50%;transform:translateX(-50%);
  bottom:calc(clamp(40px,7vh,72px) - 20px);padding:20px 0;
  max-width:min(calc(100% - 2 * clamp(16px,5vw,72px)),640px);overflow:hidden}
.cn-dots.is-clipped{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 28px),transparent 100%)}
.cn-dots__track{display:flex;gap:9px;width:max-content;transition:transform .34s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion:reduce){.cn-dots__track{transition:none}}
.cn-dot{position:relative;width:34px;height:4px;border-radius:4px;background:rgba(255,255,255,.28);cursor:pointer;transition:.2s}
/* 触摸目标扩大到 ≥40px：透明热区向四周扩张（dot 不再 overflow:hidden，故热区可命中） */
.cn-dot::after{content:"";position:absolute;left:-8px;right:-8px;top:-19px;bottom:-19px}
.cn-dot:hover{background:rgba(255,255,255,.5)}
.cn-dot i{display:block;height:100%;width:0;border-radius:inherit;background:var(--mc);box-shadow:0 0 10px var(--mc)}
.cn-dot.on{background:rgba(255,255,255,.4)}
.cn-dot.on i{animation:cnBar 6.4s linear forwards}
@keyframes cnBar{from{width:0}to{width:100%}}
/* 左右手动切换 */
.cn-hero__arrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  display:none;place-items:center;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(6px);transition:.2s}
.cn-hero:hover .cn-hero__arrow{display:grid}
.cn-hero__arrow:hover{background:var(--mc);border-color:var(--mc);box-shadow:0 0 24px -4px var(--mc)}
.cn-hero__arrow svg{width:22px;height:22px}
.cn-hero__arrow--prev{left:18px}.cn-hero__arrow--next{right:18px}
/* PC / iPad：压缩首屏 Hero 上下留白。背景图仍按原 object-fit:cover 铺满，只由较矮容器裁切。 */
@media(min-width:761px){
  .cn-hero{height:clamp(390px,64vh,620px)}
}
/* H5：首屏 Hero 同步矮化、内容整体下移(同频道页 chero 处理)；「视频」slide 已有独立的模糊压暗方案,不受影响 */
@media(max-width:760px){
  .cn-hero{height:clamp(345px,61vh,570px)}
  .cn-slide:not(.cn-slide--video) .cn-slide__bg img{object-position:50% 18%}
  .cn-slide:not(.cn-slide--video) .cn-slide__in{bottom:auto;top:clamp(60px,10vh,84px)}
  .cn-slide:not(.cn-slide--video) .cn-slide__veil::after{box-shadow:inset 0 -170px 170px -20px var(--paper),inset 0 0 200px 40px var(--vignette)}
  .cn-slide:not(.cn-slide--video) .cn-slide__k{margin-bottom:9px}
  .cn-slide:not(.cn-slide--video) .cn-slide__d{margin-top:11px}
  .cn-slide:not(.cn-slide--video) .cn-slide__meta{margin-top:10px}
  .cn-slide:not(.cn-slide--video) .cn-slide__cta{margin-top:16px}
}
/* H5：首页轮播显示上一张/下一张按钮(底部两角、圆点居中)，方便翻片(类似频道页有箭头) */
@media(max-width:680px){
  .cn-hero__arrow{display:grid!important;top:auto;bottom:35px;transform:none;width:34px;height:34px;
    background:rgba(0,0,0,.46);border-color:rgba(255,255,255,.32)}
  .cn-hero__arrow svg{width:17px;height:17px}
  .cn-hero__arrow--prev{left:clamp(14px,5vw,22px);right:auto}
  .cn-hero__arrow--next{right:clamp(14px,5vw,22px);left:auto}
  /* 底部两角有上一张/下一张按钮，圆点条再收窄一档给它们让位（左右各 70px 安全距） */
  .cn-dots{bottom:calc(50px - 20px);max-width:calc(100% - 140px)}
}

/* ============================================================
   4 · 横向片架 rail
   ============================================================ */
.cn-rail{position:relative;margin:clamp(26px,4vw,46px) 0}
.cn-rail__head{display:flex;align-items:flex-end;gap:14px;padding:0 clamp(16px,5vw,72px);margin-bottom:16px}
.cn-rail__head h2{font-family:var(--font-serif);font-weight:900;color:var(--title);
  font-size:clamp(21px,2.6vw,30px);line-height:1;letter-spacing:.01em}
.cn-rail__head .en{font-family:var(--font-latin);font-style:italic;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mc);padding-bottom:3px}
/* 中文描述性副标题:中文用斜体大写拉丁样式会假斜+怪,改为正排无衬线、淡色,作"描述"而非英文 kicker。仅首页带 en--zh 的副标题生效,不影响其他页英文 .en */
.cn-rail__head .en--zh{font-family:var(--font-sans);font-style:normal;text-transform:none;letter-spacing:.05em;font-weight:500;color:var(--ink-3)}
.cn-rail__more{margin-left:auto;font-size:13px;font-weight:700;color:var(--ink-3);display:inline-flex;align-items:center;gap:5px;
  padding-bottom:4px;transition:.18s;opacity:0;transform:translateX(-6px)}
.cn-rail:hover .cn-rail__more{opacity:1;transform:none}
.cn-rail__more:hover{color:var(--mc)}
@media(max-width:860px){.cn-rail__more{opacity:1;transform:none}}

.cn-scroller{display:flex;gap:clamp(12px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x proximity;
  padding:6px clamp(16px,5vw,72px) 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.cn-scroller::-webkit-scrollbar{display:none}
.cn-scroller>*{scroll-snap-align:start;flex:0 0 auto}
/* rail 两侧滑动箭头（桌面悬停） */
.cn-rail__nav{position:absolute;top:0;bottom:0;width:64px;z-index:4;display:none;place-items:center;border:none;
  color:#fff;opacity:0;transition:opacity .2s}
@media(min-width:900px){.cn-rail:hover .cn-rail__nav{display:grid;opacity:1}}
.cn-rail__nav b{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);transition:.2s}
.cn-rail__nav:hover b{background:var(--mc);box-shadow:0 0 24px -4px var(--mc)}
.cn-rail__nav svg{width:22px;height:22px}
.cn-rail__nav--prev{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.cn-rail__nav--next{right:0;background:linear-gradient(270deg,var(--paper),transparent)}

/* ---- 海报卡（竖版 / 宽版）—— 悬停上浮 + 辉光 + 浮出信息 ---- */
.cn-poster{position:relative;display:block;width:var(--pw,168px);cursor:pointer}
.cn-poster[hidden]{display:none}   /* 拉黑过滤靠 card.hidden；显式 display 会压过 UA 的 [hidden]，必须补此守卫 */
.cn-poster--wide{--pw:300px}
@media(max-width:560px){.cn-poster{--pw:132px}.cn-poster--wide{--pw:236px}}
.cn-poster__fr{position:relative;aspect-ratio:2/3;border-radius:9px;overflow:hidden;background:var(--surface-2);
  box-shadow:var(--shadow-cover);transition:transform .34s cubic-bezier(.2,.7,.2,1),box-shadow .34s}
.cn-poster--wide .cn-poster__fr{aspect-ratio:16/9}
.cn-poster__fr>img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cn-poster__fb{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:12px;z-index:0;overflow:hidden;
  font-family:var(--font-serif);font-weight:700;font-size:14px;line-height:1.3;color:var(--cover-fb-ink);background:var(--cover-fb);word-break:break-word}   /* overflow:hidden 防超长书名(图片加载失败兜底态)溢出卡片边界 */
.cn-poster__fr>img{position:relative;z-index:1}
.cn-poster__grad{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px var(--cover-inset);
  background:linear-gradient(180deg,transparent 46%,rgba(8,8,12,.86) 100%)}
.cn-poster__tag{position:absolute;z-index:3;top:8px;left:8px;padding:3px 9px;border-radius:var(--r-pill);font-size:10px;font-weight:800;
  letter-spacing:.04em;color:#fff;background:rgba(255,59,92,.92);backdrop-filter:blur(4px);box-shadow:0 4px 14px -4px rgba(255,59,92,.8)}
.cn-poster__tag--done{background:rgba(230,184,115,.94);color:#1a1a22}
/* 状态徽章·左上竖叠双标（原创首发金描边 + 连载红/完结金），网格卡与列表卡共用 */
.cn-stwrap{position:absolute;z-index:3;top:8px;left:8px;display:flex;flex-direction:column;gap:5px;align-items:flex-start;pointer-events:none}
.cn-st{font-size:10px;font-weight:800;letter-spacing:.04em;line-height:1.5;padding:2px 8px;border-radius:var(--r-pill);white-space:nowrap;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cn-st--first{color:var(--gold);background:rgba(18,15,10,.5);border:1px solid color-mix(in srgb,var(--gold) 62%,transparent)}
.cn-st--live{color:#fff;background:rgba(255,59,92,.92);box-shadow:0 4px 14px -4px rgba(255,59,92,.7)}
.cn-st--done{color:#1a1a22;background:rgba(230,184,115,.94)}
.cn-lcard__cv .cn-stwrap{top:6px;left:6px;gap:4px}
.cn-lcard__cv .cn-st{font-size:9px;padding:2px 6px}
/* 原创首发·右上角斜向腰封（紧凑角标） */
.cn-ribbon{position:absolute;z-index:4;top:0;right:0;width:62px;height:62px;overflow:hidden;pointer-events:none}
.cn-ribbon b{position:absolute;top:13px;right:-20px;width:86px;transform:rotate(45deg);display:block;text-align:center;
  font-family:var(--font-sans);font-weight:800;font-size:9.5px;letter-spacing:.01em;line-height:1.7;color:#241a08;
  background:linear-gradient(135deg,#f3d6a0,var(--gold));box-shadow:0 3px 10px -3px rgba(0,0,0,.55)}
.cn-lcard__cv .cn-ribbon{width:52px;height:52px}
.cn-lcard__cv .cn-ribbon b{top:10px;right:-22px;width:76px;font-size:8.5px;padding:1px 0}
.cn-poster__dur{position:absolute;z-index:3;right:8px;top:8px;padding:3px 8px;border-radius:5px;font-size:10.5px;font-weight:700;
  font-family:var(--font-latin);color:#fff;background:rgba(0,0,0,.62);backdrop-filter:blur(4px)}
.cn-poster__play{position:absolute;z-index:3;left:50%;top:50%;transform:translate(-50%,-50%) scale(.7);opacity:0;transition:.3s}
.cn-poster__play b{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:17px;
  padding-left:3px;background:rgba(255,59,92,.94);box-shadow:0 0 30px rgba(255,59,92,.8)}
/* 浮出信息层（悬停从底部升起） */
.cn-poster__info{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:10px 11px 12px;
  transform:translateY(8px);opacity:0;transition:.3s}
.cn-poster__info .t{font-family:var(--font-serif);font-weight:700;font-size:13.5px;color:#fff;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 2px 8px rgba(0,0,0,.7)}
.cn-poster__info .m{margin-top:5px;font-size:11.5px;color:rgba(255,255,255,.78);display:flex;gap:8px;align-items:center}
.cn-poster__info .m .heat{margin-left:auto;color:var(--gold);font-family:var(--font-latin);font-weight:700}
.cn-poster__info .m .rate{margin-left:auto;color:var(--gold);font-family:var(--font-latin);font-weight:800;letter-spacing:.02em}

.cn-poster:hover .cn-poster__fr{transform:translateY(-8px) scale(1.03);box-shadow:var(--glow-red);z-index:5}
.cn-poster:hover .cn-poster__fr>img{transform:scale(1.08)}
.cn-poster:hover .cn-poster__play{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cn-poster:hover .cn-poster__info{opacity:1;transform:none}
/* 标题落在卡外（默认态） */
.cn-poster__cap{margin-top:10px;transition:opacity .2s}
.cn-poster__cap .t{font-family:var(--font-serif);font-weight:700;font-size:14px;color:var(--ink);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.cn-poster__cap .s{margin-top:4px;font-size:12px;color:var(--ink-3);display:flex;gap:8px;align-items:center;min-width:0}
.cn-poster__cap .s .author{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-poster__cap .s .heat{margin-left:auto;flex-shrink:0;color:var(--gold);font-family:var(--font-latin);font-weight:700}
/* 视频卡底部:时长(暗红钟表图标 + 数值) 左、评分 中、相对时间 右 */
.cn-poster__cap .s .cn-poster__dur2{display:inline-flex;align-items:center;gap:4px;min-width:0;color:var(--ink-2);font-family:var(--font-latin);font-weight:700}
.cn-poster__cap .s .cn-poster__dur2 svg{width:12px;height:12px;color:var(--mc);flex-shrink:0;stroke-width:2}
/* 评分:口径/配色对齐另外三频道的 .cn-lcard__rate(金色 + 拉丁字族),只是字号随本行收一档。
   放在时长与时间之间,不抢 margin-left:auto —— 那个归 .cn-poster__when,时间照旧顶右。 */
.cn-poster__cap .s .cn-poster__rate{flex-shrink:0;color:var(--gold);font-family:var(--font-latin);font-weight:800;font-size:12px;white-space:nowrap}
.cn-poster__cap .s .cn-poster__rate.cn-rate--none{color:var(--ink-3);font-family:inherit;font-weight:600}
.cn-poster__cap .s .cn-poster__when{margin-left:auto;flex-shrink:0;color:var(--ink-3);font-size:11px;font-family:var(--font-latin);font-weight:600}
.cn-poster:hover .cn-poster__cap .t{color:var(--mc)}

/* —— 海报卡·操作行（cfg.actionsHtml 时启用）：封面+文案区合并进内层 .cn-poster__link，
   操作行贯底整宽、不参与 hover 位移；按钮复用 .cn-lact*（与 .cn-lcard__act 同款） —— */
.cn-poster__link{display:block;color:inherit;text-decoration:none}
.cn-poster--act .cn-poster__cap{margin-bottom:0}
.cn-poster__act{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* ============================================================
   5 · UAA TOP 10 rail（海报背后压超大描边名次）
   ============================================================ */
/* TOP10 榜单已从 Hero 下方移到列表分页之后，原先「压缩与入口卡/封面间距」的 H5 上移规则(.cn-chero ~ .cn-top10)随之删除：
   ~ 是通用兄弟选择器，榜单挪到 <main> 之后仍是 .cn-chero 的后继兄弟，规则不删会继续生效，把榜单顶到分页器上 */
/* padding-bottom 要给足：名次数字 .cn-rank__no 用 bottom:-14px + line-height:.8 故意垂到卡片下沿以外，
   而 .cn-scroller 为了横向滚动必须 overflow-x:auto（CSS 规定另一轴不能再是 visible，只能跟着裁剪），
   数字露在 padding 之外的部分就会被 overflow-y:hidden 一刀切平。空间由 padding 让出，不靠取消裁剪。 */
.cn-top10 .cn-scroller{padding-top:18px;padding-bottom:clamp(26px,3.2vw,46px);align-items:flex-end;scroll-snap-type:none;overflow-y:hidden}
.cn-rank{position:relative;display:flex;align-items:flex-end;width:auto;cursor:pointer;padding-left:clamp(46px,5vw,72px)}
.cn-rank__no{position:absolute;left:-6px;bottom:-14px;z-index:0;font-family:var(--font-latin);font-weight:900;line-height:.8;
  font-size:clamp(120px,15vw,190px);color:transparent;
  -webkit-text-stroke:2.5px var(--line-2);
  text-stroke:2.5px var(--line-2);
  letter-spacing:-.04em;user-select:none;pointer-events:none;transition:.3s}
.cn-rank--medal .cn-rank__no{-webkit-text-stroke-color:var(--mc);text-stroke-color:var(--mc);
  text-shadow:0 0 50px rgba(255,59,92,.4)}
.cn-rank:hover .cn-rank__no{-webkit-text-stroke-color:var(--mc);text-stroke-color:var(--mc)}
.cn-rank__fr{position:relative;z-index:1;width:clamp(126px,13vw,168px);aspect-ratio:2/3;border-radius:8px;overflow:hidden;
  background:var(--surface-2);box-shadow:var(--shadow-cover);transition:transform .34s cubic-bezier(.2,.7,.2,1),box-shadow .34s}
/* 宽版(视频)频道：TOP10 封面改横图 16:9，并整体放大以增冲击力 */
.cn-rank--wide .cn-rank__fr{aspect-ratio:16/9;width:clamp(170px,19vw,264px)}
.cn-rank__fr>img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1;transition:transform .5s}
.cn-rank__fb{position:absolute;inset:0;z-index:0;display:grid;place-items:center;text-align:center;padding:10px;
  font-family:var(--font-serif);font-weight:700;font-size:13px;color:var(--cover-fb-ink);background:var(--cover-fb)}
.cn-rank__fr::after{content:"";position:absolute;inset:0;z-index:2;box-shadow:inset 0 0 0 1px var(--cover-inset);border-radius:inherit;
  background:linear-gradient(180deg,transparent 55%,rgba(8,8,12,.7))}
.cn-rank__cap{position:absolute;z-index:3;left:9px;right:9px;bottom:9px}
.cn-rank__cap .t{font-family:var(--font-serif);font-weight:700;font-size:12.5px;color:#fff;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.cn-rank__cap .h{margin-top:3px;font-size:11px;font-weight:700;color:var(--gold);font-family:var(--font-latin)}
.cn-rank:hover .cn-rank__fr{transform:translateY(-8px) scale(1.04);box-shadow:var(--glow-red);z-index:5}
.cn-rank:hover .cn-rank__fr>img{transform:scale(1.06)}

/* —— 排行榜页(novel/video/comic/audio _rank.html):复用 .cn-rank 卡片做纵向 TOP-N 榜 —— */
.cn-top10 .cn-rail__more{opacity:1;transform:none}   /* TOP10 片架「查看完整榜单」常显(漫画/有声无入口卡,这是主入口) */
/* 页头版式与会员页的 .mc-head 对齐(member.css)：返回钮与标题同一行、间距 12px，副标题另起一行缩进对齐标题。
   原来是「返回钮独占一行 + 下面一个 clamp(24,40px) 的大标题」，与站内其他带返回的页面(我要求书/原创投稿…)不一致。
   markup 顺序是 button → h1 → p，这里用 grid 显式定位，缺副标题的页面也不会错位。 */
.cn-rankhero{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:12px;
  padding:calc(58px + clamp(18px,3vw,32px)) clamp(16px,5vw,72px) 4px}   /* 顶部让开固定导航(58px) */
.cn-rankhero__t{grid-column:2;grid-row:1;font-family:var(--font-serif);font-weight:800;font-size:26px;color:var(--title);line-height:1.15;margin:0;letter-spacing:.01em}
.cn-rankhero__t b{color:var(--mc)}
.cn-rankhero__sub{grid-column:2;grid-row:2;margin:4px 0 0;font-size:13.5px;color:var(--ink-3)}
@media (max-width:600px){.cn-rankhero__t{font-size:22px}}   /* 与 .mc-head__t 的 H5 字号一致 */
.cn-rank-tabs{position:sticky;top:58px;z-index:var(--z-subnav);
  background:var(--bar-bg);backdrop-filter:saturate(150%) blur(18px);-webkit-backdrop-filter:saturate(150%) blur(18px);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.cn-rank-tabs__in{display:flex;gap:8px;flex-wrap:wrap;padding:11px clamp(16px,5vw,72px)}
.cn-rankgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:clamp(26px,3vw,40px) clamp(16px,1.8vw,28px);align-items:end;
  padding:clamp(22px,3vw,36px) clamp(16px,5vw,72px) clamp(40px,6vw,72px)}
.cn-rankgrid--wide{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.cn-rankgrid--square{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.cn-rankgrid .cn-rank{width:100%;padding-left:clamp(26px,2.8vw,40px)}
.cn-rankgrid .cn-rank__fr{width:100%}
.cn-rankgrid--square .cn-rank__fr{aspect-ratio:1/1}
.cn-rankgrid .cn-rank__no{font-size:clamp(46px,5.4vw,74px);left:-5px;bottom:-6px}
@media(max-width:560px){.cn-rankgrid{grid-template-columns:repeat(3,1fr)}.cn-rankgrid--wide{grid-template-columns:repeat(2,1fr)}}
/* 海报卡榜单(video_rank posterCard)：海报卡(同列表页) + 封面名次角标。H5 1 列 / PC 4 列 */
.cn-rankgrid--cards{display:grid;grid-template-columns:1fr;gap:clamp(18px,2vw,26px) clamp(14px,1.4vw,20px);
  align-items:start;padding:clamp(20px,3vw,32px) clamp(16px,5vw,72px) clamp(40px,6vw,72px)}
@media(min-width:640px){.cn-rankgrid--cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1024px){.cn-rankgrid--cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cn-rankgrid--cards .cn-poster{width:100%}
/* —— 名次角标·四榜统一（海报卡与列表卡共用同一份规则，不再各写一套）——
   口径：数字一律压在封面左下角（让开左上角状态角标）；1-3 金冠实色 / 4-10 频道主色描边 / 11+ 中性描边；
   数字下方一律垫一层「左下角径向暗角」，可读性只依赖这层暗角、不依赖封面本身明暗；hover 一律转频道主色。
   两种卡片只在 --rk-* 几个变量上取不同值：
   扁卡(视频 16:9)竖向只有竖卡的一半高，同一套百分比半径会让暗区太矮、数字上半截漏在封面上，
   所以扁卡单独抬高暗角半径并收窄横向扩散——这是「10 以后看不清」的真正原因。 */
.cn-wall--rank .cn-lcard__cv,.cn-rankgrid--cards .cn-poster__fr{
  --rk-scrim:radial-gradient(125% 92% at 0% 100%,rgba(0,0,0,.62),rgba(0,0,0,.18) 40%,transparent 62%);
  --rk-size:clamp(30px,8.5vw,46px);--rk-size-sm:clamp(24px,6.5vw,36px);--rk-stroke:1.6px;
  --rk-ink:rgba(255,255,255,.78)}   /* 中性档描边固定用亮色：数字永远压在暗角上，与主题明暗无关 */
.cn-rankgrid--cards .cn-poster--wide .cn-poster__fr{
  --rk-scrim:radial-gradient(62% 118% at 0% 100%,rgba(0,0,0,.72),rgba(0,0,0,.4) 34%,rgba(0,0,0,.12) 52%,transparent 68%);
  --rk-size:clamp(34px,4vw,52px);--rk-size-sm:clamp(24px,2.8vw,36px);--rk-stroke:2px}
/* 底衬：与封面内容无关的固定暗角，z-index 夹在图片(1)与数字(3)之间 */
.cn-wall--rank .cn-lcard__cv::after,.cn-rankgrid--cards .cn-poster__fr::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:var(--rk-scrim)}
/* 数字本体：位置/字号/描边/阴影/过渡一份定义，两个类名互为别名(cn-rk=列表卡, cn-rkno=海报卡) */
.cn-wall--rank .cn-rk,.cn-rankgrid--cards .cn-rkno{
  position:absolute;z-index:3;left:8px;bottom:6px;font-family:var(--font-latin);font-weight:900;
  font-size:var(--rk-size,clamp(30px,8.5vw,46px));line-height:.78;letter-spacing:-.04em;color:transparent;
  -webkit-text-stroke:var(--rk-stroke,1.6px) var(--rk-ink,rgba(255,255,255,.78));
  text-stroke:var(--rk-stroke,1.6px) var(--rk-ink,rgba(255,255,255,.78));
  text-shadow:0 1px 2px rgba(0,0,0,.85),0 2px 12px rgba(0,0,0,.55);
  user-select:none;pointer-events:none;
  transition:-webkit-text-stroke-color .25s,color .25s,text-shadow .25s}
.cn-wall--rank .cn-rk--sm,.cn-rankgrid--cards .cn-rkno--sm{font-size:var(--rk-size-sm,clamp(24px,6.5vw,36px))}   /* 3 位数(第100名)缩小 */
/* hover：两种卡片同时生效——原来只有列表卡写了这条，海报卡(视频)划过不变色就是漏在这里 */
.cn-wall--rank .cn-lcard:hover .cn-rk,.cn-rankgrid--cards .cn-poster:hover .cn-rkno{
  -webkit-text-stroke-color:var(--mc);text-stroke-color:var(--mc)}
/* 三档尊贵分级：金档实色去描边 + 强金辉光;主色档换描边色 + 主色辉光;11+ 沿用 --rk-ink 中性描边 */
.cn-wall--rank .cn-rk--gold,.cn-rankgrid--cards .cn-rkno--gold{color:var(--gold);-webkit-text-stroke:0;text-stroke:0;
  text-shadow:0 0 22px color-mix(in srgb,var(--gold) 72%,transparent),0 2px 12px rgba(0,0,0,.65),0 1px 2px rgba(0,0,0,.85)}
.cn-wall--rank .cn-rk--accent,.cn-rankgrid--cards .cn-rkno--accent{-webkit-text-stroke-color:var(--mc);text-stroke-color:var(--mc);
  text-shadow:0 0 18px color-mix(in srgb,var(--mc) 48%,transparent),0 2px 12px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.85)}

/* —— 人物目录页(actress 女优库 / authors 片商库 / audio cvs 声优库):头像圆磁贴 + 名次角标 —— */
.cn-people-bar{position:sticky;top:58px;z-index:var(--z-subnav);
  background:var(--bar-bg);backdrop-filter:saturate(150%) blur(18px);-webkit-backdrop-filter:saturate(150%) blur(18px);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.cn-people-bar__in{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:11px clamp(16px,5vw,72px)}
.cn-people-bar__ct{margin-right:auto;font-size:12.5px;color:var(--ink-3);font-family:var(--font-latin);letter-spacing:.02em}   /* 数量在左，排序条推到右 */
.cn-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
  gap:clamp(20px,2.4vw,32px) clamp(12px,1.5vw,22px);padding:clamp(22px,3vw,34px) clamp(16px,5vw,72px) 18px}
.cn-pcard{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;text-decoration:none;cursor:pointer;min-width:0}  /* min-width:0 防止超长名(nowrap)撑宽 1fr 轨道→该列头像被放大 */
.cn-pcard[hidden]{display:none}   /* 同 .cn-poster/.cn-lcard：显式 display:flex 会压过 UA 的 [hidden]，搜索过滤与分页(加载更多)全靠 card.hidden，缺此守卫则永远整页显示 */
.cn-pcard__av{position:relative;width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  background:var(--surface-2);box-shadow:var(--shadow-cover);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.cn-pcard__av>img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.cn-pcard:hover .cn-pcard__av{transform:translateY(-5px);box-shadow:var(--glow-red)}
/* 角标必须整个待在圆内：原来贴着 top:0/left:0，而那个方角落在圆外，被 overflow 裁成月牙、数字看不清。
   往里缩 12%——正方形内切圆里，左上角要落进圆,离两边各需 ≈11.7% 边长(算上角标自身 11px 的圆角),
   12% 刚好过线且在 112px(PC) / 75px(手机 4 列) 两种尺寸下都成立。用百分比而非固定 px,尺寸变了自动跟着走。 */
.cn-pcard__rk{position:absolute;top:12%;left:12%;z-index:2;min-width:22px;height:22px;padding:0 6px;border-radius:11px;
  display:grid;place-items:center;font:800 12px/1 var(--font-latin);color:#fff;
  background:rgba(8,8,12,.66);border:1px solid var(--line-2);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cn-pcard--medal .cn-pcard__rk{background:linear-gradient(135deg,var(--mc),#FF6177);border-color:transparent;box-shadow:0 4px 14px -4px var(--mc)}
.cn-pcard__nm{font-family:var(--font-serif);font-weight:700;font-size:13.5px;color:var(--title);line-height:1.2;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-pcard__ct{font-size:11.5px;color:var(--ink-3);font-family:var(--font-latin)}
.cn-pcard:focus-visible{outline:2px solid var(--mc);outline-offset:4px;border-radius:12px}
.cn-pmore{display:flex;justify-content:center;padding:6px 0 clamp(40px,6vw,64px)}
.cn-pmore[hidden]{display:none}
.cn-pmore__btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 22px;border-radius:var(--r-pill);
  font-weight:700;font-size:14px;color:var(--ink);cursor:pointer;background:var(--fill-1);border:1px solid var(--line);transition:.18s}
.cn-pmore__btn:hover{color:var(--mc);border-color:var(--mc)}
.cn-pmore__btn i{font-style:normal;font-size:12px;color:var(--ink-3);font-family:var(--font-latin)}
.cn-pgrid__empty{grid-column:1/-1;padding:48px 0;text-align:center;color:var(--ink-3);font-size:14px}
@media(max-width:560px){.cn-pgrid{grid-template-columns:repeat(3,1fr)}
  .cn-pgrid--cv{grid-template-columns:repeat(4,1fr)}        /* CV 排行榜：手机每行 4 个 */
  .cn-pgrid--cv .cn-pcard__nm{font-size:12px}
  .cn-pgrid--cv .cn-pcard__ct{font-size:10.5px}}
/* —— 片商 logo 墙(studio)：各家 logo 底色不一(白/黑/绿/粉)→统一收进「白底圆形徽章」、
   logo 居中留白(contain)，去掉左上角名次数字；尺寸更小，整洁统一。 —— */
.cn-pgrid--logo{grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:clamp(26px,3vw,42px) clamp(10px,1.3vw,18px)}   /* 卡片多了「人气」一行 → 行间距同步加大,上下两排不粘连 */
/* 「N 部影片 / N 人气」两行数据靠拢成一组：卡片整体间距收紧到 5px,再把名字与头像的间距补回原来的 9px
   (--pop = 女优排行榜:头像墙尺寸不变,只是同样多了「人气」一行,复用这套行距处理) */
.cn-pgrid--logo .cn-pcard,.cn-pgrid--pop .cn-pcard,.cn-pgrid--cv .cn-pcard{gap:5px}
.cn-pgrid--logo .cn-pcard__nm,.cn-pgrid--pop .cn-pcard__nm,.cn-pgrid--cv .cn-pcard__nm{margin-top:4px}
/* --cv 也一起：CV 卡片同样多了「人气」一行,行距不放大上下两排会粘在一起(手机每行 4 个更明显) */
.cn-pgrid--pop,.cn-pgrid--cv{row-gap:clamp(26px,3vw,42px)}
.cn-pcard__ct--pop{font-size:10.5px;color:var(--ink-3);opacity:.72}
.cn-pgrid--logo .cn-pcard__rk{display:none}                              /* 去掉每个图标左上角名次 */
.cn-pgrid--logo .cn-pcard__av{background:#fff;border:1px solid var(--line);box-shadow:0 6px 18px -10px rgba(0,0,0,.5)}
.cn-pgrid--logo .cn-pcard__av>img{object-fit:contain;padding:20%}        /* 统一白底圆形 + logo 居中留白 */
.cn-pgrid--logo .cn-pcard:hover .cn-pcard__av{transform:translateY(-4px);box-shadow:0 16px 34px -12px rgba(0,0,0,.55),0 0 0 2px rgba(230,184,115,.5)}
.cn-pgrid--logo .cn-pcard__nm{font-size:12.5px}
@media(max-width:560px){.cn-pgrid--logo{grid-template-columns:repeat(4,1fr)}}

/* —— 人物档案页(video/actress·author、audio/cv):hero + 作品集占位 —— */
.cn-phero{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,3vw,40px);
  padding:calc(58px + clamp(16px,2.5vw,28px)) clamp(16px,5vw,72px) clamp(16px,3vw,26px)}   /* 顶部让开固定导航 */
.cn-phero--rich{align-items:flex-start}
.cn-phero__backrow{flex:0 0 100%;display:flex;align-items:center;gap:10px}   /* 返回钮独占首行，位于固定导航下方→不再被遮挡(列间距由 .cn-phero 的 gap 提供) */
/* 圆钮右边的「返回」二字：钮本身不变，只是后面跟一个同样可点的文字标签(档案页的标题在头像右侧，不在钮旁边)。
   榜单页 .cn-rankhero 用同一个 .cn-rankback，但它紧挨页面标题，不加这两个字。 */
.cn-phero__backt{color:var(--ink-2);font-size:15px;font-weight:600;letter-spacing:.02em;text-decoration:none;transition:color .16s}
.cn-phero__backt:hover{color:var(--mc)}
.cn-phero__av{flex:0 0 auto;width:clamp(96px,14vw,164px);aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  background:var(--surface-2);box-shadow:var(--glow-red),var(--shadow-cover);border:2px solid var(--line-2)}
.cn-phero__av>img{width:100%;height:100%;object-fit:cover}
.cn-phero__meta{min-width:0}
.cn-phero__kick{font-family:var(--font-latin);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--mc);font-weight:700}
.cn-phero__name{font-family:var(--font-serif);font-weight:900;font-size:clamp(24px,4vw,40px);color:var(--title);
  line-height:1.08;margin:7px 0 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.cn-phero__name span{font-size:.5em;font-weight:600;color:var(--ink-3)}
.cn-phero__stats{margin-top:13px;display:flex;gap:20px;font-size:14px;color:var(--ink-2)}
.cn-phero__stats b{color:var(--title);font-family:var(--font-latin);font-weight:800;font-size:1.15em}
/* 片商档案页(video/author)：档案块被删后统计栏是头部唯一的数据行 → 竖排,两个数字各占一行 */
.cn-phero__stats--col{flex-direction:column;gap:7px}
.cn-phero__rk b{color:var(--mc)}
/* 档案信息块（封面右侧）：日文/中文/英文名·出道日 + 简介 */
.cn-phero__info{margin-top:14px;display:flex;flex-direction:column;gap:5px}
.cn-phero__row{display:flex;gap:10px;font-size:13.5px;line-height:1.55}
.cn-phero__row>span{flex:0 0 auto;width:4.5em;color:var(--ink-3)}
.cn-phero__row>b{color:var(--ink);font-weight:700;min-width:0}
.cn-phero__bio{margin:14px 0 0;font-size:13.5px;line-height:1.85;color:var(--ink-2);max-width:64ch}
@media(max-width:560px){.cn-phero__info{align-items:center}.cn-phero__bio{text-align:left}}
.cn-phero__empty{padding:50px 0;text-align:center;color:var(--ink-3);width:100%}
.cn-pworks__h{font-family:var(--font-serif);font-weight:900;font-size:clamp(18px,2.5vw,24px);color:var(--title);
  padding:0 clamp(16px,5vw,72px);margin:6px 0 0}
/* 「作品集」标题行：左标题、右排序条。左右留白改由 __bar 提供，标题自身的 padding 归零 */
.cn-pworks__bar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:0 clamp(16px,5vw,72px)}
.cn-pworks__bar .cn-pworks__h{padding:0}
.cn-worksort{display:flex;align-items:center;gap:8px}
.cn-worksort__opt{gap:5px;text-decoration:none}
/* 箭头只出现在选中项上：朝下=降序(默认)，朝上=升序 */
.cn-worksort__ar{transition:transform .18s}
.cn-worksort__ar--asc{transform:rotate(180deg)}
@media(max-width:560px){
  /* 窄屏标题与排序条分两行，排序条自己横向滚动，不挤压标题也不换行断开 */
  .cn-pworks__bar{gap:10px}
  .cn-worksort{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .cn-worksort::-webkit-scrollbar{display:none}}
.cn-pworks__ph{margin:clamp(16px,3vw,26px) clamp(16px,5vw,72px) clamp(48px,7vw,80px);padding:clamp(36px,6vw,64px);
  border:1px dashed var(--line-2);border-radius:16px;text-align:center;color:var(--ink-3);background:var(--fill-1)}
.cn-pworks__ph svg{width:38px;height:38px;color:var(--mc);opacity:.75;margin-bottom:12px}
.cn-pworks__ph p{font-family:var(--font-serif);font-weight:700;font-size:16px;color:var(--ink);margin:0}
.cn-pworks__ph span{display:block;margin-top:8px;font-size:13px}
@media(max-width:560px){.cn-phero{flex-direction:column;text-align:center;padding-top:calc(58px + 20px)}
  .cn-phero--rich{align-items:center}
  .cn-phero__name,.cn-phero__stats{justify-content:center}
  .cn-phero__stats--col{align-items:center}}    /* 竖排时主轴是纵向,居中要靠 align-items */
.cn-rankgrid .cn-rank:focus-visible{outline:2px solid var(--mc);outline-offset:5px;border-radius:10px}

/* —— 通用返回按钮(与 *_rank.html 一致的圆形图标钮)：榜单页 rankhero / 档案页 phero 共用 —— */
.cn-rankback{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;
  border-radius:50%;background:var(--fill-1);border:1px solid var(--line);color:var(--ink-2);cursor:pointer;text-decoration:none;transition:border-color .16s,color .16s}
.cn-rankback:hover{color:var(--mc);border-color:var(--mc)}
.cn-rankback>svg{width:20px;height:20px}
/* 返回钮改为与标题同行，不再需要下边距；这条同时压掉 channel-pages.css 里 .cn-rankback 的 margin-bottom:14px */
.cn-rankhero>.cn-rankback{grid-column:1;grid-row:1;margin-bottom:0}

/* —— 人物排行榜增强：搜索框(置于 people-bar，opt-in) —— */
/* 定宽居中：搜索框不再跟着页面宽度一起拉长(宽屏下横贯全屏的输入框既难看也难点),
   最大 600px、左右 auto 居中；上下留白加大,不跟标题/排序条挤在一起。
   width:100% + max-width 而不是 min() —— 老 iOS Safari 对 min() 支持不全,这里没必要冒险。 */
.cn-people-bar__find{display:flex;align-items:center;gap:9px;
  width:100%;max-width:600px;margin:0 auto;padding:16px clamp(16px,5vw,20px) 12px}
.cn-people-bar__find>svg{flex:0 0 auto;width:17px;height:17px;color:var(--ink-3)}
.cn-people-bar__find input{flex:1 1 auto;min-width:0;height:38px;padding:0 15px;border-radius:var(--r-pill);
  background:var(--fill-1);border:1px solid var(--line);color:var(--ink);font:inherit;font-size:14px}
.cn-people-bar__find input:focus{outline:none;border-color:var(--mc)}
.cn-people-bar__find input::placeholder{color:var(--ink-3)}
.cn-people-bar__find input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
/* 这两条只属于「无按钮」模式的小圆形清空钮；必须用 :not() 排除 --btn 模式，否则 button 通配会罩住
   searchButton 模式的「搜索」实心按钮——:hover 把文字染成品牌红压在红色渐变底上，糊成一坨暗色，
   而触屏的 :hover 会一直粘到你点别处才解除（表现为「搜完按钮发黑，点一下页面才恢复」）。 */
.cn-people-bar__find:not(.cn-people-bar__find--btn) button{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  background:var(--fill-1);border:1px solid var(--line);color:var(--ink-3);font-size:17px;line-height:1;cursor:pointer}
@media(hover:hover){
  .cn-people-bar__find:not(.cn-people-bar__find--btn) button:hover{color:var(--mc);border-color:var(--mc)}
}
/* searchButton 模式：对齐右上角全局搜索弹窗(.cn-search 同款 字段框 / 实心搜索按钮 / 方形关闭) */
.cn-people-bar__find--btn{gap:10px}
.cn-people-bar__find--btn .cn-people-bar__field{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;
  background:var(--fill-1);border:1px solid var(--line);border-radius:12px;transition:.15s}
.cn-people-bar__find--btn .cn-people-bar__field:focus-within{border-color:var(--line-2);background:var(--fill-2)}
.cn-people-bar__find--btn .cn-people-bar__field>svg{flex:none;width:18px;height:18px;color:var(--ink-3)}
.cn-people-bar__find--btn .cn-people-bar__field input{flex:1;min-width:0;height:auto;padding:0;border:0;outline:0;background:none;border-radius:0;
  font-size:15px;font-weight:500;color:var(--ink)}
/* color 显式声明,不靠继承:任何上游规则都别想再把这颗按钮的文字染成非白色 */
/* flex:none + nowrap：默认可收缩,窄屏(390px 以下)会被输入框挤到只剩一个字宽,「搜索」二字竖排成两行 */
.cn-people-bar__find--btn .cn-people-bar__go{flex:none;white-space:nowrap;width:auto;height:42px;padding:0 18px;border:0;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(135deg,#FF3B5C,#FF6177);color:#fff;font-weight:700;font-size:14px;letter-spacing:.02em;cursor:pointer;
  box-shadow:0 6px 14px -8px rgba(255,59,92,.55);transition:.15s}
/* hover 效果一律锁在真有指针的设备上：触屏点完 :hover 会粘着不放,任何 hover 态都会变成「卡住的样子」 */
@media(hover:hover){
  .cn-people-bar__find--btn .cn-people-bar__go:hover{color:#fff;transform:translateY(-1px);box-shadow:0 10px 20px -9px rgba(255,59,92,.7)}
  .cn-people-bar__find--btn .cn-people-bar__x:hover{color:var(--ink);border-color:var(--line-2);background:var(--fill-2)}
}
.cn-people-bar__find--btn .cn-people-bar__x{flex:none;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);
  background:var(--fill-1);color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.15s;
  -webkit-tap-highlight-color:transparent}
.cn-people-bar__find--btn .cn-people-bar__x svg{width:18px;height:18px}
@media(max-width:600px){
  .cn-people-bar__find{padding:12px 16px 10px}          /* H5：留白收一点,但仍比原来的 10/4 松 */
  .cn-people-bar__find--btn{gap:8px}
  .cn-people-bar__find--btn .cn-people-bar__field{height:40px;border-radius:11px;padding:0 12px;gap:8px}
  /* 16px 是 iOS 的红线：输入框字号 <16px,聚焦时 Safari 会自动放大整页(且退出时不一定缩回去)。
     视觉上 15→16 在手机上几乎看不出差别,但能彻底免掉那次跳变。 */
  .cn-people-bar__find--btn .cn-people-bar__field input{font-size:16px}
  .cn-people-bar__find--btn .cn-people-bar__go{height:40px;padding:0 13px;font-size:13px;border-radius:11px}
  .cn-people-bar__find--btn .cn-people-bar__x{width:40px;height:40px;border-radius:11px}
}
/* 窄屏(iPhone SE 一类 ≤380px)：三件套横排容易把输入框挤到只剩两三个字,
   关闭钮收窄、搜索钮再紧一档,保证输入区还有可用宽度 */
@media(max-width:380px){
  .cn-people-bar__find{padding-left:12px;padding-right:12px}
  .cn-people-bar__find--btn .cn-people-bar__go{padding:0 11px}
  .cn-people-bar__find--btn .cn-people-bar__x{width:36px}
}

/* ============================================================
   6 · 首页 · 模块跳板（边到边横排，影院感）
   ============================================================ */
.cn-mods{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:6px clamp(16px,5vw,72px) 0;margin-top:-44px;position:relative;z-index:6}
@media(min-width:680px){.cn-mods{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.cn-mods{grid-template-columns:repeat(5,1fr)}}
.cn-mod{position:relative;overflow:hidden;display:flex;align-items:center;gap:13px;padding:16px 17px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s);transition:transform .25s,box-shadow .25s,border-color .25s}
.cn-mod::before{content:"";position:absolute;inset:0;opacity:.0;transition:.25s;
  background:radial-gradient(120% 120% at 0% 0%,color-mix(in srgb,var(--c) 20%,transparent),transparent 60%)}
.cn-mod:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 50%,var(--line));box-shadow:var(--shadow-m)}
.cn-mod:hover::before{opacity:1}
.cn-mod__ic{position:relative;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;flex-shrink:0;
  color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.cn-mod__ic svg{width:21px;height:21px}
.cn-mod__b{position:relative;min-width:0}
.cn-mod__b b{display:block;font-family:var(--font-serif);font-weight:800;font-size:15.5px;color:var(--title)}
.cn-mod__b span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ============================================================
   7 · AI 创作横幅（首页穿插）
   ============================================================
   一条斜切的四格「出片序列」，从看不清的念头逐格降噪、对焦，最后一格成片。
   三件事让它不至于变成"四个等分方块"：
     · 宽度递增(0.85/1/1.3/1.85)——节奏往成片那格收，最后一格才是主角；
     · 整条 skewX(-7deg)——切口有速度感；格内的图反向 skew 回来，画面不歪；
     · 宽度与虚实同步递进——不放序号文字，画面自己就把"第几步"讲清楚了。
   虚→实的分档全在 filter 上(见 __fr--1..4)，与图片内容无关，换图只改模板 src。
   --aib-pad / --aib-skew 抽成变量：前者 H5 下要拿去做负外边距，后者要在两处成对使用(斜切与反斜切)。 */
.cn-aib{--aib-pad:clamp(24px,4vw,56px);--aib-skew:-9deg;
  position:relative;isolation:isolate;overflow:hidden;
  margin:clamp(30px,5vw,56px) clamp(16px,5vw,72px);padding:var(--aib-pad);
  min-height:clamp(352px,31vw,486px);display:flex;align-items:center;
  border-radius:24px;background:var(--ai-cine-bg);border:1px solid var(--line);box-shadow:var(--shadow-m)}

/* 左侧虚幻底：序列第一格那张图整幅铺开、糊到只剩色场，文案压在它上面 */
.cn-aib__bg{position:absolute;inset:0;z-index:0;pointer-events:none;user-select:none}
.cn-aib__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;
  transform:scale(1.3);filter:blur(46px) saturate(1.45) brightness(.48)}
:root[data-theme="light"] .cn-aib__bg img{filter:blur(46px) saturate(1.3) brightness(1.1) opacity(.5)}
/* 色斑压左半边(念头那一侧)，右边留干净让成片自己说话；缓慢漂移让底不死板 */
.cn-aib__aura{position:absolute;inset:-24%;z-index:1;pointer-events:none;filter:blur(54px);
  background:
    radial-gradient(26% 36% at 20% 22%,rgba(184,92,255,.52),transparent 70%),
    radial-gradient(22% 30% at 6% 80%,rgba(89,200,255,.34),transparent 72%),
    radial-gradient(20% 28% at 38% 88%,rgba(255,59,92,.26),transparent 72%);
  animation:cnAibDrift 26s ease-in-out infinite alternate}
@keyframes cnAibDrift{from{translate:0 0;scale:1}to{translate:2.5% -2%;scale:1.08}}
@media(prefers-reduced-motion:reduce){.cn-aib__aura{animation:none}}
/* veil 压在 strip 之下(z1)，只给左侧文案区加对比度，不会把右边的成片一起压暗 */
.cn-aib__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,var(--hero-veil-bot) 0 30%,var(--hero-veil-mid) 58%,transparent 76%)}
/* 幽灵大字：只留描边、几乎不可见，被面板下缘切掉一截 —— 给左半边一点版面重量，不抢文案 */
.cn-aib__ghost{position:absolute;left:calc(var(--aib-pad) - .06em);bottom:-.34em;z-index:1;pointer-events:none;user-select:none;
  font-family:var(--font-latin);font-style:italic;font-weight:900;letter-spacing:-.02em;line-height:.8;
  font-size:clamp(110px,14vw,214px);color:transparent;-webkit-text-stroke:1.3px rgba(255,255,255,.085)}
/* 胶片颗粒：一层极淡的噪点，专治大面积深色渐变的色带，是"贵"和"廉价"的分水岭 */
.cn-aib__grain{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.32;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}

.cn-aib__strip{position:absolute;left:20%;right:-8%;top:-4%;bottom:-4%;z-index:2;display:flex;pointer-events:none;
  transform:skewX(var(--aib-skew));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%);
  mask-image:linear-gradient(90deg,transparent 0,#000 26%)}
.cn-aib__fr{position:relative;flex:0 1 0;min-width:0;margin:0;overflow:hidden}
/* 宽度递增：节奏往成片那格收 */
.cn-aib__fr--1{flex-grow:.8}.cn-aib__fr--2{flex-grow:1}.cn-aib__fr--3{flex-grow:1.45}.cn-aib__fr--4{flex-grow:2.6}
/* 反向 skew 把画面掰正；scale 补两件事：斜切后平行四边形的角要被填满，blur 又会向外采样露灰边 */
.cn-aib__im{position:absolute;inset:0;display:block;transform:skewX(calc(-1 * var(--aib-skew))) scale(1.52);transform-origin:center}
.cn-aib__im img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.cn-aib__fr + .cn-aib__fr{box-shadow:inset 1px 0 0 rgba(255,255,255,.16)}
.cn-aib__fr--1 .cn-aib__im img{filter:blur(20px) saturate(1.35) brightness(.48)}
.cn-aib__fr--2 .cn-aib__im img{filter:blur(9px) saturate(1.2) brightness(.64)}
.cn-aib__fr--3 .cn-aib__im img{filter:blur(3px) brightness(.84)}
.cn-aib__fr--4{box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),-34px 0 62px -26px rgba(0,0,0,.85)}
.cn-aib__fr--4 figcaption{position:absolute;right:20px;bottom:18px;padding:6px 16px;border-radius:999px;
  transform:skewX(calc(-1 * var(--aib-skew)));
  font-size:12.5px;font-weight:800;letter-spacing:.06em;color:#20122e;
  background:linear-gradient(96deg,#FFC9D6,#D8B6FF);border:1px solid rgba(255,255,255,.55);
  box-shadow:0 8px 22px -10px rgba(216,182,255,.9)}

.cn-aib__copy{position:relative;z-index:3;min-width:0;max-width:min(46%,500px);
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(11px,1.3vw,17px)}
/* kicker 带一根发光短线，与频道 Hero 的 .cn-chero__k 同一套语言 */
.cn-aib__k{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-latin);font-style:italic;
  font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#DCCCFF}
.cn-aib__k::before{content:"";width:30px;height:1.5px;background:linear-gradient(90deg,transparent,#B98AFF);
  box-shadow:0 0 10px #B98AFF}
.cn-aib__t{margin:0;font-family:var(--font-serif);font-weight:900;line-height:1.12;letter-spacing:.01em;
  font-size:clamp(28px,4vw,54px);color:#fff;text-shadow:0 6px 40px rgba(0,0,0,.75);
  /* 标题恒单行。上限 54px 是算出来的：标题连标点共 9 个全角字≈9em，
     文案区最宽 500px(见 .cn-aib__copy 的 max-width)，9em ≤ 500 → em ≤ 55。
     改标题字数或改文案区宽度时，这个上限要跟着重算，否则会溢出到右边的画面上。 */
  white-space:nowrap}
/* 前半句白、后半句渐变亮：文字的虚→实与右边序列同一个节奏 */
.cn-aib__t em{font-style:normal;background:linear-gradient(96deg,#FF5C7A,#C89BFF 50%,#7FD4FF);
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
.cn-aib__d{margin:0;font-size:clamp(13.5px,1.1vw,16.5px);line-height:1.85;
  color:rgba(255,255,255,.78);text-shadow:0 2px 14px rgba(0,0,0,.65)}
.cn-aib__tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.cn-aib__tags li{padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  color:rgba(255,255,255,.86);background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cn-aib__go{position:relative;display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 30px;margin-top:5px;
  border-radius:999px;font-size:16px;font-weight:800;color:#fff;text-decoration:none;overflow:hidden;
  background:linear-gradient(96deg,#FF3B5C,#B85CFF);box-shadow:0 16px 36px -16px rgba(184,92,255,.95);transition:.18s}
/* hover 时一道高光扫过按钮 */
.cn-aib__go::after{content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.42) 50%,transparent 70%);transition:transform .55s ease}
.cn-aib__go:hover::after{transform:translateX(120%)}
.cn-aib__go:hover{transform:translateY(-2px);box-shadow:0 22px 44px -16px rgba(184,92,255,1)}
.cn-aib__go svg{position:relative;width:17px;height:17px;transition:transform .18s}
.cn-aib__go:hover svg{transform:translateX(3px)}

/* H5：文案在上、序列落到下方并出血到面板左右底三边；斜切保留，淡入方向改成从上缘 */
@media(max-width:900px){
  .cn-aib{display:block;min-height:0;padding-bottom:0}
  .cn-aib__copy{max-width:none}
  .cn-aib__ghost{display:none}
  .cn-aib__veil{background:linear-gradient(0deg,rgba(0,0,0,.42),transparent 62%)}
  .cn-aib__strip{position:relative;left:auto;right:auto;top:auto;bottom:auto;
    height:clamp(228px,52vw,320px);margin:clamp(18px,4vw,26px) calc(-1 * var(--aib-pad) - 8px) 0;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);
    mask-image:linear-gradient(180deg,transparent 0,#000 22%)}
}
@media(max-width:560px){
  .cn-aib{--aib-skew:-7deg;border-radius:20px}
  /* 窄屏四格每格只剩 80 来 px，第一格本来就糊得看不出东西，砍掉给后三格让宽度 */
  .cn-aib__fr--1{display:none}
  /* 窄屏同样单行：360px 屏下 8.6vw≈31px，9 个全角字≈279px，仍在可用宽度内 */
  .cn-aib__t{font-size:clamp(28px,8.4vw,42px)}
  .cn-aib__d{font-size:12.8px;line-height:1.78}
  .cn-aib__tags li{font-size:10.5px;padding:4px 9px}
  .cn-aib__go{height:44px;padding:0 20px;font-size:14px}
  .cn-aib__fr--4 figcaption{right:11px;bottom:10px;font-size:10px;padding:3px 9px}
}

/* ============================================================
   8 · 频道 · 吸顶半透明筛选/排序 chip 条（浮在内容上）
   ============================================================ */
.cn-filterbar{position:sticky;top:58px;z-index:var(--z-subnav);
  background:var(--bar-bg);backdrop-filter:saturate(150%) blur(18px);-webkit-backdrop-filter:saturate(150%) blur(18px)}
.cn-filterbar__in{display:flex;align-items:center;gap:10px;padding:11px clamp(16px,5vw,72px);overflow-x:auto;scrollbar-width:none}
.cn-filterbar__in::-webkit-scrollbar{display:none}
.cn-filterbar__t{font-family:var(--font-serif);font-weight:900;font-size:17px;color:var(--title);flex-shrink:0;margin-right:6px}
.cn-filterbar__t em{font-family:var(--font-latin);font-style:italic;font-size:12px;color:var(--mc);margin-left:6px;letter-spacing:.1em}
.cn-grp{display:flex;align-items:center;gap:7px;flex-shrink:0}
.cn-grp__lbl{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:0 2px 0 8px}
.cn-divider{width:1px;height:22px;background:var(--line);flex-shrink:0;margin:0 4px}
.cn-chip{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:var(--r-pill);font-size:12.5px;
  font-weight:600;letter-spacing:.02em;background:var(--fill-1);color:var(--ink-2);border:1px solid var(--line);cursor:pointer;
  transition:.18s;white-space:nowrap;flex-shrink:0}
.cn-chip:hover{border-color:var(--line-2);color:var(--ink)}
.cn-chip--on{background:color-mix(in srgb,var(--mc) 16%,transparent);color:var(--mc);
  border-color:color-mix(in srgb,var(--mc) 45%,transparent);box-shadow:0 0 16px -6px var(--mc)}
.cn-sortopt__lab{display:inline-flex;align-items:center}
.cn-count{margin-left:auto;flex-shrink:0;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-3);padding-left:8px}
/* 作品数后面的当前搜索词标签(#wallKw)。× 用 -6px 外挑到右上角:筛选条 .cn-filterbar__in 是 overflow-x:auto
   (另一轴只能跟着裁剪),外挑值必须小于它 11px 的内边距,否则会被裁掉半个圈。
   H5 的 .cn-fbar__lite 是 nowrap,故 min-width:0 + max-width + 省略号,长词不把排序按钮挤出去。 */
.cn-kw{position:relative;display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;max-width:min(42vw,220px);
  height:26px;padding:0 11px;border-radius:var(--r-pill);font-size:12px;font-weight:700;
  background:color-mix(in srgb,var(--mc) 16%,transparent);color:var(--mc);
  border:1px solid color-mix(in srgb,var(--mc) 40%,transparent)}
.cn-kw[hidden]{display:none}   /* 盖掉 display:inline-flex,否则 hidden 属性不生效 */
.cn-kw__t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cn-kw__x{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;
  font-style:normal;font-size:12px;line-height:1;cursor:pointer;color:#fff;background:var(--mc);box-shadow:0 1px 4px rgba(0,0,0,.28)}
.cn-kw__x:hover{filter:brightness(1.12)}
@media(max-width:760px){.cn-kw{height:24px;font-size:11.5px;max-width:38vw}}
/* 频道筛选条·两行结构（顶行 标题+排序+计数；次行 题材 facet + 更多/排序）。默认单行频道不受影响 */
.cn-grp--sort{margin-left:auto}
.cn-filterbar--wrap .cn-filterbar__in{flex-direction:column;align-items:stretch;overflow:visible;gap:9px;padding:11px clamp(16px,5vw,72px)}
.cn-fbar__top{display:flex;align-items:center;gap:8px;min-width:0}
.cn-fbar__top .cn-grp{flex-wrap:wrap}
.cn-fbar__top .cn-count{margin-left:14px;padding-left:0;flex-shrink:0}
.cn-fbar__facets{display:flex;align-items:center;gap:8px;min-width:0}
@media(min-width:761px){
  .cn-fbar__top{align-items:flex-start}
  .cn-fbar__top .cn-fgroup{flex:1 1 auto;min-width:0;align-items:flex-start}         /* 题材占左,撑开把排序推到右 */
  .cn-fbar__top .cn-fgroup .cn-grp{flex-wrap:wrap}
  /* 标题/题材/排序 标签与计数 按 chip 高度(32px)垂直居中，与首行 chip 对齐 */
  .cn-fbar__top .cn-filterbar__t,.cn-fbar__top .cn-grp__lbl,.cn-fbar__top .cn-count{display:inline-flex;align-items:center;min-height:32px}
  .cn-fbar__facets .cn-morebtn{flex:0 0 auto}                                         /* 更多筛选：单独一行，左对齐 */
}

/* ============================================================
   8.5 · 频道 · 功能入口卡（Hero 与 TOP10 之间；频道传 entries 时渲染）
   ============================================================ */
.cn-entries{display:grid;grid-template-columns:repeat(var(--ne,4),1fr);gap:clamp(10px,1.2vw,16px);
  padding:clamp(18px,2.4vw,30px) clamp(16px,5vw,72px) 0}
@media(max-width:760px){
  .cn-entries{grid-template-columns:repeat(2,1fr)}
  .cn-chero:not(.cn-chero--wide) ~ .cn-entries{margin-top:-14px;padding-top:clamp(12px,1.6vw,20px);position:relative;z-index:3}
  /* margin-top 负值把入口卡拉上去,盖住封面图底部与入口卡之间原本的空白缝隙;z-index 确保卡片压在封面淡出区之上;仅 H5 生效 */
}
.cn-entry{position:relative;display:flex;flex-direction:column;gap:5px;
  padding:15px 16px 14px;border-radius:var(--r-card);background:var(--surface);
  border:1px solid var(--line);cursor:pointer;transition:.18s;overflow:hidden}
.cn-entry:hover{border-color:color-mix(in srgb,var(--mc) 45%,transparent);
  background:var(--fill-1);transform:translateY(-2px);box-shadow:var(--shadow-s)}
.cn-entry__ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  color:var(--mc);background:color-mix(in srgb,var(--mc) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--mc) 30%,transparent);margin-bottom:3px}
.cn-entry__t{font-family:var(--font-serif);font-weight:800;font-size:15px;color:var(--title)}
.cn-entry__d{font-size:12px;color:var(--ink-3);line-height:1.4}
.cn-entry__arr{position:absolute;top:14px;right:14px;color:var(--ink-3);opacity:.5;transition:.18s}
.cn-entry:hover .cn-entry__arr{color:var(--mc);opacity:1;transform:translate(2px,-2px)}
.cn-entry:focus-visible{outline:2px solid var(--mc);outline-offset:3px}

/* ============================================================
   8.6 · 频道 · 标签展开面板（PC 原地展开 / H5 底部 sheet）+ 分组包裹 + 更多筛选按钮
   ============================================================ */
.cn-fgroup{display:inline-flex;align-items:center;flex-shrink:0}

.cn-morebtn{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;flex-shrink:0;
  border-radius:var(--r-pill);font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;
  color:var(--mc);background:color-mix(in srgb,var(--mc) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--mc) 38%,transparent);transition:.18s}
.cn-morebtn:hover{background:color-mix(in srgb,var(--mc) 20%,transparent)}
.cn-morebtn svg{transition:.2s}
.cn-morebtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.cn-morebtn__mb{display:none}
.cn-morebtn__n{font-style:normal;font-family:var(--font-latin);font-weight:800;font-size:11px;min-width:16px;height:16px;
  padding:0 4px;border-radius:9px;display:none;place-items:center;background:var(--mc);color:#fff}
.cn-morebtn__n.on{display:grid}

/* 网格/列表 显示方式切换（facets 行右侧；移动端隐藏） */
.cn-viewtog{display:inline-flex;gap:2px;padding:2px;border-radius:10px;background:var(--fill-1);border:1px solid var(--line);flex-shrink:0;margin-left:auto}
.cn-viewtog__b{width:34px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--ink-3);background:none;border:none;cursor:pointer;transition:.15s}
.cn-viewtog__b:hover{color:var(--ink)}
.cn-viewtog__b.on{background:var(--surface);color:var(--mc);box-shadow:var(--shadow-s)}
.cn-viewtog__b svg{width:17px;height:17px}
@media(max-width:760px){.cn-mc-b .cn-viewtog{display:none}}

/* 筛选/排序浮层的层级基准：必须盖住固定顶栏(--z-sticky 600)、底部标签栏(--z-tabbar 540)与吸顶筛选行
   (--z-subnav 500)，否则遮罩挡不住顶栏——H5 sheet 顶部正好压在顶栏下方，点浮层的「关闭 X」会打到
   正上方的用户头像，误弹登录框；同时须低于登录弹层(--z-modal)，登录框仍要盖在浮层之上 */
.cn-fpveil{position:fixed;inset:0;z-index:calc(var(--z-sticky) + 10);background:rgba(0,0,0,.5);backdrop-filter:blur(2px)}
/* —— 卡片化筛选（filterCard 模式）：每组一行"标签:选项"，更多筛选条件居中 —— */
.cn-fcard{margin:18px clamp(16px,5vw,72px) 4px;padding:16px 20px 12px;border:1px solid var(--line);border-radius:18px;background:var(--surface);scroll-margin-top:68px}  /* 锚点滚动落点让开固定导航(58px) */
.cn-fcard .cn-fgroup{display:flex;align-items:flex-start;gap:14px;padding:6px 0}
.cn-fgroup[hidden]{display:none!important}  /* 级联收起「分类」组时生效(区域未选) */
.cn-taggrp[hidden],.cn-tagnav button[hidden]{display:none!important}  /* 浮层内「分类」组/导航按钮随区域级联收起 */
.cn-tag--clear{display:none!important}  /* 全部区域/全部分类/全部状态 先隐藏；再次点选中项即可取消 */
.cn-fcard .cn-fgroup+.cn-fgroup{border-top:1px dashed color-mix(in srgb,var(--line) 60%,transparent)}
.cn-fcard .cn-grp__lbl{flex:0 0 86px;font-size:13px;font-weight:800;color:var(--ink-3);line-height:30px;white-space:nowrap}
.cn-fcard .cn-grp{display:flex;flex-wrap:wrap;gap:4px 2px;flex:1;min-width:0}
.cn-fcard__more{display:flex;justify-content:center;padding:10px 0 2px;margin-top:6px;border-top:1px dashed color-mix(in srgb,var(--line) 60%,transparent)}
.cn-fcard__morebtn{position:relative;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 18px;border-radius:var(--r-pill);
  font-size:13px;font-weight:700;color:var(--mc);border:1px solid color-mix(in srgb,var(--mc) 45%,transparent);
  background:color-mix(in srgb,var(--mc) 7%,transparent);cursor:pointer;transition:.15s}
.cn-fcard__morebtn:hover{background:color-mix(in srgb,var(--mc) 14%,transparent)}
.cn-fcard__morebtn .cn-morebtn__n:empty{display:none}
/* clamp 变体(video)：每排条件常驻单行，PC 超出则截断 + 右缘渐隐(…)，点「更多筛选条件」弹出完整筛选 */
.cn-fcard--clamp .cn-grp{flex-wrap:nowrap;overflow:hidden}
.cn-fcard--clamp .cn-grp .cn-tag,.cn-fcard--clamp .cn-grp .cn-chip{flex-shrink:0;white-space:nowrap}
/* clamp(video)·PC：本排标签超出时，隐藏放不下的整枚标签，行尾以可点「更多…」收口(点开筛选弹窗)；未超出/非 PC 不显示 */
.cn-grp__more{display:none;flex-shrink:0;align-self:center;align-items:center;height:30px;padding:0 4px 0 8px;
  border:0;background:none;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--mc);white-space:nowrap}
.cn-grp__more:hover{filter:brightness(1.12)}
.cn-fcard--clamp .cn-fgroup--of .cn-grp__more{display:inline-flex}
@media(max-width:760px){
  .cn-fcard{margin:12px 10px 2px;padding:12px 12px 8px}
  /* H5：每组单行横滑(不换行)，右缘渐隐提示可滑 */
  .cn-fcard .cn-fgroup{gap:10px;align-items:center}
  .cn-fcard .cn-grp__lbl{flex-basis:64px;font-size:12.5px}
  .cn-fcard .cn-grp{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent)}
  .cn-fcard .cn-grp::-webkit-scrollbar{display:none}
  .cn-fcard .cn-grp .cn-chip{flex-shrink:0;white-space:nowrap}
  .cn-grp__more{display:none!important}   /* H5 维持横滑，不显示「更多」 */
}
/* 吸顶轻量行：计数靠左 + 排序chips贴右(无"排序"字样) */
.cn-fbar__lite{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%}
.cn-fbar__lite .cn-count{font-size:12.5px;font-weight:600;letter-spacing:.02em;font-family:var(--font-sans)}
.cn-fbar__lite .cn-fbar__sp{flex:1}
.cn-fbar__lite .cn-count{margin-left:0}
.cn-fbar__lite .cn-grp{margin-left:auto;justify-content:flex-end}
/* H5：计数+排序按钮一行;chips 收进底部排序弹窗 */
@media(max-width:760px){.cn-fbar__lite{gap:6px;flex-wrap:nowrap}
  .cn-fbar__lite .cn-count{font-size:11.5px;white-space:nowrap}
  .cn-fbar__lite .cn-grp{display:none}
  .cn-fbar__lite .cn-sortbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;margin-left:auto;
    height:34px;padding:0 14px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;cursor:pointer;
    color:var(--ink);background:var(--fill-1);border:1px solid var(--line)}}

.cn-filterpanel{display:none}
.cn-filterpanel.open{display:block}
.cn-fp__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cn-fp__head b{font-family:var(--font-serif);font-weight:900;font-size:18px;color:var(--title)}
.cn-fp__x{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);background:var(--fill-1);border:1px solid var(--line)}
.cn-fp__sec{padding:6px 0}
.cn-fp__lbl{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:6px 0 10px}
.cn-fp__lbl em{font-style:normal;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-3);opacity:.8;margin-left:8px}
.cn-tagcloud{display:flex;flex-wrap:wrap;gap:8px}
.cn-tag{display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;
  background:var(--fill-1);color:var(--ink-2);border:1px solid var(--line);cursor:pointer;transition:.16s}
.cn-tag:hover{border-color:var(--line-2);color:var(--ink)}
.cn-tag--inc{background:color-mix(in srgb,var(--mc) 18%,transparent);color:var(--mc);border-color:color-mix(in srgb,var(--mc) 50%,transparent)}
.cn-tag--ex{background:transparent;color:var(--ink-3);border-color:var(--line);text-decoration:line-through;opacity:.72}
.cn-fp__active{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cn-fp__active:not(:empty){padding:12px 0 2px}
.cn-active__lbl{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--ink-3)}
.cn-active{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 5px 0 11px;border-radius:var(--r-pill);font-size:12px;font-weight:700}
.cn-active--inc{background:color-mix(in srgb,var(--mc) 16%,transparent);color:var(--mc);border:1px solid color-mix(in srgb,var(--mc) 40%,transparent)}
.cn-active--ex{background:var(--fill-1);color:var(--ink-3);border:1px solid var(--line)}
.cn-active__x{cursor:pointer;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:14px;line-height:1;opacity:.7}
.cn-active__x:hover{opacity:1;background:rgba(0,0,0,.14)}
.cn-fp__foot{display:none}

/* PC（≥761）：居中弹窗 = 完整筛选中心（题材/状态/篇幅/来源 + 标签 + 已选 + 操作行） */
@media(min-width:761px){
  .cn-fpveil{position:fixed;inset:0;z-index:calc(var(--z-sticky) + 10);background:rgba(8,8,12,.55);
    backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
  .cn-fpveil[hidden]{display:none}
  .cn-filterpanel.open{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:calc(var(--z-sticky) + 11);
    width:min(760px,94vw);max-height:min(80vh,680px);overflow:auto;
    background:var(--surface);border:1px solid var(--line);border-radius:20px;
    box-shadow:0 40px 100px -30px rgba(0,0,0,.8);padding:18px 24px 18px;animation:cnFpIn .2s ease both}
  .cn-fp__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
  .cn-fp__head b{font-family:var(--font-serif);font-size:16px;color:var(--title)}
  .cn-fp__foot{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:14px}
  .cn-fp__primary .cn-fgroup{display:flex;align-items:flex-start;padding:7px 0}
  .cn-fp__primary .cn-fgroup+.cn-fgroup{border-top:1px dashed color-mix(in srgb,var(--line) 60%,transparent)}
  .cn-fp__primary .cn-grp__lbl{flex:0 0 78px;margin:6px 10px 0 0}
  .cn-fp__primary .cn-grp{flex-wrap:wrap}
}
@keyframes cnFpIn{from{opacity:0;transform:translate(-50%,calc(-50% + 10px))}to{opacity:1;transform:translate(-50%,-50%)}}
@media (prefers-reduced-motion:reduce){.cn-filterpanel.open{animation:none}}
/* 吸顶"全部小说/排序"行(--z-subnav)本身就低于浮层遮罩,无需再按 body.cn-fp-lock 临时压低 —
   那种写法依赖全站共用的布尔类:浮层上再开登录框、关掉登录框时该类被一并移除,吸顶行就会重新
   浮到浮层之上(表现为筛选浮层里横插一条"共 N 部作品 · 排序")。层级固定在 CSS 里才不会被状态影响。 */
/* H5（≤760）：底部 sheet，显示全维度+标签+操作；同时隐藏 bar 里的进阶分组 */
@media(max-width:760px){
  .cn-filterbar__in .cn-fgroup--adv{display:none}
  /* max-height 用 dvh(带 vh 兜底)：iOS 上 vh 按「地址栏收起」的大视口算,84vh 会超出实际可视高度,
     sheet 顶部被顶栏乃至屏幕外吞掉,标题行的「关闭 X」够不着 —— dvh 才是当前可视高度 */
  .cn-filterpanel.open{position:fixed;left:0;right:0;bottom:0;z-index:calc(var(--z-sticky) + 11);
    max-height:84vh;max-height:84dvh;overflow:auto;
    background:var(--surface);border-radius:18px 18px 0 0;border-top:1px solid var(--line);
    box-shadow:0 -24px 60px -20px rgba(0,0,0,.6);padding:16px 18px calc(20px + env(safe-area-inset-bottom));
    animation:cnSheet .26s cubic-bezier(.2,.7,.2,1)}
  .cn-fp__primary{display:block;margin-bottom:4px}
  .cn-fp__primary .cn-fgroup{display:block;margin-bottom:12px}
  .cn-fp__primary .cn-grp__lbl{display:block;width:100%;margin:0 0 9px 0}
  .cn-fp__primary .cn-grp{flex-wrap:wrap}
  .cn-fp__foot{display:grid;grid-template-columns:auto 1fr;gap:10px;margin-top:14px;position:sticky;bottom:0;
    padding:12px 0 0;background:linear-gradient(0deg,var(--surface) 72%,transparent)}
  .cn-morebtn__pc{display:none}
  .cn-morebtn__mb{display:inline}
}
/* 弹窗底部按钮(清除/确定)与滚动锁：PC/H5 通用(样式对齐 H5) */
.cn-fp__reset{height:38px;padding:0 16px;border-radius:11px;font-weight:700;cursor:pointer;color:var(--ink-2);background:var(--fill-1);border:1px solid var(--line);transition:.15s}
.cn-fp__reset:hover{border-color:var(--line-2);color:var(--ink)}
.cn-fp__apply{height:38px;border-radius:11px;font-weight:800;cursor:pointer;color:#fff;background:var(--mc);border:none;box-shadow:var(--glow-red);transition:.15s}
.cn-fp__apply:hover{filter:brightness(1.08)}
body.cn-fp-lock{overflow:hidden}

/* ===== 反馈问题弹层 rp-*（report-feedback.js,四详情页通用,两级选择+选填补充）===== */
.rp-mask{position:fixed;inset:0;z-index:var(--z-modal);display:none}
.rp-mask.open{display:block}
.rp-veil{position:absolute;inset:0;background:rgba(8,8,12,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.rp-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,92vw);max-height:86vh;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 40px 100px -30px rgba(0,0,0,.8);overflow:hidden;animation:rpIn .2s ease both}
.rp-head{display:flex;align-items:center;gap:8px;padding:15px 15px 9px;flex-shrink:0}
.rp-title{flex:1;min-width:0;font-family:var(--font-serif);font-weight:800;font-size:16px;color:var(--title);text-align:center}
.rp-back,.rp-x{width:32px;height:32px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;color:var(--ink-2);background:var(--fill-1);cursor:pointer;transition:.15s}
.rp-back[hidden]{display:none}
.rp-back:hover,.rp-x:hover{color:var(--ink);background:var(--fill-2)}
.rp-sub{flex-shrink:0;padding:0 18px 10px;font-size:12px;color:var(--ink-3);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-body{overflow:auto;padding:2px 14px 16px}
.rp-anim{animation:rpBodyIn .22s ease both}
/* L1 分类列表 */
.rp-cats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rp-cat{width:100%;display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;cursor:pointer;text-align:left;
  background:var(--fill-1);border:1px solid var(--line);transition:.15s}
.rp-cat:hover{background:var(--fill-2);border-color:var(--line-2);transform:translateX(2px)}
.rp-cat__ic{flex-shrink:0;width:38px;height:38px;display:grid;place-items:center;border-radius:10px;color:var(--mc);background:color-mix(in srgb,var(--mc) 12%,transparent)}
.rp-cat__tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.rp-cat__tx b{font-size:14px;font-weight:700;color:var(--title)}
.rp-cat__tx em{font-style:normal;font-size:12px;color:var(--ink-3);line-height:1.4}
.rp-cat__ar{flex-shrink:0;color:var(--ink-3)}
/* L2 子项单选 */
.rp-opts{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.rp-opt{position:relative;display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:11px;cursor:pointer;background:var(--fill-1);border:1px solid var(--line);transition:.15s}
.rp-opt:hover{background:var(--fill-2)}
.rp-opt input{position:absolute;opacity:0;width:0;height:0}
.rp-opt__rb{flex-shrink:0;width:18px;height:18px;border-radius:50%;border:2px solid var(--line-2);position:relative;transition:.15s}
.rp-opt__tx{flex:1;font-size:13.5px;font-weight:600;color:var(--ink)}
.rp-opt input:checked+.rp-opt__rb{border-color:var(--mc)}
.rp-opt input:checked+.rp-opt__rb::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--mc)}
.rp-opt input:checked~.rp-opt__tx{color:var(--title)}
.rp-opt input:focus-visible+.rp-opt__rb{box-shadow:0 0 0 3px color-mix(in srgb,var(--mc) 32%,transparent)}
/* L2 补充文本 */
.rp-field__lab{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:6px}
.rp-text{width:100%;min-height:78px;resize:vertical;padding:10px 12px;border-radius:11px;font:inherit;font-size:13.5px;color:var(--ink);
  background:var(--fill-1);border:1px solid var(--line);transition:.15s}
.rp-text:focus{outline:none;border-color:var(--mc);background:var(--paper)}
.rp-field__n{text-align:right;font-size:11px;color:var(--ink-3);margin-top:4px}
.rp-foot{margin-top:14px}
/* compose 模式（视频：反馈/举报合并,文字+图片二选一）*/
.rp-desc{margin:0 0 13px;padding:11px 13px;border-radius:11px;font-size:13px;line-height:1.7;color:var(--ink-2);background:var(--fill-1);border:1px solid var(--line)}
.rp-desc b{color:var(--mc);font-weight:800}
.rp-up{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rp-thumbs{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.rp-thumbs:empty{display:none}
.rp-thumb{position:relative;width:66px;height:66px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.rp-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rp-thumb__x{position:absolute;top:3px;right:3px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;color:#fff;background:rgba(0,0,0,.6);cursor:pointer}
.rp-thumb__x:hover{background:rgba(0,0,0,.85)}
/* 反馈提交结果：致谢态 + 失败行(都渲染在弹窗内，不依赖底部 toast) */
.rp-done{display:flex;flex-direction:column;align-items:center;text-align:center;padding:10px 0 0}
.rp-done__ic{color:var(--ok,#3ecb63);margin-bottom:12px;line-height:0}
.rp-done__t{font-family:var(--font-serif);font-size:17px;color:var(--title)}
.rp-done__d{margin:8px 0 4px;font-size:13px;color:var(--ink-3)}
.rp-done .rp-foot{width:100%}
.rp-err{margin:0 0 10px;font-size:12.5px;line-height:1.7;color:var(--crimson)}
/* 截图上传中：预览压暗并盖进度字样，传完才带上可提交的相对路径 */
.rp-thumb.is-busy img{opacity:.45}
.rp-thumb__up{position:absolute;inset:0;display:grid;place-items:center;font-size:10.5px;font-style:normal;font-weight:700;color:#fff;background:rgba(0,0,0,.35)}
.rp-uploadbtn{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border-radius:11px;cursor:pointer;font-size:13px;font-weight:700;color:var(--ink-2);background:var(--fill-1);border:1px dashed var(--line-2);transition:.15s}
.rp-uploadbtn:hover{color:var(--mc);border-color:var(--mc);background:var(--fill-2)}
.rp-up__hint{font-size:11.5px;color:var(--ink-3)}
.rp-submit{width:100%;height:44px;border-radius:12px;font-size:14px;font-weight:800;cursor:pointer;color:#fff;background:var(--mc);box-shadow:0 10px 24px -10px var(--mc);transition:.15s}
.rp-submit:hover:not(:disabled){filter:brightness(1.08)}
.rp-submit:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
/* 触发旗帜按钮（漫画/有声 Hero CTA 用；与同排 ds-btn--ghost 白玻璃药丸一致；视频/小说复用各自 actb 动作条）*/
.rp-flag{flex-shrink:0;width:52px;align-self:stretch;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-pill);cursor:pointer;
  color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:.15s}
.rp-flag:hover{background:rgba(255,255,255,.2);border-color:#fff}
.rp-flag svg{width:18px;height:18px}
@keyframes rpIn{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes rpBodyIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@keyframes rpSheetIn{from{transform:translateY(100%)}to{transform:translateY(0)}}
@media(max-width:760px){
  .rp-dialog{left:0;right:0;bottom:0;top:auto;transform:none;width:auto;max-height:88vh;border-radius:18px 18px 0 0;border-bottom:none;animation:rpSheetIn .26s cubic-bezier(.2,.7,.2,1)}
}
@media (prefers-reduced-motion:reduce){.rp-dialog,.rp-anim{animation:none}}
@keyframes cnSheet{from{transform:translateY(100%)}to{transform:none}}

/* —— H5 · B 极简双按钮（.cn-mc-b，仅 mobileChrome:'b'）+ 独立排序弹窗 —— */
.cn-sortbtn{display:none}
/* 独立排序弹窗（B 专用，复用 .cn-filterpanel 的底部 sheet 外壳） */
.cn-sortpanel{display:none}
.cn-sortpanel.open{display:block}
.cn-sortlist{display:flex;flex-direction:column;gap:2px;padding:4px 0 2px}
.cn-sortopt{display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;cursor:pointer;
  padding:15px 12px;border:none;background:none;font-family:inherit;font-size:15px;font-weight:600;color:var(--ink-2);border-radius:12px}
.cn-sortopt:hover{background:var(--fill-1)}
.cn-sortopt.on{color:var(--mc);font-weight:800;background:color-mix(in srgb,var(--mc) 10%,transparent)}
.cn-sortopt__ck{display:none;color:var(--mc)}
.cn-sortopt.on .cn-sortopt__ck{display:inline-flex}
@media(min-width:761px){.cn-sortpanel{display:none!important}}
@media(max-width:760px){
  .cn-mc-b.cn-filterbar--wrap{position:sticky;top:58px}
  .cn-mc-b .cn-fbar__top{display:none}                    /* 隐藏 标题+排序+计数 顶行 */
  .cn-mc-b .cn-filterbar__in{gap:0;padding-top:9px;padding-bottom:9px}
  .cn-mc-b .cn-fbar__facets{gap:10px}
  .cn-mc-b .cn-morebtn{flex:0 0 auto;justify-content:center;height:40px;padding:0 20px}        /* 筛选：靠左 */
  .cn-mc-b .cn-sortbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;margin-left:auto;
    height:40px;padding:0 18px;border-radius:var(--r-pill);font-size:13px;font-weight:700;cursor:pointer;
    color:var(--ink);background:var(--fill-1);border:1px solid var(--line)}                      /* 排序：靠右 */
}

/* ============================================================
   9 · 频道 · 密集大海报墙（等宽响应栅格 + 悬停预览）
   ============================================================ */
.cn-section{padding:0 0 60px}
/* 频道列表页把 TOP10 榜单挪到了列表分页之后。三段留白会叠在一起：main 的收尾内边距 60px
   +「已经到底了」的下内边距 34px + .cn-rail 的默认上外边距 46px ≈ 140px 的空档。
   给 main 加 --flush 表示「后面还接内容、不需要收尾留白」，把这三段一起收拢到 ~40px */
.cn-section--flush{padding-bottom:0}
.cn-section--flush .cn-loading{padding-bottom:18px}
/* 下外边距收窄：片架自己的 padding-bottom 已经为名次数字让出了 26~46px，再叠 .cn-rail 默认的 46px 到页脚就空了 */
.cn-section--flush + .cn-rail.cn-top10{margin-top:clamp(12px,2vw,22px);margin-bottom:clamp(10px,1.6vw,18px)}
/* 列用 minmax(0,1fr) 而非 1fr(=minmax(auto,1fr))：避免某卡片长 token 的 min-content 撑宽整列 */
/* 翻页/锚点滚动落点:让开固定导航(58px)+吸顶筛选条(.cn-filterbar sticky),否则第一排卡片被盖住 */
#wallTop{scroll-margin-top:120px}
.cn-wall{display:grid;gap:clamp(16px,1.6vw,26px) clamp(12px,1.2vw,18px);padding:24px clamp(16px,5vw,72px) 0;
  grid-template-columns:repeat(3,minmax(0,1fr))}
/* AJAX 无刷新翻页:请求期间列表轻微变暗,给出加载反馈(见 channel-pages.js wireServerAjaxPager) */
.cn-wall.is-paging{opacity:.5;pointer-events:none;transition:opacity .15s}
@media(min-width:540px){.cn-wall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:820px){.cn-wall{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(min-width:1200px){.cn-wall{grid-template-columns:repeat(7,minmax(0,1fr))}}
@media(min-width:1500px){.cn-wall{grid-template-columns:repeat(8,minmax(0,1fr))}}
/* 宽版(视频)片墙：H5 一行一个(横图大图,对齐原官网备份)，向上逐档 2/3/4 → 封面更大冲击力更强 */
.cn-wall--wide{grid-template-columns:minmax(0,1fr)}
@media(min-width:640px){.cn-wall--wide{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.cn-wall--wide{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1400px){.cn-wall--wide{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* 视频片墙的卡片标题给 2 行(基类 .cn-poster__cap .t 是 1 行)：视频标题普遍很长——番号 + 女优 + 一长串剧情描述，
   1 行几乎每条都在开头就打省略号，看不出是什么片。超过 2 行仍省略。
   固定 2 行高度(而不是让它 1~2 行浮动)：片墙是栅格，标题行高不一致会让同一行的卡片下沿参差不齐。
   作用范围：.cn-wall--wide(视频列表 / 女优页 / 片商页) + 会员中心「我的收藏/购买/打赏」的视频板块
   (.cl-grid--wide, member/collect.htm)；首页片架与详情页推荐位不受影响。
   ⚠️ 数值只此一处：会员中心的容器类不同(.cl-grid--wide)，是把它挂进这条选择器，而不是另抄一份。 */
.cn-wall--wide .cn-poster__cap .t,.cl-grid--wide .cn-poster__cap .t{-webkit-line-clamp:2;height:calc(1.3em * 2)}
/* 单列时解除锁高：一列本来就没有「同行卡片下沿对齐」可言，标题只有 1 行还硬占着第 2 行的位置，
   标题与时长行之间就空出整整一行(≈18px)。仍保留 line-clamp:2，长标题照样最多 2 行。
   两个容器转单列的断点不同：.cn-wall--wide 是 <640px，.cl-grid--wide 是 <480px，所以分开写。 */
@media(max-width:639px){.cn-wall--wide .cn-poster__cap .t{height:auto}}
@media(max-width:479px){.cl-grid--wide .cn-poster__cap .t{height:auto}}
/* 墙内卡片宽度交给栅格；min-width:0 让其可收缩到轨道宽度 */
.cn-wall .cn-poster{width:100%;min-width:0}
.cn-wall .cn-poster--wide{width:100%;min-width:0}

/* —— 腰封横幅（cn-belt）：墙内每隔几行插入一条撑满整行的横版推广条，
   热门推荐(pick,真实封面+人气文案) / 平台活动(promo,图标+VIP·充值·AI创作) / 广告(ad,明确标「广告」) 三种轮换。
   grid-column:1/-1 由行内 style 直接给,不受 .cn-wall/.cn-wall--wide/.cn-wall--list 列数差异影响,天然整行独占。 */
.cn-belt{display:flex;align-items:center;gap:14px;padding:12px 18px 12px 12px;border-radius:var(--r-card);
  min-height:88px;text-decoration:none;transition:.18s;
  background:linear-gradient(100deg,color-mix(in srgb,var(--mc) 13%,var(--surface)),var(--surface) 60%);
  border:1px solid color-mix(in srgb,var(--mc) 30%,var(--line))}
.cn-belt:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--mc) 55%,var(--line));box-shadow:var(--shadow-s)}
.cn-belt__cv{flex:0 0 auto;width:64px;height:64px;border-radius:10px;overflow:hidden;background:var(--surface-2)}
.cn-belt__cv img{width:100%;height:100%;object-fit:cover}
.cn-belt__ico{flex:0 0 auto;width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  color:var(--mc);background:color-mix(in srgb,var(--mc) 16%,transparent);border:1px solid color-mix(in srgb,var(--mc) 30%,transparent)}
.cn-belt__ico--ad{color:var(--ink-2);background:var(--fill-1);border-color:var(--line-2)}
.cn-belt__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.cn-belt__kicker{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.02em;color:var(--mc);
  background:color-mix(in srgb,var(--mc) 16%,transparent);padding:2px 8px;border-radius:var(--r-pill)}
.cn-belt__kicker--ad{color:var(--ink-3);background:var(--fill-1)}
.cn-belt__t{font-family:var(--font-serif);font-weight:800;font-size:15px;color:var(--title);line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn-belt:hover .cn-belt__t{color:var(--mc)}
.cn-belt__d{font-size:12px;color:var(--ink-3);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn-belt__cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;font-size:12.5px;font-weight:700;color:var(--mc);
  padding:7px 12px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--mc) 12%,transparent);white-space:nowrap}
.cn-belt__cta i{display:inline-flex;line-height:0}
@media(max-width:560px){
  .cn-belt{gap:10px;padding:10px 12px;min-height:74px;border-radius:14px}
  .cn-belt__cv,.cn-belt__ico{width:46px;height:46px}
  .cn-belt__t{font-size:13.5px}.cn-belt__d{display:none}   /* 极窄屏收起副标题,标题+CTA 一行更紧凑不拥挤 */
  .cn-belt__cta{padding:6px 10px;font-size:12px}
}

/* —— 列表视图：封面在左 + 丰富元信息（窄屏 1 列 / ≥1024px 2 列） —— */
.cn-wall.cn-wall--list{grid-template-columns:minmax(0,1fr);gap:14px;padding-top:18px}
@media(min-width:1024px){.cn-wall.cn-wall--list{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}}   /* PC：卡片各自按内容高,不再被同行拉伸等高而留空 */
.cn-lcard{display:flex;gap:15px;padding:14px;border-radius:var(--r-card);background:var(--surface);border:1px solid var(--line);transition:.18s;min-width:0}
.cn-lcard[hidden]{display:none}   /* 同 .cn-poster：显式 display:flex 会压过 UA [hidden]，拉黑过滤需此守卫 */
.cn-lcard:hover{border-color:color-mix(in srgb,var(--mc) 40%,transparent);box-shadow:var(--shadow-s);transform:translateY(-2px)}
/* 封面撑满整卡高度(align-self:stretch + aspect:auto)：顶/底与右侧内容齐平、不留空白——H5 与 PC 一致"满满"。
   object-fit:cover 裁切不变形；min-height 为内容极短时兜底 */
.cn-lcard__cv{position:relative;flex:0 0 auto;align-self:stretch;width:clamp(96px,29vw,124px);aspect-ratio:auto;min-height:150px;border-radius:9px;overflow:hidden;background:var(--surface-2)}
.cn-lcard__cv img{width:100%;height:100%;object-fit:cover;position:relative;z-index:1}
@media(min-width:1024px){
  .cn-lcard__cv{width:clamp(128px,12vw,152px);min-height:0}   /* PC(2列)：封面更大；高度跟随右侧内容,不强制留白 */
}
/* 「无简介卡」专用：卡片去掉了简介行，整卡矮了两行，封面同步收窄，右侧文字区占比更大。
   挂了它的容器：频道列表页(小说/漫画/有声 list.htm)、我的收藏/购买/打赏(.cl-grid)、
   观看历史(.hi-panel)、我的作品(.wk-grid)、我的投稿(.up-wall)。
   ⚠️ 必须挂在墙上限定，不能直接改 .cn-lcard__cv ——
   排行榜/CV 页的列表卡仍有简介行(卡片高 ~150px)，封面一窄就会被 object-fit 裁成细长条。
   min-height 也跟着从 150px 降到 104px：封面是 align-self:stretch 跟着卡片高走的，
   150px 的兜底会反过来把矮下来的卡片重新撑高，简介删了也白删。 */
.cn-wall--tight .cn-lcard__cv{width:clamp(76px,21vw,100px);min-height:104px}
@media(min-width:1024px){
  .cn-wall--tight .cn-lcard__cv{width:clamp(100px,9vw,124px)}
}
.cn-lcard__fb{position:absolute;inset:0;z-index:0;display:grid;place-items:center;text-align:center;padding:8px;font-family:var(--font-serif);font-weight:700;font-size:12px;color:var(--cover-fb-ink);background:var(--cover-fb)}
.cn-lcard__tag{position:absolute;z-index:2;top:7px;left:7px;font-size:10px;font-weight:800;padding:2px 7px;border-radius:var(--r-pill);background:rgba(0,0,0,.6);color:#fff;backdrop-filter:blur(4px)}
.cn-lcard__tag--done{background:rgba(230,184,115,.92);color:#1a1a22}
.cn-lcard__in{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
.cn-lcard__h{display:flex;align-items:baseline;gap:10px}
.cn-lcard__fr{flex-shrink:0;align-self:center;font-size:10.5px;font-weight:800;letter-spacing:.04em;color:#3A2A0E;
  background:linear-gradient(135deg,#F3D6A0,var(--gold));padding:3px 8px;border-radius:6px}
.cn-lcard__t{font-family:var(--font-serif);font-weight:800;font-size:14.5px;color:var(--title);margin:0;line-height:1.3;
  flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}  /* 超长书名节略到评分前 */
.cn-lcard:hover .cn-lcard__t{color:var(--mc)}
.cn-lcard__rate{flex-shrink:0;margin-left:auto;color:var(--gold);font-family:var(--font-latin);font-weight:800;font-size:14px}
/* 频道列表卡的评分改挂封面右上角，与左上角的连载状态(.cn-stwrap)对角分布，
   标题行由此能占满整行、长书名少被截。⚠️ 无评分时整个角标不渲染(模板/JS 都直接不输出)——
   右上角本来就不是必须有东西的位置，空着比压一句「暂无评分」干净，所以这里不套 .cn-rate--none。
   其余用 .cn-lcard 的地方(排行榜/收藏/我的作品/详情页榜单)仍走标题行的 .cn-lcard__rate，未改。 */
.cn-lcard__cvrate{position:absolute;z-index:3;top:6px;right:6px;display:inline-flex;align-items:center;
  padding:2px 7px;border-radius:var(--r-pill);white-space:nowrap;pointer-events:none;
  font-family:var(--font-latin);font-weight:800;font-size:11px;color:var(--gold);
  /* 背景高度与左上角的连载状态角标对齐：那枚是 .cn-lcard__cv .cn-st(9px 字 × line-height 1.5 = 13.5px
     内容盒 + 上下各 2px 内距)。数字保留 11px 更易读，所以不跟它同字号，改用写死的行高把内容盒压到
     同一高度 —— 两边都靠"行盒高 + 2px×2"算出来，取整方式一致，不会差半像素。
     ⚠️ 改动 .cn-lcard__cv .cn-st 的字号/行高/内距时，这里的 13.5px 要跟着重算。 */
  line-height:13.5px;
  background:rgba(18,15,10,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
/* 评分缺省态：四频道统一口径 —— score<=0 不出 ★ 数字，改显示「暂无评分」(中性灰、字号收一档)。
   卡片/徽标位复用本类；压在封面上的位(.cn-poster__info / .cn-slide__meta)底色是深图，改用半透明白。 */
.cn-rate--none{color:var(--ink-3);font-family:inherit;font-weight:600;font-size:12px;letter-spacing:.02em;white-space:nowrap}
/* 「暂无评分」补一枚星，与有分时的「★ 9.5」对齐——两种状态在卡片同一位置，有星/无星会显得错位。
   用 ::before 而不是逐个模板加字符：这句话有二十来处出处(各频道列表/排行/收藏/我的作品/首页轮播/视频详情，
   还有 channel-pages.js 动态生成的卡片)，改一条规则全都覆盖到，也不会漏掉将来新增的地方。
   星本身不着色，跟着「暂无评分」的灰字走——它表示的是「没有分」，不该像有分时那样亮成金色。 */
.cn-rate--none::before{content:"★";margin-right:3px;font-style:normal}
.cn-poster__info .m .rate.cn-rate--none,
.cn-slide__meta .hot.cn-rate--none{color:rgba(255,255,255,.62);font-family:inherit;font-weight:600;font-size:11.5px}
.cn-lcard__by{font-size:12.5px;color:var(--ink-3)}
.cn-lcard__meta{font-size:12.5px;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center}
.cn-lcard__meta i{margin:0 8px;color:var(--ink-3);font-style:normal;opacity:.5}
/* 恒占 1 行：显示几枚由 cine-layout.js 的 fitCardTags() 按实际宽度决定（放不下的隐藏 + 折成「+N」）。
   flex-wrap 保留是测量需要的——JS 靠「第一个 offsetTop 变大的元素」找溢出起点；
   max-height + overflow 则是 JS 没跑起来时的兜底：裁成一行，而不是糊成好几行把卡片撑高。 */
.cn-lcard__tags{display:flex;flex-wrap:wrap;gap:6px;max-height:26px;overflow:hidden}
/* 标签·中性低调款（与卡上红/金强调色区分；# 用更淡两色细节） */
.cn-lcard__tags span{font-size:11px;font-weight:600;letter-spacing:.01em;color:var(--ink-2);background:var(--fill-1);
  border:1px solid var(--line);padding:2.5px 9px;border-radius:7px;transition:.15s;white-space:nowrap}
.cn-lcard__tags span::before{content:"#";margin-right:1px;color:var(--ink-3);font-weight:700;opacity:.62}
/* 超出上限的题材/标签折成一枚「+N」(见 components/card-tags.htm 与 channel-pages.js 的 chipsHtml)：
   描边沿用标签的实线，靠「无 # 前缀 + 透明底 + 更淡的字色」与真标签区分；数字按题材+标签的总数算 */
.cn-lcard__tags .cn-lcard__more{color:var(--ink-3);background:transparent;font-family:var(--font-latin)}
.cn-lcard__tags .cn-lcard__more::before{content:none}
/* 原来这里有条「H5 只显示前 4 枚」的 nth-child 规则，已删：枚数改由 fitCardTags() 按宽度决定，
   留着会和 JS 抢着藏元素（CSS 的 display:none 还压不掉，因为 [hidden] 优先级更低）。 */
.cn-lcard:hover .cn-lcard__tags span{border-color:var(--line-2);color:var(--ink)}
.cn-lcard__d{font-size:12.5px;line-height:1.6;color:var(--ink-3);margin:2px 0 0;min-height:calc(1.6em * 2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}   /* 恒占 2 行高度,简介短也不留矮块,卡片高度更齐 */
/* 无简介的兜底文案:同一档灰(--ink-3)只压低透明度,与「暂无评分」同视觉层级,又不至于被当成真简介 */
.cn-lcard__d--none{opacity:.72}
.cn-lcard__foot{margin-top:4px;padding-top:2px;font-size:11.5px;color:var(--ink-3);font-family:var(--font-latin);
  display:flex;align-items:baseline;min-width:0;white-space:nowrap}   /* 紧贴简介下方,不再 margin-top:auto 顶到卡底留空 */
/* —— 海报墙智能分页（信息行+跳页 / 页码行；H5 收紧序列保证一行） —— */
.cn-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:30px auto 8px;padding:0 16px}
.cn-pager button,.cn-pager a{min-width:42px;height:40px;padding:0 14px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
  font:700 13.5px/1 var(--font-latin);color:var(--ink-2);background:var(--fill-1);border:1px solid var(--line);cursor:pointer;transition:.15s;text-decoration:none}
.cn-pager button:hover,.cn-pager a:hover{border-color:var(--line-2);color:var(--ink)}
.cn-pager button.on,.cn-pager a.on{color:#fff;background:var(--mc);border-color:var(--mc);box-shadow:0 0 12px -4px var(--mc)}
.cn-pager button:disabled,.cn-pager a.disabled{opacity:.35;pointer-events:none}
.cn-pager .gap{color:var(--ink-3);padding:0 2px;font-weight:700}
.cn-pager__info{flex-basis:100%;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-3);font-family:var(--font-latin)}
.cn-pager__jump{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3)}
.cn-pager__jump input{width:56px;height:32px;text-align:center;border-radius:9px;border:1px solid var(--line);
  background:var(--fill-1);color:var(--ink);font:700 13px var(--font-latin);outline:none;-moz-appearance:textfield}
.cn-pager__jump input::-webkit-outer-spin-button,.cn-pager__jump input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cn-pager__jump input:focus{border-color:var(--mc)}
@media(max-width:760px){.cn-pager{gap:8px 10px;padding:0 8px}.cn-pager button,.cn-pager a{min-width:34px;height:38px;padding:0 8px;font-size:13px}
  .cn-pager .gap{padding:0 1px}.cn-pager__jump input{width:50px;height:30px}}
.cn-lcard__ch{font-weight:700;color:var(--ink-2);min-width:0;max-width:18em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}  /* 长章节名节略 */
.cn-lcard__ft{flex-shrink:0}
/* 有声频道(.cn-theme-audio：list/rank/cv) + 详情页 H5「听了还听」(.dt-reclist) +
   会员中心有声板块(.cl-grid--square)：封面尺寸与小说/漫画对齐。
   原先这里比其余频道窄一档(clamp(64px,19vw,83px))——当初的理由是「有声作品多数无简介、右侧内容矮，
   竖版封面把卡片撑得过高」，但列表卡后来统一去掉了简介行，那个前提已经不成立，
   留着只会让有声封面看起来比漫画瘦一圈(390px 窗口下 19vw=74px vs 21vw=82px)。
   ⚠️ 这条权重(0,2,0)与 .cn-wall--tight .cn-lcard__cv 相同、位置更靠后，所以它赢——
   改上面那条对有声页无效，必须改这里。数值要跟 .cn-wall--tight 保持一致，改一处就得改两处。
   ⚠️ 数值只此一处：会员中心不带 .cn-theme-audio(那个类还管频道主色 --m,member 页不加载 channel-pages.css)，
   所以是把它的网格类挂进这条选择器，而不是另抄一份 clamp —— 抄一份就会漂。 */
.cn-theme-audio .cn-lcard__cv,.dt-reclist .cn-lcard__cv,.cl-grid--square .cn-lcard__cv{width:clamp(76px,21vw,100px);min-height:104px}
@media(min-width:1024px){.cn-theme-audio .cn-lcard__cv,.dt-reclist .cn-lcard__cv,.cl-grid--square .cn-lcard__cv{width:clamp(100px,9vw,124px)}}

/* —— 列表卡·操作行（cfg.actionsHtml 时启用）：封面+信息二列，操作行贯通卡片底部整宽；
   PC/H5 恒一致、不设媒体查询分支——按钮统一放卡片底部（原 collect.html 仅 H5 才这样，现在 PC 也一致）。
   若某处列表卡启用 actionsHtml，务必让所在 .cn-wall--list 强制单列，避免 ≥1024px 双列把操作行挤太窄。 */
.cn-lcard.cn-lcard--act{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"cv in" "act act";
  column-gap:15px;row-gap:11px;align-items:start}
.cn-lcard--act .cn-lcard__cv{grid-area:cv}
.cn-lcard--act .cn-lcard__in{grid-area:in}
.cn-lcard--act .cn-lcard__t a{color:inherit;text-decoration:none}
.cn-lcard--act:hover .cn-lcard__t a,.cn-lcard--act .cn-lcard__t a:hover{color:var(--mc)}

.cn-lcard__act{grid-area:act;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding-top:11px;border-top:1px solid var(--line)}

/* 通用操作按钮（供 actionsHtml 内容复用，取代各页私有 .wk-ops/.cl-act__*） */
.cn-lact{height:36px;padding:0 16px;border-radius:var(--r-pill);font-size:12.5px;font-weight:800;letter-spacing:.02em;
  border:1px solid var(--line);cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2);background:var(--fill-1);transition:.16s}
.cn-lact svg{width:14px;height:14px;stroke-width:2.2;flex-shrink:0}
.cn-lact:hover{color:var(--mc);border-color:color-mix(in srgb,var(--mc) 50%,transparent)}
.cn-lact--go{flex:0 1 auto;max-width:60%;border-color:transparent;color:#fff;
  background:linear-gradient(135deg,var(--mc),color-mix(in srgb,var(--mc) 65%,#fff 30%));
  box-shadow:0 8px 20px -10px color-mix(in srgb,var(--mc) 85%,transparent)}
.cn-lact--go:hover{color:#fff;box-shadow:0 10px 24px -8px color-mix(in srgb,var(--mc) 95%,transparent)}
.cn-lact__sec{flex:0 0 auto;margin-left:auto;display:flex;gap:8px}
.cn-lact--ic{flex:0 0 auto;height:32px;width:32px;padding:0}                 /* 纯图标(如收藏心形)，固定方形 */
.cn-lact--ic.is-fav svg{fill:var(--mc);stroke:var(--mc)}
.cn-lact--txt{flex:0 0 auto;height:32px;padding:0 12px;font-size:11.5px}     /* 图标+文字(如移动)，宽度随内容自适应，不挤字 */

/* 行标题（墙顶） */
.cn-wallhead{display:flex;align-items:baseline;gap:14px;padding:30px clamp(16px,5vw,72px) 0}
.cn-wallhead h2{font-family:var(--font-serif);font-weight:900;font-size:clamp(22px,3vw,32px);color:var(--title)}
.cn-wallhead .en{font-family:var(--font-latin);font-style:italic;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--mc)}

/* 无限加载哨兵 + 加载态 */
.cn-sentinel{height:1px}
.cn-loading{padding:34px;text-align:center;color:var(--ink-3);font-size:13px;font-family:var(--font-latin);letter-spacing:.08em}
.cn-loading.done{color:var(--ink-3);opacity:.6}
.cn-empty{grid-column:1/-1;padding:60px 20px;text-align:center;color:var(--ink-3)}
.cn-empty b{display:block;font-family:var(--font-serif);font-size:20px;color:var(--ink-2);margin-bottom:8px}

/* AI 站空态占位(圆形图标 + 主文案 + 说明)，版式同会员中心「我的投稿」的 .mc-empty(member.css)。
   放在 cine.css 是因为用到它的 AI 首页(ai-page.css)与生成记录页(ai-product.css)互不加载对方，
   却都加载本文件——写在任一侧都会变成两份各自演化的副本。 */
.ai-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:54px 20px;text-align:center;color:var(--ink-3);
  background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-s)}
/* 两个页面各用各的隐藏方式：AI 首页(ai-page.js)切 hidden 属性，生成记录页(ai-history.js)切工具类。
   .ai-empty 的 display:flex 会盖过 UA 的 [hidden]{display:none}，两条都得显式补上。 */
.ai-empty[hidden]{display:none}
.ai-empty.uaa-ai-inline-2{display:none}
.ai-empty__ic{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
  background:var(--fill-1);border:1px solid var(--line);color:var(--ink-3)}
.ai-empty__ic svg{width:34px;height:34px;stroke-width:1.6}
.ai-empty b{font-family:var(--font-serif);font-weight:700;font-size:16px;color:var(--ink-2)}
/* 280px 太窄：两句现有文案(「…第一个作品吧。」「…默认保留 90 天。」)都刚好溢出两三个字，
   末行只剩「吧。」「天。」，看着像断了。放宽到 320px 让它们各自单行放下；
   窄屏容器仍会换行，靠 text-wrap:balance 把两行拉均，不再吊出孤字（旧浏览器忽略该属性，退回单纯放宽的效果） */
.ai-empty span{font-size:13px;max-width:320px;line-height:1.6;text-wrap:balance}
/* 空态里的行动按钮(目前只有「立即登录」)。走 --crimson 而不是 ds-btn 的 --peri，跟 AI 站主色一致 */
.ai-empty__cta{margin-top:4px;height:38px;padding:0 22px;border:0;border-radius:var(--r-pill);cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:700;color:#fff;background:var(--crimson);transition:.15s}
.ai-empty__cta:hover{filter:brightness(1.08)}
.ai-empty__cta:active{transform:scale(.97)}
/* 左右边距不写在这里：AI 首页外层 .ai-home 自带内边距，占位块贴着容器就对了；
   生成记录页的 <main> 没有内边距、靠 .ai-hist-grid 自己撑开，那份缩进在 ai-product.css 里单独给。 */
@media(max-width:640px){.ai-empty{padding:44px 16px}}

/* ============================================================
   10 · 频道 Hero（聚焦式，比首页轮播更聚焦单主角）
   ============================================================ */
/* transform:translateZ(0)=把裁切容器提升为自有合成层:子图在层内按整数像素对齐裁切,
   分数 DPR 设备(如 2.75x / Mac 缩放模式)上,边缘(尤其下边随滚动)不再渗出 1px 闪烁亮缝 */
.cn-chero{position:relative;width:100%;height:clamp(420px,68vh,640px);overflow:hidden;isolation:isolate;transform:translateZ(0)}
.cn-chero__bg{position:absolute;inset:0;z-index:0}
.cn-chero__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);
  animation:cnKen 10s ease-in-out forwards;transition:opacity .55s ease}  /* 绝对定位堆叠：轮播换图交叉淡入 */
.cn-chero__frame{position:absolute;inset:0;transition:opacity .55s ease}             /* D方案:镜像拼贴帧,换图整帧交叉淡入 */
.cn-chero__bg .cn-mir{position:absolute;inset:0;overflow:hidden}                     /* 默认/H5:四瓦片叠放,仅主瓦片可见=单图满铺(现状) */
.cn-chero__bg .cn-mir--side,.cn-chero__bg .cn-mir--flip{display:none}
/* 与首页 .cn-slide__glow 同一角色：底图主色光晕，仅 PC 显示。
   这里先用频道主色 var(--m) 兜底，JS(cine-core 的 applyGlow)取到封面主色后再覆盖——
   取色要读 canvas，封面跨域时会失败，有 CSS 兜底就不会出现"没有光晕"的空档。 */
.cn-chero__glow{display:none;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(92% 120% at 15% 50%,color-mix(in srgb,var(--m) 32%,transparent),transparent 60%),
    radial-gradient(80% 100% at 86% 16%,color-mix(in srgb,var(--m) 20%,transparent),transparent 60%)}
.cn-chero__veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--hero-veil-bot),var(--hero-veil-mid) 55%,transparent 80%),
            linear-gradient(0deg,var(--paper) 2%,transparent 40%),
            radial-gradient(110% 80% at 78% 26%,var(--hero-glow),transparent 60%)}
.cn-chero__veil::after{content:"";position:absolute;inset:0;box-shadow:inset 0 -120px 150px -50px var(--paper),inset 0 0 200px 30px var(--vignette)}
.cn-chero__in{position:absolute;z-index:2;left:clamp(16px,5vw,72px);right:clamp(16px,5vw,72px);
  bottom:clamp(60px,11vh,120px);max-width:940px;display:flex;gap:clamp(0px,3vw,30px);align-items:flex-start}
/* 封面放大 + 顶部与标题对齐。关键：固定 2:3 原始比例(aspect-ratio)+ 宽度按视口稳定取值(不随文字块高度联动)，
   align-self:flex-start 不拉伸——彻底避免「撑满→2:3→变宽→标题换行→更高→更宽」的反馈循环，图片始终按原比例完整呈现。
   海报仅 ≥900px 显示，H5 不受影响 */
.cn-chero__poster{display:none;flex-shrink:0;align-self:flex-start;margin-top:38px;width:clamp(168px,15vw,200px);aspect-ratio:2/3;border-radius:10px;overflow:hidden;
  box-shadow:var(--glow-red);position:relative}
.cn-chero__poster img{width:100%;height:100%;object-fit:cover}
@media(min-width:900px){.cn-chero__poster{display:block}}
/* —— 宽版(视频)频道 Hero：大图更高更出彩、小封面改横图(16:9 不再竖裁) —— */
.cn-chero--wide{height:clamp(460px,73vh,720px)}
.cn-chero--wide .cn-chero__bg img{filter:saturate(1.1) contrast(1.06)}   /* 大图更通透、冲击力更强 */
.cn-chero--wide .cn-chero__poster{aspect-ratio:16/9;width:clamp(340px,38vw,520px);align-self:flex-start;margin-top:37px}
.cn-chero--wide .cn-chero__in{max-width:1180px}   /* 宽版给长标题更多横向空间，配合 JS 字号自适应尽量单行 */
/* PC / iPad：频道 Hero 同步压缩上下留白；不改背景图比例，只裁掉容器外的部分。 */
@media(min-width:761px){
  .cn-chero{height:clamp(340px,52vh,520px)}
  .cn-chero--wide{height:clamp(380px,56vh,560px)}
  .cn-chero__in{bottom:clamp(32px,5.5vh,60px)}
  .cn-chero__poster{margin-top:20px}
  .cn-chero--wide .cn-chero__poster{margin-top:20px}
}
@media(min-width:900px) and (max-width:1199px){
  .cn-chero{height:460px}
  .cn-chero--wide{height:480px}
  .cn-chero__in{bottom:44px}
}
/* —— H5(≤760px)专属压缩：仅移动端矮化频道 Hero、内容整体下移、封面偏上裁切；PC/iPad 完全不变 —— */
@media(max-width:760px){
  .cn-chero:not(.cn-chero--wide){height:clamp(315px,51vh,480px)}
  .cn-chero:not(.cn-chero--wide) .cn-chero__bg img{object-position:50% 18%}   /* 封面变矮后优先保留图片上半部分,下半部分裁掉无妨 */
  .cn-chero:not(.cn-chero--wide){-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 30px),transparent)}
  /* 同首页 Hero 的处理:封面底部 ~30px 直接渐隐为透明,露出与下方完全一致的页面背景色,
     而不是叠加渐变去"匹配"背景色——避免渐变图层在边缘合成时残留一条硬边缝隙 */
  .cn-chero:not(.cn-chero--wide) .cn-chero__in{bottom:auto;top:clamp(56px,8.5vh,78px)}
  /* 用 top 而非 bottom 锚定:内容整体从固定安全距离往下排,不会因标题变长换行而反向往上溢出、被吸顶导航挡住 */
  .cn-chero:not(.cn-chero--wide) .cn-chero__k{margin-bottom:8px}
  .cn-chero:not(.cn-chero--wide) .cn-chero__d{margin-top:10px;line-height:1.6;-webkit-line-clamp:2}
  .cn-chero:not(.cn-chero--wide) .cn-chero__stats{margin-top:10px}
  .cn-chero:not(.cn-chero--wide) .cn-chero__cta{margin-top:16px}
  .cn-chero:not(.cn-chero--wide) .cn-chero__nav{margin-top:14px}
}
.cn-chero__meta{min-width:0}
.cn-chero__k{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-latin);font-style:italic;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mc);margin-bottom:12px}
.cn-chero__k::before{content:"";width:28px;height:1.5px;background:var(--mc);box-shadow:0 0 8px var(--mc)}
.cn-chero__t{margin:0;font-family:var(--font-serif);font-weight:900;color:var(--on-cover);
  font-size:clamp(30px,4.6vw,52px);line-height:1.08;letter-spacing:-.01em;text-shadow:0 8px 36px rgba(0,0,0,.6);
  /* margin:0 清掉 h1 默认 0.67em 边距(原本随字号缩放、令 kicker→标题 间距不定)，
     使 kicker→标题 间距恒为 kicker 自身高+其 12px 下边距=固定值，海报顶部得以稳定对齐标题。
     加宽内容区(.cn-chero__in 940)+略收字号，让现实长度书名(含全角括号)在 PC 单行显示；line-clamp:2 仅作极端超长兜底 */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cn-chero__d{margin-top:16px;font-size:14px;line-height:1.75;color:rgba(255,255,255,.8);max-width:560px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 2px 12px rgba(0,0,0,.6)}

/* 榜首 Hero · 元信息行（作者 / 状态 / 观看·收听 / 收藏；视频为 时长 / 观看 / 收藏） */
.cn-chero__stats{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:9px 16px}
.cn-cstat{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:rgba(255,255,255,.78);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.cn-cstat svg{width:15px;height:15px;opacity:.66}
.cn-cstat b{font-family:var(--font-latin);font-weight:800;font-size:15px;color:#fff;letter-spacing:.01em}
.cn-cstat em{font-style:normal;font-size:12px;color:rgba(255,255,255,.58)}
.cn-cstat--au{font-weight:600;color:rgba(255,255,255,.92)}
.cn-cstat__av{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;margin-right:1px;
  font-family:var(--font-serif);font-weight:800;font-size:12px;color:#fff;
  background:linear-gradient(140deg,var(--mc),#a8324a);box-shadow:0 0 14px -5px var(--mc)}
.cn-cstat--st{padding:4px 12px 4px 9px;border-radius:var(--r-pill);background:rgba(255,59,92,.16);
  border:1px solid rgba(255,59,92,.42);color:#fff;font-weight:700;font-size:12px;text-shadow:none}
.cn-cstat--st .cn-cstat__dot{width:6px;height:6px;border-radius:50%;background:var(--crimson);box-shadow:0 0 8px var(--crimson);animation:cnPulse 1.8s ease-in-out infinite}
.cn-cstat--st.is-done{background:rgba(230,184,115,.18);border-color:rgba(230,184,115,.5);color:var(--gold)}
.cn-cstat--st.is-done .cn-cstat__dot{background:var(--gold);box-shadow:0 0 8px var(--gold);animation:none}
@keyframes cnPulse{0%,100%{opacity:1}50%{opacity:.3}}

/* 榜首 Hero · CTA 按钮 */
.cn-chero__cta{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px}
/* —— Hero 轮播控制（箭头 + 圆点）与切换入场 —— */
.cn-chero__nav{margin-top:20px;display:flex;align-items:center;gap:12px}
.cn-cnav{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:.18s;
  color:rgba(255,255,255,.85);background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cn-cnav:hover{background:rgba(255,255,255,.24);color:#fff}
.cn-chero__dots{display:flex;align-items:center;gap:7px}
.cn-cdot{width:7px;height:7px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.35);cursor:pointer;transition:.25s}
.cn-cdot:hover{background:rgba(255,255,255,.6)}
.cn-cdot.on{width:22px;background:var(--mc);box-shadow:0 0 10px -2px var(--mc)}
.chero-in{animation:cheroIn .5s ease both}
@keyframes cheroIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.chero-in{animation:none}.cn-chero__bg img{transition:none}}
/* ============================================================
   H5 推荐区方案 A —— 仅「视频」单独处理：封面「模糊压暗氛围底 + 清晰 16:9 封面卡」。
   横图视频在窄屏满铺会裁掉主体/发虚，故单独走此方案；
   小说/漫画/有声为竖封面，满铺本就贴合，维持原效果不动。仅 ≤760px，桌面端不变。
   ============================================================ */
.cn-slide__poster{display:none}                                   /* 首页轮播封面卡默认隐藏(仅视频 H5 显示) */
@media(max-width:760px){
  /* —— 首页「视频」幻灯：清晰 16:9 封面卡 + 重压暗模糊底(保证白字清晰)、紧凑居中 —— */
  .cn-slide--video .cn-slide__bg img{filter:blur(13px) brightness(.26) saturate(1.05)!important;transform:scale(1.3)!important;animation:none!important}
  .cn-slide--video .cn-slide__veil{background:rgba(8,8,12,.84)!important}
  .cn-slide--video .cn-slide__veil::after{box-shadow:inset 0 -80px 90px -52px var(--paper)}
  .cn-slide--video .cn-slide__in{top:56px;bottom:58px;left:clamp(16px,5vw,22px);right:clamp(16px,5vw,22px);
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:6px}
  /* justify-content:flex-start(原为 center):内容锚在顶部、多余空间沉到底部,避免"居中"把内容推向底部圆点区；
     bottom:58px 特意大于圆点的固定 bottom:50px(见下方 @media 680px 的 .cn-dots 规则),留出安全距离；
     不设 overflow:hidden——宁可极端矮屏下内容整体贴近圆点,也不要裁掉文字导致露半个字 */
  .cn-slide--video .cn-slide__poster{display:block;flex:0 0 auto;width:min(86%,320px);height:auto;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
    box-shadow:0 22px 46px -16px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1)}   /* 宽度与 video.html 频道页 H5 封面卡一致(min(86%,320px)),aspect-ratio 保持原始 16:9,高度随宽度自然算出,不拉伸不裁切 */
  .cn-slide--video .cn-slide__poster img{width:100%;height:100%;object-fit:cover}
  .cn-slide--video .cn-slide__t{font-size:clamp(19px,5.4vw,26px);color:#fff!important;text-shadow:0 2px 16px rgba(0,0,0,.95)}
  .cn-slide--video .cn-slide__d{display:none}
  .cn-slide--video .cn-slide__meta{display:none}   /* 评分行在窄矮屏下挤压空间,直接隐藏,让位给核心的标题与按钮 */
  .cn-slide--video .cn-slide__cta{justify-content:center;margin-top:0}
  /* —— 视频频道页 Hero(cn-chero--wide)：同上，内容高度自适应、重压暗、隐藏长简介 —— */
  .cn-chero--wide{height:auto;min-height:0}
  .cn-chero--wide.is-empty{height:clamp(315px,51vh,480px)}
  /* 无轮播数据(swipes 为空)时,--wide 的高度由 slide 内容撑出 → 会整块塌成 0;
     补一个与小说/漫画/有声 H5 Hero 等高的占位,保证空数据时版式不跳变 */
  .cn-chero--wide .cn-chero__bg img{filter:blur(13px) brightness(.26) saturate(1.05)!important;transform:scale(1.3)!important;animation:none!important}
  .cn-chero--wide .cn-chero__veil{background:rgba(8,8,12,.84)!important}
  .cn-chero--wide .cn-chero__veil::after{box-shadow:inset 0 -78px 88px -52px var(--paper)}
  .cn-chero--wide .cn-chero__in{position:relative;z-index:2;bottom:auto;flex-direction:column;align-items:center;text-align:center;gap:14px;max-width:none;
    padding:calc(58px + 14px) clamp(16px,5vw,22px) 22px}
  .cn-chero--wide .cn-chero__poster{display:block;margin-top:0;align-self:center;width:min(86%,320px);
    box-shadow:0 22px 46px -16px rgba(0,0,0,.85),var(--glow-red)}
  .cn-chero--wide .cn-chero__meta{width:100%;text-align:center}
  .cn-chero--wide .cn-chero__t{margin:0;font-size:clamp(21px,6vw,28px);color:#fff!important;text-shadow:0 2px 16px rgba(0,0,0,.95)}
  /* 简介两行常驻：--wide 在 H5 是 height:auto(内容撑高)，多这两行不会顶破版式，
     推荐位没有简介等于让用户凭封面猜内容，与其余三个频道口径一致 */
  .cn-chero--wide .cn-chero__d{-webkit-line-clamp:2;max-width:none}
  .cn-chero--wide .cn-chero__stats{margin-top:12px;justify-content:center}
  .cn-chero--wide .cn-cstat,.cn-chero--wide .cn-cstat b{color:#fff!important}
  .cn-chero--wide .cn-cstat em{color:rgba(255,255,255,.72)}
  .cn-chero--wide .cn-cstat svg{opacity:.85}
  .cn-chero--wide .cn-chero__cta{margin-top:14px;justify-content:center}
  .cn-chero--wide .cn-chero__nav{margin-top:14px;justify-content:center}
}
/* ============================================================
   频道 Hero「方案 E · 虚化 + 取色光晕」——仅 PC(≥761px)，与首页 Hero 完全一致。
   原为方案 D(封面左右镜像拼满宽幅)，现统一成首页那套：底图重模糊压暗 + 主色径向光晕 + 清晰海报。
   镜像瓦片(.cn-mir--side/--flip)保持默认的隐藏状态即可，只剩主瓦片满铺当底图。
   H5(≤760px)两边本来就都是「主瓦片满铺」，不受影响。
   ============================================================ */
@media(min-width:761px){
  .cn-chero__glow{display:block}
  /* 选择器带上 .cn-chero 是为了压过视频频道的 .cn-chero--wide .cn-chero__bg img(saturate/contrast 那条)：
     两者特异度相同(0,2,1)，靠这里位置更靠后取胜；只写 .cn-chero__bg img 会被 --wide 那条盖掉，视频底图就还是清晰的。 */
  .cn-chero .cn-chero__bg img{filter:blur(28px) brightness(.42) saturate(1.2);transform:scale(1.25);animation:none}
  .cn-chero .cn-chero__veil{background:
    linear-gradient(90deg,var(--hero-veil-bot) 0%,var(--hero-veil-mid) 52%,transparent 78%),
    linear-gradient(0deg,var(--paper) 1%,transparent 36%),
    radial-gradient(120% 80% at 80% 30%,var(--hero-glow),transparent 60%)}
  .cn-chero .cn-chero__veil::after{box-shadow:inset 0 -120px 160px -60px var(--paper),inset 0 0 200px 40px var(--vignette)}
}
/* ============================================================
   首页 Hero「方案 E · 虚化 + 取色光晕」——仅 PC(≥761px)
   底图重模糊压暗 + 主色径向光晕(JS 取色,跨域失败回退模块色) + 清晰海报卡(竖2:3 / 视频16:9)。
   H5(≤760px)维持现状(竖封面满铺、视频走 A 方案卡)不变。
   ============================================================ */
@media(min-width:761px){
  .cn-slide__glow{display:block}
  .cn-slide__bg img{filter:blur(28px) brightness(.42) saturate(1.2);transform:scale(1.25)}
  .cn-slide.on .cn-slide__bg img{animation:none}                        /* E 底图静态虚化,不做 Ken Burns */
  .cn-slide__in{top:0;bottom:0;left:clamp(28px,6vw,96px);right:clamp(28px,6vw,96px);max-width:none;
    display:flex;align-items:center;gap:clamp(28px,4.5vw,60px)}
  .cn-slide__txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:600px}
  .cn-slide__poster{display:block;flex-shrink:0;border-radius:14px;overflow:hidden;
    box-shadow:0 26px 64px -22px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.1)}
  .cn-slide__poster img{width:100%;height:100%;object-fit:cover}
  .cn-slide__poster--tall{width:clamp(200px,18vw,264px);aspect-ratio:2/3}
  .cn-slide__poster--wide{width:clamp(360px,38vw,520px);aspect-ratio:16/9}
  .cn-slide__t{font-size:clamp(30px,3.6vw,54px)}
}
.cn-cbtn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 26px;border-radius:13px;cursor:pointer;
  font-family:var(--font-sans);font-size:15px;font-weight:800;letter-spacing:.02em;border:1px solid transparent;transition:.2s;white-space:nowrap}
.cn-cbtn svg{width:18px;height:18px}
/* 这里多写一层 .ds-root 不是冗余：reset.css 的 .ds-root a{color:inherit} 特异度是 (0,1,1)，
   会压过 .cn-cbtn--go 的 (0,1,0)。四个频道列表页的「立即阅读/翻阅/收听/观看」是 <a>，
   于是文字与图标(stroke:currentColor)都继承正文色——暗色主题下 #F2F0F2 勉强像白，
   浅色主题下直接变成黑字压在红底上。补一层选择器把特异度提到 (0,2,0) 才拿得回白色。 */
.ds-root .cn-cbtn--go{color:#fff}
.cn-cbtn--go{color:#fff;background:linear-gradient(135deg,#ff5c78,var(--crimson));
  box-shadow:0 14px 34px -12px rgba(255,59,92,.8),inset 0 1px 0 rgba(255,255,255,.25)}
.cn-cbtn--go:hover{transform:translateY(-2px);box-shadow:0 20px 44px -12px rgba(255,59,92,.95),inset 0 1px 0 rgba(255,255,255,.3)}
.cn-cbtn--ghost{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cn-cbtn--ghost:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.5);transform:translateY(-2px)}
.cn-cbtn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ============================================================
   11 · 沉浸页脚（轻量条，边到边）
   ============================================================ */
.cn-foot{margin-top:30px;border-top:1px solid var(--hair);background:var(--bg-2);padding:28px clamp(16px,5vw,72px) 14px}
.cn-foot__top{display:flex;flex-wrap:wrap;gap:30px 56px;align-items:flex-start}
.cn-foot__brand{max-width:440px}
.cn-foot__brand img{height:28px;filter:drop-shadow(0 0 12px rgba(255,59,92,.5))}
.cn-foot__logo{display:flex;align-items:center;gap:10px}
.cn-foot__logo b{font-family:var(--font-serif);font-weight:900;font-style:italic;font-size:17px;color:var(--title);letter-spacing:.02em}
.cn-foot__brand p{margin-top:10px;font-size:12.5px;line-height:1.8;color:var(--ink-3)}
.cn-foot__brand .cn-foot__slogan{margin-top:14px;font-family:var(--font-serif);font-weight:800;font-size:17px;letter-spacing:.08em;color:var(--title)}
.cn-foot__brand .cn-foot__domain{margin-top:5px;font-size:12.5px}
.cn-foot__domain b{font-family:var(--font-latin);font-weight:800;color:var(--gold);letter-spacing:.05em}
.cn-foot__brand .cn-foot__tip{margin-top:8px;font-size:11.5px;opacity:.72}
/* 栏目组（内容/政策法规/社交媒体/APP/AI服务/帮助）：PC 1行6列；H5 1行3列 */
.cn-foot__cols{margin-left:auto;display:grid;grid-template-columns:repeat(6,auto);gap:24px 32px}
.cn-foot__col h4{font-family:var(--font-serif);font-weight:800;font-size:14px;color:var(--title);margin-bottom:10px}
.cn-foot__col a{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-3);padding:4px 0;transition:.15s;overflow-wrap:anywhere}
.cn-foot__col a svg{flex-shrink:0}
.cn-foot__col a:hover{color:var(--mc)}
.cn-foot__soc{white-space:nowrap}
@media(max-width:760px){.cn-foot__soc{font-size:11.5px}}
@media(max-width:1180px){.cn-foot__cols{margin-left:0;width:100%}}
@media(max-width:760px){.cn-foot__cols{grid-template-columns:repeat(3,1fr);gap:16px 12px}
  .cn-foot{padding:20px 16px 10px}.cn-foot__top{gap:20px}.cn-foot__bar{margin-top:10px;padding-top:10px}}
.cn-foot__bar{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;
  align-items:center;gap:10px 18px;font-size:11px;color:var(--ink-3)}
/* 版权两行包成一列：H5 下"本站内容仅供…"与 © 左缘对齐（均从 18+ 徽章右侧起） */
.cn-foot__legal{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px}
@media(max-width:760px){.cn-foot__legal{flex-direction:column;align-items:flex-start}}
.cn-foot__age{display:inline-flex;align-items:center;gap:6px;font-weight:800;color:#fff;background:var(--crimson);
  padding:3px 10px;border-radius:6px;font-size:10.5px;box-shadow:0 0 16px -4px rgba(255,59,92,.7)}
@media(min-width:761px) and (max-width:1180px){
  .cn-foot{padding-top:22px;padding-bottom:12px}
  .cn-foot__top{gap:14px 36px}
  .cn-foot__brand p{margin-top:6px;line-height:1.55}
  .cn-foot__brand .cn-foot__slogan{margin-top:9px}
  .cn-foot__brand .cn-foot__domain{margin-top:3px}
  .cn-foot__brand .cn-foot__tip{margin-top:4px}
  .cn-foot__cols{gap:14px 24px}
  .cn-foot__col h4{margin-bottom:6px}
  .cn-foot__col a{padding:2px 0;line-height:1.35}
  .cn-foot__bar{margin-top:10px;padding-top:10px}
}

/* ============================================================
   12 · 移动端贴底 mini 标签栏（玻璃，5 频道直达）
   ============================================================ */
.cn-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-tabbar);display:flex;
  height:calc(58px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
  background:var(--bar-bg);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid var(--hair)}
.cn-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ink-3);position:relative;transition:.2s}
.cn-tab svg{width:21px;height:21px}
.cn-tab span{font-size:10px;font-weight:600}
.cn-tab--on{color:var(--title)}
.cn-tab--on::before{content:"";position:absolute;top:6px;width:22px;height:3px;border-radius:3px;background:var(--mc);box-shadow:0 0 10px var(--mc)}
@media(min-width:860px){.cn-tabbar{display:none}}
.cn-has-tabbar{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
@media(min-width:860px){.cn-has-tabbar{padding-bottom:0}}

/* 顶部内容被固定 nav 压住的缓冲（首页 hero 是满屏，不需要；频道 hero 同理） */
.cn-toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(16px);z-index:var(--z-toast);
  background:var(--toast-bg);color:var(--toast-fg);font-size:13px;font-weight:600;padding:12px 22px;border-radius:999px;
  box-shadow:var(--shadow-m);border:1px solid var(--line);opacity:0;pointer-events:none;transition:.3s}
.cn-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.cn-toast--error{background:#e5484d;color:#fff;border-color:#e5484d}
.cn-toast--ok{background:#30a46c;color:#fff;border-color:#30a46c}
@media(min-width:860px){.cn-toast{bottom:28px}}

@media (prefers-reduced-motion:reduce){
  .cn-slide__bg img,.cn-chero__bg img{animation:none!important}
  .cn-dot.on i{animation:none!important;width:100%!important}
  /* 关闭装饰性入场动画与悬停位移/缩放，保留必要的可见性切换 */
  .cn-search.open,.cn-search__box{animation:none!important}
  .cine *,.cine *::before,.cine *::after{
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .cn-poster:hover .cn-poster__fr,
  .cn-rank:hover .cn-rank__fr,
  .cn-poster:hover .cn-poster__fr>img,
  .cn-rank:hover .cn-rank__fr>img,
  .cn-mod:hover{transform:none!important}
  /* Hero 幻灯片淡入仍生效但即时完成，避免长过渡 */
  .cn-slide{transition:opacity .01ms ease!important}
}

/* ============================================================
   2026-06-12 标签库 v2.2 · 筛选弹窗分组标签区
   (.cn-filterpanel--g:tagFilter.groups 时引擎自动加)
   结构:搜索框 + 左分组导航(角标=组内已选数) + 右标签流(吸顶组头)
   ============================================================ */
.cn-tagsearch{display:flex;align-items:center;gap:9px;height:40px;padding:0 13px;border-radius:11px;
  background:var(--fill-1);border:1px solid var(--line);margin-bottom:10px;color:var(--ink-3)}
.cn-tagsearch:focus-within{border-color:color-mix(in srgb,var(--mc) 55%,transparent)}
.cn-tagsearch input{flex:1;min-width:0;border:none;outline:none;background:none;font-size:13.5px;color:var(--ink);font-family:var(--font-sans)}
.cn-tagsearch input::placeholder{color:var(--ink-3)}
.cn-tagsearch input::-webkit-search-cancel-button{display:none}
.cn-tagsearch button{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:none;cursor:pointer;
  display:grid;place-items:center;font-size:15px;line-height:1;color:var(--ink-2);background:var(--fill-2,rgba(255,255,255,.08))}
/* 每分组「加/减标签」投票入口 + 标签投票弹框 .cntv（对齐原型 cine-channel.js _tvCSS） */
.cn-tagvote{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border-radius:50%;cursor:pointer;font-family:inherit;transition:.15s;color:var(--ink-3);background:var(--fill-1);border:1px solid var(--line)}
.cn-tagvote:hover{color:var(--ink-2);background:var(--fill-2);border-color:var(--line-2)}
.cn-tagvote svg{width:15px;height:15px}
.cn-tagvote--sub{color:var(--ink-3);background:var(--fill-1);border-color:var(--line)}
.cn-tagvote--sub:hover{color:var(--ink-2);background:var(--fill-2);border-color:var(--line-2)}
.cntv[hidden]{display:none}
.cntv{--mc:var(--crimson);position:fixed;inset:0;z-index:calc(var(--z-modal,5000) + 40);display:flex;align-items:center;justify-content:center}
.cntv__veil{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(3px)}
.cntv__panel{position:relative;z-index:1;width:min(440px,92vw);max-height:84vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 26px 70px rgba(0,0,0,.5);padding:18px;animation:cntvPop .22s cubic-bezier(.2,.8,.3,1)}
@keyframes cntvPop{from{opacity:0;transform:translateY(10px) scale(.98)}}
.cntv__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cntv__head b{font-family:var(--font-serif);font-weight:800;font-size:17px;color:var(--ink)}
.cntv__x{border:0;background:transparent;color:var(--ink-3);font-size:24px;line-height:1;cursor:pointer;width:34px;height:34px;border-radius:50%;transition:.15s}
.cntv__x:hover{background:var(--fill-1);color:var(--ink)}
.cntv__search{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--fill-1);margin-bottom:10px}
.cntv__search svg{width:15px;height:15px;color:var(--ink-3);flex:none}
.cntv__search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font-size:14px;outline:none;font-family:inherit}
.cntv__addbar{display:flex;gap:8px;margin-bottom:12px}
.cntv__addbar input{flex:1;min-width:0;height:40px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--fill-1);color:var(--ink);font-size:14px;outline:none;font-family:inherit}
.cntv__addbar input:focus{border-color:var(--mc)}
.cntv__addbtn{flex:none;height:40px;padding:0 18px;border:0;border-radius:10px;background:var(--mc);color:#fff;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit}
.cntv__addbtn:hover{filter:brightness(1.08)}
.cntv__hint{font-size:12px;color:var(--ink-3);margin-bottom:10px;line-height:1.5}
.cntv__body{overflow-y:auto}
.cntv__chips{display:flex;flex-wrap:wrap;gap:8px}
.cntv-chip{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 13px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink-2);background:var(--fill-1);border:1.5px solid var(--line);transition:.14s}
.cntv-chip[hidden]{display:none}
.cntv-chip:hover{border-color:color-mix(in srgb,var(--mc) 45%,var(--line))}
.cntv-chip.sel{color:#fff;background:var(--mc);border-color:transparent}
.cntv-chip i{font-style:normal;font-size:11px;font-family:var(--font-latin);opacity:.66}
.cntv-chip.sel i{opacity:.9}
.cntv__empty{font-size:13px;color:var(--ink-3);padding:18px 0;text-align:center;width:100%}
.cntv__foot{display:flex;align-items:center;gap:10px;margin-top:14px}
.cntv__tip{font-size:12px;color:var(--ink-3);margin-right:auto}
.cntv__cancel{border:1px solid var(--line);background:transparent;color:var(--ink-2);border-radius:10px;padding:9px 18px;cursor:pointer;font-size:14px;font-family:inherit}
.cntv__cancel:hover{background:var(--fill-1);color:var(--ink)}
.cntv__apply{border:0;border-radius:10px;padding:9px 22px;cursor:pointer;font-size:14px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--crimson),#c52742);font-family:inherit;transition:.15s}
.cntv__apply:hover{filter:brightness(1.07)}
.cntv__apply:disabled{opacity:.5;pointer-events:none}
@media(max-width:560px){
  .cntv{align-items:flex-end}
  .cntv__panel{width:100%;border-radius:18px 18px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom));animation:cntvUp .28s cubic-bezier(.2,.8,.3,1)}
  .cntv__hint{margin-top:4px;margin-bottom:16px;line-height:1.7}
}
@keyframes cntvUp{from{transform:translateY(100%)}}
.cn-tagpanes{display:flex;border:1px solid var(--line);border-radius:13px;overflow:hidden;height:min(60vh,640px);background:var(--surface)}
.cn-tagnav{flex:0 0 86px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;
  background:var(--fill-1);border-right:1px solid var(--line);padding:5px 0}
.cn-tagnav button{display:flex;width:100%;align-items:center;justify-content:flex-start;gap:4px;
  padding:10px 9px 10px 12px;font-size:12.5px;font-weight:600;color:var(--ink-2);
  background:none;border:none;border-left:2px solid transparent;cursor:pointer;text-align:left;transition:.12s}
.cn-tagnav button:hover{color:var(--ink)}
.cn-tagnav button.on{color:var(--mc);border-left-color:var(--mc);background:color-mix(in srgb,var(--mc) 9%,transparent);font-weight:800}
.cn-tagnav button.mute{opacity:.32;pointer-events:none}
/* 左侧分组导航的“已选数”角标：按用户要求不显示(去掉一列彩色圆点的视觉噪声;已选汇总仍在“已选”行) */
.cn-tagnav__n{display:none!important}
.cn-tagflow{position:relative;flex:1;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 13px 13px}
.cn-taggrp h5{position:sticky;top:0;z-index:1;margin:0 -13px;padding:11px 13px 7px;
  font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--ink-3);
  background:linear-gradient(180deg,var(--surface) 82%,transparent)}
.cn-taggrp h5 span{margin-left:5px;font-weight:600;opacity:.55}
.cn-taggrp+.cn-taggrp{margin-top:10px}
.cn-tag[hidden],.cn-taggrp[hidden]{display:none}
/* 弹窗内统一用站点 logo 红 var(--crimson)=#FF3B5C,覆盖各模块强调色保证品牌一致(只覆盖弹窗,页面其余维持各模块强调色)；保留“确定”按钮无红色辉光、更沉静 */
.cn-filterpanel--g{--mc:var(--crimson)}
.cn-filterpanel--g .cn-fp__apply{box-shadow:none}
/* 已选行:限高内滚,但保证每行完整显示(原 60px 把第二行裁断)——约 2 行半、第三行起平滑滚动 */
.cn-filterpanel--g .cn-fp__active:not(:empty){max-height:104px;overflow:auto;overscroll-behavior:contain}
/* PC:分组弹窗加宽,容纳双栏 */
@media(min-width:761px){
  .cn-filterpanel--g.open{width:min(900px,96vw);max-height:min(92vh,900px)}
}
/* H5:面板高度给标签流多留,导航列收窄 */
@media(max-width:760px){
  /* 高度一律用 dvh(vh 兜底):iOS 的 vh 按地址栏收起后的大视口算,92vh 会顶出可视区,
     sheet 的标题行(含「关闭 X」)被顶栏盖住甚至推到屏幕外 —— 正是"X 落在头像上"的成因 */
  .cn-filterpanel--g.open{max-height:92vh;max-height:92dvh}   /* sheet 抬高:顶部留空收到约原先一半 */
  .cn-tagpanes{height:58vh;height:58dvh}
  .cn-tagnav{flex-basis:82px}
  .cn-tagnav button{padding:11px 8px 11px 10px;font-size:12px}
}
/* --g 弹窗:操作行吸底常显(内容长也无需滚到底找"确定") */
@media(min-width:761px){
  .cn-filterpanel--g.open{padding-bottom:0}
  .cn-filterpanel--g .cn-fp__foot{position:sticky;bottom:0;margin-top:6px;padding:8px 0 10px;
    background:linear-gradient(0deg,var(--surface) 78%,transparent)}
}
@media(max-width:760px){
  /* 维度行压成单行横滑(同筛选卡 H5 习惯),把竖向空间让给标签区 */
  .cn-filterpanel--g .cn-fp__primary .cn-grp{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding-bottom:2px}
  .cn-filterpanel--g .cn-fp__primary .cn-grp::-webkit-scrollbar{display:none}
  .cn-filterpanel--g .cn-fp__primary .cn-grp .cn-chip{flex:0 0 auto}
  /* tabbar 让位改由吸底操作行自己承担:内容不再从按钮下方漏出 */
  .cn-has-tabbar .cn-filterpanel--g.open{padding-bottom:0}
  .cn-filterpanel--g .cn-fp__foot{margin-top:6px;padding-top:8px;padding-bottom:calc(64px + env(safe-area-inset-bottom));
    background:linear-gradient(0deg,var(--surface) 86%,transparent)}
}
/* 修:弹窗维度行 .cn-grp 是 flex 子项,需宽度约束才会换行(15项题材暴露的旧隐患) */
@media(min-width:761px){
  .cn-fp__primary .cn-grp{flex:1 1 0;min-width:0}
}
/* 常驻标签组行(卡片)·H5 单行横滑同 .cn-chip */
@media(max-width:760px){
  .cn-fcard .cn-grp .cn-tag{flex-shrink:0;white-space:nowrap}
}
/* 弹窗头部一行化:标题后跟标签操作提示(原独立 lbl 行已并入) */
.cn-fp__hint{flex:1;min-width:0;margin-left:10px;font-size:11px;font-weight:600;color:var(--ink-3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:760px){.cn-fp__hint{font-size:10.5px;margin-left:8px}}
/* 弹窗头部右侧簇:标签说明入口 + 关闭按钮,靠右并排 */
.cn-fp__headR{flex-shrink:0;display:flex;align-items:center;gap:10px;margin-left:10px}
.cn-fp__taginfo{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 13px;border-radius:999px;
  font-size:12px;font-weight:700;color:var(--ink-2);background:var(--fill-1);border:1px solid var(--line);
  text-decoration:none;white-space:nowrap;transition:.15s}
.cn-fp__taginfo:hover{color:var(--mc);border-color:var(--mc)}
.cn-fp__taginfo svg{flex-shrink:0}
@media(max-width:520px){
  .cn-fp__taginfo span{display:none}
  .cn-fp__taginfo{width:30px;padding:0;justify-content:center}
}
/* H5:标签双栏去外包围(满血到 sheet 边缘),左导航4字组名一行排下,角标浮右上 */
@media(max-width:760px){
  .cn-filterpanel--g .cn-tagpanes{border-left:none;border-right:none;border-radius:0;margin:0 -18px}
  .cn-tagnav{flex-basis:82px}
  .cn-tagnav button{position:relative;padding:12px 8px 12px 14px}
  .cn-tagnav button span{white-space:nowrap}
  .cn-tagnav .cn-tagnav__n{position:absolute;top:4px;right:5px;min-width:15px;height:15px;border-radius:8px;font-size:9px}
  .cn-tagflow{padding:0 18px 12px 12px}
  .cn-taggrp h5{margin:0 -18px 0 -12px;padding:10px 18px 7px 12px}
}

/* ============================================================
   账户弹窗（登录/注册/找回密码）—— 注入式 .ds-modal + 复用表单原子(原 auth.css 已并入此处)
   外壳吃 components.css/noir.css 的 .ds-modal/.ds-tabs/.ds-field；以下为表单内件，类名沿用 au-。
   ============================================================ */
/* 登录/注册弹层须始终盖在反馈举报弹层(.rp-mask，同为 --z-modal)之上：同 z-index 时后插入 DOM 者在上，
   而 #cnAuth 常在页面早期注入(比后开的反馈弹窗更靠前)，故显式抬高，避免登录框被反馈弹窗遮挡 */
#cnAuth{z-index:calc(var(--z-modal) + 300)}
/* 卡片：左品牌暗幕 + 右表单 两栏；质感=渐变发丝描边 + 胶片颗粒 + 多层辉光，入场轻动效 */
#cnAuth .ds-modal__card{position:relative;isolation:isolate;overflow:hidden;width:min(720px,94vw);max-width:none;max-height:92vh;
  padding:0;border-radius:22px;border:1px solid rgba(255,255,255,.10);display:grid;grid-template-columns:296px minmax(0,1fr);
  box-shadow:0 40px 120px -28px rgba(0,0,0,.9),0 0 0 1px rgba(255,59,92,.06),0 30px 90px -40px rgba(255,59,92,.32);
  animation:auRise .5s cubic-bezier(.16,1,.3,1) both}
@keyframes auRise{from{opacity:0;transform:translateY(18px) scale(.965)}to{opacity:1;transform:none}}
#cnAuth .ds-modal__card::before{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,59,92,.9) 0%,rgba(255,59,92,.35) 28%,rgba(230,184,115,.85) 62%,rgba(230,184,115,.3) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
#cnAuth .ds-modal__close{z-index:8}
/* —— 左：电影暗幕品牌栏（纯 CSS 影院氛围，无图片依赖，避免露骨/加载风险） —— */
.au-curtain{position:relative;overflow:hidden;z-index:7;display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:26px 22px;
  background:linear-gradient(165deg,#241019 0%,#160a11 55%,#0a0608 100%)}
.au-curtain::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 70% at 22% 14%,rgba(255,59,92,.40),transparent 60%),radial-gradient(120% 80% at 96% 104%,rgba(230,184,115,.26),transparent 56%)}
.au-curtain::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 140px 26px rgba(6,4,8,.8),inset -1px 0 0 rgba(255,255,255,.06)}
.au-theme{position:absolute;top:14px;right:52px;z-index:8;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3);background:transparent;border:0;cursor:pointer;transition:.2s}
.au-theme:hover{color:var(--crimson)}
.au-theme svg{width:18px;height:18px}
/* au-curtain__wm 巨型「UAA」水印已删除：暗幕文字密集，水印无论置于何处都挡住标语/trust，业主决定移除 */
.au-curtain__brand{position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px}
.au-curtain__brand img{height:26px;width:auto;filter:drop-shadow(0 0 12px rgba(255,59,92,.6))}
.au-curtain__brand b{font-family:var(--font-serif);font-style:italic;font-weight:900;font-size:17px;color:#fff}
.au-curtain__mid{position:relative;z-index:1}
.au-curtain__kicker{display:inline-block;font-family:var(--font-latin);font-style:italic;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.au-curtain__slogan{margin:0;font-family:var(--font-serif);font-weight:900;font-style:italic;font-size:30px;line-height:1.16;color:#fff;text-shadow:0 6px 26px rgba(0,0,0,.5)}
.au-curtain__slogan em{font-style:italic;color:var(--crimson);text-shadow:0 0 26px rgba(255,59,92,.6)}
.au-curtain__desc{position:relative;z-index:1;margin:14px 0 0;font-size:12.5px;line-height:1.8;color:rgba(255,255,255,.66)}
.au-curtain__trust{position:relative;z-index:1;display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.5)}
.au-curtain__trust i{width:3px;height:3px;border-radius:50%;background:var(--gold);flex-shrink:0}
/* —— 右：表单栏 —— */
.au-pane{position:relative;z-index:7;display:flex;flex-direction:column;min-width:0;padding:30px 28px 28px;max-height:92vh;overflow:auto;background:var(--surface)}
#cnAuth .ds-modal__title{font-family:var(--font-serif);font-weight:900;font-size:24px;color:var(--title);margin-bottom:4px}
#cnAuth .ds-modal__sub{font-size:13px;color:var(--ink-3);margin:0 0 18px}
/* tabs：透明底 + 金红下划灯带 */
#cnAuth .ds-tabs{background:transparent;padding:0;gap:24px;border-bottom:1px solid var(--line);border-radius:0;margin-bottom:18px}
#cnAuth .ds-tabs button{flex:0 0 auto;height:auto;padding:0 0 11px;border-radius:0;background:none;box-shadow:none;font-size:15px;font-weight:800;color:var(--ink-3);position:relative}
#cnAuth .ds-tabs button.on{background:none;color:var(--title)}
#cnAuth .ds-tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2.5px;border-radius:2px;background:linear-gradient(90deg,var(--crimson),var(--gold));box-shadow:0 0 12px rgba(255,59,92,.6)}
[data-pane][hidden]{display:none}
/* 密码显隐 / 字段内尾随按钮：缩右内距让按钮贴边 */
.ds-field--pw,.ds-field--code{padding-right:6px}
#cnAuth .ds-field{width:100%;min-width:0}
#cnAuth .ds-field input{min-width:0}
.au-eye{flex-shrink:0;width:32px;height:32px;display:grid;place-items:center;border-radius:8px;color:var(--ink-3);cursor:pointer;transition:.15s}
.au-eye:hover{color:var(--ink)}
.au-eye svg{width:18px;height:18px}
.au-code{flex:0 0 auto;height:34px;padding:0 13px;border-radius:9px;font-size:12.5px;font-weight:700;white-space:nowrap;cursor:pointer;color:var(--crimson);background:var(--crimson-soft);border:1px solid color-mix(in srgb,var(--crimson) 32%,transparent);transition:.15s}
.au-code:hover:not(:disabled){background:color-mix(in srgb,var(--crimson) 22%,transparent)}
.au-code:disabled{color:var(--ink-3);background:var(--fill-1);border-color:var(--line);cursor:default}
.au-caprow{display:flex;align-items:stretch;gap:10px;min-width:0;margin-bottom:12px}
.au-caprow .ds-field{flex:1 1 0;min-width:0;margin-bottom:0}
.au-cap{flex:0 1 150px;min-width:132px;display:flex;align-items:center;gap:4px;height:46px;padding:0 6px 0 10px;border-radius:var(--r-field);background:var(--fill-1);border:1px solid var(--line);user-select:none}
.au-cap__q{flex:1;text-align:center;font-family:var(--font-latin);font-weight:800;font-style:italic;font-size:18px;letter-spacing:.06em;color:var(--ink);transform:skewX(-4deg);text-shadow:0 1px 0 rgba(0,0,0,.35)}
.au-cap__img{flex:1;min-width:0;height:42px;border-radius:6px;object-fit:contain;cursor:pointer;display:block;background:transparent}
.au-cap__rf{flex-shrink:0;width:28px;height:28px;display:grid;place-items:center;border-radius:7px;color:var(--ink-3);cursor:pointer;transition:transform .35s,color .2s}
.au-cap__rf:hover{color:var(--crimson)}
.au-cap__rf:active{transform:rotate(180deg)}
.au-cap__rf svg{width:15px;height:15px}
.au-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 18px;font-size:13px}
.au-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--ink-2);user-select:none}
.au-check input{position:absolute;width:0;height:0;opacity:0}
.au-check__box{flex-shrink:0;width:17px;height:17px;border-radius:5px;border:1.5px solid var(--line-2);background:var(--fill-1);display:grid;place-items:center;transition:.15s}
.au-check__box svg{width:12px;height:12px;color:#fff;opacity:0;transform:scale(.5);transition:.15s}
.au-check input:checked + .au-check__box{background:var(--crimson);border-color:var(--crimson)}
.au-check input:checked + .au-check__box svg{opacity:1;transform:scale(1)}
.au-check input:focus-visible + .au-check__box{outline:2px solid var(--crimson);outline-offset:2px}
.au-link{color:var(--crimson);font-weight:600;cursor:pointer;transition:.15s}
.au-link:hover{opacity:.82;text-decoration:underline}
.au-agree{display:flex;align-items:flex-start;gap:8px;margin:6px 0 18px;font-size:12.5px;line-height:1.65;color:var(--ink-3);cursor:pointer}
.au-agree .au-check__box{margin-top:1px}
.au-agree a{color:var(--gold);font-weight:600}
.au-agree a:hover{text-decoration:underline}
.au-submit{margin-top:4px}
/* 主按钮加质感：影院绯红渐变 + 顶部高光 + 立体阴影 */
#cnAuth .au-submit{position:relative;overflow:hidden;background:linear-gradient(92deg,var(--crimson),#FF5570 55%,#FF6177);letter-spacing:.18em;box-shadow:0 16px 36px -12px rgba(255,59,92,.8),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 6px rgba(0,0,0,.25)}
#cnAuth .au-submit::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 42%)}
/* 字段聚焦绯红辉光呼吸 */
#cnAuth .ds-field:focus-within{border-color:var(--crimson);background:rgba(255,59,92,.05);box-shadow:0 8px 22px -12px rgba(255,59,92,.42)}
#cnAuth .ds-field:focus-within svg{color:var(--crimson)}
/* input 不自带焦点环：聚焦只由 .ds-field 容器(单一红框)指示，消除内外双重红框 */
.cine .ds-field input:focus,.cine .ds-field input:focus-visible{outline:none;box-shadow:none}
.au-hint{margin:9px 0 0;font-size:12px;color:var(--ink-3);text-align:center;letter-spacing:.02em}
.au-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;font-size:13px;font-weight:600;color:var(--ink-3);cursor:pointer;transition:.15s}
.au-back:hover{color:var(--crimson)}
.au-back svg{width:16px;height:16px}
.au-cap__op{font-style:normal;font-weight:900;padding:0 .06em;color:var(--ink)}
/* 账户弹窗：自定义控件的键盘焦点环（reset 抹掉了 button 默认轮廓，需补回） */
#cnAuth .ds-tabs button:focus-visible,#cnAuth .ds-modal__close:focus-visible,#cnAuth .au-code:focus-visible,#cnAuth .au-cap__rf:focus-visible,#cnAuth .au-link:focus-visible,#cnAuth .au-back:focus-visible{outline:2px solid var(--crimson);outline-offset:2px;border-radius:8px}
/* au-link/au-back 作为 <button> 时继承字号、去多余内距 */
.au-link{font:inherit}
/* —— 登录态·封禁 / 禁言提示条（封禁=红 / 禁言=金 / 审核=蓝） —— */
.au-status{display:flex;gap:12px;align-items:flex-start;margin:0 0 16px;padding:14px 15px;border-radius:13px;border:1px solid var(--line);background:var(--fill-1);animation:auRise .3s ease both}
.au-status[hidden]{display:none}
/* 只有标题(无副标题/补充/按钮)时，正文只有一行：与图标垂直居中，否则会顶在图标上沿显得偏上。
   多行时仍用 flex-start，使图标对齐标题行。修饰类由 auth.js 的 showStatus 按内容加。 */
.au-status--solo{align-items:center}
.au-status__ic{flex-shrink:0;width:38px;height:38px;border-radius:11px;display:grid;place-items:center}
.au-status__ic svg{width:20px;height:20px}
.au-status__bd{flex:1;min-width:0}
.au-status__t{display:block;font-family:var(--font-serif);font-weight:800;font-size:15.5px;line-height:1.3}
.au-status__d{margin:5px 0 0;font-size:13px;line-height:1.65;color:var(--ink-2)}
.au-status__meta{margin:6px 0 0;font-size:12px;line-height:1.55;color:var(--ink-3)}
.au-status__go{margin-top:12px;height:34px;padding:0 16px;border:0;border-radius:9px;font-family:inherit;font-weight:800;font-size:13px;cursor:pointer;
  color:#1a1410;background:linear-gradient(135deg,#C99A52,#E6B873 58%,#F6E3B8);box-shadow:0 9px 22px -10px rgba(230,184,115,.9);transition:transform .15s,filter .2s}
.au-status__go:hover{transform:translateY(-1px);filter:brightness(1.04)}
/* 封禁(红)：永久封禁 / 违规封禁 / 已注销 / 未注册 / 密码错误 */
.au-status--ban{border-color:color-mix(in srgb,var(--crimson) 42%,transparent);background:color-mix(in srgb,var(--crimson) 10%,var(--surface))}
.au-status--ban .au-status__ic{color:#fff;background:linear-gradient(135deg,#FF3B5C,#FF6177)}
.au-status--ban .au-status__t{color:var(--crimson)}
/* 禁言(金)：管理员禁言 / 自动禁言 3 天 —— 可继续登录 */
.au-status--mute{border-color:color-mix(in srgb,var(--gold) 46%,transparent);background:color-mix(in srgb,var(--gold) 12%,var(--surface))}
.au-status--mute .au-status__ic{color:#1a1410;background:linear-gradient(135deg,#C99A52,#E6B873 58%,#F6E3B8)}
.au-status--mute .au-status__t{color:var(--gold)}
/* 审核(蓝)：状态=处理中 */
.au-status--review{border-color:color-mix(in srgb,#8AA0FF 50%,transparent);background:color-mix(in srgb,#8AA0FF 10%,var(--surface))}
.au-status--review .au-status__ic{color:#fff;background:linear-gradient(135deg,#6E86FF,#9FB1FF)}
.au-status--review .au-status__t{color:#9fb0ff}
/* 账户/密码不匹配(淡红)：普通登录失败,弱于「封禁」,防撞库统一提示 */
.au-status--err{border-color:color-mix(in srgb,var(--crimson) 30%,transparent);background:color-mix(in srgb,var(--crimson) 7%,var(--surface))}
.au-status--err .au-status__ic{color:var(--crimson);background:color-mix(in srgb,var(--crimson) 16%,var(--surface))}
.au-status--err .au-status__t{color:var(--ink)}
.au-status--ok{border-color:color-mix(in srgb,#30a46c 40%,transparent);background:color-mix(in srgb,#30a46c 10%,var(--surface))}
.au-status--ok .au-status__ic{color:#fff;background:linear-gradient(135deg,#2f9e5f,#43b877)}
.au-status--ok .au-status__t{color:#37a86a}
/* —— 用户名「选择演示账号」下拉（各封禁/禁言场景） —— */
.ds-field--sel{position:relative;padding-right:6px}
.au-select{flex:1;min-width:0;height:100%;border:0;outline:none;background:transparent;color:var(--ink);
  font-family:var(--font-sans);font-size:14px;cursor:pointer;-webkit-appearance:none;appearance:none;padding-right:24px}
.au-select:invalid{color:var(--ink-3)}            /* 未选择时(占位 option)显示为灰 */
.au-select option{color:var(--ink);background:var(--surface-3,#262631)}
.au-select option[disabled]{color:var(--ink-3)}
.au-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--ink-3);pointer-events:none}
.ds-field--sel:focus-within .au-caret{color:var(--crimson)}
/* 账户弹窗 H5：两栏转单列，左暗幕收为顶部品牌条 */
@media(max-width:600px){
  #cnAuth .ds-modal__card{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);width:100%;max-width:440px}
  .au-curtain{flex-direction:row;align-items:center;gap:12px;padding:14px 92px 14px 20px}
  .au-curtain__wm,.au-curtain__mid,.au-curtain__trust{display:none}
  .au-pane{padding:22px 18px 24px}
}
@media (prefers-reduced-motion:reduce){#cnAuth .ds-modal__card{animation:none}}