/* ==========================================================================
   小白热播 · 客户站设计系统   css/xb.css
   --------------------------------------------------------------------------
   来源：设计稿/客户站重做_v7.html + 设计稿/交互与联动.html + 16_客户站交互契约.md

   四条硬约束（改样式前先看这里）：
     1. 圆角只用这四档：10 / 12 / 16 / 999px。圆形一律 999px（不写 50%）。
     2. 金色只许出现在 7 处：播放进度条 / 免费标记 / 锁集小锁 / 「更新中」角标 /
        会员标签 / 选中价格 / 开通按钮。**其他地方出现金色 = 违规。**
     3. 数字一律 font-variant-numeric: tabular-nums。
     4. 图标 1.5px 线条 + stroke-linecap:round，颜色一律 currentColor。

   页面：首页（含入口校验）/ 片库 / 播放 / 我的
   ========================================================================== */

/* ==========================================================================
   0. 设计变量
   ========================================================================== */

:root {
  /* 中性 */
  --ink: #0a0a0a;
  --ink-2: #555555;
  --ink-3: #8f8f8f;
  --ink-4: #c0c0c0;
  --line: #ececec;
  --fill: #f5f5f5;
  --paper: #ffffff;

  /* 金：只用在钱的 7 处 */
  --gold: #B8860B;
  --gold-bright: #D9A62E;
  --gold-light: #E8C46A;
  --gold-soft: #FBF4E4;

  /* 支付方式品牌色（设计稿第 3 屏）：只给那两个小角标，别的地方一律不用 */
  --pay-ali: #1677FF;
  --pay-wx: #07C160;

  /* 圆角四档 */
  --r-10: 10px;
  --r-12: 12px;
  --r-16: 16px;
  --r-pill: 999px;

  /* 页面左右留白统一 22，和设计稿一致 */
  --pad: 22px;

  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
    "MiSans", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", Consolas, monospace;

  /* 底部 tabbar 高度 + 安全区 */
  --tab-h: 56px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* ==========================================================================
   1. 基础
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  -webkit-text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* 手机 390×844 下不许出现横向滚动条（契约验收第 5 条） */
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

img {
  display: block;
  max-width: 100%;
}

/* hidden 必须压得住下面那些 display:flex 的组件（锁集遮罩、清空按钮）
   否则 [hidden] 会被作者样式里的 display 盖掉，遮罩会一直显示 —— 这类 bug 很难查 */
[hidden] {
  display: none !important;
}

button {
  font-family: var(--font);
  font-size: inherit;
  color: inherit;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, p {
  margin: 0;
}

/* 数字统一等宽：金额、集数、时间轴不会左右跳 */
b, i, span, em,
.num,
.tabular {
  font-variant-numeric: tabular-nums;
}

/* 图标：1.5 线条 + 圆头，颜色跟随父级 */
svg {
  display: block;
  flex: 0 0 auto;
}

.ic {
  display: block;
  flex: 0 0 auto;
}

/* 屏内滚动条不占位（移动端本来也不显示） */
.scroll {
  scrollbar-width: none;
}

.scroll::-webkit-scrollbar {
  display: none;
}

/* ==========================================================================
   2. 应用外壳（app + 滚动区 + tabbar）
   ========================================================================== */

.app {
  display: flex;
  flex-direction: column;
  /*
   * 2026-11-14 修：min-height → height。
   *
   * 原来是 min-height:100dvh，内容一多 .app 就被撑高（实测我的页 882 > 视口 844），
   * 而 .tabbar 是 position:sticky;bottom:0，它粘在**视口**底部（788~844），
   * .scroll 却按 .app 的高度算（底部 826）—— 于是 788~826 这 38px 内容被 tabbar 压住，
   * 页脚被切掉一半。首页更严重，压 62px。
   *
   * 改成 height:100dvh 后 .app 正好一屏，.scroll 内部滚动，
   * .tabbar 就规规矩矩占最后 56px，再也不会盖住内容。
   */
  height: 100dvh;
  max-width: 560px;
  margin: 0 auto;
  background: var(--paper);
  position: relative;
}

.scroll {
  flex: 1 1 auto;
  /*
   * min-height:0 是必须的：flex 子项默认 min-height:auto，不肯缩到内容以下，
   * 加了 overflow 也不滚。这一行配合上面的 height:100dvh 才能真正内部滚动。
   */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* 沉浸式播放页：外壳是黑的，信息区是白的 */
.page-play .app {
  background: #000;
}

/* ---- 底部 tabbar ---- */
.tabbar {
  flex: 0 0 auto;
  height: calc(var(--tab-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  border-top: 1px solid var(--line);
  background: var(--paper);
  display: flex;
  align-items: center;
  position: sticky;
  bottom: 0;
  z-index: 20;
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink-4);
}

.tab span {
  font-size: 9.5px;
  letter-spacing: 0.04em;
  line-height: 1;
}

.tab.on {
  color: var(--ink);
}

.tab:active {
  opacity: 0.6;
}

/* ==========================================================================
   3. 通用零件
   ========================================================================== */

/* ---- 页头（首页/片库/我的 共用）---- */
.hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* 顶部让开刘海/状态栏，否则标题被挖孔挡住 */
  padding: calc(6px + var(--safe-t)) var(--pad) 16px;
}

.hd-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.hd-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--ink);
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 4px;
  margin: -4px;
  border-radius: var(--r-pill);
  color: currentColor;
}

.icon-btn:active {
  opacity: 0.5;
}

/* ---- 小节标题 ---- */
.row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 var(--pad) 14px;
}

