:root {
  --pc-bg: #010406;
  --pc-surface: #0d0e0f;
  --pc-surface-soft: rgba(255, 255, 255, 0.05);
  --pc-text: rgba(255, 255, 255, 0.9);
  --pc-text-soft: rgba(255, 255, 255, 0.55);
  /* PC 主色（与 H5 独立；H5 勿复用此变量随意覆盖） */
  --pc-accent: #ffb800;
  --pc-content-width: 1200px;
}

body.pc-content-page {
  min-height: 100vh;
  background: var(--pc-bg);
  color: var(--pc-text);
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
  --color-primary-500: var(--pc-accent);
  --color-primary-alpha-10: rgba(255, 184, 0, 0.10);
  --color-black-alpha-5: rgba(255, 255, 255, 0.05);
  --color-black-alpha-10: rgba(255, 255, 255, 0.1);
  --color-black-alpha-20: rgba(255, 255, 255, 0.2);
  --text-primary: var(--pc-text);
  --text-secondary: var(--pc-text-soft);
  --surface-input: var(--pc-surface);
  --surface-foreground: var(--pc-surface);
}

.pc-content-page > .mobile-tabbar { display: none; }

.pc-player-replay {
  position: absolute;
  z-index: 7;
  top: 50%;
  left: 50%;
  display: grid;
  box-sizing: border-box;
  width: 72px;
  height: 72px;
  padding: 14px;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  background: rgba(0, 0, 0, .68);
  color: #fff;
  cursor: pointer;
}
.dplayer .pc-player-replay { box-sizing: border-box; }
.pc-player-replay[hidden] { display: none; }
.pc-player-replay:hover { background: rgba(0, 0, 0, .84); color: var(--pc-accent); }
.pc-player-replay:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 4px; }
.pc-player-replay svg { display: block; width: 100%; height: 100%; }
.pc-drama-player .pc-player-replay { top: 50%; }
@media (max-width: 768px), (max-height: 768px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .pc-player-replay,
  .pc-drama-end-choice { display: none !important; }
}
.video-player.is-mobile-landscape .pc-player-replay { display: none !important; }

