/* ============================================================
   反邪教短视频展播 · 前台 H5（按 750px 设计稿等比缩放）
   --vw = 画布宽度；所有尺寸用 calc(var(--vw) * <设计px> / 750)
   ============================================================ */

:root {
    --vw: min(100vw, 560px);

/* 2026 版配色，取自「2026首页.psd」拍平稿逐区采样 */
  --c-cream: #f1f4f9;
  --c-peach-100: #d5f1ff;
  --c-peach-200: #e2f4ff;
  /* 行底色：设计稿仅第 1~3 名为蓝色系且逐级变浅，第 4 名起为中性灰
     #D5F1FF → #E2F4FF → #EEF9FF → #F6F6F6 */
  --c-row-1: #d5f1ff;
  --c-row-2: #e2f4ff;
  --c-row-3: #eef9ff;
  --c-row: #f6f6f6;
  --c-ink: #181818;
  --c-muted: #7a8695;
  --c-orange: #0055aa;
  --c-orange-2: #0058c8;
  --c-orange-3: #0038c0;
  --c-pink: #bb0000;
  --c-line: #d8e2ee;

    --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    --num: "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
    --ease: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

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

body {
    background: var(--c-cream);
    color: var(--c-ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

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

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

button,
input,
select {
    font: inherit;
    color: inherit;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------- 画布 ---------------- */
.h5 {
    position: relative;
    width: var(--vw);
    margin: 0 auto;
    background: var(--c-cream) no-repeat center top;
    background-size: var(--vw) auto;
    overflow: hidden;
}

/* 首页：整页设计稿，画布高度 = 设计稿高 3550
     （列表 20 行占 1253~3341，底部 3400~3550 为设计稿的蓝色波浪收尾） */
  .h5--home {
      height: calc(var(--vw) * 3550 / 750);
  }

/* 播放/排行/分享/关注：品牌头 + 留白，内容自上而下流式 */
.h5--page {
    min-height: 100dvh;
    padding-bottom: calc(var(--vw) * 60 / 750);
}

/* ---------------- 通用组件 ---------------- */
.searchbar {
    position: relative;
    display: flex;
    align-items: center;
    background: #f0f0f8;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 85, 170, 0.14);
    padding: calc(var(--vw) * 6 / 750);
    padding-left: calc(var(--vw) * 76 / 750);
}

.searchbar__icon {
    position: absolute;
    left: calc(var(--vw) * 30 / 750);
    top: 50%;
    transform: translateY(-50%);
    width: calc(var(--vw) * 38 / 750);
    height: calc(var(--vw) * 38 / 750);
    opacity: 0.75;
}

.searchbar input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    height: calc(var(--vw) * 62 / 750);
    font-size: calc(var(--vw) * 30 / 750);
    outline: none;
}

.searchbar button {
    flex-shrink: 0;
    border: 0;
    border-radius: 999px;
    background: var(--c-orange-2);
    color: #fff;
    height: calc(var(--vw) * 58 / 750);
    padding: 0 calc(var(--vw) * 28 / 750);
    font-size: calc(var(--vw) * 30 / 750);
    font-weight: 600;
    cursor: pointer;
}

.rank-entry {
    display: block;
    margin: 0 auto;
    width: calc(var(--vw) * 320 / 750);
}

.rank-entry img {
    width: 100%;
}

.province-form {
    display: flex;
    align-items: center;
    gap: calc(var(--vw) * 16 / 750);
}

.province-form .select-wrap {
    flex: 1;
    position: relative;
}

.province-form select {
    width: 100%;
    height: calc(var(--vw) * 64 / 750);
    border: 0;
    border-radius: calc(var(--vw) * 14 / 750);
    background: #f0f0f8;
    box-shadow: 0 2px 8px rgba(0, 85, 170, 0.12);
    padding: 0 calc(var(--vw) * 28 / 750);
    font-size: calc(var(--vw) * 28 / 750);
    appearance: none;
    outline: none;
}

.province-form .select-wrap::after {
    content: "";
    position: absolute;
    right: calc(var(--vw) * 28 / 750);
    top: 50%;
    width: calc(var(--vw) * 14 / 750);
    height: calc(var(--vw) * 14 / 750);
    border-right: 2px solid var(--c-muted);
    border-bottom: 2px solid var(--c-muted);
    transform: translateY(-70%) rotate(45deg);
    pointer-events: none;
}

.province-form button {
    flex-shrink: 0;
    height: calc(var(--vw) * 64 / 750);
    padding: 0 calc(var(--vw) * 40 / 750);
    border: 0;
    border-radius: calc(var(--vw) * 14 / 750);
    background: var(--c-orange-3);
    color: #fff;
    font-size: calc(var(--vw) * 28 / 750);
    font-weight: 600;
    cursor: pointer;
}

/* 榜单 */
.ranking {
    list-style: none;
}

.ranking li {
      display: flex;
      align-items: center;
      gap: 0;
      /* 设计稿：行高 93、行间距 105（93 + 12 间距） */
      min-height: calc(var(--vw) * 93 / 750);
      padding: 0;
      margin-bottom: calc(var(--vw) * 12 / 750);
      border-radius: calc(var(--vw) * 14 / 750);
      background: var(--c-row);
      overflow: hidden;
  }

  /* 行内水平位置对齐设计稿（以行左缘 x=38 为基准）：
       奖牌 x=72 起（+34），宽 62，右侧留 36 → 标题落在 x=170
       数字 x=88 起（+50），宽 29，右侧留 53 → 标题同样落在 x=170
     两类徽章偏移不同是设计稿原样，不能统一，否则序号与标题的相对关系会错位。 */
  .rank-badge--medal {
      margin-left: calc(var(--vw) * 34 / 750);
      margin-right: calc(var(--vw) * 36 / 750);
  }

  .rank-badge--number {
      margin-left: calc(var(--vw) * 50 / 750);
      margin-right: calc(var(--vw) * 53 / 750);
  }

  .ranking li:nth-child(1) { background: var(--c-row-1); }
  .ranking li:nth-child(2) { background: var(--c-row-2); }
  .ranking li:nth-child(3) { background: var(--c-row-3); }

  /* 序号徽章：1~3 名奖牌 62×65，4~20 名数字 29×22
     切片按原始像素尺寸渲染（数字宽度本就随字形变化，11 最窄 16、04 最宽 29），
     在固定框内居中，对齐设计稿 x≈101.8 的竖向中轴；不可用 object-fit 拉伸，
     否则窄数字会被等比放大 5% 导致大小参差。 */
  .rank-badge {
      flex-shrink: 0;
      display: grid;
      place-items: center;
  }

  .rank-badge--medal {
      width: calc(var(--vw) * 62 / 750);
      height: calc(var(--vw) * 65 / 750);
  }

  .rank-badge--number {
      width: calc(var(--vw) * 29 / 750);
      height: calc(var(--vw) * 22 / 750);
  }

  .rank-badge img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
  }

/* 4 名及以后：CSS 圆形序号徽章
   左边距 42 + 宽 46 + 右边距 44 = 132，与奖牌（34+62+36=132）、
   数字（50+29+53=132）总宽一致，标题一律落在同一条竖线上；
   圆心居中于奖牌列（(62-46)/2 = 8 → 34+8 = 42）。 */
.rank-num {
    flex-shrink: 0;
    margin-left: calc(var(--vw) * 42 / 750);
    margin-right: calc(var(--vw) * 44 / 750);
    width: calc(var(--vw) * 46 / 750);
    height: calc(var(--vw) * 46 / 750);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: calc(var(--vw) * 2 / 750) solid var(--c-orange-3);
    color: var(--c-orange);
    font-weight: 700;
    font-size: calc(var(--vw) * 24 / 750);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 1px 2px rgba(0, 85, 170, 0.10);
}

.rank-num--hot {
    border-color: var(--c-orange-2);
    color: var(--c-orange-2);
}

/* 三位序号（100+）收窄字号，保证完整落在圆圈内 */
.rank-num--tri {
    font-size: calc(var(--vw) * 20 / 750);
}

.rank-name {
      flex: 1;
      min-width: 0;
      padding-right: calc(var(--vw) * 12 / 750);
      overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: calc(var(--vw) * 28 / 750);
}

.rank-meta {
    flex-shrink: 0;
    font-size: calc(var(--vw) * 24 / 750);
    color: var(--c-muted);
}

/* ---------------- 首页绝对布局（对齐设计稿） ---------------- */
  /* 设计稿：摄像机 @ x=57 y=92 80×63；输入框圆角矩形 @ x=171 y=91 533×72 */
  .h5--home .home-camera {
      position: absolute;
      top: calc(var(--vw) * 92 / 750);
      left: calc(var(--vw) * 57 / 750);
      width: calc(var(--vw) * 80 / 750);
      height: calc(var(--vw) * 63 / 750);
  }

  /* 首页搜索框：外观已由背景图承载（设计稿把完整搜索框烘焙进了
     bg/首页.jpg），此处仅为可交互层。必须去掉 box-shadow ——
     阴影会溢出到框外，在右上角与背景烘焙的圆角边框重叠处形成一道细竖线。 */
  .h5--home .home-search {
      position: absolute;
      top: calc(var(--vw) * 91 / 750);
      left: calc(var(--vw) * 171 / 750);
      right: calc(var(--vw) * 46 / 750);
      /* 设计稿输入框 533×72，须精确对齐，否则会露出背景中烘焙的框边 */
      height: calc(var(--vw) * 72 / 750);
      padding: 0;
      /* 占位文字起点 = 框左 + 76 = 247（PSD 图层「搜索编码」@ x=247），
         放大镜在 x=202 宽 29，与文字间距 16 */
      padding-left: calc(var(--vw) * 76 / 750);
      /* 搜索按钮右缘在 698，距框右缘 704 留 6px（PSD 图层「圆角矩形2」@ x=583 宽 115）*/
      padding-right: calc(var(--vw) * 6 / 750);
      box-sizing: border-box;
      background: transparent;
      border-radius: 999px;
      box-shadow: none;
  }

  .h5--home .home-search input {
      height: 100%;
      /* 设计稿「搜索编码」文字框 111×28，4 字 → 字号约 28 */
      font-size: calc(var(--vw) * 28 / 750);
  }

  .h5--home .home-search button {
      height: calc(var(--vw) * 59 / 750);
      width: calc(var(--vw) * 115 / 750);
      padding: 0;
      /* 设计稿「搜索」文字框 57×27，2 字 → 字号约 28 */
      font-size: calc(var(--vw) * 28 / 750);
  }

  .h5--home .home-search .searchbar__icon {
      left: calc(var(--vw) * 31 / 750);
      width: calc(var(--vw) * 29 / 750);
      height: calc(var(--vw) * 29 / 750);
      opacity: 1;
  }

/* 播放量查询：徽标本体在背景图内，此处仅为跳转热区，
   尺寸与设计稿徽标 366×85 一致，保证点击区域准确。 */
  .h5--home .home-rank {
      position: absolute;
      top: calc(var(--vw) * 911 / 750);
      left: calc(var(--vw) * 191 / 750);
      width: calc(var(--vw) * 366 / 750);
      height: calc(var(--vw) * 85 / 750);
      display: block;
  }

  .h5--home .home-rank img {
      display: none;
  }

/* 设计稿：按省查询 @ x=31 y=1047 124×32
     下拉框 @ x=168 y=1033 433×60   确定按钮 @ x=606 y=1034 114×59 */
  .h5--home .home-province {
      position: absolute;
      top: calc(var(--vw) * 1033 / 750);
      left: calc(var(--vw) * 31 / 750);
      width: calc(var(--vw) * 689 / 750);
      display: flex;
      align-items: center;
      gap: calc(var(--vw) * 13 / 750);
  }

  .h5--home .home-province-label {
      flex-shrink: 0;
      width: calc(var(--vw) * 124 / 750);
      height: calc(var(--vw) * 32 / 750);
  }

  .h5--home .home-province .province-form {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: calc(var(--vw) * 5 / 750);
  }

  .h5--home .home-province .province-form select {
      width: calc(var(--vw) * 433 / 750);
      height: calc(var(--vw) * 60 / 750);
      flex-shrink: 0;
  }

  .h5--home .home-province .province-form button {
      width: calc(var(--vw) * 114 / 750);
      height: calc(var(--vw) * 59 / 750);
      flex-shrink: 0;
      padding: 0;
      background: #2864e8;
  }

/* 设计稿：行底 x=38 宽 673，列表顶 1253，20 行 × 105 = 2100 */
  /* 占位文案样式与搜索框的 placeholder 对齐（设计稿两处同为 #B8B8B8）。
     select 无 placeholder 属性，用不可选的空值 option 模拟：
     未选择时显示灰色提示，选中任意省份后即消失。 */
  .province-form select option[value=""] {
      color: #b8b8b8;
  }

  .province-form select:invalid,
  .province-form select option[value=""]:checked {
      color: #b8b8b8;
  }

  /* 选中真实省份后恢复常规字色 */
  .province-form select option:not([value=""]) {
      color: var(--c-ink);
  }

  .h5--home .home-list {
      position: absolute;
      top: calc(var(--vw) * 1253 / 750);
      left: calc(var(--vw) * 38 / 750);
      right: calc(var(--vw) * 39 / 750);
      max-height: calc(var(--vw) * 2100 / 750);
      overflow: hidden;
  }

  .h5--home .home-list .ranking li {
      min-height: calc(var(--vw) * 93 / 750);
      margin-bottom: calc(var(--vw) * 12 / 750);
      padding: calc(var(--vw) * 6 / 750) calc(var(--vw) * 16 / 750);
      border-radius: calc(var(--vw) * 14 / 750);
  }

  .h5--home .home-list .rank-badge--medal {
      width: calc(var(--vw) * 62 / 750);
      height: calc(var(--vw) * 65 / 750);
  }

  .h5--home .home-list .rank-badge--number {
      width: calc(var(--vw) * 29 / 750);
      height: calc(var(--vw) * 22 / 750);
  }

  /* 超出 04~20 切片范围时的 CSS 文字回退 */
  .h5--home .home-list .rank-num {
      width: calc(var(--vw) * 42 / 750);
      height: calc(var(--vw) * 42 / 750);
      font-size: calc(var(--vw) * 22 / 750);
      border-width: calc(var(--vw) * 2 / 750);
  }

.h5--home .home-list .rank-name {
    font-size: calc(var(--vw) * 27 / 750);
}

.h5--home .home-list .rank-meta {
    font-size: calc(var(--vw) * 22 / 750);
}

.h5--home .home-list .empty {
    text-align: center;
    color: var(--c-muted);
    font-size: calc(var(--vw) * 26 / 750);
    padding: calc(var(--vw) * 40 / 750) 0;
}

/* 顶部通知 */
.notice {
    border-radius: calc(var(--vw) * 12 / 750);
    padding: calc(var(--vw) * 14 / 750) calc(var(--vw) * 20 / 750);
    font-size: calc(var(--vw) * 24 / 750);
    text-align: center;
    margin: calc(var(--vw) * 24 / 750) auto;
    width: calc(var(--vw) * 570 / 750);
    max-width: 90%;
}

.h5--home .notice {
    position: absolute;
    left: calc(var(--vw) * 90 / 750);
    right: calc(var(--vw) * 90 / 750);
    top: calc(var(--vw) * 10 / 750);
    width: auto;
    max-width: none;
    z-index: 5;
}

.notice--info { background: var(--c-peach-100); color: var(--c-orange); }
.notice--warn { background: #fff4d6; color: #a76b00; }
.notice--error { background: #ffe9ec; color: var(--c-pink); }

/* ---------------- 品牌头留白偏移 ---------------- */
/* 顶部留白：需完整避让背景图内烘焙的品牌标题。
     默认按「播放页面」背景（标题块底部 y=387）留 430；
     排行榜页背景 shengfenpaiming 标题更大（底部 y=628），
     用 .brand-gap--tall 上调至 660，留 32px 安全余量。 */
  .brand-gap {
      height: calc(var(--vw) * 430 / 750);
  }

  .brand-gap--tall {
      height: calc(var(--vw) * 660 / 750);
  }

/* ---------------- 播放页 ---------------- */
/* 横屏播放页：坐标全部取自 2026播放页（横）.psd
     矩形 7     @(14,460)  720×411   视频外框
     图层 4     @(24,469)  700×393   视频画面
     播放按钮   @(308,590) 132×132   圆心 (374,656)
     标题条     @(23,790)  706×73
     操作区 y=901~941，图标起点 x=261 / 440 / 598
     按钮       @(132,1028) 195×65 与 (422,1028) 194×65 */
.player-horizontal {
    position: relative;
    width: calc(var(--vw) * 750 / 750);
    height: calc(var(--vw) * 903 / 750);
}

.player-horizontal .player-stage {
    position: absolute;
    left: calc(var(--vw) * 14 / 750);
    top: calc(var(--vw) * 30 / 750);
    width: calc(var(--vw) * 717 / 750);
    height: calc(var(--vw) * 409 / 750);
    background: url("../img/ui/player-frame.png") left top / 100% auto no-repeat;
}

.player-horizontal .player-stage video {
    position: absolute;
    left: calc(var(--vw) * 10 / 750);
    top: calc(var(--vw) * 9 / 750);
    width: calc(var(--vw) * 700 / 750);
    height: calc(var(--vw) * 393 / 750);
    background: #000;
}

.player-veil {
    position: absolute;
    left: calc(var(--vw) * 294 / 750);
    top: calc(var(--vw) * 130 / 750);
    width: calc(var(--vw) * 132 / 750);
    height: calc(var(--vw) * 132 / 750);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 2;
}

.player-veil[hidden] { display: none; }

.player-horizontal .player-titlebar {
    position: absolute;
    left: calc(var(--vw) * 9 / 750);
    top: calc(var(--vw) * 330 / 750);
    width: calc(var(--vw) * 704 / 750);
    height: calc(var(--vw) * 70 / 750);
    pointer-events: none;
}

.player-horizontal .player-title {
    position: absolute;
    left: calc(var(--vw) * 35 / 750);
    top: calc(var(--vw) * 356 / 750);
    right: auto;
    bottom: auto;
    width: calc(var(--vw) * 560 / 750);
    /* 文字压在视频上，不能挡住原生控件条 */
    pointer-events: none;
    margin: 0;
    padding: 0;
    background: none;
    color: #fff;
    text-align: left;
    font-size: calc(var(--vw) * 26 / 750);
    line-height: calc(var(--vw) * 40 / 750);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 三个互动按钮（播放量/分享/点赞）整组在页面上水平居中 */
.player-horizontal .player-actions {
    position: absolute;
    left: 0;
    top: calc(var(--vw) * 471 / 750);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--vw) * 64 / 750);
    width: 100%;
    margin: 0;
}

.player-horizontal .player-action {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--vw) * 18 / 750);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.player-horizontal .player-action img {
    flex: 0 0 auto;
    width: auto;
    height: calc(var(--vw) * 40 / 750);
    object-fit: contain;
}

.player-horizontal .player-action .num {
    font-size: calc(var(--vw) * 26 / 750);
    font-weight: 700;
    color: #2f7fd8;
    font-variant-numeric: tabular-nums;
}

.player-horizontal .player-action .label { display: none; }

.player-horizontal .player-footer {
    position: absolute;
    left: 0;
    top: calc(var(--vw) * 598 / 750);
    display: block;
    margin: 0;
    width: 100%;
}

.player-horizontal .player-footer .btn {
    position: absolute;
    top: 0;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    line-height: 0;
}

.player-horizontal .player-footer .btn:first-child { left: calc(var(--vw) * 132 / 750); }
.player-horizontal .player-footer .btn:last-child { left: calc(var(--vw) * 422 / 750); }

.player-horizontal .player-footer .btn img {
    display: block;
    width: calc(var(--vw) * 195 / 750);
    height: auto;
}

.player-horizontal .player-footer .btn:last-child img {
    width: calc(var(--vw) * 194 / 750);
}

.player-horizontal .player-note {
    position: absolute;
    left: 0;
    top: calc(var(--vw) * 690 / 750);
    width: 100%;
    margin: 0;
    text-align: center;
}

.player-note {
    margin-top: calc(var(--vw) * 16 / 750);
    text-align: center;
    font-size: calc(var(--vw) * 24 / 750);
    color: var(--c-muted);
    min-height: 1.4em;
}

.player-note[data-type="success"] { color: #2c8a3f; }
.player-note[data-type="error"] { color: var(--c-pink); }

/* 竖屏播放页：坐标取自 播放页（竖）.psd（750×1333）
     图层 49      @(0,0)    750×1333  视频整屏铺满
     播放键        @(309,543) 132×132
     底部遮罩      @(0,1032) 750×302  → .player-scrim
     标题          @(37,1156) 515×27
     返回上一页     @(172,1241) 128×24
     返回首页      @(476,1241) 102×25
   右侧互动列在 .player-actions 内，图标与数字均为 PSD 原尺寸，不做缩放。 */
.player-vertical {
    position: relative;
    width: 100%;
    height: calc(var(--vw) * 1333 / 750);
    overflow: hidden;
    background: #000;
}

.player-vertical .player-stage {
    position: absolute;
    inset: 0;
}

.player-vertical .player-stage video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    display: block;
}

.player-vertical .player-veil {
    position: absolute;
    left: calc(var(--vw) * 309 / 750);
    top: calc(var(--vw) * 543 / 750);
    width: calc(var(--vw) * 132 / 750);
    height: calc(var(--vw) * 132 / 750);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    /* 高于互动层(4)，保证播放键始终可点 */
    z-index: 5;
}

.player-vertical .player-veil[hidden] { display: none; }

/* 底部遮罩：实测不透明度 1032 处≈0、1150≈0.7、1250≈0.85、1333≈0.95 */
.player-vertical .player-scrim {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(var(--vw) * 302 / 750);
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.35) 22%,
        rgba(0, 0, 0, 0.72) 56%,
        rgba(0, 0, 0, 0.86) 76%,
        rgba(0, 0, 0, 0.95) 100%
    );
    pointer-events: none;
}