.row-head h3 {
  font-size: 15px;
  font-weight: 600;
}

.row-head .more {
  display: flex;
  align-items: center;
  gap: 3px;
  background: none;
  border: 0;
  padding: 0;
  font-size: 11.5px;
  color: var(--ink-3);
}

/* ---- 按钮 ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 42px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-10);
  background: var(--fill);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 500;
  text-align: center;
}

.btn:active {
  opacity: 0.75;
}

.btn:disabled {
  opacity: 0.42;
  cursor: default;
}

.btn-primary {
  background: var(--ink);
  color: #fff;
}

.btn-ghost {
  background: none;
  box-shadow: inset 0 0 0 1px var(--line);
}

/* 金色按钮 = 「开通按钮」这一处，别的地方不许用 */
.btn-gold {
  background: var(--gold);
  color: #fff;
  font-weight: 600;
}

.btn-block {
  display: flex;
  width: 100%;
}

/* ---- 标签 ---- */

/* 会员标签：允许金色（7 处之一） */
.tag-vip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: rgba(184, 134, 11, 0.1);
  color: var(--gold);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* 免费标记：允许金色（7 处之一） */
.tag-free {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: rgba(184, 134, 11, 0.1);
  color: var(--gold);
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* 「更新中」角标：允许金色（7 处之一） */
.badge-live {
  position: absolute;
  left: 7px;
  top: 7px;
  z-index: 2;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* ---- 海报占位（灰度影像感；老板没传封面时用）----
   ⚠️ 容器只能用 background-color 打底，不许用 background 简写 ——
      简写会把这里的 background-image 一起清掉，占位就变成一块纯黑。 */
.ph {
  background:
    radial-gradient(120% 100% at 18% 8%, #7a7a7a 0%, rgba(122, 122, 122, 0) 52%),
    radial-gradient(90% 90% at 88% 26%, #a8a8a8 0%, rgba(168, 168, 168, 0) 46%),
    radial-gradient(120% 110% at 46% 108%, #2e2e2e 0%, rgba(46, 46, 46, 0) 62%),
    linear-gradient(160deg, #4a4a4a, #151515 70%);
}

.ph-b {
  background:
    radial-gradient(110% 95% at 82% 12%, #8e8e8e 0%, rgba(142, 142, 142, 0) 50%),
    radial-gradient(100% 90% at 12% 34%, #b4b4b4 0%, rgba(180, 180, 180, 0) 44%),
    radial-gradient(120% 110% at 60% 105%, #242424 0%, rgba(36, 36, 36, 0) 60%),
    linear-gradient(200deg, #545454, #101010 72%);
}

.ph-c {
  background:
    radial-gradient(130% 100% at 50% -10%, #969696 0%, rgba(150, 150, 150, 0) 50%),
    radial-gradient(90% 80% at 90% 70%, #3a3a3a 0%, rgba(58, 58, 58, 0) 55%),
    linear-gradient(170deg, #5c5c5c, #0d0d0d 74%);
}

.ph-d {
  background:
    radial-gradient(100% 90% at 22% 80%, #888 0%, rgba(136, 136, 136, 0) 48%),
    radial-gradient(120% 100% at 78% 16%, #c0c0c0 0%, rgba(192, 192, 192, 0) 42%),
    linear-gradient(145deg, #3f3f3f, #131313 70%);
}

/* 真实封面：真图铺满 */
.poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* ==========================================================================
   4. 骨架屏（灰底扫光；契约：不许转圈）
   ========================================================================== */

.sk {
  background: linear-gradient(90deg, #f0f0f0 25%, #f7f7f7 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.4s ease infinite;
  border-radius: var(--r-10);
}

@keyframes sk-shimmer {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.sk-t {
  height: 13px;
}

.sk-poster {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-10);
}

/* 骨架期间把真内容藏起来：只认 body[data-state] 这一个开关 */
body[data-state="loading"] [data-when="ready"],
body[data-state="loading"] [data-when="gate"],
body[data-state="ready"] [data-when="loading"],
body[data-state="ready"] [data-when="gate"],
body[data-state="gate"] [data-when="loading"],
body[data-state="gate"] [data-when="ready"] {
  display: none !important;
}

/* ==========================================================================
   5. 首页
   ========================================================================== */

.hero {
  position: relative;
  display: block;
  width: calc(100% - var(--pad) * 2);
  margin: 0 var(--pad) 26px;
  padding: 0;
  border: 0;
  border-radius: var(--r-16);
  overflow: hidden;
  background-color: #1a1a1a;
  text-align: left;
}

/* 280px 高：设计稿限定值 */
.hero-pic {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.86) 0%,
    rgba(0, 0, 0, 0.4) 34%,
    rgba(0, 0, 0, 0) 62%
  );
}

.hero-cap {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 18px;
  z-index: 3;
  color: #fff;
}

/* 「正在热播」小标：不是金色（金色的 7 处里没有它） */
.hero-k {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 7px;
}

.hero-t {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: #fff;
}

.hero-m {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.72);
}

/* ---- 横排 104px 卡片 ---- */
.rail {
  display: flex;
  gap: 13px;
  padding: 0 var(--pad) 26px;
  overflow-x: auto;
  scrollbar-width: none;
}

.rail::-webkit-scrollbar {
  display: none;
}

.rail-item {
  flex: 0 0 104px;
  width: 104px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

.rail-poster {
  position: relative;
  width: 104px;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-10);
  overflow: hidden;
  background-color: #1a1a1a;
}

.rail-nm {
  font-size: 12px;
  margin-top: 9px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}

.rail-meta {
  font-size: 10.5px;
  color: var(--ink-4);
  margin-top: 3px;
}

/* ---- 最近更新列表 ---- */
.list {
  padding: 0 var(--pad) 26px;
}

.list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
}

.list-item:last-child {
  border-bottom: 0;
}

.list-thumb {
  position: relative;
  width: 60px;
  height: 80px;
  flex: 0 0 auto;
  border-radius: var(--r-10);
  overflow: hidden;
  background-color: #1a1a1a;
}

.list-txt {
  flex: 1;
  min-width: 0;
}

.list-txt h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-txt p {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.list-chev {
  color: var(--ink-4);
  flex: 0 0 auto;
}

/* ---- 首页骨架 ---- */
.sk-hero {
  height: 280px;
  margin: 0 var(--pad) 26px;
  border-radius: var(--r-16);
}

.sk-rail {
  display: flex;
  gap: 13px;
  padding: 0 var(--pad) 26px;
}

.sk-rail > div {
  flex: 1;
}

.sk-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
}

/* ==========================================================================
   6. 片库
   ========================================================================== */

/* 搜索框：胶囊 */
.lb-search {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  margin: 0 var(--pad) 14px;
  padding: 0 15px;
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--ink-3);
}

.lb-search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink);
}

.lb-search input::placeholder {
  color: var(--ink-4);
}

.lb-search input::-webkit-search-cancel-button {
  display: none;
}

.lb-clear {
  display: flex;
  align-items: center;
  border: 0;
  background: none;
  padding: 2px;
  margin: -2px;
  color: var(--ink-3);
}

/* 排序 chips */
.chips {
  display: flex;
  gap: 8px;
  padding: 0 var(--pad) 20px;
  overflow-x: auto;
  scrollbar-width: none;
}

.chips::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: 0 0 auto;
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--fill);
  display: flex;
  align-items: center;
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
}

.chip.on {
  background: var(--ink);
  color: #fff;
}

/* 3 列网格 */
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 12px;
  padding: 0 var(--pad) calc(24px + var(--safe-b));
}

.tile {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

.tile-poster {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-10);
  overflow: hidden;
  background-color: #1a1a1a;
}

.tile-nm {
  font-size: 11.5px;
  margin-top: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-2);
}

.tile-meta {
  font-size: 10px;
  color: var(--ink-4);
  margin-top: 3px;
}

/* 非会员引导块（不是"白墙锁"，是看得见的提示） */
.note-box {
  margin: 0 var(--pad) 24px;
  padding: 26px 22px;
  border-radius: var(--r-12);
  background: var(--fill);
  text-align: center;
  font-size: 12px;
  line-height: 1.9;
  color: var(--ink-3);
}

.note-box h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}

.note-box p {
  margin-bottom: 16px;
}

.note-box b {
  color: var(--ink);
}

.note-box .btn {
  margin: 0 auto;
}

/* 非会员的橱窗尾巴：一条紧凑提示，不是拦路牌 —— 上面那些剧还是能点进去看前几集 */
.note-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  text-align: left;
  line-height: 1.6;
  margin-bottom: 20px;
}

.note-inline p {
  flex: 1;
  margin: 0;
  font-size: 11.5px;
  color: var(--ink-2);
}

.note-inline .btn {
  flex: 0 0 auto;
  margin: 0;
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
}

/* ==========================================================================
   7. 播放页
   ========================================================================== */

/* ---- 沉浸式播放器 ---- */
.pv {
  position: relative;
  flex: 0 0 auto;
  background: #000;
}

.pv-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--stage-ar, 16 / 9);
  max-height: 64vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #000;
}

.pv-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
  z-index: 1;
}

.pv-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  z-index: 1;
}