.pc-drama-end-choice { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; }
.pc-drama-end-choice[hidden] { display: none; }
.pc-drama-end-choice__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(0,0,0,.72); cursor: pointer; }
.pc-drama-end-choice__panel { position: relative; width: min(400px, calc(100% - 48px)); box-sizing: border-box; padding: 30px 28px 28px; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: #171819; box-shadow: 0 20px 56px rgba(0,0,0,.45); color: #fff; text-align: center; }
.pc-drama-end-choice__panel:focus { outline: none; }
.pc-drama-end-choice__eyebrow { color: var(--pc-accent); font-size: 13px; font-weight: 600; letter-spacing: .08em; }
.pc-drama-end-choice__panel h2 { margin: 10px 0 8px; font-size: 24px; line-height: 32px; }
.pc-drama-end-choice__description { margin: 0; color: rgba(255,255,255,.82); font-size: 15px; line-height: 22px; }
.pc-drama-end-choice__hint { min-height: 20px; margin: 10px 0 24px; color: rgba(255,255,255,.55); font-size: 13px; line-height: 20px; }
.pc-drama-end-choice__actions { display: flex; gap: 12px; }
.pc-drama-end-choice__actions button { flex: 1; height: 46px; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; background: rgba(255,255,255,.08); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.pc-drama-end-choice__actions button:last-child { border-color: var(--pc-accent); background: var(--pc-accent); color: #111; }
.pc-drama-end-choice__actions button:hover { filter: brightness(1.12); }
.pc-drama-end-choice__actions button:focus-visible,
.pc-drama-end-choice__backdrop:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 3px; }

.pc-content-main {
  display: flex;
  width: min(var(--pc-content-width), calc(100% - 48px));
  min-height: 889px;
  margin: 0 auto;
  padding: 32px 0 64px;
  flex-direction: column;
  gap: 24px;
}

.pc-filter-stack { display: flex; flex-direction: column; gap: 16px; }
.pc-filter-row {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pc-filter-row::-webkit-scrollbar { display: none; }
.pc-filter-row a {
  display: inline-flex;
  min-width: 80px;
  height: 40px;
  padding: 0 16px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--pc-text-soft);
  font-size: 16px;
  line-height: 22px;
  white-space: nowrap;
  transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.pc-filter-row--compact { min-height: 30px; gap: 12px; }
.pc-filter-row--compact a { height: 30px; padding: 0 12px; font-size: 14px; }
.pc-filter-row a:hover { color: var(--pc-text); background: var(--pc-surface-soft); }
/* Figma 三级筛选 on：金底 + 白字 */
.pc-filter-row a.is-active { color: #fff; background: var(--pc-accent); font-weight: 500; }

.pc-category-strip {
  position: relative;
  min-width: 0;
}
.pc-category-strip > .pc-filter-row {
  width: 100%;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scroll-padding-inline: 48px;
  -webkit-overflow-scrolling: touch;
}
.pc-category-strip > .pc-filter-row a { scroll-snap-align: start; }

@media (min-width: 769px) {
  .pc-category-strip::before,
  .pc-category-strip::after {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 76px;
    content: "";
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }
  .pc-category-strip::before {
    left: 0;
    background: linear-gradient(90deg, var(--pc-bg) 10%, rgba(1, 4, 6, 0.88) 36%, rgba(1, 4, 6, 0));
  }
  .pc-category-strip::after {
    right: 0;
    background: linear-gradient(270deg, var(--pc-bg) 10%, rgba(1, 4, 6, 0.88) 36%, rgba(1, 4, 6, 0));
  }
  .pc-category-strip.is-scrollable:not(.is-at-start)::before,
  .pc-category-strip.is-scrollable:not(.is-at-end)::after { opacity: 1; }
  .pc-category-strip.is-scrollable > .pc-filter-row {
    cursor: grab;
    scroll-snap-type: x proximity;
  }
  .pc-category-strip.is-dragging > .pc-filter-row {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
    user-select: none;
  }
  /* Figma 三级筛选 off：白 10% 底、胶囊 */
  .pc-filter-row:not(.pc-filter-row--compact) a {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
  }
  .pc-filter-row a { transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease; }
  .pc-filter-row a:focus-visible {
    color: var(--pc-accent);
    box-shadow: inset 0 0 0 1px var(--pc-accent);
  }
  .pc-filter-row a.is-active { color: #fff; background: var(--pc-accent); font-weight: 500; }
}

@media (min-width: 769px) and (hover: hover) {
  /* Figma 三级筛选悬停：金描边 + 金字（稿面「会员」chip） */
  .pc-filter-row a:not(.is-active):hover {
    color: var(--pc-accent);
    background: rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 0 0 1px var(--pc-accent);
  }
}

/* Desktop sort row（长视频 / 短剧），Figma 45568:22741 / 51079:434850 */
@media (min-width: 769px) {
  .pc-long-list-page .pc-filter-row--compact,
  .pc-short-drama-page .pc-filter-row--compact {
    width: 464px;
    max-width: 100%;
    min-height: 30px;
    gap: 12px;
  }
  .pc-long-list-page .pc-filter-row--compact a,
  .pc-short-drama-page .pc-filter-row--compact a {
    min-width: 0;
    height: 30px;
    padding: 4px 20px;
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    color: var(--pc-text-soft);
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
  }
  .pc-long-list-page .pc-filter-row--compact a.is-active,
  .pc-short-drama-page .pc-filter-row--compact a.is-active {
    background: transparent;
    color: var(--pc-text);
    font-weight: 500;
  }
  .pc-long-list-page .pc-filter-row--compact a:not(.is-active):hover,
  .pc-short-drama-page .pc-filter-row--compact a:not(.is-active):hover {
    background: transparent;
    box-shadow: none;
    color: var(--pc-text);
  }
  .pc-long-list-page .pc-filter-row--compact a:focus-visible,
  .pc-short-drama-page .pc-filter-row--compact a:focus-visible {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--pc-accent);
  }
}

.pc-long-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; }
.pc-long-grid-ad[hidden] { display: none; }

/* Wait for every server-rendered card before painting the grid's cover placeholders. */
.pc-short-drama-page .pc-short-drama-grid:not(:has(> [data-pc-grid-complete])),
.pc-long-list-page .pc-long-grid:not(:has(> [data-pc-grid-complete])) {
  visibility: hidden;
}

.pc-content-empty { display: flex; min-height: 280px; align-items: center; justify-content: center; flex-direction: column; gap: 8px; color: var(--pc-text-soft); }
.pc-content-empty strong { color: var(--pc-text); font-size: 18px; }
.pc-content-empty a { color: var(--pc-accent); }
.pc-short-drama-page .pc-short-drama-grid > .pc-content-empty { grid-column: 1 / -1; width: 100%; }
.pc-content-results {
  display: flex;
  min-width: 0;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 769px) {
  /* Keep short final pages aligned with the first page's two-row card grid. */
  .pc-long-list-page .pc-long-grid { min-height: calc(28.125% + 114.5px); align-content: start; }
}

/* PC short-video canvas, grounded from Figma 51065:403087. */
.pc-short-video-main { min-height: 965px; padding: 32px 0 46px; }
.pc-short-video-page .site-footer { margin-top: 0; }
.pc-short-video-stage { position: relative; width: 500px; height: 887px; margin: 0 auto; }
.pc-short-video-page .mobile-douyin-shell { position: relative; width: 500px; height: 887px; overflow: hidden; border-radius: 12px; background: #525252; }
/* Figma 51158:428420 竖屏；51158:428817 横屏舞台（stage），与 H5 mobile-douyin.css 同构 */
.pc-short-video-page .mobile-douyin-media {
  background: #525252 url("/static/images/mobile-douyin-placeholder-portrait.png?v=20261013-91-ph-1") center / cover no-repeat;
}
.pc-short-video-page .mobile-douyin-media[data-media-orientation="landscape"] { background: #000; }
.pc-short-video-page .mobile-douyin-media__stage { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.pc-short-video-page .mobile-douyin-media[data-media-orientation="landscape"] .mobile-douyin-media__stage {
  inset: auto;
  top: 50%;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: var(--douyin-stage-ratio, 375 / 214);
  max-height: 100%;
  transform: translateY(-50%);
  background: #525252 url("/static/images/mobile-douyin-placeholder-landscape.png?v=20261013-91-ph-1") center / cover no-repeat;
}
.pc-short-video-page .mobile-douyin-media[data-media-orientation="landscape"].has-video-frame .mobile-douyin-media__stage { background: #000; }
.pc-short-video-page .mobile-douyin-media,
.pc-short-video-page .mobile-douyin-media__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pc-short-video-page .mobile-douyin-media[data-media-orientation="landscape"] .mobile-douyin-media__video { object-fit: contain; }
.pc-short-video-page .mobile-douyin-media__frame-placeholder {
  position: absolute; inset: 0; z-index: 0; display: none; width: 100%; height: 100%;
  object-fit: cover; object-position: center; pointer-events: none;
}
.pc-short-video-page .mobile-douyin-media[data-media-orientation="landscape"] .mobile-douyin-media__frame-placeholder { display: block; }
.pc-short-video-page .mobile-douyin-media[data-media-orientation="landscape"].has-video-frame .mobile-douyin-media__frame-placeholder { display: none; }
.pc-short-video-page .mobile-douyin-media[data-media-orientation="landscape"] .mobile-douyin-media__shade { display: none; }
.pc-short-video-page .mobile-douyin-media__shade { position: absolute; right: 0; left: 0; pointer-events: none; }
.pc-short-video-page .mobile-douyin-media__shade--top { top: 0; height: 140px; background: linear-gradient(180deg, #000, transparent); }
.pc-short-video-page .mobile-douyin-media__shade--bottom { bottom: 0; height: 298px; background: linear-gradient(180deg, transparent, #000); }
.pc-short-video-page .mobile-douyin-player-toggle { position: absolute; top: 50%; left: 50%; z-index: 4; display: grid; width: 64px; height: 64px; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, 0.35); transform: translate(-50%, -50%); cursor: pointer; }
@media (min-width: 769px) {
  .pc-short-video-page .mobile-douyin-player-toggle { background: transparent; }
}
.pc-short-video-page .mobile-douyin-player-toggle.is-playing { opacity: 0; pointer-events: none; }
.pc-short-video-page .mobile-douyin-shell.is-player-loading .mobile-douyin-player-toggle { visibility: hidden; opacity: 0; pointer-events: none; }
.pc-short-video-page .mobile-douyin-player-toggle img { width: 30px; height: 30px; }
/* 信息区：标题 20/28 Medium、简介 16/22 @55%、标签 14/20，组间距 12 */
.pc-short-video-page .mobile-douyin-copy { position: absolute; right: 86px; bottom: 62px; left: 24px; z-index: 3; display: flex; flex-direction: column; gap: 12px; }
.pc-short-video-page .mobile-douyin-copy h1 { margin: 0; color: #fff; font-size: 20px; font-weight: 500; line-height: 28px; }
.pc-short-video-page .mobile-douyin-copy__description { margin: 0; color: rgba(255, 255, 255, 0.55); font-size: 16px; font-weight: 400; line-height: 22px; }
.pc-short-video-page .mobile-douyin-copy__description span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pc-short-video-page .mobile-douyin-copy__description.is-expanded span { display: inline; }
.pc-short-video-page .mobile-douyin-copy__description button { padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; font-size: 16px; font-weight: 400; line-height: 22px; }
.pc-short-video-page .mobile-douyin-copy__tags { display: flex; flex-wrap: wrap; gap: 6px; max-width: 291px; }
.pc-short-video-page .mobile-douyin-copy__tag { box-sizing: border-box; display: inline-flex; min-height: 28px; align-items: center; padding: 4px 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.05); color: #fff; font-size: 14px; font-weight: 400; line-height: 20px; }
/* 互动：Figma 40×40 动效画布；爱心/星星视觉约 22–23px；未激活白，激活粉/金 */
.pc-short-video-page .mobile-douyin-actions { position: absolute; right: 24px; bottom: 150px; z-index: 4; display: flex; flex-direction: column; gap: 10px; width: 40px; align-items: center; }
.pc-short-video-page .mobile-douyin-action { display: flex; width: 40px; min-width: 40px; padding: 0; border: 0; align-items: center; flex-direction: column; gap: 0; background: transparent; color: #dcdcdc; cursor: pointer; font-size: 12px; font-weight: 500; line-height: 18px; }
.pc-short-video-page .mobile-douyin-action .mobile-like-motion-graphic {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  overflow: visible;
}
.pc-short-video-page .mobile-douyin-action[data-mobile-like-motion] .mobile-like-motion-frame {
  width: 40px;
  height: 40px;
}
.pc-short-video-page .mobile-douyin-action[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="1"],
.pc-short-video-page .mobile-douyin-action[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="2"] {
  height: 44px;
}
.pc-short-video-page .mobile-douyin-action[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="0"],
.pc-short-video-page .mobile-douyin-action[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="1"],
.pc-short-video-page .mobile-douyin-action[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="2"],
.pc-short-video-page .mobile-douyin-action[data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="3"] {
  transform: translate(-50%, calc(-50% + 10px));
}
.pc-short-video-page .mobile-douyin-action .favorite-motion--action {
  --favorite-motion-icon-size: 40px;
  /* 金色 PNG；未激活反白，激活取消滤镜 */
  --favorite-motion-inactive-filter: brightness(0) invert(1);
}
.pc-short-video-page .mobile-douyin-action .favorite-motion__stage {
  width: 40px;
  height: 40px;
}
.pc-short-video-page .mobile-douyin-action [data-like-count],
.pc-short-video-page .mobile-douyin-action [data-action-count] { color: #dcdcdc; font-size: 12px; font-weight: 500; line-height: 18px; }
.pc-short-video-page .mobile-douyin-progress { position: absolute; right: 24px; bottom: 22px; left: 24px; z-index: 4; display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; gap: 11px; color: #fff; font-size: 14px; font-weight: 400; line-height: 20px; }
.pc-short-video-page .mobile-douyin-progress input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  accent-color: #fff;
}
.pc-short-video-page .mobile-douyin-progress input::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
}
.pc-short-video-page .mobile-douyin-progress input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: none;
}
.pc-short-video-page .mobile-douyin-progress input::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
}
.pc-short-video-page .mobile-douyin-progress input::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: #fff;
}
.pc-short-video-page .mobile-douyin-progress input::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: #fff;
}
.pc-short-video-page .mobile-douyin-player-loading { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 10px; background: rgba(1, 4, 6, 0.4); color: #fff; }
.pc-short-video-page .mobile-douyin-player-loading[hidden] { display: none; }
.pc-short-video-page .mobile-douyin-player-loading__spinner { width: 24px; height: 24px; border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: pc-spin .8s linear infinite; }
.pc-short-video-page .mobile-douyin-feed-status { position: absolute; top: 50%; left: 50%; z-index: 6; margin: 0; padding: 8px 14px; border-radius: 8px; background: rgba(0,0,0,.66); transform: translate(-50%,-50%); color: #fff; }
.pc-short-video-switch { position: absolute; top: 50%; left: calc(100% + 16px); display: flex; flex-direction: column; gap: 32px; transform: translateY(-50%); }
.pc-short-video-switch button { position: relative; display: grid; width: 36px; height: 36px; padding: 0; place-items: center; border: 0; border-radius: 18px; background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; }
.pc-short-video-switch button img { display: block; width: 24px; height: 24px; pointer-events: none; }
.pc-short-video-switch button:hover { background: var(--pc-accent); }
.pc-short-video-switch button:hover img { filter: brightness(0); }
@keyframes pc-spin { to { transform: rotate(360deg); } }

/* Both lists keep the same pagination-to-footer gap, including short pages. */
@media (min-width: 769px) {
  body.pc-long-list-page,
  body.pc-short-drama-page { display: flex; flex-direction: column; }
  .pc-long-list-page .pc-content-main,
  .pc-short-drama-page .pc-content-main { min-height: 0; flex: 1 0 auto; }
  .pc-long-list-page .pc-pagination,
  .pc-short-drama-page .pc-pagination { margin-top: auto; flex-shrink: 0; }
  .pc-long-list-page .site-footer,
  .pc-short-drama-page .site-footer { margin-top: 0; }
}

/* PC short-drama detail — Figma 51065:403143 / 51065:403311 */
.pc-drama-detail-page .pc-drama-detail { min-height: 1588px; }
.pc-drama-detail { display: flex; width: min(var(--pc-content-width), calc(100% - 48px)); margin: 0 auto; padding: 32px 0 72px; flex-direction: column; gap: 24px; }
.pc-drama-detail-page .pc-drama-detail__breadcrumb {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 14px;
  margin: 0;
  color: rgba(255, 255, 255, .9);
  font-size: 18px;
  line-height: 24px;
}
.pc-drama-detail-page .breadcrumb__back {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}
.pc-drama-detail-page .breadcrumb__back-icon--pc { display: block; width: 24px; height: 24px; }
.pc-drama-detail-page .breadcrumb__path {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.pc-drama-detail-page .breadcrumb__link,
.pc-drama-detail-page .breadcrumb a { color: rgba(255, 255, 255, .9); text-decoration: none; }
.pc-drama-detail-page .breadcrumb__link:hover,
.pc-drama-detail-page .breadcrumb a:hover { color: #ffb800; }
.pc-drama-detail-page .breadcrumb__sep { color: rgba(255, 255, 255, .55); }
.pc-drama-detail-page .breadcrumb__current {
  min-width: 0;
  color: rgba(255, 255, 255, .55);
  overflow-wrap: anywhere;
}
/* 剧名与「共N集 · 热度」同一行紧邻，不再两端拉开 */
.pc-drama-detail__heading { display: flex; align-items: center; gap: 24px; }
.pc-drama-detail__heading h1 {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  color: rgba(255, 255, 255, .9);
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  overflow-wrap: anywhere;
}
.pc-drama-detail__heading p {
  display: flex;
  flex: 0 0 auto;
  margin: 0;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .55);
  font-size: 16px;
  line-height: 22px;
  white-space: nowrap;
}
.pc-drama-detail__heading i { font-style: normal; }
/* 与视频详情一致：736 / #525252；占位层同 video-player__poster-layer */
.pc-drama-player {
  position: relative;
  width: 100%;
  height: 736px;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: #525252;
}
.pc-drama-player__video { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; background: #525252; }
/* Figma 51156:426372 — 中间 #525252，上下横条 #3D3D3D（44/736、42/736），中心 91漫剧水印 308/1200 */
.pc-drama-player__poster-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  background-color: #525252;
  background-image: url("/static/images/pc-video-detail-placeholder-logo.png?v=20261013-91-ph-1");
  background-position: center;
  background-repeat: no-repeat;
  background-size: calc(100% * 308 / 1200) auto;
}
.pc-drama-player__poster-layer::before,
.pc-drama-player__poster-layer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  background: #3d3d3d;
  pointer-events: none;
}
.pc-drama-player__poster-layer::before { top: 0; height: calc(100% * 44 / 736); }
.pc-drama-player__poster-layer::after { bottom: 0; height: calc(100% * 42 / 736); }
.pc-drama-player__poster-layer.is-hidden { opacity: 0; visibility: hidden; }
.pc-drama-player__poster,
.pc-drama-player__poster-backdrop {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.pc-drama-player__poster { object-fit: contain; pointer-events: none; }
.pc-drama-player__poster.is-hidden { opacity: 0; }
.pc-drama-player__poster-backdrop { object-fit: cover; filter: blur(24px) brightness(.5); transform: scale(1.08); pointer-events: none; }
.pc-drama-player__poster-layer.is-placeholder .pc-drama-player__poster,
.pc-drama-player__poster-layer.is-placeholder .pc-drama-player__poster-backdrop { opacity: 0; }
/* 画面中间播放键：与 .video-player .playBtn 对齐（play.svg 原生 84×84，圆底在 SVG 内） */
.pc-drama-player__toggle { position: absolute; top: 50%; left: 50%; z-index: 10; display: grid; width: 84px; height: 84px; padding: 0; place-items: center; border: 0; border-radius: 0; background: transparent; transform: translate(-50%, -50%); cursor: pointer; }
.pc-drama-player__toggle img { display: block; width: 84px; height: 84px; pointer-events: none; }
.pc-drama-player__toggle.is-playing { opacity: 0; pointer-events: none; }
.pc-drama-player__toggle:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 4px; }
.pc-drama-player[data-media-orientation="landscape"] .pc-drama-player__video { object-fit: cover; }
/* 片头占位：与 video-player__mobile-preroll-placeholder 同构 */
.pc-drama-preroll { position: absolute; inset: 0; z-index: 8; overflow: hidden; background: #525252; }
.pc-drama-preroll[hidden] { display: none; }
.pc-drama-preroll__placeholder {
  position: absolute;
  z-index: 1;
  inset: 0;
  background-color: #525252;
  background-image: url("/static/images/pc-video-detail-placeholder-logo.png?v=20261013-91-ph-1");
  background-position: center;
  background-repeat: no-repeat;
  background-size: calc(100% * 308 / 1200) auto;
}
.pc-drama-preroll__placeholder::before,
.pc-drama-preroll__placeholder::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 0;
  background: #3d3d3d;
  pointer-events: none;
}
.pc-drama-preroll__placeholder::before { top: 0; height: calc(100% * 44 / 736); }
.pc-drama-preroll__placeholder::after { bottom: 0; height: calc(100% * 42 / 736); }
.pc-drama-preroll__placeholder[hidden] { display: none !important; }
.pc-drama-preroll__media {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.pc-drama-preroll__media[hidden] { display: none !important; }
.pc-drama-preroll__media img { display: block; width: 100%; height: 100%; }
.pc-drama-preroll__backdrop { position: absolute; inset: 0; object-fit: cover; filter: blur(24px) brightness(.5); transform: scale(1.08); pointer-events: none; }
.pc-drama-preroll__image { position: relative; z-index: 1; object-fit: contain; }
/* 与视频详情片头 VIP 跳过同构：单钮 countdown | VIP跳过广告 */
.pc-drama-preroll__skip {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
  display: flex;
  height: 32px;
  padding: 0 12px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 16px;
  background: rgba(0, 0, 0, .58);
  color: #fff;
  font-size: 13px;
  line-height: 18px;
  cursor: pointer;
}
.pc-drama-preroll__skip:hover { border-color: var(--pc-accent); color: var(--pc-accent); }
.pc-drama-preroll__countdown { color: var(--pc-accent); font-variant-numeric: tabular-nums; }
.pc-drama-preroll__divider { width: 1px; height: 16px; background: rgba(255, 255, 255, .3); }
.pc-drama-preroll__skip-label { white-space: nowrap; }
/* Figma 51065:403173 — 工具栏 64 高 / pad 16；点赞·收藏图标盒 32×32，组内 gap 8、组间 12 */
.pc-drama-toolbar {
  display: flex;
  box-sizing: border-box;
  height: 64px;
  margin-top: -24px;
  padding: 16px;
  align-items: center;
  gap: 12px;
  border-radius: 0 0 12px 12px;
  background: var(--pc-surface);
  color: rgba(255, 255, 255, .55);
}
.pc-drama-toolbar button {
  display: inline-flex;
  height: 32px;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  /* 默认图标+数字：#fff 55% */
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
/* 点赞粉 / 收藏金，与视频详情一致 */
.pc-drama-toolbar__like.is-active { color: #ff4d67; }
.pc-drama-toolbar__favorite.is-active { color: #ffb800; }
/*
 * 稿面图标盒 32×32、矢量约 24；动效 PNG 有效区约 57%，
 * 帧/星画到 42px 使视觉约 24，并与点赞·收藏互相一致（原先 like 帧 40 / 星 30 不一致）。
 * 仅短剧 PC 工具条：长视频详情同尺寸规则必须放在 min-width:769px 内，
 * 否则 body.pc-long-detail-page 会在 H5 盖掉短剧默认 40 盒。
 */
.pc-drama-toolbar .mobile-like-motion-graphic {
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  overflow: visible;
  opacity: 1;
}
/*
 * 点赞 PNG：帧 0–3 有效区偏上（centerY≈0.25），需 +11px；
 * 帧 4–9 已近中线，保持居中。否则未点赞心形会比收藏星高约 10px。
 */
.pc-drama-toolbar [data-mobile-like-motion] .mobile-like-motion-frame {
  width: 42px;
  height: 42px;
  transform: translate(-50%, -50%);
}
.pc-drama-toolbar [data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="0"],
.pc-drama-toolbar [data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="1"],
.pc-drama-toolbar [data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="2"],
.pc-drama-toolbar [data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="3"] {
  width: 42px;
  height: 42px;
  transform: translate(-50%, calc(-50% + 11px));
}
/* 未点赞：白心已是 #fff，再压到 55%；选中恢复实色粉帧 */
.pc-drama-toolbar__like[aria-pressed="false"] .mobile-like-motion-frame {
  opacity: 0.55;
}
.pc-drama-toolbar__like[aria-pressed="true"] .mobile-like-motion-frame,
.pc-drama-toolbar__like.is-like-animating .mobile-like-motion-frame {
  opacity: 1;
}
/*
 * 未收藏：金 PNG → 白 55%，与点赞未激活 opacity 一致。
 * 用按钮 class 而非父级 .pc-drama-toolbar，长视频详情 H5（video-detail-mobile-info）才能命中。
 */
.pc-drama-toolbar__favorite .favorite-motion.favorite-motion--action {
  --favorite-motion-inactive-filter: brightness(0) invert(1) opacity(0.55);
}
.pc-drama-toolbar .favorite-motion.favorite-motion--action {
  --favorite-motion-icon-size: 42px;
  /* 未收藏：金 PNG → 白 55% */
  --favorite-motion-inactive-filter: brightness(0) invert(1) opacity(0.55);
  position: relative;
  display: block;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  overflow: visible;
  vertical-align: middle;
}
.pc-drama-tags { display: flex; gap: 8px; }
.pc-drama-tags span { padding: 4px 8px; border-radius: 4px; background: var(--pc-surface-soft); color: var(--pc-text-soft); font-size: 14px; }
.pc-drama-description { margin: 0; color: var(--pc-text-soft); font-size: 16px; line-height: 22px; }
/* Figma 51065:403272 — 选集：标题下金线 → 分段 pill → 10 列集数格 */
.pc-drama-episodes {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Figma 51065:403274 — 40×34 居中；选中条 Component 196：红底 34 + 左叠黄 24 */
.pc-drama-episodes__head {
  position: relative;
  display: flex;
  width: 40px;
  height: 34px;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0;
  isolation: isolate;
}
.pc-drama-episodes__mark {
  position: absolute;
  z-index: 2;
  top: 30px;
  left: 3px;
  width: 34px;
  height: 4px;
  border-radius: 12px;
  background: #de2900;
}
.pc-drama-episodes__mark::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 4px;
  border-radius: 12px;
  background: #ffb800;
}
.pc-drama-episodes h2 {
  z-index: 0;
  width: 40px;
  height: 28px;
  margin: 0;
  color: rgba(255, 255, 255, .9);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}
.pc-drama-episodes__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pc-drama-episode-ranges { display: flex; flex-wrap: wrap; gap: 12px; }
.pc-drama-episode-ranges button {
  box-sizing: border-box;
  height: 28px;
  padding: 4px 12px;
  border: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .55);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  cursor: pointer;
}
.pc-drama-episode-ranges button.is-active {
  background: #ffb800;
  color: #fff;
  font-weight: 500;
}
.pc-drama-episode-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 16px 12px;
}
.pc-drama-episode {
  position: relative;
  display: flex;
  box-sizing: border-box;
  height: 40px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 6px;
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .55);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  text-decoration: none;
}
.pc-drama-episode span { position: relative; z-index: 0; }
.pc-drama-episode[hidden] { display: none; }
.pc-drama-episode:hover { color: #ffb800; }
.pc-drama-episode.is-current {
  border-color: #ffb800;
  background: rgba(233, 181, 75, .1);
  color: #ffb800;
}
/* 角标仅「券/VIP」：左上 27×18，右下圆角 9，金色 */
.pc-drama-episode small {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: inline-flex;
  min-width: 27px;
  height: 18px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: 1px 6px;
  border-radius: 0 0 9px 0;
  background: linear-gradient(135deg, #ffe580 0%, #facc15 100%);
  color: #111;
  font-size: 10px;
  font-weight: 400;
  line-height: 16px;
  white-space: nowrap;
}

.pc-drama-detail-page .short-drama-vip-dialog,
.pc-long-detail-page .video-unlock-dialog { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
.pc-drama-detail-page .short-drama-vip-dialog[hidden],
.pc-drama-detail-page .short-drama-unlock-dialog__condition[hidden],
.pc-long-detail-page .video-unlock-dialog[hidden],
.pc-long-detail-page .video-unlock-dialog__condition[hidden] { display: none !important; }
.pc-drama-detail-page .short-drama-vip-dialog__backdrop,
.pc-long-detail-page .video-unlock-dialog__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(0,0,0,.72); }
.pc-drama-detail-page .short-drama-vip-dialog__stack,
.pc-long-detail-page .video-unlock-dialog__stack { position: relative; z-index: 1; display: flex; align-items: center; flex-direction: column; gap: 24px; }
.pc-drama-detail-page .short-drama-vip-dialog__panel,
.pc-long-detail-page .video-unlock-dialog__panel { width: 400px; overflow: hidden; border-radius: 12px; background: #0d0e0f; color: rgba(255,255,255,.9); }
.pc-drama-detail-page .short-drama-vip-dialog__panel:focus { outline: none; }
.pc-drama-detail-page .short-drama-vip-dialog__content {
  display: flex;
  box-sizing: border-box;
  min-height: 174px;
  flex-direction: column;
  gap: 12px;
  padding: 32px 24px 0;
  text-align: center;
}
.pc-drama-detail-page .short-drama-vip-dialog__title {
  margin: 0;
  color: rgba(255, 255, 255, .9);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  text-align: center;
}
.pc-drama-detail-page .short-drama-vip-dialog__divider {
  width: 100%;
  height: 1px;
  margin: 0;
  background: rgba(255, 255, 255, .05);
}
.pc-drama-detail-page .short-drama-unlock-dialog__condition {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: rgba(255, 255, 255, .55);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}
.pc-drama-detail-page .short-drama-unlock-dialog__condition p {
  margin: 0;
  color: rgba(255, 255, 255, .55);
  text-align: center;
}
.pc-drama-detail-page .short-drama-unlock-dialog__condition strong { color: #ffb800; font-weight: 400; }
.pc-drama-detail-page .short-drama-vip-dialog__balance {
  display: inline-flex;
  align-self: center;
  justify-content: center;
  color: rgba(255, 255, 255, .55);
  text-align: center;
}
.pc-drama-detail-page .short-drama-vip-dialog__balance-label { color: rgba(255, 255, 255, .55); }
.pc-drama-detail-page .short-drama-vip-dialog__balance strong { color: #ffb800; font-weight: 400; }
.pc-drama-detail-page .short-drama-vip-dialog__footer,
.pc-long-detail-page .video-unlock-dialog__footer { display: flex; height: 92px; box-sizing: border-box; padding: 24px; gap: 12px; }
.pc-drama-detail-page .short-drama-vip-dialog__footer a,
.pc-drama-detail-page .short-drama-vip-dialog__button,
.pc-long-detail-page .video-unlock-dialog__button {
  display: inline-flex;
  height: 44px;
  flex: 1;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: #ffb800;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  text-decoration: none;
  cursor: pointer;
}
.pc-drama-detail-page .short-drama-vip-dialog__button--secondary {
  background: rgba(255, 255, 255, .1);
  color: #989898;
}
.pc-drama-detail-page .short-drama-vip-dialog__button--secondary:disabled { color: var(--pc-text-soft); cursor: not-allowed; opacity: .55; }
.pc-drama-detail-page .short-drama-vip-dialog__button--primary { background: #ffb800; color: #fff; }
.pc-drama-detail-page .short-drama-vip-dialog__close,
.pc-long-detail-page .video-unlock-dialog__close { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.pc-drama-detail-page .short-drama-vip-dialog__close img,
.pc-long-detail-page .video-unlock-dialog__close img { display: block; width: 36px; height: 36px; }
.pc-drama-detail-page .short-drama-vip-dialog__button:focus-visible,
.pc-drama-detail-page .short-drama-vip-dialog__close:focus-visible {
  outline: 2px solid #ffb800;
  outline-offset: 2px;
}

/* 长视频解锁弹层 — Figma 51065:402858（观影券）/ 51065:403007（金币） */
.pc-long-detail-page .video-unlock-dialog__panel:focus { outline: none; }
.pc-long-detail-page .video-unlock-dialog__content {
  display: flex;
  box-sizing: border-box;
  height: 174px;
  flex-direction: column;
  gap: 12px;
  padding: 32px 24px 0;
  text-align: center;
}
.pc-long-detail-page .video-unlock-dialog[data-video-unlock-active-condition="coin"] .video-unlock-dialog__content { height: 208px; }
.pc-long-detail-page .video-unlock-dialog__title {
  margin: 0;
  color: rgba(255, 255, 255, .9);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  text-align: center;
}
.pc-long-detail-page .video-unlock-dialog__divider {
  width: 100%;
  height: 1px;
  margin: 0;
  background: rgba(255, 255, 255, .05);
}
.pc-long-detail-page .video-unlock-dialog__condition {
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: rgba(255, 255, 255, .55);
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
}
.pc-long-detail-page .video-unlock-dialog__condition p {
  margin: 0;
  color: rgba(255, 255, 255, .55);
  text-align: center;
}
.pc-long-detail-page .video-unlock-dialog__condition strong {
  color: #ffb800;
  font-weight: 400;
}
.pc-long-detail-page .video-unlock-dialog__balance {
  display: inline-flex;
  align-self: center;
  justify-content: center;
  color: rgba(255, 255, 255, .55);
  text-align: center;
}
.pc-long-detail-page .video-unlock-dialog__balance-label { color: rgba(255, 255, 255, .55); }
.pc-long-detail-page .video-unlock-dialog__balance strong { color: #ffb800; font-weight: 400; }
.pc-long-detail-page .video-unlock-dialog__button {
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  text-decoration: none;
}
.pc-long-detail-page .video-unlock-dialog__button--secondary {
  background: rgba(255, 255, 255, .1);
  color: #989898;
}
.pc-long-detail-page .video-unlock-dialog__button--primary {
  background: #ffb800;
  color: #fff;
}
.pc-long-detail-page .video-unlock-dialog__button:focus-visible,
.pc-long-detail-page .video-unlock-dialog__close:focus-visible {
  outline: 2px solid #ffb800;
  outline-offset: 2px;
}

@media (min-width: 769px) {
  body.pc-content-page { min-width: 0; }
  .pc-long-detail-page .video-detail { width: min(var(--pc-content-width), calc(100% - 48px)); min-height: 1588px; max-width: none; padding: 32px 0 72px; flex-direction: column; gap: 32px; }
  .pc-long-detail-page .video-detail__main { width: 100%; max-width: none; gap: 24px; }
  /* Figma 51065:402602–402606：视频/分类 = #FFF 55%；标题 = #FFF / 600 */
  .pc-long-detail-page .breadcrumb {
    height: 40px;
    display: flex;
    margin-bottom: 8px;
    align-items: center;
    gap: 18px;
    color: rgba(255, 255, 255, 0.55);
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
  }
  .pc-long-detail-page .breadcrumb__back {
    display: inline-flex;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    align-items: center;
    justify-content: center;
    background: none;
  }
  .pc-long-detail-page .breadcrumb__back-icon--pc {
    display: block;
    width: 24px;
    height: 24px;
  }
  .pc-long-detail-page .breadcrumb__path {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    align-items: center;
    gap: 6px;
  }
  /* 覆盖 video.css → base #000 90%/55%，深底必须用白 55% */
  .pc-long-detail-page .breadcrumb a,
  .pc-long-detail-page .breadcrumb__link {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
  }
  .pc-long-detail-page .breadcrumb a:hover,
  .pc-long-detail-page .breadcrumb__link:hover {
    color: #fff;
  }
  .pc-long-detail-page .breadcrumb__sep {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.55);
  }
  .pc-long-detail-page .breadcrumb__sep:has(+ .breadcrumb__current) {
    color: #fff;
  }
  .pc-long-detail-page .breadcrumb__current {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pc-long-detail-page .video-detail__app-rows,
  .pc-long-detail-page .video-detail__notice,
  .pc-long-detail-page .detail-banners,
  .pc-long-detail-page .video-detail__divider,
  .pc-long-detail-page .comment-section,
  .pc-long-detail-page .video-detail__title,
  .pc-long-detail-page .video-detail__tags,
  .pc-long-detail-page .video-detail__meta,
  .pc-long-detail-page .video-detail__actions { display: none; }
  .pc-long-detail-page .video-detail-mobile-tabs { display: none; }
  .pc-long-detail-page .video-detail-mobile-info { display: flex; flex-direction: column; gap: 24px; }
  .pc-long-detail-page .video-detail-mobile-info__title { display: none; }
  /* Figma 51156:426636：播放器下方操作条白 5%（紧邻占位图下沿） */
  .pc-long-detail-page .video-detail-mobile-info__stats { order: 1; display: flex; height: 64px; margin-top: -24px; padding: 0 16px; align-items: center; border-radius: 0 0 12px 12px; background: rgba(255, 255, 255, 0.05); color: var(--pc-text-soft); font-size: 14px; }
  .pc-long-detail-page .video-detail-mobile-info__views { display: none; }
  .pc-long-detail-page .video-detail-mobile-info__actions { display: flex; width: 100%; align-items: center; gap: 24px; }
  /* Figma 51065:402614：观影券 白 55%，数量 #0360fc */
  .pc-long-detail-page .video-detail-mobile-info__ticket { margin-left: auto; color: rgba(255, 255, 255, .55); font-size: 16px; line-height: 22px; }
  .pc-long-detail-page .video-detail-mobile-info__ticket-count,
  .pc-long-detail-page .video-detail-mobile-info__ticket strong { color: #0360fc; font-weight: 400; }
  .pc-long-detail-page .video-detail-mobile-info__stat { display: inline-flex; padding: 0; border: 0; align-items: center; gap: 8px; background: transparent; color: inherit; cursor: pointer; }
  /*
   * 点赞/收藏与短剧 PC 工具条同构 class（pc-drama-toolbar__like / __favorite +
   * mobile-like-motion-graphic / favorite-motion--action）；尺寸复用 32 盒 + 42 画布。
   * 必须放在 min-width:769px 内，避免 body.pc-long-detail-page 在 H5 盖掉短剧默认 40 盒。
   */
  .pc-long-detail-page .video-detail-mobile-info__actions .mobile-like-motion-graphic {
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    overflow: visible;
    opacity: 1;
  }
  .pc-long-detail-page .video-detail-mobile-info__actions [data-mobile-like-motion] .mobile-like-motion-frame {
    width: 42px;
    height: 42px;
    transform: translate(-50%, -50%);
  }
  .pc-long-detail-page .video-detail-mobile-info__actions [data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="0"],
  .pc-long-detail-page .video-detail-mobile-info__actions [data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="1"],
  .pc-long-detail-page .video-detail-mobile-info__actions [data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="2"],
  .pc-long-detail-page .video-detail-mobile-info__actions [data-mobile-like-motion] .mobile-like-motion-frame[data-mobile-like-frame="3"] {
    width: 42px;
    height: 42px;
    transform: translate(-50%, calc(-50% + 11px));
  }
  .pc-long-detail-page .video-detail-mobile-info__actions .favorite-motion.favorite-motion--action {
    --favorite-motion-icon-size: 42px;
    --favorite-motion-inactive-filter: brightness(0) invert(1) opacity(0.55);
    position: relative;
    display: block;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    overflow: visible;
    vertical-align: middle;
    opacity: 1;
  }
  .pc-long-detail-page .video-detail-mobile-info__actions .favorite-motion--action .favorite-motion__star {
    width: 42px;
    height: 42px;
  }
  .pc-long-detail-page .video-detail-mobile-info__tags { order: 2; display: flex; gap: 12px; }
  .pc-long-detail-page .video-detail-mobile-info__tag { padding: 4px 8px; border-radius: 4px; background: var(--pc-surface-soft); color: var(--pc-text-soft); font-size: 14px; line-height: 22px; }
  .pc-long-detail-page .video-player { height: 736px; border-radius: 12px 12px 0 0; background: #525252; }
  .pc-long-detail-page .video-player__mobile-preroll { position: absolute; inset: 0; z-index: 30; display: block; background: #525252; }
  .pc-long-detail-page .video-player__mobile-preroll-viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .pc-long-detail-page .video-player__mobile-preroll-viewport::-webkit-scrollbar { display: none; }
  .pc-long-detail-page .video-player__mobile-preroll-track { display: flex; width: 100%; height: 100%; }
  .pc-long-detail-page .video-player__mobile-preroll-slide { flex: 0 0 100%; scroll-snap-align: start; }
  .pc-long-detail-page .video-player__mobile-preroll-viewport,
  .pc-long-detail-page .video-player__mobile-preroll-slide,
  .pc-long-detail-page .video-player__mobile-preroll-link { position: relative; width: 100%; height: 100%; display: block; overflow: hidden; }
  .pc-long-detail-page .video-player__mobile-preroll-backdrop { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(24px) brightness(.5); transform: scale(1.08); pointer-events: none; }
  .pc-long-detail-page .video-player__mobile-preroll-image { position: relative; z-index: 1; width: 100%; height: 100%; display: block; object-fit: contain; }
  .pc-long-detail-page .video-player__mobile-ad { position: absolute; right: 16px; top: 16px; z-index: 34; display: flex; height: 32px; padding: 0 12px; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(0,0,0,.58); color: #fff; cursor: pointer; }
  .pc-long-detail-page .video-player__mobile-ad-divider { width: 1px; height: 16px; background: rgba(255,255,255,.3); }
  .pc-long-detail-page .video-player__mobile-preroll-pagination { position: absolute; bottom: 18px; left: 50%; z-index: 34; display: flex; gap: 6px; transform: translateX(-50%); }
  .pc-long-detail-page .video-player__mobile-preroll-dot { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.4); }
  .pc-long-detail-page .video-player__mobile-preroll-dot.is-active { width: 16px; border-radius: 8px; background: var(--pc-accent); }
  .pc-long-detail-page .video-detail__title { font-size: 24px; line-height: 32px; }
  .pc-long-detail-page .video-detail__tags-label { font-size: 16px; }
  .pc-long-detail-page .video-detail__tag { background: var(--pc-surface-soft); color: var(--pc-text-soft); }
  .pc-long-detail-page .video-detail__summary { padding: 0; border-radius: 0; background: transparent; }
  .pc-long-detail-page .detail-panel { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .pc-long-detail-page .detail-panel__divider,
  .pc-long-detail-page .detail-panel__mark { display: none; }
  .pc-long-detail-page .detail-panel__title { font-size: 20px; color: var(--pc-text); }
  .pc-long-detail-page .detail-panel__text { color: var(--pc-text-soft); font-size: 16px; line-height: 24px; }
  .pc-long-detail-page .video-detail__actions { border-color: rgba(255,255,255,.1); }
  .pc-long-detail-page .video-detail__action,
  .pc-long-detail-page .video-detail__download { color: var(--pc-text-soft); }
  .pc-long-detail-page .video-detail__notice { background: var(--pc-surface); border-color: rgba(255,255,255,.08); }
  .pc-long-detail-page .video-detail__aside { width: 100%; gap: 24px; }
  .pc-long-detail-page .video-detail__aside-mark { display: none; }
  .pc-long-detail-page .video-detail__aside-title { margin: 0; font-size: 20px; font-weight: 500; line-height: 28px; color: var(--pc-text); }
  .pc-long-detail-page .video-detail__aside-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .pc-long-detail-page .video-detail__aside-list .pc-long-video-card__title { min-height: 44px; font-size: 16px; line-height: 22px; }
}

@media (max-width: 1280px) and (min-width: 769px) {
  .pc-content-main,
  .pc-drama-detail,
  .pc-long-detail-page .video-detail { width: calc(100% - 48px); }
}

@media (max-width: 768px) {
  body.pc-content-page { min-width: 320px; }
  .pc-content-page .site-header { height: 60px; }
  .pc-content-page .site-header__inner { width: 100%; padding-right: 16px; padding-left: 16px; }
  .pc-content-page > .mobile-tabbar { display: flex; }
  .pc-long-list-page > .site-footer,
  .pc-short-video-page > .site-footer,
  .pc-short-drama-page > .site-footer { display: none; }

  .pc-content-main { width: 100%; min-height: calc(100svh - 60px); padding: 16px 16px 84px; gap: 16px; }
  .pc-filter-stack { gap: 10px; }
  .pc-filter-row { min-height: 34px; gap: 8px; }
  .pc-filter-row a { min-width: auto; height: 34px; padding: 0 12px; border-radius: 6px; font-size: 14px; line-height: 20px; }
  .pc-filter-row--compact { min-height: 30px; }
  .pc-filter-row--compact a { height: 30px; padding: 0 10px; }
  .pc-long-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .pc-drama-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; }
  .pc-drama-grid .mobile-short-drama-card__title { min-height: 40px; font-size: 14px; line-height: 20px; }
  body.pc-short-video-page { height: 100dvh; min-height: 100dvh; overflow: hidden; }
  .pc-short-video-page > .site-header,
  .pc-short-video-page > .to-top { display: none; }
  .pc-short-video-main { width: 100%; height: 100dvh; min-height: 100dvh; padding: 0; }
  .pc-short-video-stage { width: 100%; height: 100dvh; }
  .pc-short-video-page .mobile-douyin-shell { width: 100%; height: 100%; border-radius: 0; }
  .pc-short-video-page .mobile-douyin-media { bottom: var(--mobile-tabbar-height, 60px); }
  .pc-short-video-page .mobile-douyin-media__shade--top { height: min(36.95%, 300px); background: linear-gradient(180deg, #000, transparent); }
  .pc-short-video-page .mobile-douyin-media__shade--bottom { height: min(calc(53.7% + 80px), 516px); background: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .78) calc(100% - 80px), rgba(0, 0, 0, .78) 100%); }
  .pc-short-video-page .mobile-douyin-player-toggle { width: 58px; height: 58px; padding: 0; background: transparent; }
  .pc-short-video-page .mobile-douyin-player-toggle img { width: 24px; height: 24px; }
  .pc-short-video-switch { display: none; }
  .pc-short-video-page .mobile-douyin-copy { right: 68px; bottom: 139px; left: 16px; display: block; }
  .pc-short-video-page .mobile-douyin-copy h1 { margin: 0 0 12px; font-size: 18px; line-height: 24px; }
  .pc-short-video-page .mobile-douyin-copy__description { margin: 0 0 12px; font-size: 14px; line-height: 20px; }
  .pc-short-video-page .mobile-douyin-copy__tags { flex-wrap: nowrap; gap: 6px; }
  .pc-short-video-page .mobile-douyin-actions { right: 16px; bottom: 294px; width: 40px; gap: 10px; }
  .pc-short-video-page .mobile-douyin-action { min-width: 40px; }
  .pc-short-video-page .mobile-douyin-progress {
    right: 16px;
    bottom: calc(var(--mobile-tabbar-height, 60px) + 20px);
    left: 16px;
    z-index: 31;
    display: flex;
  }

  .pc-drama-detail { width: 100%; min-height: calc(100svh - 60px); padding: 16px 16px 80px; gap: 16px; }
  .pc-drama-detail-page .pc-drama-detail { min-height: calc(100svh - 60px); }
  .pc-drama-detail-page .pc-drama-detail__breadcrumb { min-height: 28px; font-size: 14px; line-height: 20px; gap: 10px; }
  .pc-drama-detail-page .breadcrumb__back-icon--pc { width: 20px; height: 20px; }
  .pc-drama-detail__heading { margin-top: 0; align-items: flex-start; flex-direction: column; gap: 6px; }
  .pc-drama-detail__heading h1 { font-size: 20px; line-height: 28px; }
  .pc-drama-detail__heading p { flex-wrap: wrap; font-size: 13px; white-space: normal; }
  .pc-drama-player { height: auto; aspect-ratio: 9 / 16; max-height: 70svh; border-radius: 10px 10px 0 0; }
  .pc-drama-toolbar { height: 56px; margin-top: -16px; padding: 12px; gap: 12px; }
  .pc-drama-tags { overflow-x: auto; }
  .pc-drama-description { font-size: 14px; line-height: 20px; }
  .pc-drama-episodes { gap: 16px; }
  .pc-drama-episodes__body { gap: 12px; }
  .pc-drama-episode-ranges { overflow-x: auto; flex-wrap: nowrap; }
  .pc-drama-episode-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 8px; }
  .pc-drama-detail-page .short-drama-vip-dialog__panel { width: min(360px, calc(100vw - 32px)); }
}