.player-vertical .player-title {
    position: absolute;
    left: calc(var(--vw) * 37 / 750);
    top: calc(var(--vw) * 1156 / 750);
    width: calc(var(--vw) * 515 / 750);
    margin: 0;
    padding: 0;
    background: none;
    color: #fff;
    text-align: left;
    font-size: calc(var(--vw) * 26 / 750);
    line-height: calc(var(--vw) * 34 / 750);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.player-vertical .player-actions {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 4;
    /* 互动层铺满全屏，只让按钮本身可点，
       否则会盖住居中的播放键，竖屏无法起播 */
    pointer-events: none;
}

.player-vertical .player-actions .player-action {
    pointer-events: auto;
}

.player-vertical .player-action {
    position: absolute;
    left: calc(var(--vw) * var(--ax) / 750);
    top: calc(var(--vw) * var(--ay) / 750);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--vw) * 21 / 750);
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

/* 竖屏图标必须按 --vw 缩放（尺寸取自 播放页（竖）.psd）：
   之前是 width/height:auto，会退回 HTML 属性的固定像素，手机上图标过大且冲出右边缘 */
.player-vertical .player-action .pv-act__icon {
    flex: 0 0 auto;
    width: calc(var(--vw) * var(--iw, 60) / 750);
    height: calc(var(--vw) * var(--ih, 40) / 750);
    max-width: none;
}