/* 弹层打开时把视频藏起来（iOS 微信里 video 层会盖住 DOM） */
.pv-stage video.is-covered {
  opacity: 0;
}

/* 微信内用系统原生控件时，我们自己的控制条整套让位 */
.pv-stage.is-native .pv-ctrl,
.pv-stage.is-native .pv-play {
  display: none;
}

/*
 * 顶部细栏（2026-11-14 改）
 *
 * 返回键原来浮在视频左上角，跟微信原生播放器的全屏按钮叠在一起
 * （老板截图圈出来的两个图标打架就是这个）。原生控件接管视频区以后
 * 那儿是人家的地盘，我们不能再压上去。
 *
 * 现在返回键单独占视频上方一条 46px 的黑栏：看得见、点得到、不打架。
 * 栏里还放剧名，客户在播放页也知道自己在看哪部。
 */
.pv-top {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  /* 让开刘海 */
  padding: calc(var(--safe-t)) 12px 0;
  background: #000;
}

.pv-top-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  opacity: 0.92;
}

.pv-back {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
}

.pv-back:active {
  opacity: 0.6;
}

/* 中间大播放键 */
.pv-play {
  position: relative;
  z-index: 3;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.15);
  color: #fff;
}

.pv-play:active {
  transform: scale(0.94);
}

