/**
 * components.css — 视频卡片、Banner、按钮、空状态、播放器、搜索、个人中心等组件样式。
 */

/* —— Banner —— */
.banner {
  border-radius: var(--radius);
  padding: 32px 24px;
  margin-bottom: 24px;
  background: linear-gradient(120deg, #2b1055, #6d1b2a);
  color: #fff;
}

.banner-title {
  font-size: 26px;
}

.banner-sub {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.8);
}

/* —— 区块与标题 —— */
.section {
  margin-bottom: 24px;
}

.section-title {
  font-size: 18px;
  margin-bottom: 12px;
}

.page-title {
  font-size: 24px;
  margin-bottom: 16px;
}

/* —— 分类 chips —— */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.chip {
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 14px;
}

.chip:hover {
  color: var(--text);
}

.chip.is-active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* —— 视频网格与卡片 —— */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.video-card {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bg-elevated);
}

.video-card:hover {
  transform: translateY(-2px);
  transition: transform 0.15s ease;
}

.video-cover {
  position: relative;
  aspect-ratio: 2 / 3;
}

.video-duration {
  margin: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.7);
  font-size: 12px;
  color: #fff;
}

.video-meta {
  padding: 10px 12px 12px;
}

.video-title {
  font-size: 16px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-cat {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-muted);
}

@media (min-width: 640px) {
  .video-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .video-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* —— 首页轮播 —— */
.carousel {
  position: relative;
  overflow: hidden;
  margin-bottom: 24px;
  perspective: 1200px;
}

.carousel-track {
  position: relative;
  height: 360px;
  transform-style: preserve-3d;
}

.carousel-slide {
  position: absolute;
  left: 50%;
  top: 0;
  width: 200px;
  margin-left: -100px;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elevated);
  transition: transform 0.45s ease, opacity 0.45s ease;
  backface-visibility: hidden;
}

.carousel-slide .video-cover {
  aspect-ratio: 2 / 3;
}

/* PC 端（≥768px）：全屏大图轮播 */
@media (min-width: 768px) {
  .carousel {
    perspective: none;
  }

  .carousel-track {
    display: flex;
    height: auto;
    transform-style: flat;
    transition: transform 0.4s ease;
  }

  .carousel-slide {
    position: relative;
    left: auto;
    top: auto;
    flex: 0 0 100%;
    width: 100%;
    margin-left: 0;
    border-radius: 0;
    transition: none;
    backface-visibility: visible;
  }

  .carousel-slide .video-cover {
    aspect-ratio: 16 / 9;
  }
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.carousel-arrow.prev {
  left: 12px;
}

.carousel-arrow.next {
  right: 12px;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
}

.carousel-dot.is-active {
  background: var(--accent);
}

/* —— 按钮 —— */
.btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
}

.btn:hover {
  border-color: var(--accent);
}

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

.btn-primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.btn-fav.is-fav {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* —— 详情页 —— */
.detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-player-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}

.player {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  display: block;
}

/* Video.js 会把 <video> 包装为外层容器：容器复用 .player 的既有尺寸规则，
   并覆盖发行样式的默认 300x150 固定尺寸（.video-js.player 特异性更高） */
.video-js.player {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}

.player-error {
  padding: 16px;
  text-align: center;
  color: #ffb4b4;
  background: #2a1216;
}

.detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.detail-title {
  font-size: 22px;
  padding-right: 40px;
}

.detail-meta {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 14px;
}

.detail-desc {
  margin: 12px 0 0;
}

.detail-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

/* 移动端覆盖层（桌面隐藏） */
.m-topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(rgba(0, 0, 0, 0.6), transparent);
  z-index: 2;
}

.back-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.m-name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  min-width: 0;
}

.m-ep {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  margin-left: auto;
  flex: none;
}

.m-actions {
  position: absolute;
  right: 12px;
  bottom: 100px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 2;
}