.player-vertical .player-action .num {
    font-size: calc(var(--vw) * 26 / 750);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.player-vertical .player-action .label { display: none; }

.player-vertical .player-action.is-done { opacity: 0.55; cursor: default; }

/* 竖屏：这些层只负责视觉与文案，必须放行点击，
   否则会盖住视频原生控件条（全屏、进度、音量）导致点不动 */
.player-vertical .player-title,
.player-vertical .player-note,
.player-vertical .player-footer {
    pointer-events: none;
}

.player-vertical .player-footer .btn {
    pointer-events: auto;
}

.player-vertical .player-footer {
    position: absolute;
    left: 0;
    top: calc(var(--vw) * 1230 / 750);
    display: block;
    margin: 0;
    width: 100%;
    height: calc(var(--vw) * 46 / 750);
    z-index: 4;
}

.player-vertical .player-footer .btn {
    position: absolute;
    top: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    color: #fff;
    font-size: calc(var(--vw) * 26 / 750);
    line-height: calc(var(--vw) * 34 / 750);
    font-weight: 400;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.player-vertical .player-footer .btn:first-child { left: calc(var(--vw) * 172 / 750); }
.player-vertical .player-footer .btn:last-child { left: calc(var(--vw) * 476 / 750); }

.player-vertical .player-note {
    position: absolute;
    left: 0;
    top: calc(var(--vw) * 1180 / 750);
    width: 100%;
    margin: 0;
    min-height: 0;
    text-align: center;
    font-size: calc(var(--vw) * 24 / 750);
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    z-index: 5;
}
/* ---------------- 按钮 ---------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--vw) * 8 / 750);
    height: calc(var(--vw) * 72 / 750);
    padding: 0 calc(var(--vw) * 34 / 750);
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: var(--c-ink);
    font-size: calc(var(--vw) * 28 / 750);
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 85, 170, 0.12);
}

.btn--primary { background: var(--c-orange-2); color: #fff; }
.btn--block { width: 100%; }

/* ---------------- 页面标题 ---------------- */
.page-head {
    text-align: center;
    padding: 0 calc(var(--vw) * 40 / 750);
    margin-bottom: calc(var(--vw) * 24 / 750);
}

.page-head h1 {
    font-size: calc(var(--vw) * 40 / 750);
    color: var(--c-orange);
    font-weight: 700;
}

.page-head .total {
    margin-top: calc(var(--vw) * 8 / 750);
    color: var(--c-orange-2);
    font-weight: 600;
    font-size: calc(var(--vw) * 28 / 750);
}

/* 榜单面板 */
.panel {
    width: calc(var(--vw) * 670 / 750);
    margin: 0 auto;
    background: #fff;
    border-radius: calc(var(--vw) * 16 / 750);
    box-shadow: 0 2px 10px rgba(0, 85, 170, 0.10);
    padding: calc(var(--vw) * 14 / 750) calc(var(--vw) * 22 / 750);
}

.rank-row {
    display: flex;
    align-items: center;
    gap: calc(var(--vw) * 16 / 750);
    padding: calc(var(--vw) * 16 / 750) 0;
    border-bottom: 1px solid var(--c-line);
}

.rank-row:last-child { border-bottom: 0; }

.rank-row .name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: calc(var(--vw) * 28 / 750);
}

.rank-row .count {
    flex-shrink: 0;
    color: var(--c-orange);
    font-weight: 600;
    font-size: calc(var(--vw) * 28 / 750);
}

/* ---------------- 省份页 ---------------- */
/* 与全站一致：沿用 .h5 的画布宽度（--vw，桌面端封顶 560px）。
   此前改成 width:100% + 900/1000px 上限，导致 PC 下被拉得比全站宽一倍。 */
.h5--province {
    --c-page: #fdf7f5;
    min-height: 100dvh;
    background-color: var(--c-page);
    display: flex;
    flex-direction: column;
}

/* banner：底图 750×450，其中 y=343 起为面板顶部圆角，
   y=360 起面板满宽 20~729，与下方中间切片完全对齐，故裁到 360 */
.h5--province .province-banner {
    width: 100%;
    aspect-ratio: 750 / 360;
    background-color: var(--c-page);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    flex-shrink: 0;
}

/* 中间段：自行从 2026省份详情页.psd 合并图切出 y=352 起 10 行（750×10 无损 PNG），
   留白 #438ae8 与 banner 底图末行 #4282e6 仅差 2 级，接缝无色阶；
   白色面板 20~729。逐行完全一致，纵向平铺即可随内容任意拉长。 */
.h5--province .province-body {
    flex: 1 0 auto;
    width: 100%;
    padding: 20px 16px 8px;
    background-color: #438ae8;
    background-image: url("../img/bg/省份背景图.png");
    background-repeat: repeat-y;
    background-position: center top;
    background-size: 100% auto;
}

.h5--province .page-head {
    padding: 0;
    margin-bottom: 20px;
    text-align: center;
}

.h5--province .page-head h1 {
    font-size: 22px;
    margin-bottom: 4px;
}

.h5--province .page-head .total {
    font-size: 14px;
    margin-top: 0;
}

.h5--province .notice {
    position: static;
    width: auto;
    max-width: 640px;
    margin: 16px auto;
    font-size: 14px;
    padding: 12px 16px;
}

/* 瀑布流：JS 按最短列分配，卡片自然错落 */
.h5--province .card {
    container-type: inline-size;
}

.h5--province .masonry {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.h5--province .masonry-col {
    flex: 0 0 auto;
    min-width: 0;
    overflow: hidden;
}

.h5--province .masonry .card {
    display: block;
    width: 100%;
    margin: 0 0 12px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 85, 170, 0.10);
    overflow: hidden;
}

.h5--province .card__cover {
    aspect-ratio: 16 / 9;
    /* 封面与外层卡片之间留一点边距，形成内嵌效果 */
    margin: 8px 8px 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f2f2f2;
}

.h5--province .card[data-orientation="v"] .card__cover {
    aspect-ratio: 9 / 16;
}

.h5--province .card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 卡片下半部严格按 PSD 2026省份详情页.psd 实测值（封面图层 49 = 325 宽）：
     标题    @x=40  y=587  → 左内边距 4/325、上边距 19/325
     心形    @x=326 y=589  23×20 → 宽 23/325、顶 21/325、中心 92.6%
     播放量  @x=320 y=619        → 7 个样本中心均为卡宽 92.92%，顶 51/325
   心形与播放量同轴居中；全部按卡宽百分比，随瀑布流 2/3/4/5 列等比。 */
.h5--province .card__body {
    position: relative;
    padding: 5.846% 1.23% 5% 1.23%;
}

.h5--province .rank-num {
    width: 26px;
    height: 26px;
    border-width: 2px;
    font-size: 13px;
}

.h5--province .card__title {
    font-size: 13px;
    line-height: 1.4;
    min-height: 2.8em;
    margin: 0;
    padding-right: 11.5%;
    font-weight: 500;
    color: var(--c-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 小红心 + 播放量：绝对定位于卡片右下，与 PSD 的心形层
   (326,589) 23×20、数字 (320,620) 的相对关系一致 */
.h5--province .card__stat {
    position: absolute;
    top: 6.462cqw;
    right: 0;
    width: 14.16%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.075cqw;
    margin: 0;
}

.h5--province .card__heart {
    display: block;
    width: 50%;
    height: auto;
}

.h5--province .card__likes {
    font-size: 16px;
    font-size: 5.4cqw;
    line-height: 1.15;
    font-weight: 400;
    color: #adadad;
    font-variant-numeric: tabular-nums;
}

.h5--province .back-links {
    margin: 20px 0 8px;
    font-size: 14px;
    color: var(--c-orange);
    text-align: center;
}

.h5--province .back-links a {
    margin: 0 10px;
}

.h5--province .empty {
    text-align: center;
    color: var(--c-muted);
    padding: 40px 0;
    font-size: 14px;
}

/* 底部收尾：设计师切片 750×219（白色面板留白 → 紫色波浪），
   完整显示 219/750，使面板白底自然过渡到页尾波浪 */
.h5--province .province-foot {
    width: 100%;
    height: 0;
    padding-bottom: 29.2%;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    flex-shrink: 0;
}

/* ---------------- 分享海报 ---------------- */
.poster-card {
    width: calc(var(--vw) * 620 / 750);
    margin: 0 auto;
    background: #fff;
    border-radius: calc(var(--vw) * 16 / 750);
    box-shadow: 0 6px 20px rgba(0, 85, 170, 0.16);
    overflow: hidden;
}

.poster-cover {
    background: #000;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.poster-cover.is-vertical { aspect-ratio: 9 / 16; }

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

.poster-body {
    padding: calc(var(--vw) * 24 / 750);
    text-align: center;
}

.poster-title {
    font-size: calc(var(--vw) * 32 / 750);
    font-weight: 600;
    margin-bottom: calc(var(--vw) * 8 / 750);
}

.poster-meta {
    font-size: calc(var(--vw) * 24 / 750);
    color: var(--c-muted);
    margin-bottom: calc(var(--vw) * 20 / 750);
}

.poster-qr {
    width: calc(var(--vw) * 260 / 750);
    height: calc(var(--vw) * 260 / 750);
    margin: 0 auto calc(var(--vw) * 20 / 750);
    border-radius: calc(var(--vw) * 12 / 750);
    background: var(--c-peach-100);
    display: grid;
    place-items: center;
    color: var(--c-muted);
    font-size: calc(var(--vw) * 22 / 750);
    overflow: hidden;
}

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

.poster-url {
    font-family: var(--num);
    font-size: calc(var(--vw) * 20 / 750);
    color: var(--c-muted);
    word-break: break-all;
}

.poster-actions {
    display: flex;
    gap: calc(var(--vw) * 16 / 750);
    margin-top: calc(var(--vw) * 22 / 750);
}

.poster-actions .btn { flex: 1; }

/* ---------------- 关注引导 ---------------- */
.follow-card {
    width: calc(var(--vw) * 600 / 750);
    margin: 0 auto;
    text-align: center;
}

/* 服务异常态才需要白卡片承载文字；正常态整幅交给弹窗图 */
.follow-card--error {
    padding: calc(var(--vw) * 36 / 750) calc(var(--vw) * 30 / 750);
    background: #fff;
    border-radius: calc(var(--vw) * 20 / 750);
    box-shadow: 0 10px 30px rgba(0, 85, 170, 0.18);
}

.follow-card h1 { font-size: calc(var(--vw) * 38 / 750); margin-bottom: calc(var(--vw) * 8 / 750); }
.follow-card .sub { color: var(--c-muted); font-size: calc(var(--vw) * 26 / 750); margin-bottom: calc(var(--vw) * 24 / 750); }

/* 关注弹窗整图：必须用 <img> 承载，微信长按识别二维码只认图片元素，
   用 CSS background 无法唤起「识别图中二维码」。
   图片有效内容到 y=603（下方 604~723 只是原稿的关闭按钮残影），
   故容器按 597×603 裁切，img 等比铺满宽度、超出部分由 overflow 隐藏。 */
.follow-poster {
    width: 100%;
    aspect-ratio: 597 / 603;
    overflow: hidden;
}

.follow-poster img {
    display: block;
    width: 100%;
    height: auto;
}

.follow-actions { margin-top: calc(var(--vw) * 36 / 750); }

/* ---------------- 非微信环境：请用微信打开 ---------------- */
.open-guide {
    width: calc(var(--vw) * 600 / 750);
    margin: 0 auto;
    padding: calc(var(--vw) * 48 / 750) calc(var(--vw) * 40 / 750) calc(var(--vw) * 44 / 750);
    background: #fff;
    border-radius: calc(var(--vw) * 20 / 750);
    box-shadow: 0 10px 30px rgba(0, 85, 170, 0.18);
    text-align: center;
}

.open-guide h1 {
    font-size: calc(var(--vw) * 40 / 750);
    color: var(--c-ink);
    margin-bottom: calc(var(--vw) * 36 / 750);
}

.open-guide__qr {
    width: calc(var(--vw) * 380 / 750);
    height: calc(var(--vw) * 380 / 750);
    margin: 0 auto calc(var(--vw) * 16 / 750);
    border: 1px solid var(--c-peach-100);
    border-radius: calc(var(--vw) * 14 / 750);
    overflow: hidden;
    background: #fff;
}

.open-guide__qr img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.open-guide__tip {
    font-size: calc(var(--vw) * 24 / 750);
    color: var(--c-muted);
    margin-bottom: calc(var(--vw) * 32 / 750);
}

.open-guide__actions {
    display: flex;
    flex-direction: column;
    gap: calc(var(--vw) * 20 / 750);
}

/* ---------------- 底部返回 ---------------- */
.back-links {
    text-align: center;
    margin-top: calc(var(--vw) * 30 / 750);
    font-size: calc(var(--vw) * 26 / 750);
    color: var(--c-orange);
}

.back-links a { margin: 0 calc(var(--vw) * 16 / 750); }

/* Toast */
.toast-host {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 100;
    width: min(92vw, 420px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    background: rgba(29, 29, 29, 0.92);
    color: #fff;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 14px;
    text-align: center;
}

.toast .toast-icon,
.toast .toast-close { display: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ---------------- PC：加宽画布上限，背景衬托 ---------------- */
@media (min-width: 640px) {
    :root { --vw: 560px; }
}

@media (min-width: 1024px) {
    :root { --vw: 520px; }
    body {
        background: #f4e6cf;
        background-image: radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.6), transparent 60%);
        padding: 24px 0 48px;
    }
    .h5 {
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(0, 85, 170, 0.20);
    }
    .h5--page { min-height: auto; }
}

@media (min-width: 1440px) {
    :root { --vw: 560px; }
}

/* ---------------- 沉浸式（竖屏播放页） ---------------- */
.h5--immersive {
    width: 100%;
    min-height: 100dvh;
    background: #000;
    color: #fff;
}

/* 竖屏播放页：大屏限制视频高度，保证底部条可见 */
@media (min-width: 900px) {
    .h5--immersive {
        display: flex;
        flex-direction: column;
        min-height: 100dvh;
        max-width: 560px;
        margin: 0 auto;
    }

    .pv-stage {
        flex: 0 0 auto;
        height: calc(100dvh - 240px);
        min-height: 0;
    }

    .pv-video {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
    }
}

/* 省份页：PC 大屏两侧背景跟随页面暖白调 */
@media (min-width: 1024px) {
    body:has(.h5--province) {
        background: #f6e3dc;
        background-image: radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.65), transparent 62%);
    }

    .h5--province {
        border-radius: 20px;
        box-shadow: 0 20px 60px rgba(160, 80, 50, 0.22);
        overflow: hidden;
    }
}

/* 横屏播放页：复用纯 CSS 图标（与竖屏统一） */
.player-action .pv-act__icon {
    width: calc(var(--vw) * 42 / 750);
    height: calc(var(--vw) * 42 / 750);
    margin-bottom: calc(var(--vw) * 2 / 750);
}

/* ===================== 关注门槛（播放器占位） ===================== */
.player-gate {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #1a1d24;
}

.player-gate__cover {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    padding: 24px 20px;
}

.player-gate__cover img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(18px) brightness(0.4);
    transform: scale(1.15);
}

.player-gate__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.78) 100%);
}

