/* PC 修正（2026-11-04 按设计稿重做后）：视觉全部来自 design.css（设计稿 style.css 原样）。
   这里只放 proto.css（H5 手机壳 / 组件）与设计稿冲突时的修正，以及 SSR 外壳自己的结构差异；不改类名，不改 JS 挂点。 */

/* proto.css 把 html/body/#screen 钉成手机视口高并内部滚动，桌面按内容撑开、整页滚动 */
html, body.pc { height: auto !important; min-height: 100vh; overflow: visible !important; }
body.pc { overscroll-behavior: auto; }
.pc #screen { position: static; inset: auto; height: auto; overflow: visible; scrollbar-width: auto; overscroll-behavior: auto; }

/* proto.css 的 nav{position:absolute;…} 是手机底栏，顶栏导航 / 移动导航 / 页脚分组都是 nav，全部复位 */
.pc .site-header nav, .pc .mobile-nav, .pc nav.footer-group { position: static; inset: auto; height: auto; background: none; border: 0; padding: 0; z-index: auto; }
.pc .site-header nav { align-items: center; gap: 20px; }
.pc nav.footer-group { display: flex; flex-direction: column; }

/* 外层 main 只是 JS 挂点容器：不吃设计稿 .cm-site main / .cm-home main 的版心与负边距（那些规则给 #screen 内的 .home-main / .page-main） */
.cm-site main.pc-main { max-width: none !important; padding: 0 !important; margin: 0 !important; gap: 0 !important; display: block; position: static; overflow: visible; z-index: auto; }
.cm-home .home-main { position: relative; margin-top: -50px; gap: 44px; padding-top: 0; z-index: 2; }
.cm-home .home-main > section { gap: 17px; }
@media (max-width: 767px) { .cm-home .home-main { margin-top: -10px; gap: 28px; } }
.cm-site #screen.page-main { width: 100%; }