/* 播放中：中间那个播放键淡出（点一下舞台就是暂停） */
.pv-stage.is-playing .pv-play {
  opacity: 0;
  pointer-events: none;
}

/* 底部控制条：时间 + 进度条 + 全屏 */
.pv-ctrl {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 0 16px 14px;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.pv-times {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.pv-times .t {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
}

.pv-times .t em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.42);
  margin: 0 3px;
}

.pv-times .full {
  display: flex;
  align-items: center;
  border: 0;
  background: none;
  padding: 2px;
  color: #fff;
}

/* 进度条：金色是允许的（7 处之一） */
.pv-bar {
  position: relative;
  height: 14px;
  display: flex;
  align-items: center;
  touch-action: none;
  cursor: pointer;
}

.pv-bar-track {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.26);
}

.pv-bar-buffer {
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  width: 0;
  transform: translateY(-50%);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.42);
}

.pv-bar-fill {
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  width: 0;
  transform: translateY(-50%);
  border-radius: var(--r-pill);
  background: var(--gold-light);
}

.pv-bar-thumb {
  position: absolute;
  left: 0;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: var(--r-pill);
  background: var(--gold-light);
  transform: translate(-50%, -50%);
}

/* 播放器上的轻提示 / 重试 */
.pv-notice {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 52px;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r-10);
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 11.5px;
  line-height: 1.5;
}

.pv-notice span {
  flex: 1;
  min-width: 0;
}

.pv-notice button {
  flex: 0 0 auto;
  border: 0;
  background: none;
  padding: 0;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: underline;
}

/* 手势快进提示 */
.gesture-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8;
  transform: translate(-50%, -50%);
  padding: 8px 16px;
  border-radius: var(--r-10);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12.5px;
}

/* 锁集遮罩：盖在播放器上，不跳页 */
.lockmask {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  /*
   * 2026-11-14 改：0.62 → 0.94 + 磨砂。
   *
   * 原来是 rgba(0,0,0,.62)，半透明 —— 底下的大播放键（直径很大）和金色进度条
   * 全透上来，播放键的圆圈正好压在「会员已到期…」这行字后面，看着像做坏了。
   * 这是付费转化最关键的一屏，不能糊。
   *
   * 现在：接近不透明的黑 + 2px 磨砂，视频画面还能隐约透一点（不至于死黑一片），
   * 但底下的按钮和进度条完全看不见。z-index 5 也高于控制条的 3。
   */
  background: rgba(0, 0, 0, 0.94);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.lockmask p {
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* 遮罩上的「开通会员」：金色，允许 */
.lockmask .btn-gold {
  height: 38px;
  padding: 0 26px;
  border-radius: var(--r-pill);
  font-size: 13px;
}

/* 锁集小锁：金色，允许 */
.lockmask .lock-ico {
  color: var(--gold-light);
}

/* ---- 播放页信息区 ---- */
.pv-body {
  flex: 1 1 auto;
  background: var(--paper);
}

.pv-head {
  padding: 20px var(--pad) 16px;
}

.pv-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 9px;
  word-break: break-word;
}

.pv-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-3);
}

.pv-sub .dot {
  width: 2px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--ink-4);
  flex: 0 0 auto;
}

/* 免费标记：金色，允许 */
.pv-sub .free {
  color: var(--gold);
  font-weight: 500;
}

/* ---- 真实操作条：‹ 上一集 ｜ 选集 ｜ 下一集 › ---- */
.pv-nav {
  display: flex;
  margin: 0 var(--pad) 4px;
  border-radius: var(--r-12);
  background: var(--fill);
  overflow: hidden;
}

.pv-nav button {
  flex: 1;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  background: none;
  padding: 0;
  font-size: 13px;
  color: var(--ink);
  position: relative;
  min-width: 0;
}

.pv-nav button + button::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  bottom: 13px;
  width: 1px;
  background: var(--line);
}

.pv-nav button:disabled {
  color: var(--ink-4);
  cursor: default;
}

.pv-nav .mid {
  font-weight: 600;
}

/* ---- 选集 ---- */
.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 22px var(--pad) 14px;
}

.sec-head h3 {
  font-size: 15px;
  font-weight: 600;
}

.sec-head h3 span {
  font-weight: 400;
  font-size: 11.5px;
  color: var(--ink-4);
  margin-left: 6px;
}

.sec-head .more {
  display: flex;
  align-items: center;
  gap: 3px;
  border: 0;
  background: none;
  padding: 0;
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* 5 列选集网格 */
.ep-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 0 var(--pad) 8px;
}

.ep {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0;
  border: 0;
  border-radius: var(--r-10);
  background: var(--fill);
  color: var(--ink-2);
  font-size: 13.5px;
  min-width: 0;
}

/* 免费集：白底 + 细描边 + 深色字（靠底色区分，不靠颜色） */
.ep.free {
  background: #fff;
  box-shadow: inset 0 0 0 1px #ededed;
  color: var(--ink);
  font-weight: 500;
}

.ep.on {
  background: var(--ink);
  color: #fff;
}

.ep.lock {
  color: var(--ink-3);
}

/* 锁集小锁：金色，允许 */
.ep.lock svg {
  color: var(--gold);
}

/* 点到锁着的集时它是"当前集"（深底），小锁跟着反白成浅金 */
.ep.on svg {
  color: var(--gold-light);
}

.ep.processing {
  color: var(--ink-4);
  font-size: 11px;
}