.player-gate__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    color: #fff;
    max-width: 420px;
}

.player-gate__title {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.player-gate__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255,255,255,0.82);
}

.player-gate__qr {
    margin-top: 4px;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.3);
}

.player-gate__qr img {
    position: static;
    inset: auto;
    display: block;
    width: 180px;
    height: 180px;
    object-fit: contain;
    filter: none;
    transform: none;
}

.player-gate__hint {
    margin: 0;
    font-size: 12.5px;
    color: rgba(255,255,255,0.7);
}

.player-gate__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 4px;
}

.player-gate__actions .btn {
    min-width: 132px;
}

.player-gate--error .player-gate__cover {
    min-height: 220px;
}

.player-gate--error .player-gate__title {
    color: #ffd9d2;
}

/* ===================== 微信分享引导 ===================== */
.share-guide {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    padding: calc(var(--vw) * 40 / 750) calc(var(--vw) * 24 / 750);
    background: rgba(0, 0, 0, 0.62);
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease;
}

.share-guide.is-open {
    opacity: 1;
    visibility: visible;
}

.share-guide__arrow {
    position: relative;
    width: 0;
    height: 0;
    margin-right: calc(var(--vw) * 90 / 750);
    border-left: calc(var(--vw) * 16 / 750) solid transparent;
    border-right: calc(var(--vw) * 16 / 750) solid transparent;
    border-bottom: calc(var(--vw) * 20 / 750) solid rgba(255, 255, 255, 0.95);
}