.m-btn {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.m-icon {
  width: 24px;
  height: 24px;
  display: block;
}

.m-btn.is-fav {
  background: var(--accent);
}

.m-episodes-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 60vh;
  overflow-y: auto;
  padding: 16px;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  border-radius: 12px 12px 0 0;
  z-index: 30;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.m-episodes-panel.is-open {
  transform: translateY(0);
}

.m-episodes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.m-close {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.side-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: none;
  z-index: 1;
}

.episodes-panel {
  display: none;
  margin-top: 16px;
}

.episodes-panel.is-open {
  display: block;
}

.side-title {
  font-size: 16px;
  margin-bottom: 12px;
}

.episodes {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.episode {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
}

.episode:hover {
  border-color: var(--accent);
}

.episode.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.back-home {
  text-align: center;
  margin: 16px 0;
}

/* 桌面端：播放器在左，简介+集数在右（可伸缩） */
@media (min-width: 768px) {
  .detail {
    flex-direction: row;
    align-items: flex-start;
  }

  .detail-player-wrap {
    flex: 1;
    min-width: 0;
  }

  .detail-sidebar {
    position: relative;
    width: 320px;
    flex: none;
  }

  .detail-sidebar.is-collapsed {
    width: 40px;
  }

  .detail-sidebar.is-collapsed .detail-info,
  .detail-sidebar.is-collapsed .episodes-panel {
    display: none;
  }

  .side-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .episodes-panel {
    display: block;
  }

  .mobile-only {
    display: none;
  }

  .m-topbar,
  .m-actions,
  .m-episodes-panel {
    display: none;
  }
}

/* 移动端：全屏竖屏播放器 */
@media (max-width: 767px) {
  .detail-page .site-header {
    display: none;
  }

  .detail-page .bottom-nav {
    display: none;
  }

  .detail-page .page-main {
    padding: 0;
    max-width: none;
  }

  .detail {
    gap: 0;
  }

  .detail-player-wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0;
    z-index: 10;
  }

  .player {
    width: 100%;
    height: 100vh;
    object-fit: cover;
  }

  /* 移动端：Video.js 容器全屏竖屏，内层视频沿用既有 cover 裁切 */
  .video-js.player {
    width: 100%;
    height: 100vh;
    aspect-ratio: auto;
  }

  .video-js .vjs-tech {
    object-fit: cover;
  }

  .detail-sidebar {
    display: none;
  }
}

/* —— 空状态 —— */
.empty-state {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-muted);
}

.empty-text {
  margin: 0;
  font-size: 14px;
}

/* —— 数据加载失败状态 —— */
.data-error {
  margin: 24px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: #ffb4b4;
  background: #2a1216;
}

/* —— 无剧集详情页 —— */
.detail-no-episodes {
  flex-direction: row;
  align-items: flex-start;
}

.detail-cover {
  flex: none;
  width: 180px;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius);
  overflow: hidden;
}

/* 无剧集页移动端顶栏：桌面由站点导航提供返回，移动端单独渲染 */
.no-ep-topbar {
  display: none;
}