/* ---- 进免费群：一行轻提示（不是大卡片）---- */
.grp {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px var(--pad) 26px;
  padding: 13px 15px;
  border-radius: var(--r-12);
  background: var(--fill);
}

.grp .t {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* 进群按钮：不是金色（金色 7 处里没有它） */
.grp button {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  border: 0;
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

.grp button svg {
  color: var(--ink-3);
}

/* ---- 播放页骨架 ---- */
.sk-stage {
  aspect-ratio: 16 / 9;
  max-height: 64vh;
}

/* ==========================================================================
   8. 我的
   ========================================================================== */

.me-head {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px var(--pad) 26px;
}

.me-avatar {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--ink-3);
  overflow: hidden;
}

.me-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.me-head h2 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 5px;
}

.me-head p {
  font-size: 11.5px;
  color: var(--ink-3);
}

/* ---- 黑色会员卡 ---- */
.vip-card {
  margin: 0 var(--pad) 26px;
  padding: 22px 20px 20px;
  border-radius: var(--r-16);
  background: var(--ink);
  color: #fff;
}

/* 「会员」标签：允许金色（7 处之一） */
.vip-card .lbl {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gold-light);
  margin-bottom: 10px;
}

.vip-card .t {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 7px;
}

.vip-card .d {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.6;
}

.price-row {
  display: flex;
  gap: 9px;
  margin-top: 18px;
}

.price-opt {
  flex: 1;
  min-width: 0;
  padding: 13px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-10);
  background: rgba(255, 255, 255, 0.06);
  text-align: center;
  color: #fff;
}

/* 价格和档位名各占一行（HTML 里是 span，要显式 block） */
.price-opt .p {
  display: block;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.price-opt .p em {
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  margin-left: 1px;
}

.price-opt .n {
  display: block;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 5px;
}

/* 选中价格：允许金色（7 处之一） */
.price-opt.on {
  border-color: var(--gold-bright);
  background: rgba(217, 166, 46, 0.16);
}

.price-opt.on .p {
  color: var(--gold-light);
}

/* 开通按钮：允许金色（7 处之一） */
.vip-btn {
  width: 100%;
  height: 42px;
  margin-top: 16px;
  border: 0;
  border-radius: var(--r-10);
  background: var(--gold);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.vip-btn:disabled {
  opacity: 0.5;
}

/* ---- 功能行 ---- */
.me-list {
  padding: 0 var(--pad) 20px;
}

.me-li {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  color: var(--ink);
}

.me-li:last-child {
  border-bottom: 0;
}

.me-li .ico {
  color: var(--ink);
}

.me-li .t {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
}

.me-li .v {
  max-width: 55%;
  font-size: 12px;
  color: var(--ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.me-li .chev {
  color: var(--ink-4);
}

/* ---- 会员权益 ---- */
.rights {
  padding: 4px var(--pad) 26px;
}

.rights .rt {
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin: 6px 0 14px;
}

.rlist {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ri {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--ink-2);
}

/* 权益勾：灰的（金色只给钱的 7 处，这里不许金） */
.ri svg {
  color: var(--ink-4);
}

.foot {
  text-align: center;
  font-size: 10.5px;
  color: var(--ink-4);
  line-height: 1.8;
  padding: 0 var(--pad) 28px;
}

/* ==========================================================================
   9. 通用状态页（错误 / 空 / 下架 / 首页入口校验）
   ========================================================================== */

.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 56px var(--pad);
  min-height: 52vh;
  text-align: center;
}

.state-mark {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--ink-4);
}

.state h1,
.state h2 {
  font-size: 17px;
  font-weight: 600;
}

.state p {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.8;
  max-width: 280px;
}

.state-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

/* 入口校验页（首页无参数时）：整屏居中，底下一行小字 */
.gate {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.gate-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(18px + var(--safe-t)) var(--pad) 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink);
}

.gate-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--ink);
}

.gate-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px var(--pad) 40px;
  text-align: center;
}

.gate-body h1 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.gate-body p {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.9;
  max-width: 300px;
}

.gate-foot {
  padding: 0 var(--pad) calc(24px + var(--safe-b));
  text-align: center;
  font-size: 10.5px;
  color: var(--ink-4);
  line-height: 1.8;
}

/* ==========================================================================
   10. 底部弹层（原生 <dialog>）
   ========================================================================== */

dialog.sheet {
  position: fixed;
  left: 50%;
  right: auto;
  top: auto;
  bottom: 0;
  width: 100%;
  max-width: 560px;
  max-height: 88dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-16) var(--r-16) 0 0;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  transform: translateX(-50%);
  z-index: 100;
}

dialog.sheet::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

dialog.sheet[open] {
  animation: sheet-in 0.24s cubic-bezier(0.2, 0.8, 0.25, 1);
}

dialog.sheet.is-closing {
  animation: sheet-out 0.22s ease forwards;
}

@keyframes sheet-in {
  from {
    transform: translate(-50%, 100%);
  }
  to {
    transform: translate(-50%, 0);
  }
}

@keyframes sheet-out {
  from {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  to {
    transform: translate(-50%, 100%);
    opacity: 0.6;
  }
}

.sheet-inner {
  max-height: 88dvh;
  padding: 20px 20px calc(26px + var(--safe-b));
  overflow-y: auto;
  scrollbar-width: none;
}

.sheet-inner::-webkit-scrollbar {
  display: none;
}

.sheet-grab {
  width: 36px;
  height: 4px;
  margin: -8px auto 14px;
  border-radius: var(--r-pill);
  background: var(--line);
}

.sheet-x {
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  border: 0;
  background: none;
  padding: 6px;
  color: var(--ink-4);
}

.sheet h2 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  padding-right: 28px;
}