.share-guide__text {
    margin-top: calc(var(--vw) * 12 / 750);
    padding: calc(var(--vw) * 18 / 750) calc(var(--vw) * 24 / 750);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.95);
    color: #1f2329;
    font-size: calc(var(--vw) * 28 / 750);
    line-height: 1.6;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24);
}

/* ============================================================
   各省播放量统计（2026播放量查询页.psd）
   面板 @ x=23 y=897 · tab @ x=255 y=911 240×46
   列标题 @ y=1021 · 数据行 @ y=1091 起，行距 90、行高 75、行底 x=54 宽 644
   面板高度由 --qpanel-h 传入，随行数动态伸缩（上限 32 省）
   ============================================================ */

  .h5--home .home-search,
  .h5--query .home-search {
      position: absolute;
  }

  /* 背景图自然高 3451；行数多时面板会超过该高度，
     3451 以下由续接带与页尾波浪接管，此处仅作无内联样式时的兜底高度
     （7052 = RankingService::MAX_PROVINCES 64 行时的页高）。
     背景图保持 var(--vw) auto 等比缩放，不做 100% 100% 拉伸。 */
  .h5--query {
      height: calc(var(--vw) * 7052 / 750);
      background-color: #fdfdfb;
  }

  .brand-gap--query {
      height: calc(var(--vw) * 897 / 750);
  }

  /* 面板整体（边框/白底/tab/列标题/行胶囊）全部由底图承载，
     此处仅作为动态数据的定位容器 —— 保证与设计稿像素级一致。 */
  /* 面板：白底 + 5px 蓝边 + 16 圆角，与设计稿一致
     （色值 #055AAD 实测自 PSD；行底 #EBF1FD 实测自行胶囊） */
  /* 面板 / tab / 列标题 / 行底 全部由背景图承载（设计稿原样，仅去状态栏）。
     .qpanel 仅为动态数据的定位容器，自身完全透明。 */
  /* 面板四段拼接，全部为自行从 2026播放量查询页 拍平稿裁切的无损 PNG：
       top    703×194  顶边框 + 「播放量查询」tab + 列标题（y=897~1090）
       mid    703×100  纯白 + 左右 9px 蓝边（y=1700~1800，该区逐行完全一致，可无缝平铺）
       bottom 703×42   圆角收口 + 14px 下边框（y=3344~3385）
     三段均只含底色与边框，任意行数下都不会错位。 */
  .qpanel {
      position: absolute;
      top: calc(var(--vw) * 897 / 750);
      left: calc(var(--vw) * 23 / 750);
      width: calc(var(--vw) * 703 / 750);
      height: calc(var(--vw) * var(--qpanel-h, 1600) / 750);
      background:
          url("../img/panel/bottom.png") left bottom / 100% auto no-repeat,
          url("../img/panel/top.png") left top / 100% auto no-repeat,
          url("../img/panel/mid.png") left calc(var(--vw) * 194 / 750) / 100% auto repeat-y;
  }

  /* 页尾波浪：通栏 750×65（PSD y=3386~3450），紧接面板下边框，
     位置随行数动态下移，页面到此结束。 */
  .qwave {
      position: absolute;
      top: calc(var(--vw) * var(--qwave-top, 2500) / 750);
      left: 0;
      width: 100%;
      height: calc(var(--vw) * 65 / 750);
      background: url("../img/panel/wave.png") left top / 100% auto no-repeat;
  }

  /* 底图续接带：底图自然高 3451，行数多时页面会超过该高度，
     留白区若直接落到 background-color 会在 y=3451 出现横向断层。
     此带取「底图末行 → 波浪首行」的线性过渡，纵向拉伸到实际需要的高度，
     过渡本身是线性渐变，拉伸后依旧平滑无接缝（面板会盖住中间部分）。 */
  .qbg-ext {
      position: absolute;
      top: calc(var(--vw) * 3451 / 750);
      left: 0;
      width: 100%;
      height: calc(var(--vw) * var(--qext-h, 0) / 750);
      background: url("../img/bg-ext.png") left top / 100% 100% no-repeat;
  }

  /* 数据行：第 1 行 y=1091，行高 75、行距 90、行底 x=54 宽 644（PSD 实测）。
     行底 #EBF1FD 不透明，正好覆盖背景中烘焙的示例数据。 */
  /* 列表相对定位并预留首行上边距（设计稿首行 y=1091，面板顶 y=897 → 194），
     这样 footer 紧随列表之后，基准一致，行数变化也不会重叠。 */
  .qpanel__list {
      position: absolute;
      top: calc(var(--vw) * 192 / 750);
      left: calc(var(--vw) * 26 / 750);
      right: calc(var(--vw) * 25 / 750);
      list-style: none;
      margin: 0;
      padding: 0;
      padding-inline: 0;
  }

  /* 行底胶囊：PSD 矩形 3 @ (49,1089) 652×78、行距 90、圆角 39 */
  .qrow {
      display: flex;
      align-items: center;
      height: calc(var(--vw) * 78 / 750);
      margin-bottom: calc(var(--vw) * 12 / 750);
      background: #ebf1fd;
      border-radius: calc(var(--vw) * 39 / 750);
      padding-left: calc(var(--vw) * 5 / 750);
      padding-right: calc(var(--vw) * 73 / 750);
  }

  .qrow:last-child {
      margin-bottom: 0;
  }

  /* 两列不等宽：名称列 394（中心 x=251）、数值列 180（中心 x=538），
     与 PSD 的 省级行政区 @x=150 w=203、播放量 @x=478 w=120 列标题对齐 */
  .qrow__name,
  .qrow__count {
      flex: 0 0 calc(var(--vw) * 394 / 750);
      text-align: center;
      font-variant-numeric: tabular-nums;
  }

  .qrow__name {
      font-size: calc(var(--vw) * 34 / 750);
      font-weight: 500;
      color: #055aad;
  }

  .qrow__count {
      flex: 0 0 calc(var(--vw) * 180 / 750);
      font-size: calc(var(--vw) * 28 / 750);
      font-weight: 700;
      color: #055aad;
  }

  .qpanel__empty {
      position: absolute;
      top: calc(var(--vw) * 230 / 750);
      left: 0;
      right: 0;
      text-align: center;
      color: var(--c-muted);
      font-size: calc(var(--vw) * 28 / 750);
  }

  /* 「返回首页」锚定在行列表底部之下（--qlist-bottom = 194 + 行数×90 - 15），
     随行数动态下移，不会与末行重叠。 */
  .qpanel__foot {
      position: absolute;
      top: calc(var(--vw) * var(--qfoot-top, 3033) / 750);
      left: 0;
      right: 0;
      text-align: center;
      font-size: calc(var(--vw) * 22 / 750);
      line-height: 1.4;
      color: var(--c-muted);
  }

  .qpanel__foot a {
      color: #055aad;
  }

  /* 各省播放量统计：标题区沿用旧版 .page-head 样式，
     置于主标题与面板之间（设计稿 y=723~892 的留白带） */
  .query-head {
      position: absolute;
      top: calc(var(--vw) * 740 / 750);
      left: 0;
      right: 0;
  }

  .query-head .page-head {
      margin-bottom: 0;
  }

