:root {
  --bg: #0b0b0f;
  --bg-soft: #16161d;
  --card: #1c1c26;
  --line: #2a2a36;
  --text: #f2f2f5;
  --sub: #9a9aa8;
  /* 主基调：明黄 → 琥珀 */
  --brand: #ffc531;
  --brand2: #ff8a00;
  /* 品牌色做底色时的文字色。黄底配白字几乎看不见，必须用深色 */
  --on-brand: #3d2700;
  --gold: #ffc531;
  /* 全站统一品牌黄：登录/注册/「我的」页的身份卡与主按钮都复用 --brand/--brand2，
     不再单独引入第二种主色，避免大面积撞色 */
  --tabbar-h: 1.49333rem;
}

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

html, body {
  /* 防 Android WebView 的文本自动缩放把字号改掉 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  margin: 0; padding: 0;
  background: var(--bg); color: var(--text);
  /* 字体栈要覆盖本项目所有语种：拉丁（英/印尼/越南）、泰文、中文。
     CSS 是逐字符回退的，某个字形在前面的字体里没有就往后找，
     所以顺序只要保证「每个语种至少有一款字体能兜住」即可。 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Noto Sans Thai", "Leelawadee UI", "Thonburi", "Tahoma",
    "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
    "Helvetica Neue", Arial, sans-serif;
  overscroll-behavior-y: none;
}

/* ---------- 多语言排版 ---------- */
/* 泰文的元音/声调是上下叠加的，越南语有多个变音符号堆叠，
   标准行高会把这些辅助符号切掉，这两个语种整体放宽。
   html[data-lang] 由 i18n.js 的 applyLocale 写入。 */
html[data-lang="th"] body,
html[data-lang="vi"] body { line-height: 1.6; }
html[data-lang="th"] .card .t, html[data-lang="th"] .card .desc,
html[data-lang="th"] .pinfo .pt, html[data-lang="th"] .pinfo .pd,
html[data-lang="th"] .pd, html[data-lang="th"] .trialbar,
html[data-lang="th"] .sheet h3, html[data-lang="th"] .langitem .ln,
html[data-lang="th"] .nick { line-height: 1.75; }

/* 同一句话换成泰文/英文后长度能翻一倍，别把容器撑破。
   换行优先，而不是硬挤出横向滚动。 */
.btn, .tb span, .epchip, .chip, .langbtn b { overflow-wrap: anywhere; }
.langitem .ln { overflow-wrap: anywhere; }
.tabbar .tb span { max-width: 100%; text-align: center; }

body { padding-bottom: var(--tabbar-h); }

img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
/* 卡片/Banner/广告都是 <a> 包裹，不设 color 会吃浏览器默认的蓝色，在深色底上看不清 */
a { color: inherit; text-decoration: none; }

/* ---------- 通用 ---------- */
.page { min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); padding-bottom: 0.64rem; }
.hd {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 0.32rem;
  padding: 0.37333rem 0.42667rem;
  background: linear-gradient(180deg, rgba(11,11,15,.96), rgba(11,11,15,.72));
  backdrop-filter: blur(0.32rem);
}
.hd h1 { margin: 0; font-size: 0.50667rem; font-weight: 700; letter-spacing: .0.13333rem; }
.hd .logo { font-size: 0.50667rem; font-weight: 800; background: linear-gradient(90deg, var(--brand), var(--brand2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.spacer { flex: 1; }

.chips { display: flex; gap: 0.21333rem; overflow-x: auto; padding: 0.10667rem 0.42667rem 0.32rem; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 0.18667rem 0.4rem; border-radius: 26.64rem;
  background: var(--bg-soft); color: var(--sub); font-size: 0.34667rem;
  border: 1px solid var(--line); transition: .15s;
}
.chip.on { background: linear-gradient(90deg, var(--brand), var(--brand2)); color: var(--on-brand); border-color: transparent; font-weight: 600; }

/* ---------- 顶栏 + 搜索 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 0.26667rem;
  padding: 0.26667rem 0.37333rem;
  background: rgba(11,11,15,.96); backdrop-filter: blur(0.37333rem);
}
.topbar .brand { flex: none; display: flex; align-items: center; gap: 0.18667rem; font-size: 0.45333rem; font-weight: 800; letter-spacing: .0.13333rem; max-width: 42%; overflow: hidden; }
.topbar .brand .logo { width: 0.69333rem; height: 0.69333rem; border-radius: 0.18667rem; object-fit: cover; flex: none; display: block; }
.topbar .brand .logo-ph { font-size: 0.50667rem; line-height: 1; flex: none; }
.topbar .brand b { white-space: nowrap;
  background: linear-gradient(90deg, var(--brand), var(--brand2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* 二级页面顶栏左侧的返回键，占位和品牌区一致，切换时布局不会跳 */
.topbar .backbtn {
  flex: none; width: 0.8rem; height: 0.8rem; margin-left: -0.13333rem;
  display: grid; place-items: center;
  background: none; border: 0; padding: 0; color: var(--text);
  border-radius: 0.24rem; cursor: pointer;
  transition: background .15s, transform .15s;
}
.topbar .backbtn:active { background: rgba(255,255,255,.09); transform: scale(.9); }
.searchbox {
  /* min-width:0 必须写：flex 项默认按内容计算最小宽度，input 的默认宽度会把
     整行撑破，把右边的语言按钮挤到屏幕外面去 */
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.21333rem;
  height: 1.01333rem; padding: 0 0.37333rem; border-radius: 26.64rem;
  background: var(--bg-soft); border: 1px solid var(--line);
}
.searchbox .si { flex: none; font-size: 0.37333rem; opacity: .6; }
.searchbox input {
  flex: 1; min-width: 0; height: 100%;
  background: none; border: none; outline: none;
  color: var(--text); font-size: 0.37333rem;
}
.searchbox input::placeholder { color: var(--sub); }
.searchbox .clear { flex: none; font-size: 0.4rem; color: var(--sub); padding: 0 2px; }

/* ---------- 语言切换 ---------- */
.langbtn {
  flex: none; display: flex; align-items: center; gap: 0.10667rem;
  height: 0.90667rem; padding: 0 0.29333rem; border-radius: 26.64rem;
  background: var(--bg-soft); border: 1px solid var(--line);
  color: var(--text); font-size: 0.32rem; transition: transform .15s, border-color .15s;
}
.langbtn:active { transform: scale(.94); }
.langbtn .gl { font-size: 0.34667rem; opacity: .85; }
.langbtn b { font-size: 0.34667rem; line-height: 1; }
/* 「我的 / 追剧」页的标题栏是 flex，靠 margin-left:auto 把按钮顶到最右 */
.hd .langbtn { margin-left: auto; }

.langsheet h3 { margin: 0; }
.langlist { display: flex; flex-direction: column; gap: 0.16rem; margin-top: 0.37333rem; }
.langitem {
  display: flex; align-items: center; gap: 0.26667rem;
  padding: 0.32rem 0.37333rem; border-radius: 0.32rem; text-align: left;
  background: var(--bg-soft); border: 1px solid var(--line);
  transition: transform .15s, background .15s;
}
.langitem:active { transform: scale(.98); }
.langitem.on {
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  border-color: transparent; color: var(--on-brand); font-weight: 700;
}
.langitem .lf { flex: none; font-size: 0.48rem; line-height: 1; }
.langitem .ln { flex: 1; min-width: 0; font-size: 0.4rem; }
.langitem .lc { flex: none; font-size: 0.29333rem; opacity: .5; letter-spacing: .0.08rem; }
.langitem.on .lc { opacity: .75; }

/* ---------- Banner 轮播 ---------- */
.banner { position: relative; margin: 0.10667rem 0.37333rem 0; border-radius: 0.42667rem; overflow: hidden; aspect-ratio: 16/10; background: #17171f; }
.banner .track { display: flex; height: 100%; transition: transform .42s cubic-bezier(.2,.9,.3,1); will-change: transform; }
.banner .slide { position: relative; flex: 0 0 100%; height: 100%; display: block; }
.banner .slide img { width: 100%; height: 100%; object-fit: cover; }
.banner .ov { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, transparent 38%, rgba(0,0,0,.84) 100%); }
.banner .txt { position: absolute; left: 0.4rem; right: 0.4rem; bottom: 0.85333rem; }
.banner .bt { font-size: 0.50667rem; font-weight: 800; color: #fff; line-height: 1.2; text-shadow: 0 2px 0.26667rem rgba(0,0,0,.75); }
.banner .bs { margin-top: 0.13333rem; font-size: 0.32rem; color: rgba(255,255,255,.8); text-shadow: 0 1px 0.16rem rgba(0,0,0,.7);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.banner .dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 0.32rem; display: flex; gap: 0.16rem; z-index: 2; }
.banner .dot { width: 0.16rem; height: 0.16rem; border-radius: 0.08rem; background: rgba(255,255,255,.42); transition: .25s; }
.banner .dot.on { width: 0.48rem; background: var(--gold); }
.banner .nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 0.74667rem; height: 0.74667rem; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.34); color: #fff; font-size: 0.4rem; backdrop-filter: blur(0.10667rem);
}
.banner .nav.l { left: 0.21333rem; }
.banner .nav.r { right: 0.21333rem; }

/* ---------- 公告栏 ---------- */
.notice {
  display: flex; align-items: center; gap: 0.21333rem;
  margin: 0.32rem 0.37333rem 0; padding: 0.24rem 0.32rem; border-radius: 0.26667rem;
  background: rgba(255,180,0,.10); border: 1px solid rgba(255,180,0,.28);
  font-size: 0.32rem; overflow: hidden;
}
.notice .tag { flex: none; display: flex; align-items: center; gap: 0.10667rem; color: var(--brand); font-weight: 700; }
.notice .vp { flex: 1; min-width: 0; overflow: hidden; height: 0.45333rem; position: relative; }
.notice .vp .inner {
  position: absolute; left: 0; top: 0;
  display: flex; white-space: nowrap;
  color: rgba(255,255,255,.86);
  animation: marquee 20s linear infinite;
}
.notice .vp .inner span { padding-right: 1.6rem; }
.notice .vp .inner:hover { animation-play-state: paused; }
/* 两段等宽内容接续滚动，实现无缝且一开始就可见 */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.notice .cls { flex: none; color: var(--sub); font-size: 0.37333rem; padding: 0 2px; }

/* ---------- 分区标题 ---------- */
[data-sec] { scroll-margin-top: 1.54667rem; }
.sec-hd { display: flex; align-items: center; margin: 0.58667rem 0.37333rem 0.32rem; }
.sec-hd .bar { flex: none; width: 0.10667rem; height: 0.42667rem; border-radius: 2px; background: var(--brand); margin-right: 0.21333rem; }
.sec-hd h2 { margin: 0; font-size: 0.42667rem; font-weight: 800; letter-spacing: .0.08rem; }
.sec-hd .more { margin-left: auto; font-size: 0.32rem; color: var(--sub); }

/* ---------- 剧集卡片 ---------- */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.32rem; padding: 0 0.37333rem; align-items: start; }
.card { background: var(--card); border-radius: 0.32rem; overflow: hidden; border: 1px solid var(--line); display: block; }
.card .cover { position: relative; aspect-ratio: 3/4; background: #222; }
.card .cover img { width: 100%; height: 100%; object-fit: cover; }
/* 构建层降级：老内核不认 aspect-ratio 时封面高度会塌成 0，卡片全叠在一起。
   这里退回 padding-top 撑比例（3:4 → 133.333%），图片改绝对定位填满 */
@supports not (aspect-ratio: 3/4) {
  .card .cover { height: 0; padding-top: 133.333%; overflow: hidden; }
  .card .cover img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
}
.card .newtag {
  position: absolute; left: 0.18667rem; top: 0.18667rem; padding: 2px 0.18667rem; border-radius: 0.13333rem;
  font-size: 0.26667rem; font-weight: 700; background: linear-gradient(90deg, var(--brand), var(--brand2)); color: var(--on-brand);
}
.card .score {
  position: absolute; right: 0.18667rem; top: 0.18667rem; padding: 2px 0.18667rem; border-radius: 0.16rem;
  font-size: 0.29333rem; font-weight: 700; color: var(--gold);
  background: rgba(0,0,0,.52); backdrop-filter: blur(0.10667rem);
}
.card .upd {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0.42667rem 0.21333rem 0.16rem;
  font-size: 0.26667rem; color: rgba(255,255,255,.92);
  background: linear-gradient(transparent, rgba(0,0,0,.86));
}
.card .body { padding: 0.24rem 0.26667rem 0.29333rem; }
.card .t { font-size: 0.37333rem; font-weight: 700; color: #fff; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.card .desc { margin-top: 0.13333rem; font-size: 0.29333rem; color: var(--sub); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .tags { margin-top: 0.18667rem; display: flex; gap: 0.10667rem; flex-wrap: wrap; }
.card .tags span { font-size: 0.26667rem; padding: 2px 0.16rem; border-radius: 0.10667rem; background: rgba(255,255,255,.07); color: var(--sub); }

/* ---------- 分类间横幅广告 ---------- */
.adslot { position: relative; display: block; margin: 0.42667rem 0.37333rem 0; border-radius: 0.37333rem; overflow: hidden; aspect-ratio: 1200/220; background: #1a1a22; }
.adslot img { width: 100%; height: 100%; object-fit: cover; }
.adslot .at { position: absolute; left: 0.42667rem; top: 50%; transform: translateY(-50%); right: 2.4rem; }
.adslot .at b { display: block; font-size: 0.4rem; font-weight: 800; color: #fff; text-shadow: 0 1px 0.16rem rgba(0,0,0,.6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adslot .at span { font-size: 0.29333rem; color: rgba(255,255,255,.82); display: block; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adslot .mark { position: absolute; right: 0.21333rem; bottom: 0.13333rem; font-size: 0.24rem; color: rgba(255,255,255,.6); }

/* ---------- 播放页 ---------- */
/* 全屏容器用 position: fixed 四边钉死，高度再用 JS 实测值 --ph 覆盖。
   不依赖 100vh / 100dvh：国产内核要么把地址栏工具栏算进去，要么直接丢弃 dvh，
   结果都是容器比可视区高一截，把右侧点赞列和底部剧名顶到屏幕外。
   不依赖 scroll-snap 和原生滚动：老内核支持不全，mandatory 还会把滚动锁死
   （表现就是「上滑没反应」）。切集交给 JS 手势 + transform 位移，纯 JS 人人支持。 */
.player {
  position: fixed; top: 0; left: 0; right: 0;
  height: 100%;
  height: calc(var(--ph, 100%));
  z-index: 60; background: #000; overflow: hidden;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
/* 手势只改这一层的 transform，不碰原生滚动 */
.player .strack {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  will-change: transform;
}
.player .strack.anim { transition: transform .28s cubic-bezier(.25,.9,.3,1); }
.player .slide {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  overflow: hidden; background: #000;
}
/* video 绝对定位钉进 .slide：不参与文档流，
   避免部分内核给 video 塞进额外高度，把点赞列和底部信息顶出屏幕 */
.player .slide video {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%; object-fit: cover;
  background: #000; display: block;
}
.player .mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 28%, transparent 55%, rgba(0,0,0,.78) 100%); pointer-events: none; }
/* UI 层全局只有一份，跟着当前集更新内容，不随手势位移 ——
   这样点赞列 / 剧名 / 进度条永远钉在可视区内，不可能被顶出屏幕 */
.player .ui { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 7; pointer-events: none; }
.player .ui > * { pointer-events: auto; }

/* 封禁遮罩：覆盖整屏，彻底阻断播放，文案居中 */
.banned-cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 0.85333rem; background: radial-gradient(circle at 50% 38%, #2a2030 0%, #14121a 70%); }
.banned-box { max-width: 8.53333rem; text-align: center; color: #fff; }
.banned-ic { font-size: 1.44rem; line-height: 1; margin-bottom: 0.37333rem; }
.banned-t { font-size: 0.50667rem; font-weight: 700; margin-bottom: 0.26667rem; }
.banned-d { font-size: 0.34667rem; line-height: 1.7; color: rgba(255,255,255,.72); }

/* 我的页封禁提示条 */
.ban-notice { margin: 0.32rem 0.37333rem 0; padding: 0.32rem 0.37333rem; border-radius: 0.32rem; background: rgba(255,45,85,.12); border: 1px solid rgba(255,45,85,.4); color: #ffb3c2; font-size: 0.34667rem; line-height: 1.6; }

/* 不用 flex gap：老内核（UC/夸克/部分厂商）支持不全，间距会整段消失。统一改 margin */
/* bottom 先写普通值、再写 calc+env：老内核不认 env() 时整条 calc 会被丢弃，
   有前置值兜底才不会让定位属性整个失效 */
/* z-index 整体抬高：国产内核会给 video 套一层自带控件/代理层，
   那层的层级大约压在 z-index 3~5 之间——原来的 3 正好被吃掉，
   表现就是「进度条(6)看得到，点赞列和剧名看不到」。现在统一抬到 7 以上 */
.side { position: absolute; right: 0.26667rem; bottom: 4rem; bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; z-index: 7; }
.side .ic + .ic { margin-top: 0.48rem; }
.side .ic { display: flex; flex-direction: column; align-items: center; font-size: 0.29333rem; color: #fff; text-shadow: 0 1px 0.10667rem rgba(0,0,0,.6); }
.side .ic i + span { margin-top: 0.10667rem; }
/* 图标改由 SVG 绘制，font-size 只负责下面的数字/文字标签 */
.side .ic i { width: 1.12rem; height: 1.12rem; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; font-style: normal; backdrop-filter: blur(0.16rem); transition: background .2s, color .2s, transform .22s cubic-bezier(.34,1.56,.64,1); }
.side .ic i svg { display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.side .ic:active i { transform: scale(.9); }
/* 点赞态用红心白底：原来沿用品牌渐变底，跟分享、评论的灰底拉不开差距 */
.side .ic.like.on i { background: rgba(255,255,255,.94); color: #ff2d55; }
.side .ic.like.on i svg { filter: none; }
.side .ic.like.on span { color: #ffd7de; }
/* 复制成功后 ✓ 弹一下，静态图标看不出有没有生效 */
.side .ic i.pop { animation: icPop .42s cubic-bezier(.34,1.56,.64,1); }
@keyframes icPop { 0% { transform: scale(.62) } 58% { transform: scale(1.16) } 100% { transform: scale(1) } }

/* 贴近底部进度条：原来 bottom:2.02667rem，离进度条有 0.96rem 空当 */
.pinfo { position: absolute; left: 0.37333rem; right: 2.02667rem; bottom: 1.38667rem; bottom: calc(1.38667rem + env(safe-area-inset-bottom, 0px)); z-index: 7; color: #fff; }
.pinfo .pt { font-size: 0.37333rem; font-weight: 700; text-shadow: 0 1px 0.16rem rgba(0,0,0,.7); }
/* 简介只占一行，别再挤两行压画面 */
.pinfo .pd { margin-top: 0.08rem; font-size: 0.32rem; color: rgba(255,255,255,.72); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 0.10667rem rgba(0,0,0,.7); }

/* 选集默认折叠，点展开条才露出来 */
.eptoggle { display: inline-flex; align-items: center; gap: 0.13333rem; margin-top: 0.24rem; padding: 0.10667rem 0.26667rem; border-radius: 26.64rem; background: rgba(255,255,255,.16); color: #fff; font-size: 0.29333rem; backdrop-filter: blur(0.16rem); transition: .18s; }
.eptoggle .arw { font-style: normal; font-size: 0.26667rem; opacity: .85; transition: transform .2s; }
.pinfo.open .eptoggle { background: linear-gradient(90deg, var(--brand), var(--brand2)); color: var(--on-brand); font-weight: 700; }
.pinfo.open .eptoggle .arw { color: var(--on-brand); }
.pinfo.open .eptoggle .arw { transform: rotate(90deg); }
/* 用 .pinfo 提高特异性，否则后面 .epstrip 那条会把它重新显示出来 */
.pinfo .epstrip { display: none; }
.pinfo.open .epstrip { display: flex; }
.epstrip { display: flex; gap: 0.21333rem; overflow-x: auto; margin-top: 0.21333rem; padding-bottom: 2px; scrollbar-width: none; }
.epstrip::-webkit-scrollbar { display: none; }
.epchip { flex: none; padding: 0.16rem 0.34667rem; border-radius: 0.21333rem; background: rgba(255,255,255,.18); font-size: 0.32rem; backdrop-filter: blur(0.16rem); }
.epchip.on { background: linear-gradient(90deg, var(--brand), var(--brand2)); color: var(--on-brand); font-weight: 700; }
.epchip.lock::after { content: " 🔒"; font-size: 0.26667rem; }

.ptop { position: absolute; left: 0.32rem; top: 0.37333rem; z-index: 8; display: flex; align-items: center; gap: 0.26667rem; }
.pback { width: 0.90667rem; height: 0.90667rem; border-radius: 50%; background: rgba(0,0,0,.4); display: grid; place-items: center; font-size: 0.45333rem; backdrop-filter: blur(0.16rem); }
.ptop .vn { font-size: 0.37333rem; font-weight: 600; text-shadow: 0 1px 0.10667rem rgba(0,0,0,.7); }

.pcenter { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: grid; place-items: center; z-index: 8; pointer-events: none; }
/* hidden 属性来自 UA 样式表，优先级低于任何类选择器，必须显式兜住，
   否则 JS 里设 hidden=true 也不生效，中间按钮会一直杵在画面上 */
.pcenter[hidden] { display: none; }
.pcenter .playbtn { pointer-events: auto; width: 1.65333rem; height: 1.65333rem; border-radius: 50%; background: rgba(0,0,0,.42); display: grid; place-items: center; font-size: 0.64rem; backdrop-filter: blur(0.16rem); }

/* ---------- 进度条 + 最右侧倍速 / 静音 ---------- */
/* 同上：gap 改 margin；底部再加 safe-area，避免被手势条/虚拟导航压住 */
.pbar { position: absolute; left: 0.32rem; right: 0.32rem; bottom: 0.37333rem; bottom: calc(0.37333rem + env(safe-area-inset-bottom, 0px)); z-index: 9; display: flex; align-items: center; }
.pbar > * + * { margin-left: 0.26667rem; }
/* 轨道撑到 0.48rem 高只为手指好按，可见线仍是 0.08rem */
.pbar .ptrack { flex: 1; min-width: 0; height: 0.48rem; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.pbar .pline { position: relative; width: 100%; height: 0.08rem; border-radius: 26.64rem; background: rgba(255,255,255,.3); }
.pbar .pfill { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 26.64rem; background: linear-gradient(90deg, var(--brand), var(--brand2)); }
.pbar .pdot { position: absolute; top: 50%; left: 0; width: 0.29333rem; height: 0.29333rem; border-radius: 50%; background: #fff; transform: translate(-50%,-50%); box-shadow: 0 1px 0.10667rem rgba(0,0,0,.6); }
.pbar .ptime { flex: none; font-size: 0.29333rem; color: rgba(255,255,255,.82); font-variant-numeric: tabular-nums; text-shadow: 0 1px 0.10667rem rgba(0,0,0,.7); }
.pbar .pbtn { flex: none; height: 0.69333rem; min-width: 1.06667rem; padding: 0 0.24rem; border-radius: 0.21333rem; background: rgba(255,255,255,.16); color: #fff; font-size: 0.32rem; font-weight: 700; backdrop-filter: blur(0.16rem); text-shadow: none; }
.pbar .pbtn.off { color: var(--sub); }
.pbar .pbtn.hi { background: linear-gradient(90deg, var(--brand), var(--brand2)); color: var(--on-brand); }

/* 试看提示并入信息区跟着走，不再单独绝对定位 —— 否则信息区下移后会被它顶到 */
.trialbar { margin-top: 0.16rem; font-size: 0.32rem; color: var(--gold); text-shadow: 0 1px 0.10667rem rgba(0,0,0,.8); }

/* ---------- 我的 ---------- */
.mecard { margin: 0.37333rem 0.42667rem; padding: 0.48rem; border-radius: 0.42667rem; background: linear-gradient(135deg, #2b2109, #1c1c26); border: 1px solid var(--line); }
.mecard .row { display: flex; align-items: center; gap: 0.32rem; }
.avatar { width: 1.38667rem; height: 1.38667rem; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand2)); color: var(--on-brand); display: grid; place-items: center; font-size: 0.58667rem; font-weight: 700; }
.mecard .nick { font-size: 0.42667rem; font-weight: 700; }
.mecard .uid { font-size: 0.29333rem; color: var(--sub); margin-top: 2px; }
.viptag { margin-left: auto; padding: 0.10667rem 0.26667rem; border-radius: 26.64rem; font-size: 0.29333rem; font-weight: 700; background: linear-gradient(90deg, var(--brand), var(--brand2)); color: var(--on-brand); }
.viptag.off { background: var(--bg-soft); color: var(--sub); }

.stats { display: flex; margin: 0.42667rem 0.42667rem 0; border-radius: 0.37333rem; overflow: hidden; background: var(--card); border: 1px solid var(--line); }
.stat { flex: 1; padding: 0.37333rem 0.21333rem; text-align: center; }
.stat b { display: block; font-size: 0.45333rem; }
.stat span { font-size: 0.29333rem; color: var(--sub); }

.sec { margin: 0.58667rem 0.42667rem 0.26667rem; font-size: 0.37333rem; font-weight: 700; display: flex; align-items: center; }
.sec .sp { flex: 1; }
.sec .more { font-size: 0.32rem; color: var(--sub); font-weight: 400; }

.hlist { display: flex; gap: 0.26667rem; overflow-x: auto; padding: 0 0.42667rem; scrollbar-width: none; }
.hlist::-webkit-scrollbar { display: none; }
.hcard { flex: none; width: 2.56rem; }
.hcard .c { aspect-ratio: 3/4; border-radius: 0.26667rem; overflow: hidden; background: #222; }
.hcard .c img { width: 100%; height: 100%; object-fit: cover; }
.hcard .n { margin-top: 0.16rem; font-size: 0.32rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.hcard .e { font-size: 0.29333rem; color: var(--sub); }

.order { margin: 0 0.42667rem 0.21333rem; padding: 0.32rem 0.37333rem; border-radius: 0.32rem; background: var(--card); border: 1px solid var(--line); display: flex; align-items: center; gap: 0.26667rem; font-size: 0.34667rem; }
.order .amt { margin-left: auto; font-weight: 700; color: var(--brand); }
.order .ty { font-size: 0.29333rem; color: var(--sub); }

.btn { display: block; width: calc(100% - 0.85333rem); margin: 0.32rem 0.42667rem 0; padding: 0.34667rem; border-radius: 0.32rem; font-size: 0.4rem; font-weight: 600; text-align: center; }
.btn.primary { background: linear-gradient(90deg, var(--brand), var(--brand2)); color: var(--on-brand); }
.btn.ghost { background: var(--card); border: 1px solid var(--line); color: var(--text); }

/* ---------- 底部 tab ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  height: var(--tabbar-h); display: flex;
  background: rgba(14,14,20,.94); backdrop-filter: blur(0.37333rem);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar .tb { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 0.29333rem; color: var(--sub); }
.tabbar .tb i { font-style: normal; font-size: 0.50667rem; }
.tabbar .tb.on { color: var(--brand); }

/* ---------- 弹窗 / toast ---------- */
.modal-root:empty { display: none; }
.modal-root { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; }
.modal-mask { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.62); backdrop-filter: blur(2px); animation: fade .18s ease; }
.sheet {
  position: relative; width: 100%; max-width: 13.86667rem;
  background: var(--bg-soft); border-radius: 0.48rem 0.48rem 0 0; padding: 0.48rem 0.48rem calc(0.53333rem + env(safe-area-inset-bottom));
  animation: up .24s cubic-bezier(.2,.9,.3,1);
}
@keyframes up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
.sheet h3 { margin: 0 0 0.10667rem; font-size: 0.45333rem; }
.sheet .sub { font-size: 0.32rem; color: var(--sub); margin-bottom: 0.37333rem; }
.plan { display: flex; align-items: center; gap: 0.32rem; padding: 0.34667rem 0.37333rem; border-radius: 0.32rem; border: 1px solid var(--line); background: var(--card); margin-bottom: 0.26667rem; }
.plan.on { border-color: var(--brand); background: rgba(255,180,0,.10); }
.plan .pn { font-size: 0.37333rem; font-weight: 600; }
.plan .pd2 { font-size: 0.29333rem; color: var(--sub); margin-top: 2px; }
.plan .pp { margin-left: auto; font-size: 0.42667rem; font-weight: 700; color: var(--brand); }
.plan .tag { font-size: 0.26667rem; padding: 2px 0.18667rem; border-radius: 0.13333rem; background: linear-gradient(90deg, var(--brand), var(--brand2)); color: #fff; font-weight: 700; }

/* 访问弹窗的样式在 popup.css，前台和后台共用一份，后台「预览效果」才能跟线上一致 */

.toast { position: fixed; left: 50%; bottom: 2.4rem; transform: translateX(-50%); z-index: 200; padding: 0.26667rem 0.48rem; border-radius: 0.26667rem; background: rgba(20,20,28,.95); border: 1px solid var(--line); font-size: 0.34667rem; opacity: 0; pointer-events: none; transition: .2s; }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(-0.16rem); }

.empty { padding: 1.6rem 0.53333rem; text-align: center; color: var(--sub); font-size: 0.34667rem; }
.loading { padding: 1.6rem 0.53333rem; text-align: center; color: var(--sub); font-size: 0.34667rem; }

/* ================= 登录 / 注册 ================= */

.authpage { min-height: 100vh; min-height: calc(var(--vh, 1vh) * 100); padding: 0 0.64rem 1.17333rem; background: var(--bg); }

/* 左返回 + 居中标题 + 右侧等宽占位，标题才是真居中。
   padding-top 叠 env() 是为了避开刘海/挖孔，否则标题会被状态栏压住 */
.authhd {
  display: flex; align-items: center; gap: 0.21333rem;
  padding: calc(0.37333rem + env(safe-area-inset-top, 0px)) 0 0.21333rem;
}
.authback { width: 0.85333rem; height: 0.85333rem; display: grid; place-items: center; margin-left: -0.21333rem; border-radius: 50%; }
.authback:active { background: var(--bg-soft); }
.authhd h1 { flex: 1; margin: 0; font-size: 0.45333rem; font-weight: 600; text-align: center; }
.authsp { width: 0.85333rem; }

.authform { margin-top: 0.69333rem; }
.afield { margin-bottom: 0.42667rem; }
.afield input {
  width: 100%; height: 1.33333rem; padding: 0 0.53333rem;
  border-radius: 0.66667rem; border: 1px solid var(--line);
  background: var(--bg-soft); color: var(--text);
  font-size: 0.4rem; outline: none;
  transition: border-color .18s, background .18s;
}
.afield input::placeholder { color: #6d6d80; }
.afield input:focus { border-color: var(--brand); background: var(--card); }

/* 验证码：左侧输入框自适应，右侧固定 120×44 的图 */
.captchafield { display: flex; gap: 0.26667rem; align-items: center; }
.captchafield input { flex: 1; min-width: 0; letter-spacing: 2px; text-transform: uppercase; }
.captchabox {
  flex: 0 0 3.2rem; width: 3.2rem; height: 1.33333rem; padding: 0;
  border-radius: 0.32rem; overflow: hidden; background: #fff;
  border: 1px solid var(--line); display: grid; place-items: center;
}
.captchabox svg { display: block; width: 3.2rem; height: 1.17333rem; }
.captchabox:active { opacity: .8; }
.capfail { font-size: 0.29333rem; color: #8a8a9a; text-align: center; padding: 0 0.16rem; line-height: 1.3; }

.acaphint { margin: -0.10667rem 0 0.48rem 0.10667rem; font-size: 0.32rem; color: var(--sub); }
.acaphint::before { content: 'ⓘ '; }

.abtn {
  width: 100%; height: 1.33333rem; margin-top: 0.16rem;
  border-radius: 0.66667rem; font-size: 0.42667rem; font-weight: 600; color: var(--on-brand);
  background: linear-gradient(90deg, var(--brand), var(--brand2));
  box-shadow: 0 0.21333rem 0.58667rem -0.32rem var(--brand2);
  transition: opacity .2s, transform .1s;
}
.abtn:active { transform: scale(.985); }
.abtn:disabled { opacity: .6; }

.aflink { margin-top: 0.53333rem; font-size: 0.34667rem; color: var(--sub); }
.aflink a { color: #4a9eff; margin-left: 0.08rem; }

/* ================= 我的 ================= */

.mepage { padding-bottom: 0.53333rem; }

/* 顶部身份卡：全站品牌黄渐变通栏，圆角只压下面两角，与全站风格统一 */
.mehead {
  display: flex; align-items: center; gap: 0.37333rem;
  padding: calc(0.69333rem + env(safe-area-inset-top, 0px)) 0.53333rem 0.85333rem;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border-radius: 0 0 0.58667rem 0.58667rem;
}
.mehead[data-login] { cursor: pointer; }
.meavatar {
  flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: #fff; color: var(--brand2);
  display: grid; place-items: center;
  font-size: 0.53333rem; font-weight: 700;
  border: 0.08rem solid rgba(255, 255, 255, .75);
}
.meavatar.guest { color: #bdbbc8; }
.meavatar.guest svg { width: 0.85333rem; height: 0.85333rem; }
.meheadmain { flex: 1; min-width: 0; }
.meheadname { font-size: 0.53333rem; font-weight: 700; color: var(--on-brand); overflow-wrap: anywhere; }
.meheadsub { margin-top: 0.10667rem; font-size: 0.32rem; color: rgba(61, 39, 0, .72); }
.meheadchev { flex: 0 0 auto; color: rgba(61, 39, 0, .65); display: grid; place-items: center; }

/* 会员卡：米金色，压在身份卡下沿形成层叠 */
.vipcard {
  display: flex; align-items: center; gap: 0.26667rem;
  margin: -0.42667rem 0.42667rem 0; padding: 0.37333rem 0.42667rem;
  border-radius: 0.37333rem;
  background: linear-gradient(135deg, #fff3d4, #ffe6c2);
  box-shadow: 0 0.21333rem 0.58667rem -0.42667rem #000;
}
.vipcard.on { background: linear-gradient(135deg, #ffe9b8, #ffd98a); }
.vipcrown { flex: 0 0 auto; color: #b8860b; display: grid; place-items: center; }
.vipcrown svg { width: 0.53333rem; height: 0.53333rem; }
.viptxt { flex: 1; min-width: 0; }
.viptitle { font-size: 0.4rem; font-weight: 700; color: #6b4a12; }
.vipsub { margin-top: 2px; font-size: 0.29333rem; color: #9a7b45; overflow-wrap: anywhere; }
.vipbtn {
  flex: 0 0 auto; padding: 0.21333rem 0.42667rem; border-radius: 26.64rem;
  font-size: 0.34667rem; font-weight: 600; color: #6b4a12;
  background: linear-gradient(135deg, #ffd98a, #f5c26b);
}
.vipbtn:active { opacity: .85; }

.mestats {
  display: flex; margin: 0.37333rem 0.42667rem 0; padding: 0.48rem 0;
  border-radius: 0.37333rem; background: var(--card); border: 1px solid var(--line);
}
.mestat { flex: 1; text-align: center; display: block; color: inherit; }
.mestat + .mestat { border-left: 1px solid var(--line); }
.mestat b { display: block; font-size: 0.53333rem; font-weight: 700; }
.mestat span { display: block; margin-top: 0.13333rem; font-size: 0.32rem; color: var(--sub); }

.mepoints {
  display: flex; align-items: center; gap: 0.32rem;
  margin: 0.37333rem 0.42667rem 0; padding: 0.42667rem;
  border-radius: 0.37333rem; background: var(--card); border: 1px solid var(--line);
}
.mepointsL { flex: 1; min-width: 0; }
.mepointsLabel { display: flex; align-items: center; gap: 0.16rem; font-size: 0.34667rem; color: var(--sub); }
.eyebtn { display: grid; place-items: center; width: 0.58667rem; height: 0.58667rem; color: var(--sub); }
.eyebtn svg { width: 0.45333rem; height: 0.45333rem; }
.mepointsVal { margin-top: 0.21333rem; font-size: 0.53333rem; font-weight: 700; letter-spacing: 2px; }

/* 覆盖 .btn 的整宽默认样式，改成像参考图那样贴在右侧的胶囊按钮 */
.mecharge { width: auto; margin: 0; padding: 0.29333rem 0.58667rem; font-size: 0.37333rem; border-radius: 26.64rem; }
/* 「立即充值」按钮统一复用全站主按钮 .btn.primary（品牌黄），不再有粉色变体 */
.melogout { margin-top: 0.64rem; }
/* 空态默认上下 1.6rem 内边距，在「我的」页连着两个空区块时留白会过厚 */
.mepage .empty { padding: 0.90667rem 0.53333rem; }