.sheet-sub {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.65;
  margin-bottom: 20px;
}

/* ---- 第 1 步：两档价格 ---- */
.tiers {
  display: flex;
  gap: 10px;
}

.tier {
  flex: 1;
  min-width: 0;
  padding: 16px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  background: var(--paper);
  text-align: center;
  color: var(--ink);
}

/* 价格 / 档位名 / 说明各占一行（HTML 里是 span，要显式 block） */
.tier .p {
  display: block;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.tier .p em {
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  margin-left: 2px;
}

.tier .n {
  display: block;
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 6px;
}

.tier .t2 {
  display: block;
  font-size: 10px;
  color: var(--ink-4);
  margin-top: 3px;
}

/* 选中价格：允许金色（7 处之一） */
.tier.on {
  border-color: var(--gold);
  background: #fdfaf2;
}

.tier.on .p {
  color: var(--gold);
}

.tier:disabled {
  opacity: 0.5;
}

/* 开通按钮（第 1 步 CTA）：金色，允许 */
.sheet .cta {
  width: 100%;
  height: 46px;
  margin-top: 20px;
  border: 0;
  border-radius: var(--r-12);
  background: var(--gold);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
}

.sheet .cta:disabled {
  opacity: 0.6;
}

.sheet .fine {
  font-size: 10.5px;
  color: var(--ink-4);
  text-align: center;
  line-height: 1.6;
  margin: 12px 0 0;
}

/* ---- 第 2 步：收款码 ---- */
.paybox {
  text-align: center;
  margin: 4px 0 18px;
}

.qr {
  /*
   * 2026-11-14：**去掉那只白框**。
   *
   * 以前是一个 190px 的白卡片 + 1px 细边 + 圆角，二维码塞在里面 ——
   * 看着像"贴了一张图"在页面上，很违和。
   *
   * 现在：不画框、不画边、不画底。弹窗本身是白底，裁好的纯码自带白边，
   * 两者连成一片，画面上只剩黑色的码点 —— 码像是本来就在页面里的。
   *
   * 尺寸放到 236、四周留足白（扫码识别的静区），比原来的 190 好扫得多。
   */
  width: 236px;
  height: 236px;
  margin: 6px auto 18px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /*
   * 保护微信「长按识别二维码」（2026-11-14 加）
   *
   * 长按菜单要能弹出来，除了图片地址必须是 http(s)（不能再是 data URI ——
   * 服务端 /api/v1/qr 已经改成吐真实地址），还要求这里没被禁掉。
   * 有些移动端 CSS reset 会全局写 `-webkit-touch-callout: none`，
   * 一写长按就完全没反应。这里显式声明回来，
   * 免得以后谁加了一条全局样式又把收款码搞坏。
   */
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
  user-select: auto;
}

/* 长按提示：一颗浅灰胶囊。用纯黑太抢，二维码才是主角 */
.qr-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--fill);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}

.qr-tip svg {
  opacity: 0.55;
}

/* 胶囊下面那行小字：给"不想长按"的人一条退路 */
.qr-hint {
  margin: 9px 0 0;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.6;
}

.qr-empty {
  padding: 0 10px;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.7;
}

.paybox .amt {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.paybox .amt em {
  font-style: normal;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-3);
  margin-left: 2px;
}

.paybox .tip {
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.7;
  margin-top: 8px;
}

.sheet .paid {
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: var(--r-12);
  background: var(--ink);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
}

.sheet .paid:disabled {
  opacity: 0.55;
}

.sheet .help {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin-top: 14px;
  padding: 4px;
  border: 0;
  background: none;
  font-size: 11.5px;
  color: var(--ink-3);
}

.sheet .done-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--r-10);
  background: var(--fill);
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.7;
  text-align: left;
}

/* ---- 第 2 步：选支付方式（两个按钮一样大，谁都不藏） ---- */
.pays {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 18px;
}

.pay {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  background: var(--paper);
  color: var(--ink);
  font-family: inherit;
  text-align: left;
}

.pay:active {
  background: var(--fill);
}

/* 角标：只标"哪一家"，不上金色（金色留给钱和已解锁） */
.pay-ico {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-10);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.pay-ico.alipay {
  background: var(--pay-ali);
}

.pay-ico.wechat {
  background: var(--pay-wx);
}

.pay-main {
  flex: 1;
  min-width: 0;
}