/* ---------------- 分享页（横）----------------
   坐标取自 2026分享页（横）.psd：
     矩形 7   @(14,460)  720×411  视频外框（与播放页同一张切件）
     矩形 10  @(23,790)  706×73   标题条
     图层 16  @(290,942) 177×177  二维码外框
     二维码   @(315,969) 121×122  二维码本体
     扫码观看视频 @(312,1144) 128×21 */
.share-poster-h {
    position: relative;
    width: 100%;
    height: calc(var(--vw) * 903 / 750);
}

.share-poster-h .player-stage {
    position: absolute;
    left: calc(var(--vw) * 14 / 750);
    top: calc(var(--vw) * 30 / 750);
    width: calc(var(--vw) * 717 / 750);
    height: calc(var(--vw) * 409 / 750);
    background: url("../img/ui/player-frame.png") left top / 100% auto no-repeat;
    overflow: hidden;
}

.share-poster-h .share-cover {
    position: absolute;
    left: calc(var(--vw) * 10 / 750);
    top: calc(var(--vw) * 9 / 750);
    width: calc(var(--vw) * 700 / 750);
    height: calc(var(--vw) * 393 / 750);
    object-fit: cover;
    background: #000;
}

.share-poster-h .player-titlebar {
    position: absolute;
    left: calc(var(--vw) * 9 / 750);
    top: calc(var(--vw) * 330 / 750);
    width: calc(var(--vw) * 704 / 750);
    height: calc(var(--vw) * 70 / 750);
}