/* 年龄门：盖住整页（含顶栏 / 页脚）。显隐只看 html.age-pending（head 里同步脚本首绘前定），正文不隐藏，免得确认前后布局位移 */
.pc .age-gate { position: fixed; inset: 0; z-index: 90; background: #0c0c0f; max-width: none; overflow-y: auto; display: none; }
.age-pending .pc .age-gate { display: flex; }
/* 标题从 h1 改成 div（每页只留一个 h1），样式照 proto.css 的 .age-gate h1 */
.age-gate .age-gate-title { font-size: 35px; line-height: 1.12; letter-spacing: -1.2px; margin: 13px 0 17px; font-weight: 700; color: inherit; }
@media (max-height: 720px) { .age-gate .age-gate-title { font-size: 31px; } }
.pc .age-gate-main { max-width: 420px; margin: auto; }

/* 头像里放用户头像图 */
.head-avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.head-avatar.unread { position: relative; }
.head-avatar.unread::after { content: ''; position: absolute; top: 0; right: 0; width: 8px; height: 8px; border-radius: 50%; background: #e50914; border: 2px solid #0b0c0f; }

/* H5 浮层：.veil 原是手机壳内 absolute，桌面钉到视口；Sheet 在 flex 的 .veil 里居中、宽度收到 520；
   关闭按钮 .icon-btn 不吃 design.css 的全局 button 底色与边框 */
.pc #overlay .veil { position: fixed; justify-content: center; }
.pc .sheet, #overlay .sheet { max-width: 520px; left: auto; transform: none; }
#overlay .icon-btn { background: none; border: 0; }

/* 简介过长只显示前 3 行，点一下展开（core/boot.js 的 [data-clamp]） */
.clamp-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.clamp-text.is-open { display: block; -webkit-line-clamp: unset; cursor: auto; }

/* proto.css 的 .primary{width:100%;height:44px;margin-top:20px} 是 H5 表单大按钮；页面内（#screen）的链接 / .btn 主按钮按设计稿自适应宽度，浮层里的 H5 组件不受影响 */
.cm-site #screen .primary { width: auto; margin-top: 0; }
.cm-site #screen .btn.primary { height: auto; }

/* design.css 的全局 button:hover / button.primary:hover（0,2,1）会把 H5 组件按钮悬停刷成 #292a30 / 红底。
   浮层与收银台底栏里按 H5 原背景复位（H5 本身没有悬停换色），播放器控件同理。 */
:is(#overlay, #commerce-footer) .primary:hover:not(:disabled) { background: var(--red); }
:is(#overlay, #commerce-footer) .royal-sheet .primary:hover:not(:disabled) { background: linear-gradient(#ffe6a1, #d89c34); }
.rewards-mode :is(#overlay, #commerce-footer) .royal-sheet .primary:hover:not(:disabled) { background: linear-gradient(#fff0cb, #cba16b); }
:is(#overlay, #commerce-footer) .primary.inbox-secondary:hover:not(:disabled) { background: #26272c; }
#overlay .share-sheet .sheet-head .icon-btn { background: #2c2c2c; }
#overlay .icon-btn:hover:not(:disabled) { background: none; }
#overlay .share-sheet .sheet-head .icon-btn:hover:not(:disabled) { background: #2c2c2c; }
.pc .clip-end-primary:hover:not(:disabled) { background: #ebc38a; }
.pc .clip-end-vip .clip-end-primary:hover:not(:disabled) { background: #e51b34; }
.pc .unlock-dialog .clip-end-primary.unlock-secondary:hover:not(:disabled) { background: transparent; }
.pc .clip-end-close:hover:not(:disabled) { background: #ffffff04; }
.pc .round-control:hover:not(:disabled), .pc .episode-button:hover:not(:disabled) { background: #242529; }
.pc .clear-hint:hover:not(:disabled) { background: #0004; }
.pc .drama-episodes .ep-cell:hover:not(:disabled) { background: #1b1c20; }

/* design.css 的 .cm-site header{背景/下边框/毛玻璃 !important} 与 .cm-site header>div:first-child{高 76px、左右 --cm-pad …!important}
   本意只给站点顶栏，但会打到页面与浮层里 H5 组件自己的 <header>（反馈页头出现黑条、签到头图文字被推进 63px 且高度钉死）。这里复位。 */
.cm-site :is(#screen, #overlay) header { background: none !important; border-bottom: 0 !important; backdrop-filter: none !important; }
.cm-site :is(#screen, #overlay) header > div:first-child { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; height: auto !important; gap: normal !important; }

/* 顶栏：design.css 给 .header-actions flex-basis 590px、导航 flex-basis 0，1300 宽以下导航先被压缩，「Top 20 / Way home」被裁掉。
   桌面宽度下导航按内容宽度不收缩，让搜索框收窄（header-actions 有 315px 下限）。 */
@media (min-width: 1101px) { .pc .site-header nav { flex: 1 0 auto; } }

/* 右下浮动工具（56px 宽、贴右 22px）在 1280–1600 宽下伸进内容区约 15–22px，盖住区块右上角的「View all」与选集面板边缘。
   768 以上收到 46px 宽并居中放进页边距（--cm-pad），不再压内容。 */
@media (min-width: 768px) {
  .cm-tools { right: max(4px, calc((var(--cm-pad) - 46px) / 2)); gap: 12px; }
  .cm-tools > a, .cm-tools > button { width: 46px; height: 50px; min-height: 50px; border-radius: 9px; }
  .cm-tools svg { width: 23px; height: 23px; }
  .cm-tools > .floating-app svg { width: 19px; height: 24px; }
  .cm-tools > .floating-support svg { width: 21px; height: 21px; }
}
/* 客服入口：浮动工具第一个，图标 + 「Help」，红色描边与普通工具区分 */
.cm-tools > .floating-support { flex-direction: column; gap: 2px; border-color: #e5091499; color: #fff; }
.cm-tools > .floating-support svg { width: 23px; height: 23px; stroke-width: 2.1; }
.footer-group .footer-business { color: #999ca6; line-height: 1.6; max-width: 220px; overflow-wrap: anywhere; }

/* 卡片网格：design.css 在 1300 以下降到 5 列，而首页区块（12 / 18 部）与列表页（每页 24 部）都按 6 的倍数取数，5 列会留孤行；1101–1300 保持 6 列 */
@media (min-width: 1101px) and (max-width: 1300px) { .catalog-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 14px; } }

/* 浮层（评论 / 分享 / 选集 / 解锁 / 收银 sheet）全是 H5 组件，design.css 的裸 button{边框/底色/内边距/圆角}会给 Top·Latest 标签、Reply、点赞、Post 套上方框。
   :where 保持 0,0,1 特异性，只盖掉 design.css 的裸 button，proto.css 的类规则照常生效（同 pc-account.css 的 .pc-panel-host 处理）。 */
:where(#overlay, #commerce-footer) button { border: 0; background: none; padding: 0; border-radius: 0; }

/* 404 / 出错页：套设计稿 .empty 空状态，垂直居中在内容区 */
.pc-status-page { margin: auto 0; width: 100%; max-width: 640px; align-self: center; }
.pc-status-page .empty-symbol { font-size: 44px; font-weight: 800; letter-spacing: 2px; color: #e50914; }
.pc-status-page h2 { color: #f5f5f1; }

/* 首页 hero 剧名从 h1 降为 h2（站点级 h1 在页首 .sr-only）：照 design.css 的 .cm-hero h1 / h1.cm-hero-title 规则 */
.cm-hero h2.cm-hero-title { margin: 0; font-family: Inter, 'Helvetica Neue', Arial, sans-serif !important; font-weight: 800 !important; max-width: 620px; text-shadow: 0 4px 36px #0006 !important;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; max-inline-size: 100%; max-height: 2.2em; text-overflow: ellipsis; word-break: normal; overflow-wrap: normal; flex-shrink: 0; }
html[lang=en] .cm-home .cm-hero h2.cm-hero-title { font-size: clamp(36px, 4.2vw, 64px) !important; line-height: 1.1 !important; letter-spacing: -1.5px !important; }
@media (max-width: 767px) { html[lang=en] .cm-home .cm-hero h2.cm-hero-title { font-size: clamp(26px, 8.5vw, 36px) !important; letter-spacing: -.7px !important; } }

/* /vip 头像旁昵称从 h1 改成 strong（页面 h1 是标题行），样式照 proto.css 的 .coin-member h1 */
.coin-member .coin-member-name { display: block; font-size: 19px; font-weight: 600; letter-spacing: -.5px; margin: 0; color: #ffe9c6; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* 首页 hero 左右切换按钮：平时淡（运营 2026-11-10「点击的淡一点」），悬停 / 聚焦才亮；整块可左右划，纵向仍交给页面滚动。 */
.cm-home .cm-hero { touch-action: pan-y; }
.cm-home .hero-step-controls button { background: #0000002e; border-color: #ffffff26; color: #ffffffa6; opacity: .55; transition: opacity .18s ease, background .18s ease, border-color .18s ease; }
.cm-home .hero-step-controls button:hover, .cm-home .hero-step-controls button:focus-visible { opacity: 1; background: #ffffff1f; border-color: #ffffff66; color: #fff; }

/* 首页 hero 右侧边缘的「下一张」按钮（领导 2026-11-10 要求，位置照截图红框：右缘、竖直居中略偏下）。 */
.cm-home .hero-edge-next { position: absolute; right: 0; top: 52%; transform: translateY(-50%); z-index: 4; width: 44px; height: 112px; padding: 0; display: grid; place-items: center;
  border: 1px solid #ffffff1f; border-right: 0; border-radius: 10px 0 0 10px; background: #0b0c0f66; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #ffffffcc; transition: background .18s ease, color .18s ease, width .18s ease; }
.cm-home .hero-edge-next svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cm-home .hero-edge-next:hover, .cm-home .hero-edge-next:focus-visible { width: 52px; background: #e50914cc; border-color: #e50914; color: #fff; }
@media (max-width: 767px) { .cm-home .hero-edge-next { display: none; } }

/* 下载入口悬停二维码（core/app-qr.js）：顶栏按钮向下弹、右下浮动 APP 向左弹；弹出带回弹，二维码上扫一道红光。 */
.has-app-qr { position: relative; }
.has-app-qr .app-qr-pop { position: absolute; z-index: 60; width: 196px; padding: 14px 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #17181cf7; border: 1px solid #ffffff1f; border-radius: 14px; box-shadow: 0 18px 50px #000b, 0 0 0 1px #e5091422;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #f3f3f5; text-align: center; white-space: normal; cursor: pointer;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(.9);
  transition: opacity .18s ease, transform .32s cubic-bezier(.2,1.4,.4,1), visibility 0s linear .32s; }
.has-app-qr .app-qr-pop::before { content: ''; position: absolute; inset: -16px; z-index: -1; }
.has-app-qr:hover .app-qr-pop, .has-app-qr:focus-visible .app-qr-pop { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.header-download.has-app-qr .app-qr-pop { top: calc(100% + 14px); right: -6px; transform-origin: 88% 0; }
.cm-tools > .floating-app.has-app-qr .app-qr-pop { right: calc(100% + 16px); bottom: -4px; transform: translateX(10px) scale(.9); transform-origin: 100% 85%; }
.cm-tools > .floating-app.has-app-qr:hover .app-qr-pop, .cm-tools > .floating-app.has-app-qr:focus-visible .app-qr-pop { transform: none; }
.has-app-qr .app-qr-pop::after { content: ''; position: absolute; width: 12px; height: 12px; background: inherit; border: inherit; border-width: 1px 0 0 1px; }
.header-download.has-app-qr .app-qr-pop::after { top: -7px; right: 34px; transform: rotate(45deg); }
.cm-tools > .floating-app.has-app-qr .app-qr-pop::after { right: -7px; bottom: 24px; transform: rotate(135deg); }
.has-app-qr .app-qr-code { position: relative; display: block; width: 164px; height: 164px; padding: 6px; border-radius: 10px; background: #fff; overflow: hidden;
  transform: scale(.85); opacity: 0; transition: transform .38s cubic-bezier(.2,1.3,.4,1) .05s, opacity .2s ease .05s; }
.has-app-qr:hover .app-qr-code, .has-app-qr:focus-visible .app-qr-code { transform: none; opacity: 1; }
.has-app-qr .app-qr-code svg { display: block; width: 100%; height: 100%; stroke: none; }
.has-app-qr .app-qr-scan { position: absolute; left: 6px; right: 6px; top: 6px; height: 34%; background: linear-gradient(180deg, #e5091400, #e509142e 70%, #e50914aa); border-bottom: 2px solid #e50914; opacity: 0; }
.has-app-qr:hover .app-qr-scan, .has-app-qr:focus-visible .app-qr-scan { animation: app-qr-scan 1.6s ease-in-out .35s 2 both; }
@keyframes app-qr-scan { 0% { transform: translateY(-100%); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(290%); opacity: 0; } }
.has-app-qr .app-qr-title { margin-top: 8px; font-size: 13px; line-height: 18px; font-weight: 750; color: #fff; letter-spacing: 0; }
.has-app-qr .app-qr-hint { font-size: 11px !important; line-height: 15px; font-weight: 500; color: #a9abb5 !important; letter-spacing: 0; }
.cm-tools > .floating-app.has-app-qr:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .has-app-qr .app-qr-pop, .has-app-qr .app-qr-code { transition: opacity .15s ease; transform: none !important; } .has-app-qr .app-qr-scan { animation: none !important; } }

/* 付费集免费试看角标（同 H5 proto.css .preview-pill；2026-11-11 PC 起收费） */
.preview-pill{position:absolute;top:18px;left:18px;z-index:3;padding:4px 10px;border-radius:12px;background:#000a;border:1px solid #ffffff2b;font-size:12px;font-weight:600;color:#ffd38a;pointer-events:none}
.preview-pill[hidden]{display:none}

/* 倍速菜单（components/player.js toggleSpeedMenu，挂在播放器内部，全屏 / 沉浸式都能用）与真全屏（2026-11-11） */
.player-root { position: relative; }
.speed-menu { position: absolute; z-index: 40; display: flex; flex-direction: column; gap: 2px; min-width: 92px; padding: 6px; border-radius: 12px; background: #16171bf2; border: 1px solid #ffffff1a; box-shadow: 0 12px 34px #000b; backdrop-filter: blur(10px); animation: speed-menu-in .16s ease-out both; }
.speed-menu button { height: 34px; padding: 0 14px; border-radius: 8px; color: #d7d4dc; font-size: 13px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; transition: background .12s, color .12s; }
.speed-menu button:hover, .speed-menu button:focus-visible { background: #ffffff14; color: #fff; outline: none; }
.speed-menu button[aria-checked="true"] { background: #e50914; color: #fff; }
@keyframes speed-menu-in { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.player-root:fullscreen { background: #000; width: 100%; height: 100%; }
.player-root:fullscreen > video { width: 100%; height: 100%; object-fit: contain; }
.player-root:-webkit-full-screen { background: #000; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .speed-menu { animation: none; } }

/* 顶栏「Store」入口（2026-11-11 测试反馈：用户不一定点头像，加个商城按钮直达会员 / 金币页） */
.header-shop { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; min-height: 42px; padding: 9px 16px; border-radius: 999px; border: 1px solid #f3c56a80; background: linear-gradient(135deg, #3a2a12, #1d160d); color: #ffd98a; font-size: 13px; font-weight: 750; white-space: nowrap; transition: border-color .18s, transform .18s, box-shadow .18s; }
.header-shop::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, #ffe2a050 50%, transparent 70%); transform: translateX(-120%); animation: header-shop-shine 4.5s ease-in-out 1.2s infinite; }
.header-shop:hover { border-color: #ffd98a; box-shadow: 0 6px 20px #d9a24a33; transform: translateY(-1px); }
.header-shop.active { border-color: #ffd98a; box-shadow: inset 0 0 0 1px #ffd98a55; }
.header-shop svg { width: 18px; height: 18px; fill: #f3c56a33; stroke: currentColor; stroke-width: 1.9; }
@keyframes header-shop-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (max-width: 1300px) { .header-shop { padding: 9px 13px; font-size: 12px; } }
@media (max-width: 1100px) { .header-shop { padding: 0; width: 42px; } .header-shop span { display: none; } }
@media (max-width: 767px) { .header-shop { width: 34px; min-height: 34px; } .header-shop svg { width: 16px; height: 16px; } }
@media (prefers-reduced-motion: reduce) { .header-shop, .header-shop::after { animation: none; transition: none; } }

/* 解锁弹窗里的自动扣币开关（components/unlock-dialog.js，2026-11-11 同 H5） */
.ui-switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; border-radius: 12px; background: #3a3b42; border: 0; padding: 0; cursor: pointer; transition: background .18s; }
.ui-switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0006; transition: transform .18s; }
.ui-switch[aria-checked="true"] { background: #e50914; }
.ui-switch[aria-checked="true"] i { transform: translateX(18px); }
.unlock-auto { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #ffffff0a; border: 1px solid #ffffff14; text-align: left; }
.unlock-auto b { display: block; font-size: 13px; font-weight: 650; color: #f2f0f4; }
.unlock-auto small { display: block; margin-top: 3px; font-size: 11px; color: #8d8e96; }
@media (prefers-reduced-motion: reduce) { .ui-switch, .ui-switch i { transition: none; } }


/* 播放页：标题左侧「Home」返回按钮、控制条里的播放 / 暂停按钮（2026-11-11 测试反馈） */
.player-title-row { display: flex; align-items: center; gap: 14px; }
.player-title-row > h1 { margin-right: auto; min-width: 0; }
.watch-home { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; height: 36px; padding: 0 14px 0 10px; border-radius: 999px; border: 1px solid #ffffff1f; background: #ffffff08; color: #d9d6de; font-size: 13px; font-weight: 600; transition: background .15s, border-color .15s, color .15s; }
.watch-home:hover { background: #ffffff14; border-color: #ffffff3a; color: #fff; }
.watch-home svg { width: 18px; height: 18px; }
.player-controls .play-toggle svg { width: 18px; height: 18px; }
.player-controls .play-toggle:not(.is-locked) svg { fill: currentColor; stroke: none; }

/* 播放中鼠标停 3 秒（player.js 给 .player-root 加 is-idle）：收起进度条、按钮和底部暗角，露出画面 */
.player-root .player-bottom, .player-root .player-shade { transition: opacity .25s; }
.player-root.is-idle, .player-root.is-idle .play-zone { cursor: none; }
.player-root.is-idle .player-bottom, .player-root.is-idle .player-shade { opacity: 0; pointer-events: none; }