.pay-nm {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* 金色小字「付完秒开」：自然引导，不压微信（设计稿第 3 屏） */
.pay-fast {
  padding: 2px 6px;
  border-radius: var(--r-10);
  background: var(--gold-soft);
  color: var(--gold);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
}

/* 「上次用」= 记住客户上次选的支付方式（中性色，不算钱也不算解锁） */
.pay-last {
  padding: 2px 6px;
  border-radius: var(--r-10);
  background: var(--fill);
  color: var(--ink-3);
  font-size: 9.5px;
  font-weight: 600;
}

.pay-ds {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.5;
}

.pay-go {
  flex: 0 0 auto;
  color: var(--ink-4);
  font-size: 16px;
}

/* 探"支付宝能不能用"的那一下：一句话，别留一片空白 */
.pay-note {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
}

/* 支付方式那一屏底下的小字入口（付完没开通 → 问客服） */
.sheet-link {
  width: 100%;
  margin-top: 16px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1.6;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- 第 4 步：支付宝扫码 ---- */
/* 两句写死的路径：长按存图 → 打开支付宝 → 相册 */
.steps {
  margin-top: 12px;
  text-align: left;
}

.step-row {
  display: flex;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.75;
}

.step-row i {
  flex: 0 0 auto;
  color: var(--ink-4);
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

/* 等待中：三个小金点脉冲（不是转圈） */
.waiting {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 18px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--ink-2);
}

.wait-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--gold);
  animation: xb-dot 1.3s ease-in-out infinite;
}

.wait-dot:nth-child(2) {
  animation-delay: 0.18s;
}

.wait-dot:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes xb-dot {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.wait-t {
  letter-spacing: 0.02em;
}

/* 等超时 / 码过期 / 支付宝用不了：同一行换成一句能点的话，正文不多一行 */
.wait-ask {
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 11.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- 二维码弹层（群/客服）---- */
.qr-sheet-body {
  text-align: center;
}

.qr-sheet-body .sheet-sub {
  margin-bottom: 16px;
}

/* .qr-tip 的样式统一在上面（胶囊那颗），这里不再重复定义 —— 重复的那份会把胶囊盖回灰字 */

/* 群码没配：二维码框里换成一句人话（点了直接开客服码） */
.qr-miss {
  width: 100%;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.7;
  text-align: center;
}

/* ---- 第 3 步：开通成功 + 群码 ---- */
.ok {
  text-align: center;
  padding: 6px 0 2px;
}

/* 对勾走黑白：金色只留在「钱 / 已解锁标签」那几处（设计稿里这颗是淡金色，
   这里按更严的规则收成中性灰底黑勾，一块钱都不多花） */
.ok-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 13px;
  border-radius: var(--r-pill);
  /* 开通成功 = 已解锁，属于「金色只用在钱和已解锁状态」这一类（设计稿第 7 屏） */
  background: var(--gold-soft);
  color: var(--gold);
}

.sheet .ok-t {
  margin-bottom: 0;
  padding-right: 0;
}

.ok-d {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.9;
}

/* 进群卡片：96px 码 + 三句话，一眼知道是干什么的 */
.join {
  margin-top: 18px;
  padding: 14px 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-12);
}

.join-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.join-t {
  font-size: 13px;
  font-weight: 700;
}

/* "扫码加入"只是说明，不是钱也不是解锁状态 —— 不上金色 */
.join-badge {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--fill);
  padding: 2px 7px;
  border-radius: var(--r-10);
}

.join-body {
  display: flex;
  gap: 13px;
  align-items: center;
}

.join-qr {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--r-10);
  background: #fff;
  overflow: hidden;
}

.join-qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.join-txt {
  flex: 1;
  min-width: 0;
}

.join-txt p {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.75;
}

.join-hint {
  margin-top: 6px;
  color: var(--ink-2);
  font-weight: 600;
}

/* 码没配：卡片位置换成一句人话 + 一个真能点的客服入口（不留白框、不裂图） */
.join-miss {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 52px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--r-10);
  background: var(--fill);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}

/* 成功页主按钮：黑色（钱已经付过了，这里不用金色） */
.ok-cta {
  width: 100%;
  height: 46px;
  margin-top: 16px;
  border: 0;
  border-radius: var(--r-12);
  background: var(--ink);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
}

/* ==========================================================================
   11. toast
   ========================================================================== */

.toast {
  position: fixed;
  left: 50%;
  bottom: 96px;
  z-index: 999;
  max-width: calc(100vw - 48px);
  padding: 10px 16px;
  border-radius: var(--r-10);
  background: rgba(10, 10, 10, 0.9);
  color: #fff;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ==========================================================================
   12. 无障碍 / 动效偏好
   ========================================================================== */

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.pv :focus-visible,
.vip-card :focus-visible {
  outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   手机号账号页（login.html，D-60）

   老板定的：手机号当账号名、不发短信验证码、自己设密码、忘了找客服。
   微信授权仍是主路径，这一页是普通浏览器 / 换设备时的备用通道。

   圆角只用契约允许的四档：--r-10 / --r-12 / --r-16 / --r-pill。
   ========================================================================== */

/* 这一页的页头要「返回键 + 标题」紧挨着，不能两端对齐 */
.page-login .hd {
  justify-content: flex-start;
  gap: 10px;
}

.hd-back {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 44px 是能舒服点到的下限，比图标大一圈 */
  width: 44px;
  height: 44px;
  margin-left: -12px;
  border: 0;
  padding: 0;
  background: none;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--r-pill);
  -webkit-tap-highlight-color: transparent;
}

.hd-back:active {
  background: var(--fill);
}

.lg-wrap {
  padding: 4px var(--pad) 40px;
}

.lg-lead {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* ---- 登录 / 注册 切换 ---- */

.lg-tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  margin-bottom: 22px;
  background: var(--fill);
  border-radius: var(--r-12);
}

.lg-tab {
  flex: 1 1 0;
  height: 38px;
  border: 0;
  padding: 0;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  color: var(--ink-2);
  background: transparent;
  border-radius: var(--r-10);
  cursor: pointer;
  transition: background 0.16s, color 0.16s;
}

.lg-tab.on {
  color: var(--ink);
  background: var(--paper);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07);
}