@media (max-width: 767px) {
  .detail-no-episodes {
    flex-direction: column;
    gap: 16px;
    padding: 0 16px 24px;
  }

  .detail-cover {
    width: 100%;
    max-width: 240px;
    margin: 0 auto;
  }

  /* 普通详情页移动端隐藏侧栏；无剧集页仍需展示剧名、简介与提示 */
  .detail-no-episodes .detail-sidebar {
    display: block;
    width: auto;
  }

  .no-ep-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }

  .no-ep-title {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* —— 搜索 —— */
.search-box {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.search-input {
  flex: 1;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 15px;
}

.search-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* —— 个人中心 —— */
.profile-login {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}

.login-status {
  font-size: 15px;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.list-row {
  border-radius: var(--radius);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}

.list-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
}

.list-cover {
  width: 96px;
  height: 54px;
  border-radius: 6px;
  flex: none;
}

.list-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.list-title {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.list-sub {
  font-size: 12px;
  color: var(--text-muted);
}

/* —— 登录表单 —— */
.login-wrap {
  max-width: 420px;
  margin: 0 auto;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}

.login-label {
  font-size: 14px;
  color: var(--text-muted);
}

.login-input {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 15px;
}

.login-input:focus {
  outline: none;
  border-color: var(--accent);
}

.login-submit {
  margin-top: 6px;
}

.login-error {
  margin: 0;
  font-size: 13px;
  color: #ffb4b4;
}

/* —— 复制链接提示 toast —— */
.toast {
  position: fixed;
  left: 50%;
  bottom: 80px;
  transform: translateX(-50%);
  padding: 10px 18px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 14px;
  z-index: 40;
}

/* —— 首页页脚 —— */
.site-footer {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 24px 16px 80px;
  text-align: center;
  color: #fff6;
  font-size: 3.2vw;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 600px;
  margin: 0 auto;
  gap: 0;
  line-height: 1.8;
}

.footer-links a {
  color: #fff6;
  white-space: nowrap;
}

.footer-links a:hover {
  color: var(--text);
}

.footer-links span {
  margin: 0 8px;
  color: #ffffff1a;
}

.footer-copyright {
  margin-top: 10px;
  color: #fff6;
}

.footer-fimage {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.footer-fimage .van-image img {
  display: block;
  height: 24px;
  width: auto;
}

@media (min-width: 768px) {
  .site-footer {
    max-width: none;
    padding: 64px 43px 24px;
    font-size: 16px;
  }

  .footer-links {
    max-width: none;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 40px;
    line-height: 1.2;
  }

  .footer-links span {
    display: none;
  }

  .footer-copyright {
    margin-top: 96px;
  }
}

/* —— 剧集锁定与订阅弹窗（REQ_004） —— */
.episode.is-locked {
  position: relative;
  cursor: pointer;
  gap: 4px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border-style: dashed;
}

/* 锁定集右上角锁标角标，参考 ChooseChapterModal_tabs 样式 */
.episode-lock-badge {
  position: absolute;
  right: 0;
  top: 0;
  width: 18px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 71, 71, 0.6);
  border-radius: 0 6px;
  opacity: 0.5;
}

.episode-lock-icon {
  height: 10px;
  width: auto;
  display: block;
}

/* 连播切换到锁定集时，当前集高亮与锁定标识并存 */
.episode.is-locked.is-active {
  border-style: solid;
  border-color: var(--accent);
  color: var(--text);
}

.subscribe-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* 高于移动集数面板（30）与播放器（10），低于全局 toast（40）以便支付静态提示可见 */
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.65);
}

.subscribe-overlay[hidden] {
  display: none;
}

.subscribe-mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.subscribe-popup {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
}

.popup-main {
  position: relative;
  padding: 18px 16px;
  border-radius: 16px;
  background: #17122a url("../images/dingyuebg5.png") center / cover no-repeat;
}

.subscribe-title {
  display: block;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.subscribe-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

.pay-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.plan-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.plan-item.is-active {
  background: url("../images/listActive.png") center / 100% 100% no-repeat;
}

.plan-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.plan-total {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.plan-symbol {
  font-size: 13px;
  font-weight: 400;
}

.plan-day {
  font-size: 16px;
  color: var(--text-muted);
}

.plan-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plan-title {
  font-size: 13px;
  color: #fff;
}

.plan-unlock {
  font-size: 11px;
  color: var(--text-muted);
}

.plan-auto {
  font-size: 11px;
  color: var(--text-muted);
}

.plan-discount {
  position: absolute;
  top: -8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
}

.plan-discount:empty {
  display: none;
}

.agree-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 12px;
  color: var(--text);
}

.agree-check {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

/* 勾选态：红色底 + CSS 绘制白色对勾 */
.agree-check.is-checked {
  border-color: #e1384e;
  background: #e1384e;
}

.agree-check.is-checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.agree-text {
  color: #606266;
}

/* 勾选后 “I agree.” 文案变红 */
.agree-row.is-checked .agree-text {
  color: #e1384e;
}

.agree-amp {
  color: #0d68ff;
  font-size: 16px;
}

.agree-text a {
  color: #0d68ff;
  font-size: 16px;
}

/* 移动端协议链接与分隔符字号比桌面端小 */
.subscribe-m .agree-amp,
.subscribe-m .agree-text a {
  font-size: 14px;
}

.pay-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 44px;
  margin-top: 12px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.pay-btn.card-btn {
  background: #ff3f4f;
  /* 文案与卡标图作为整体水平居中 */
  justify-content: center;
}

.pay-btn.paypal-btn {
  background: #f3a621;
  /* 按钮仅含品牌图，整体水平居中 */
  justify-content: center;
}

.pay-icons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-logo,
.card-logo-left {
  height: 16px;
  width: auto;
  display: block;
}

.paypal-logo {
  height: 28px;
  width: auto;
  display: block;
}

/* 桌面端订阅弹窗 */
.subscribe-pc {
  display: none;
}

.subscribe-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}

.subscribe-head .subscribe-title {
  text-align: left;
}

.subscribe-head .subscribe-close {
  position: static;
}

.moren-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
  row-gap: 7px;
  margin-top: 8px;
}

.moren-li {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 126px;
  padding: 18px 14px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

/* 含优惠的套餐：为卡片顶部整条粉色横幅预留空间 */
.moren-li.has-discount {
  padding-top: 35px;
}

/* 选中套餐：使用 xuanzhong-5.png 作为选中底图，红色价格、深色文字（PC 专属模板） */
.moren-li.active {
  background: url("../images/xuanzhong-5.png") center / 100% 100% no-repeat;
}

.moren-li.active .day-p {
  color: #8a8a8a;
}

.moren-li.active .price-line {
  color: #ff3f4f;
}

.moren-li.active .unlock-name {
  color: #2b2b2b;
}

.moren-div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.day-p {
  font-size: 16px;
  color: var(--text-muted);
}

.price-line {
  font-size: 21px;
  font-weight: 700;
  color: #fff;
}

.symbol-mr {
  font-size: 13px;
  font-weight: 400;
}

.unlock-name {
  margin-top: auto;
  font-size: 13px;
  color: #fff;
}

/* 优惠标签：套餐卡片顶部横跨整行的粉色条（PC 专属模板） */
.exclusive-div {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  box-sizing: border-box;
  height: 24px;
  padding: 0 14px;
  border-radius: 10px 10px 0 0;
  background: #ff3e92;
  color: #fff;
  font-size: 12px;
  line-height: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.exclusive-div:empty {
  display: none;
}

.unlock-detail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 18px;
}

.unlock-type {
  font-size: 16px;
  color: #fff;
}

.p12 {
  font-size: 14px;
  color: var(--text-muted);
}

@media (min-width: 768px) {
  .subscribe-m {
    display: none;
  }

  .subscribe-pc {
    display: block;
  }

  /* 桌面订阅弹窗主体宽度固定 554px，高度随内容自适应且不低于 612px，
     视口不足以容纳时限制最大高度；内容自适应可避免出现内部滚动条 */
  .subscribe-popup {
    width: 554px;
    max-width: 554px;
    height: auto;
    min-height: 612px;
    max-height: 90vh;
  }

  .subscribe-pc {
    height: 100%;
  }

  .subscribe-pc .popup-main {
    min-height: 612px;
    box-sizing: border-box;
    padding: 30px 30px 18px;
  }

  .subscribe-pc .agree-row {
    margin: 38px 0 0;
  }

  /* 桌面支付按钮：图文作为整体水平居中，不做两端分散；
     按钮纵向间隔约 16px；圆角与移动端一致为 8px（人工调整） */
  .subscribe-pc .pay-btn {
    justify-content: center;
    height: 54px;
    margin: 26px 0 0;
  }

  .subscribe-pc .pay-btn + .pay-btn {
    margin-top: 16px;
  }
}

/* —— 移动端全屏订阅抽屉（REQ_004 调整） —— */
/* 小于 768px：抽屉铺满整屏，使用 payBg.png 背景，由下向上进入、向下退出；
   标题左对齐、关闭右对齐；套餐区独立纵向滚动，协议与支付入口固定在底部始终可操作。 */
@media (max-width: 767px) {
  .subscribe-overlay {
    padding: 0;
  }

  .subscribe-popup {
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100%;
    overflow: visible;
  }

  .subscribe-m {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    background: #17122a url("../images/payBg.png") no-repeat;
    background-size: contain;
    transform: translateY(100%);
    transition: transform 0.24s ease;
  }

  .subscribe-overlay.is-open .subscribe-m {
    transform: translateY(0);
  }

  .subscribe-m-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .subscribe-m-head .subscribe-title {
    text-align: left;
    font-size: 18px;
  }

  .subscribe-m .subscribe-close {
    position: static;
  }

  /* 内容区为纵向弹性容器：套餐滚动区占据剩余高度，底部操作区不随套餐滚动 */
  .subscribe-m-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  /* 套餐区独立滚动：套餐过多或可用高度不足时仅滚动该区（REQ_004 AC-11） */
  .subscribe-m-plan-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 16px 0;
  }

  /* 固定底部操作区：I agree.、协议链接与支付按钮始终可操作；半透明底与分隔线
     避免滚动套餐透出或覆盖；底部高度按人工要求加高（REQ_004） */
  .subscribe-m-footer {
    flex: none;
    padding: 16px 16px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(23, 18, 42, 0.55);
  }

  /* 移动端套餐卡最小高度与选中金额色；未选中卡和 PC 卡片不受影响（REQ_004） */
  .subscribe-m .plan-item {
    min-height: 21.33333vw;
  }

  .subscribe-m .plan-item.is-active .plan-price {
    color: #ff912c;
  }
}

/* —— 政策与联系空白页面（REQ_005） —— */
/* PC 保持 1200px 居中容器内的普通返回按钮；移动端使用悬浮返回/标题顶部栏与 5vw 内容留白 */
.policy-page {
  min-height: 100vh;
  padding-top: 44px; /* 移动端悬浮顶部栏预留高度，PC 端清零 */
  background: var(--bg);
}

.policy-wrap {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* PC 容器内普通返回按钮：移动端隐藏，由顶部栏按钮替代 */
.policy-back {
  display: none;
  margin: 12px 0 0 12px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.policy-back img {
  width: 100%;
  height: 100%;
  display: block;
}

/* 移动端悬浮顶部栏：左侧返回按钮、居中页面标题、底部分隔线 */
.policy-mobile-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  z-index: 10;
}

.policy-back-m {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.policy-back-m img {
  width: 100%;
  height: 100%;
  display: block;
}

.policy-mobile-title {
  font-size: 16px;
  color: var(--text);
}

/* 移动端文章内容左右间距 5vw（PC 端清零） */
.policy-main {
  padding: 0 5vw;
}

/* 人工填补的文章内容容器：两端限宽 1200px 居中；移动端左右 5vw 留白 */
.privacyPolicy {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 5vw;
}

@media (min-width: 768px) {
  /* PC 布局：移除顶部栏预留高度与内容留白，恢复普通返回按钮并隐藏移动端顶部栏 */
  .policy-page {
    padding-top: 0;
  }

  .policy-back {
    display: block;
  }

  .policy-mobile-header {
    display: none;
  }

  .policy-main {
    padding: 0;
  }

  .privacyPolicy {
    padding: 0;
  }
}