.share-poster-h .player-title {
    position: absolute;
    left: calc(var(--vw) * 35 / 750);
    top: calc(var(--vw) * 356 / 750);
    width: calc(var(--vw) * 560 / 750);
    margin: 0;
    padding: 0;
    background: none;
    color: #fff;
    text-align: left;
    font-size: calc(var(--vw) * 26 / 750);
    line-height: calc(var(--vw) * 40 / 750);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 二维码本体：PSD 二维码层 @(315,969) 121×122
   外框与「扫码观看视频」文字已烘焙在背景图内，此处只放码 */
.share-poster-h .share-qrcode {
    position: absolute;
    left: calc(var(--vw) * 315 / 750);
    top: calc(var(--vw) * 539 / 750);
    width: calc(var(--vw) * 121 / 750);
    height: calc(var(--vw) * 122 / 750);
    object-fit: contain;
    background: #fff;
}


/* ---------------- 固定高度版面：播放页 / 分享页 ----------------
   这两页按设计稿整版出图（750×1333），版面已精确铺满，
   不能再叠加 .h5--page 的 padding-bottom: 60/750，否则页尾多出空档。 */
.h5--page:has(.player-horizontal),
.h5--page:has(.player-vertical),
.h5--page:has(.share-poster-h),
.h5--page:has(.share-poster-v) {
    min-height: 0;
    padding-bottom: 0;
}

/* 已点过的转发/点赞：降低不透明度并禁用重复点击 */
.player-horizontal .player-action.is-done {
    opacity: 0.55;
    cursor: default;
}

/* ---------------- 分享页（竖）----------------
   坐标取自 2026分享页（竖）.psd（750×1333）：
     矩形 7   @(79,209)  590×784  视频外框（已烘焙在背景图 fenxiang-shu.jpg 内）
     播放键     @(314,532) 132×132
     标题条     @(83,876)  582×112  → 设计师导出件 v-titlebar.png（580×109，原尺寸不缩放）
     标题       @(120,904)
     二维码     @(314,1047) 127×127
     扫码观看视频 @(310,1226)（已烘焙在背景图内） */
.brand-gap--share-v {
    height: calc(var(--vw) * 209 / 750);
}

.share-poster-v {
    position: relative;
    width: 100%;
    height: calc(var(--vw) * 1124 / 750);
}

.share-poster-v .player-stage {
    position: absolute;
    left: calc(var(--vw) * 88 / 750);
    top: calc(var(--vw) * 10 / 750);
    width: calc(var(--vw) * 572 / 750);
    height: calc(var(--vw) * 765 / 750);
    overflow: hidden;
}

.share-poster-v .share-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #000;
    display: block;
}