/* ---- 表单 ---- */

.lg-field {
  display: block;
  margin-bottom: 16px;
}

.lg-label {
  display: block;
  margin-bottom: 7px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

.lg-input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  box-sizing: border-box;
  font-size: 16px; /* ≥16px 才不会让 iOS 自动放大页面 */
  font-family: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-12);
  outline: none;
  transition: border-color 0.16s;
}

.lg-input::placeholder {
  color: var(--ink-4);
}

.lg-input:focus {
  border-color: var(--ink-2);
}

.lg-err {
  margin: 0 0 14px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #c0392b;
  background: #fdf1ef;
  border-radius: var(--r-10);
}

.lg-submit {
  display: block;
  width: 100%;
  height: 48px;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
}

.lg-submit[disabled] {
  opacity: 0.55;
}

.lg-hint {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.7;
  text-align: center;
  color: var(--ink-3);
}

/* ---- 已经用微信登录的人：显示"绑定"提示 ---- */

/*
 * 注意：这里**不能用金色**。契约只允许金色出现在 7 类地方（钱和已解锁状态），
 * 绑定手机号不是"钱"，用金色会被 w12 的 GOLD_ALLOW 检查判红。
 * 用中性灰底，靠文字说清好处就够了。
 */
.lg-bind {
  margin-top: 24px;
  padding: 16px;
  background: var(--fill);
  border-radius: var(--r-12);
}

.lg-bind-head {
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

.lg-bind-sub {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-2);
}

.lg-bind-sub b {
  color: var(--ink);
}
/* ==========================================================================
   播放页 2026-11-14 两处改动
   ========================================================================== */

/*
 * ① 原生控制条接管
 *
 * 老板说自绘播放器"不合理"——微信里手感别扭、找不到全屏。
 * 现在 <video> 加了 controls，系统播放器接管：iOS 进原生全屏、安卓是熟悉的样式，
 * 滑进度 / 音量 / 全屏全都现成。
 *
 * 自绘的播放键和进度条要藏起来，不然和原生控件叠在一起。
 * 返回键留着（那是导航，不是播放控件）。
 */
.page-play .pv-play,
.page-play .pv-ctrl {
  display: none !important;
}

/*
 * 原生控件下，视频区域要能直接点到 —— 以前上面盖着 .pv-play 按钮吃触摸。
 * video 自己就是可点的，这里只确保没有指针事件被误关。
 */
.page-play .pv-stage video {
  pointer-events: auto;
}

/*
 * ② 「会员看高清」提示条
 *
 * 非会员常驻一条，把"现在是低画质、充了能看 1080P"讲清楚。
 * 金色只用在钱和已解锁状态 —— 这条带开通入口，属于"钱"，所以金色合规。
 */
.hd-hint {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 14px 22px 16px;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--gold-soft, rgba(223, 178, 105, 0.12));
  border: 1px solid rgba(223, 178, 105, 0.34);
}

.hd-hint[hidden] {
  display: none !important;
}

.hd-ico {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--gold, #dfb269);
}

.hd-txt {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2, #4a4a4a);
}

.hd-btn {
  flex: 0 0 auto;
  padding: 6px 12px;
  border-radius: 999px;
  border: 0;
  background: var(--gold, #dfb269);
  color: #1a1a1a;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.hd-btn:active {
  transform: scale(0.97);
}
/* ------------------------------------------------------------------
 * 弹层里的「点这里看收款码 / 点这里看群二维码」按钮（2026-11-14）
 *
 * 二维码不再画在弹层里（微信认不到弹层里由 JS 塞进去的图），
 * 改成一个按钮跳 qr.html。这里给它一个明确的、像按钮的样子：
 * 金色描边 —— 和「钱 / 已解锁」用同一套强调色，客户一眼知道要点。
 * ------------------------------------------------------------------ */
.qr-go {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--gold, #d4af37);
  border-radius: var(--r-pill, 999px);
  background: rgba(212, 175, 55, 0.08);
  color: var(--gold, #a8842a);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.qr-go:active {
  background: rgba(212, 175, 55, 0.16);
}

/* 群码那个按钮在成功页的卡片里，稍微大一点、给足点击区域 */
.join-go {
  width: 100%;
  min-height: 52px;
  margin: 4px 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--gold, #d4af37);
  border-radius: var(--r-pill, 999px);
  background: rgba(212, 175, 55, 0.1);
  color: var(--gold, #a8842a);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.join-go:active {
  background: rgba(212, 175, 55, 0.18);
}

.join-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
/* ------------------------------------------------------------------
 * 付款后的等待期提示（2026-11-14）
 *
 * 客户付完款最容易慌的一段：不知道要等多久、能不能关页面、着急找谁。
 * 这里做成一个安静的信息块：标题 + 两句话 + 一个客服入口。
 * 用浅灰底，不抢"已到账"的重点，但也不至于看不见。
 * ------------------------------------------------------------------ */
.done-note {
  margin: 14px 0 0;
  padding: 14px 15px;
  border-radius: 12px;
  background: #f7f7f7;
  text-align: left;
}

.done-t {
  margin: 0 0 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: #111;
}

.done-d {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.6;
  color: #666;
}

.done-kf {
  margin-top: 9px;
  padding: 0;
  border: 0;
  background: none;
  color: #b8912f;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}