.share-poster-v .player-veil {
    position: absolute;
    left: calc(var(--vw) * 314 / 750);
    top: calc(var(--vw) * 323 / 750);
    width: calc(var(--vw) * 132 / 750);
    height: calc(var(--vw) * 132 / 750);
}

.share-poster-v .player-titlebar {
    position: absolute;
    left: calc(var(--vw) * 83 / 750);
    top: calc(var(--vw) * 667 / 750);
    width: calc(var(--vw) * 580 / 750);
    height: calc(var(--vw) * 109 / 750);
}

.share-poster-v .player-title {
    position: absolute;
    left: calc(var(--vw) * 120 / 750);
    top: calc(var(--vw) * 695 / 750);
    width: calc(var(--vw) * 415 / 750);
    margin: 0;
    padding: 0;
    background: none;
    color: #fff;
    text-align: left;
    font-size: calc(var(--vw) * 26 / 750);
    line-height: calc(var(--vw) * 34 / 750);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-poster-v .share-qrcode {
    position: absolute;
    left: calc(var(--vw) * 314 / 750);
    top: calc(var(--vw) * 838 / 750);
    width: calc(var(--vw) * 127 / 750);
    height: calc(var(--vw) * 127 / 750);
    object-fit: contain;
    background: #fff;
}

/* 分享页：二维码上方的「本视频编码为 xx」（要醒目） */
.share-code {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: calc(var(--vw) * 26 / 750);
    font-weight: 700;
    line-height: 1.3;
    color: #0058c8;
    letter-spacing: calc(var(--vw) * 1 / 750);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}

.share-code strong {
    font-family: var(--num);
    font-size: calc(var(--vw) * 34 / 750);
    font-weight: 800;
    color: #0038c0;
}

.share-poster-h .share-code { top: calc(var(--vw) * 462 / 750); }
.share-poster-v .share-code { top: calc(var(--vw) * 784 / 750); }

/* 播放键遮罩：base.css 的 img { max-width:100% } 没有配 height:auto，
   会把 <img width=132 height=132> 限宽而保留高度，拉成椭圆。
   这里显式按容器等比填满，避免任何变形。 */
.player-veil img {
    display: block;
    width: 100%;
    height: 100%;
}