/* =========================================================
   x0video 夜间模式视频主题
   现代浏览器（Chrome/Edge/移动端），CSS 变量便于改配色
   ========================================================= */

:root {
  --x0-bg: #12141a;          /* 页面底色 */
  --x0-bg-soft: #1a1d26;     /* 卡片/容器底色 */
  --x0-bg-hover: #22263360;  /* 悬浮层 */
  --x0-border: #262b38;      /* 边框 */
  --x0-text: #cfd3dc;        /* 正文文字 */
  --x0-text-dim: #8a91a0;    /* 次要文字 */
  --x0-title: #f0f2f6;       /* 标题 */
  --x0-accent: #ff7d3b;      /* 强调色（橙） */
  --x0-rank1: #ff5f4e;       /* 排行前三 */
  --x0-rank2: #ff9d3b;
  --x0-rank3: #ffd23b;
  --x0-radius: 8px;
  --x0-shadow: 0 4px 16px rgba(0, 0, 0, .4);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--x0-bg);
  color: var(--x0-text);
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

a { color: var(--x0-text); text-decoration: none; transition: color .15s; }
a:hover { color: var(--x0-accent); }

img { max-width: 100%; border: 0; }

.x0-wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ---------------- 顶部 ---------------- */
.x0-header {
  background: var(--x0-bg-soft);
  border-bottom: 1px solid var(--x0-border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.x0-header-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  min-height: 56px;
  gap: 8px;
}

/* 中文注释：Logo 统一为 div，没有 h1 的默认粗体可用，这里显式声明字重保持原有观感 */
.x0-logo { margin: 0; font-size: 22px; font-weight: 700; }
.x0-logo a { color: var(--x0-title); }
.x0-logo a:hover { color: var(--x0-accent); }
.x0-logo-img { display: block; height: 32px; width: auto; max-width: 200px; object-fit: contain; }
@media (max-width: 600px) {
  .x0-logo-img { height: 26px; }
}

.x0-nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.x0-nav ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.x0-nav li { display: inline-block; list-style: none; }
.x0-nav ul li { display: inline-block; list-style: none; }
.x0-nav li a, .x0-nav ul li a { display: block; padding: 8px 14px; border-radius: var(--x0-radius); color: var(--x0-text); }

/* ---------------- 搜索 ---------------- */
.x0-search { display: flex; align-items: stretch; margin-left: 12px; }
.x0-search input {
  min-width: 0; width: 180px; padding: 7px 12px;
  background: var(--x0-bg); border: 1px solid var(--x0-border); border-right: 0;
  border-radius: var(--x0-radius) 0 0 var(--x0-radius);
  color: var(--x0-text); font-size: 13px; outline: none;
}
.x0-search input:focus { border-color: var(--x0-accent); }
.x0-search button {
  padding: 7px 16px; border: 1px solid var(--x0-accent);
  background: var(--x0-accent); color: #fff; font-size: 13px;
  border-radius: 0 var(--x0-radius) var(--x0-radius) 0; cursor: pointer;
}
.x0-search button:hover { filter: brightness(1.15); }

/* ---------------- 汉堡按钮与手机抽屉（桌面隐藏） ---------------- */
.x0-burger {
  display: none; flex-direction: column; justify-content: center;
  width: 40px; height: 40px; padding: 8px;
  /* 中文注释：WebKit 的 button 自带内部匿名盒，不重置 appearance 时 display:flex 管不了它的子元素；
     旧版 iOS 会因此退成收缩适配宽度，空 span 算出来就是 0 宽——线条高度有、宽度没 */
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 1px solid var(--x0-border); border-radius: var(--x0-radius); cursor: pointer;
}
/* 线条宽 100% 写死，不再依赖 flex 的 align-items:stretch（老 WebKit 上 stretch 不生效就没宽）；
   间距改用兄弟 margin 而不是 flex gap —— flex 容器的 gap 要 iOS 14.5+ 才支持 */
.x0-burger span { display: block; width: 100%; height: 2px; background: var(--x0-text); border-radius: 2px; }
.x0-burger span + span { margin-top: 5px; }
.x0-drawer {
  display: none;
  background: var(--x0-bg-soft); border-bottom: 1px solid var(--x0-border);
  padding: 12px 16px 16px;
}
/* 中文注释：抽屉打开时覆盖在页面内容上层，不推移文档流 */
.x0-drawer.open {
  display: block;
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 99;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
}
.x0-drawer .x0-search { margin: 0 0 10px; }
.x0-drawer .x0-search input { flex: 1; width: auto; }
.x0-drawer-nav ul, .x0-drawer-nav { display: block; margin: 0; padding: 0; list-style: none; }
.x0-drawer-nav li { display: block; list-style: none; }
.x0-drawer-nav li a, .x0-drawer-nav a {
  display: block; padding: 12px 10px; color: var(--x0-text);
  border-bottom: 1px solid var(--x0-border); text-decoration: none;
}

@media (max-width: 600px) {
  .x0-header-in { flex-wrap: nowrap; }
  .x0-nav { display: none; }
  .x0-search { display: none; }
  .x0-burger { display: flex; margin-left: auto; }
  .x0-search-m { display: flex; }
}
.x0-nav li a:hover, .x0-nav ul li a:hover { background: var(--x0-bg-hover); color: var(--x0-accent); }
.x0-nav li.on a, .x0-nav ul li.on a { color: var(--x0-accent); background: var(--x0-bg-hover); }

.x0-main { padding: 24px 16px 48px; }

/* ---------------- 区块标题 ---------------- */
.x0-block { margin-bottom: 36px; }

.x0-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-left: 4px solid var(--x0-accent);
  padding-left: 12px;
  margin-bottom: 16px;
}

.x0-block-title { margin: 0; font-size: 20px; }
.x0-block-title a { color: var(--x0-title); }
.x0-block-more { font-size: 13px; color: var(--x0-text-dim); }
.x0-block-more:hover { color: var(--x0-accent); }

.x0-page-title {
  font-size: 22px;
  color: var(--x0-title);
  margin: 0 0 16px;
  border-left: 4px solid var(--x0-accent);
  padding-left: 12px;
}

.x0-section-title {
  font-size: 18px;
  color: var(--x0-title);
  margin: 0 0 16px;
  border-left: 4px solid var(--x0-accent);
  padding-left: 12px;
}

.x0-crumbs { font-size: 13px; color: var(--x0-text-dim); margin-bottom: 16px; }
.x0-crumbs a { color: var(--x0-text-dim); }
.x0-crumbs a:hover { color: var(--x0-accent); }

/* ---------------- 分类/标签列表页标签区 ---------------- */
/* 按钮另起一行居中：容器不能用 flex 排（会把按钮挤回同一行），改用 text-align 居中行内级按钮 */
.x0-cate-tags { text-align: center; margin: 0 0 20px; }
/* 收起态高度 = 行数 x (胶囊 24px + 行距 8px) - 末行多算的 8px；胶囊高度靠下面写死的 line-height 保证可算 */
.x0-cate-tags-list {
  --x0-tags-rows: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: calc(var(--x0-tags-rows) * 32px - 8px);
  overflow: hidden;
}
.x0-cate-tags.is-open .x0-cate-tags-list { max-height: none; }
.x0-cate-tags-list .x0-tag {
  line-height: 20px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.x0-cate-tags-list .x0-tag.is-current { color: #fff; background: var(--x0-accent); }
/* 按钮默认带 hidden 属性，JS 判定标签确实溢出两行后才放出来 */
/* 故意不写 display：作者层的任何 display 都会盖掉浏览器 UA 的 [hidden]{display:none}，按钮就再也藏不掉了；
   保持默认的 inline-block，由容器的 text-align 把它居中 */
.x0-cate-tags-toggle {
  margin-top: 12px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--x0-border);
  border-radius: 20px;
  background: transparent;
  color: var(--x0-text-dim);
  font: inherit;
  font-size: 12px;
  line-height: 22px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.x0-cate-tags-toggle::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0 3px 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  vertical-align: middle;
  transition: transform .2s;
}
.x0-cate-tags.is-open .x0-cate-tags-toggle::after { transform: rotate(-135deg); margin-bottom: -2px; }
@media (hover: hover) {
  .x0-cate-tags-toggle:hover { color: var(--x0-accent); border-color: var(--x0-accent); }
}
@media (hover: none) {
  .x0-cate-tags-toggle:active { color: var(--x0-accent); border-color: var(--x0-accent); }
}

/* ---------------- 搜索结果页 ---------------- */
.x0-search-count { font-size: 13px; color: var(--x0-text-dim); margin: 0 0 16px; }
.x0-search-empty {
  background: var(--x0-bg-soft); border: 1px solid var(--x0-border);
  border-radius: var(--x0-radius); padding: 40px 20px; text-align: center;
  color: var(--x0-text-dim); font-size: 14px; margin-bottom: 24px;
}
.x0-search-empty p { margin: 0 0 8px; }
.x0-search-empty a { color: var(--x0-accent); }


/* ---------------- 区块主体：卡片流 + 热门排行 ---------------- */
.x0-block-body {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 20px;
  align-items: start;
}

.x0-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 16px;
}

.x0-card {
  background: var(--x0-bg-soft);
  border: 1px solid var(--x0-border);
  border-radius: var(--x0-radius);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}

.x0-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--x0-shadow);
}

.x0-card-cover {
  display: block;
  position: relative;
  aspect-ratio: 3 / 4;
  background: #0d0f14 center / cover no-repeat;
  overflow: hidden;
}

.x0-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}

.x0-card:hover .x0-card-cover img { transform: scale(1.05); }

.x0-card-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 44px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 16px;
  padding-left: 3px;  /* 视觉居中三角 */
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}

.x0-card:hover .x0-card-play { opacity: 1; }

.x0-card-title {
  margin: 10px 12px 4px;
  font-size: 15px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.x0-card-title a { color: var(--x0-title); }
.x0-card-title a:hover { color: var(--x0-accent); }

.x0-card-intro {
  margin: 0 12px 12px;
  font-size: 12px;
  color: var(--x0-text-dim);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;            /* 标准属性，需写在前缀之后 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.9em;
}

/* ---------------- 热门排行 ---------------- */
.x0-hot {
  background: var(--x0-bg-soft);
  border: 1px solid var(--x0-border);
  border-radius: var(--x0-radius);
  padding: 14px;
}

.x0-hot-title {
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--x0-title);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--x0-border);
}

.x0-hot-list { margin: 0; padding: 0; list-style: none; counter-reset: x0hot; }

.x0-hot-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--x0-border);
  font-size: 13px;
}

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

.x0-hot-rank {
  flex: 0 0 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: #2a2f3d;
  color: var(--x0-text-dim);
  border-radius: 4px;
  font-size: 12px;
}

.x0-hot-item.top1 .x0-hot-rank { background: var(--x0-rank1); color: #fff; }
.x0-hot-item.top2 .x0-hot-rank { background: var(--x0-rank2); color: #fff; }
.x0-hot-item.top3 .x0-hot-rank { background: var(--x0-rank3); color: #fff; }

.x0-hot-item a {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--x0-text);
}

.x0-hot-views { flex: 0 0 auto; color: var(--x0-text-dim); font-size: 12px; }

/* ---------------- 内容页 ---------------- */
.x0-post {
  background: var(--x0-bg-soft);
  border: 1px solid var(--x0-border);
  border-radius: var(--x0-radius);
  padding: 24px;
  margin-bottom: 28px;
}

.x0-post-title { margin: 0 0 10px; font-size: 24px; color: var(--x0-title); line-height: 1.35; }

.x0-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: var(--x0-text-dim);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--x0-border);
  margin-bottom: 16px;
}

.x0-post-meta a { color: var(--x0-text-dim); }
.x0-post-meta a:hover { color: var(--x0-accent); }

.x0-player {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--x0-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-size: 14px;
  margin-bottom: 20px;
  overflow: hidden;
}

.x0-post-body { font-size: 15px; line-height: 1.8; word-break: break-word; }
.x0-post-body img { border-radius: var(--x0-radius); }
.x0-post-body p { margin: 0 0 1em; }

.x0-post-tags { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }

.x0-tag {
  display: inline-block;
  padding: 2px 10px;
  background: #232836;
  border-radius: 20px;
  font-size: 12px;
  color: var(--x0-text-dim);
}

.x0-tag:hover { color: var(--x0-accent); background: #2c3242; }

.x0-related { margin-bottom: 28px; }

/* ---------------- 评论 ---------------- */
.x0-comments {
  background: var(--x0-bg-soft);
  border: 1px solid var(--x0-border);
  border-radius: var(--x0-radius);
  padding: 24px;
}

.x0-cmt { margin: 0 0 14px; padding: 12px; list-style: none; background: #171a22; border-radius: var(--x0-radius); }
.x0-cmt ul { margin: 10px 0 0; padding-left: 16px; list-style: none; }

.x0-cmt-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; margin-bottom: 8px; }
.x0-cmt-avatar { border-radius: 50%; }
.x0-cmt-name a { color: var(--x0-accent); }
.x0-cmt-time { color: var(--x0-text-dim); }
.x0-cmt-reply { margin-left: auto; font-size: 12px; color: var(--x0-text-dim); }
.x0-cmt-body { font-size: 14px; line-height: 1.7; word-break: break-word; }

.x0-cmtpost { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--x0-border); }
.x0-cmtpost-top { margin: 0 0 10px; }
.x0-cmtpost-top a { color: var(--x0-title); font-weight: bold; }

.x0-input, .x0-textarea {
  background: #14171f;
  border: 1px solid var(--x0-border);
  border-radius: var(--x0-radius);
  color: var(--x0-text);
  padding: 8px 12px;
  max-width: 100%;
  font: inherit;
}

.x0-input:focus, .x0-textarea:focus { outline: none; border-color: var(--x0-accent); }
.x0-textarea { width: 100%; resize: vertical; }

.x0-btn {
  background: var(--x0-accent);
  color: #fff;
  border: 0;
  border-radius: var(--x0-radius);
  padding: 8px 22px;
  font: inherit;
  cursor: pointer;
  transition: opacity .15s;
}

.x0-btn:hover { opacity: .85; }

/* ---------------- 分页 ---------------- */
.x0-pagebar { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 28px 0; }

.x0-pb {
  min-width: 34px;
  padding: 5px 10px;
  text-align: center;
  background: var(--x0-bg-soft);
  border: 1px solid var(--x0-border);
  border-radius: var(--x0-radius);
  color: var(--x0-text);
  font-size: 13px;
}

.x0-pb:hover { border-color: var(--x0-accent); color: var(--x0-accent); }
.x0-pb.now { background: var(--x0-accent); border-color: var(--x0-accent); color: #fff; }

/* ---------------- 404 ---------------- */
.x0-nf { text-align: center; padding-top: 60px; }
.x0-nf-code { font-size: 90px; margin: 0; color: var(--x0-accent); }
.x0-nf-text { color: var(--x0-text-dim); }
.x0-nf-text a { color: var(--x0-accent); }

/* ---------------- 底部 ---------------- */
.x0-footer {
  border-top: 1px solid var(--x0-border);
  background: var(--x0-bg-soft);
  padding: 20px 0;
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: var(--x0-text-dim);
}

.x0-footer a { color: var(--x0-text-dim); }
.x0-footer a:hover { color: var(--x0-accent); }
.x0-powered, .x0-copyright { margin: 4px 0; }

/* ---------------- 响应式 ---------------- */
@media (max-width: 992px) {
  .x0-block-body { grid-template-columns: 1fr; }
  .x0-hot { order: -1; }
  .x0-hot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: 16px; }
  .x0-hot-item.top2 .x0-hot-rank, .x0-hot-item.top3 .x0-hot-rank { background: var(--x0-rank1); }
}

@media (max-width: 600px) {
  .x0-main { padding: 16px 12px 36px; }
  .x0-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .x0-card-title { font-size: 13px; margin: 8px 10px 4px; }
  .x0-card-intro { display: none; }
  .x0-post { padding: 16px; }
  .x0-post-title { font-size: 20px; }
  .x0-logo { font-size: 18px; }
  .x0-comments { padding: 16px; }
}

/* =========================================================
   视频播放页（template/video.php）
   全部样式限定在 .x0-vp 作用域，首页/列表页/单页不受影响
   ========================================================= */

/* 播放页比全站宽 200px，给播放器留出优酷式双列 */
.x0-vp { max-width: 1400px; }

/* 一行两列：左列是一个 wrapper（内部普通流：播放器在上、推荐区在下），右列是信息栏。
   刻意不让右栏跨行：栅格只共享“行”，一旦右栏纵向跨两行，它增高就会被平均分给左右共用的两行，
   点“展开更多”时推荐区就会被顶下去 */
.x0-vp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  column-gap: 20px;
  /* 中文注释：双列时只靠 column-gap，纵向没间距；≤1100 塌成单列后 stage / side / reco 在同一栅格
     里纵向相叠，row-gap 为 0 会让工具条按钮直接贴住信息卡片上边，所以行间距也得给 */
  row-gap: 12px;
  align-items: start;
}

.x0-vp-left { min-width: 0; }
.x0-vp-stage { min-width: 0; }
.x0-vp-side  { min-width: 0; }
.x0-vp-reco  { min-width: 0; margin-top: 26px; }

/* ---------------- 播放器 ---------------- */
.x0-vp .x0-player {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--x0-radius);
  overflow: hidden;
  margin-bottom: 12px;
}

.x0-player-tip {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #555;
  font-size: 14px;
}

/* 中文注释：插件接管后隐藏占位文案；不支持 :has 的老浏览器靠下面两条层级规则兜底 */
.x0-vp .x0-player:has(.htt_dplayer_group) .x0-player-tip { display: none; }
.x0-vp .x0-player .htt_dplayer_group { position: relative; z-index: 1; height: 100% !important; text-align: left !important; }
/* 中文注释：原先给 FluidPlayer 影院模式、后来改名给 DPlayer 页面全屏的那组层叠+裁切补丁已删除——
   插件侧把网页全屏的入口按钮整个摘掉了（该构建里它是 fullScreen.toggle('web') 的唯一触发源，快捷键表只有 32/37/39/38/40），
   .dplayer-fulled 再也不会出现在 DOM 里，主题留着就是死规则 */

/* ---------------- 播放器下方工具条 ---------------- */
.x0-vp-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 13px;
  color: var(--x0-text-dim);
}
.x0-vp-bar a { color: var(--x0-text-dim); }
.x0-vp-bar a:hover { color: var(--x0-accent); }

.x0-vp-copy {
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--x0-border);
  border-radius: var(--x0-radius);
  color: var(--x0-text);
  font-size: 13px;
  cursor: pointer;
}
.x0-vp-copy:hover { border-color: var(--x0-accent); color: var(--x0-accent); }

/* 选集浮层的触发按钮：默认不出现，只在选集区不在播放器右侧的 ≤1100 段里显出来；
   margin-left:auto 让它始终钉在工具条最右（PC 下它是 display:none，不生成盒子也不会拉开空洞） */
.x0-vp-epsbtn {
  display: none;
  margin-left: auto;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--x0-border);
  border-radius: var(--x0-radius);
  color: var(--x0-text);
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ---------------- 右侧信息栏 ---------------- */
.x0-vp-side {
  background: var(--x0-bg-soft);
  border: 1px solid var(--x0-border);
  border-radius: var(--x0-radius);
  padding: 16px;
}

.x0-vp-title {
  margin: 0 0 12px;
  font-size: 19px;
  line-height: 1.35;
  color: var(--x0-title);
}

/* 原来的 .x0-vp-cover 封面块已取消：海报改由正文里的 img 用 CSS 排到左列，规则见下方 .x0-vp-body */

/* 3 行截断：line-height 1.6 x 3 = 4.8em；用 content-box 保证内边距和分隔线不会吃掉这 3 行 */
.x0-vp-intro {
  box-sizing: content-box;
  margin-top: 0;
  padding-top: 14px;
  border-top: 1px dashed var(--x0-border);
  font-size: 13px;
  line-height: 1.6;
  color: var(--x0-text-dim);
  max-height: 4.8em;
  overflow: hidden;
}
.x0-vp-intro p { margin: 0 0 6px; }
.x0-vp-intro img { max-width: 100%; border-radius: 6px; }
.x0-vp-intro.is-open { max-height: none; }

.x0-vp-more {
  margin-top: 6px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--x0-accent);
  font-size: 12px;
  cursor: pointer;
}

.x0-vp-body {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--x0-text);
  word-break: break-word;
}
.x0-vp-body > *:first-child { margin-top: 0; }
.x0-vp-body p { margin: 0 0 .1em; }
.x0-vp-body img { max-width: 100%; border-radius: 6px; }

/* 采集文章正文最多一张图（UEditor 写入 class="ue-image"）：图左文右。
   开关用 :has(img)，无图文章、以及不支持 :has 的老浏览器都整组失效，自动退回普通上下排布，
   不会把文字挤进窄栏；左列写成 auto 而不是固定 156px，是为了让“没被钉住的段落”占满整行 */
.x0-vp-body:has(img) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: start;
  /* 文字行数多时不撑高右栏：整块锁死在与海报等高的 208px 内，多出部分只内部滚动 */
  max-height: 208px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
}
/* 图片所在的块钉到左列并跨满行：grid 会先放置显式定位的项，
   所以采集内容里“图在文字前”和“图在文字后”两种排版都稳定落在左边；
   sticky + z-index 让正文向下滚时海报钉在原地不动；
   后两条选择器兼容图片被包在 <p style="text-align:center"> 或 <a> 里的情况（管理员手动补图时可能点居中）*/
.x0-vp-body > img:first-of-type,
.x0-vp-body > :is(p, a):has(> img:only-child) {
  grid-column: 1;
  grid-row: 1 / span 99;
  position: sticky;
  top: 0;
  z-index: 1;
  margin: 0;
  text-align: left;
}
/* 海报框：固定 3:4 竖版，超出部分裁掉而不是拉伸；float 在 grid item 上不生效，
   所以编辑器里选了左/右浮动也影响不到这里 */
.x0-vp-body > img:first-of-type,
.x0-vp-body > :is(p, a):has(> img:only-child) > img {
  display: block;
  width: 156px;
  height: 208px;
  object-fit: cover;
  border-radius: 6px;
  background: #0d0f14;
}
/* 万一采到多张图，第二张起跨满整行，不挤进右边窄栏 */
.x0-vp-body > img:not(:first-of-type) { grid-column: 1 / -1; }
/* 海报被源站防盗链挡掉时由 JS 加类退回单列，同时取消高度锁止，见 video.php 里的 initBodyImg */
.x0-vp-body.x0-vp-solo { display: block; max-height: none; overflow: visible; }
/* 中文注释：真机 iOS 上下面海报的 position:sticky 不生效（Blink 与 Chrome 设备模拟均正常），
   属 WebKit 对 grid 滚动容器内 sticky 的兼容问题；已确认不修，别再往 overscroll-behavior 方向找 */
.x0-vp-side .x0-post-tags { margin-top: 14px; }

/* ---------------- 暗色细滚动条（播放页正文与选集区共用） ----------------
   原先的 #2a2f3d 不透明滑块在深色卡片上像一条硬边，这里改成：轨道全透明 + 半透明白滑块 + 悬停靠主题橙 */
.x0-ep-panel,
.x0-vp-body:has(img) {
  scrollbar-width: thin;                                  /* Firefox 64+ */
  scrollbar-color: rgba(255, 255, 255, .16) transparent;  /* Firefox 轨道必须透明，否则是系统浅灰底 */
}
/* Chrome / Edge / Safari：width 管竖向，height 管手机选集区那根横向 */
.x0-ep-panel::-webkit-scrollbar,
.x0-vp-body:has(img)::-webkit-scrollbar { width: 5px; height: 5px; }
.x0-ep-panel::-webkit-scrollbar-track,
.x0-vp-body:has(img)::-webkit-scrollbar-track,
.x0-ep-panel::-webkit-scrollbar-corner,
.x0-vp-body:has(img)::-webkit-scrollbar-corner { background: transparent; }
.x0-ep-panel::-webkit-scrollbar-thumb,
.x0-vp-body:has(img)::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .14);
  border-radius: 5px;
}
/* 悬停 / 拖动时才上主题橙，平时保持不抢视 */
.x0-ep-panel::-webkit-scrollbar-thumb:hover,
.x0-ep-panel::-webkit-scrollbar-thumb:active,
.x0-vp-body:has(img)::-webkit-scrollbar-thumb:hover,
.x0-vp-body:has(img)::-webkit-scrollbar-thumb:active {
  background: rgba(255, 125, 59, .55);
}

/* ---------------- 集数区（按钮由播放器插件搬入 .x0-ep-panel） ---------------- */
.x0-vp-eps {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--x0-border);
}

.x0-vp-eps-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;   /* 中文注释：与侧栏5 模块标题同一级，比 .x0-section-title（18px 粗体）低一档 */
  color: var(--x0-title);
}
.x0-vp-eps-head em { font-style: normal; font-size: 12px; color: var(--x0-text-dim); }

/* 浮层里的关闭按钮与遮罩：基础态一律不显示，显示与否完全由 ≤1100 那一段和 JS 切的类名决定 */
.x0-ep-close {
  display: none;
  margin-left: auto;
  width: 28px;
  height: 28px;
  padding: 0;
  background: #232836;
  border: 1px solid var(--x0-border);
  border-radius: 4px;
  color: var(--x0-text-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.x0-ep-mask { display: none; }
/* 新增的两个可点元素同样走设备分档：真悬停才给 :hover，触屏只给按下态 */
@media (hover: hover) {
  .x0-vp-epsbtn:hover, .x0-ep-close:hover { border-color: var(--x0-accent); color: var(--x0-accent); }
}
@media (hover: none) {
  .x0-vp-epsbtn:active, .x0-ep-close:active { border-color: var(--x0-accent); color: var(--x0-accent); }
}

/* 区间快滚按钮：集数多于 24 时才由 JS 注入，没注入时容器不生成盒子，不留空行 */
/* 去掉触屏点击时那层系统绘制的灰黑遮罩；这个属性可继承，写在容器上就盖住整排按钮，
   按下反馈由下面那组 :active 负责，不会因去掉遮罩而变成“点了没反应” */
.x0-ep-jump { display: none; -webkit-tap-highlight-color: transparent; }
.x0-ep-jump.is-on {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  overflow-x: auto;
  /* 这排按钮靠最后一颗被截断来提示可横滑，不再占一条滚动条 */
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.x0-ep-jump.is-on::-webkit-scrollbar { display: none; }
.x0-ep-jump button {
  flex: 0 0 auto;
  padding: 3px 10px;
  background: #232836;
  border: 1px solid var(--x0-border);
  border-radius: 4px;
  color: var(--x0-text-dim);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
/* 中文注释：触屏没有悬停这个状态，:hover 会被 tap 钉住直到点了别处，留下一个像“当前档位”的假描边；
   所以悬停反馈只在能真悬停的设备上启用，触屏改用按下时才有的 :active */
@media (hover: hover) {
  .x0-ep-jump button:hover { border-color: var(--x0-accent); color: var(--x0-accent); }
}
@media (hover: none) {
  /* 中文注释：只改 1px 描边太弱 —— 手指正盖住整颗小按钮，描边变化看不见，
     按下也只有一百毫秒，所以触屏下改成整颗填充主题橙 + 轻微缩小；
     写在 :active 里而不是默认态，抬手就恢复，不会像卡住的 :hover 那样留“假描边”。
     .is-press 是 JS 在 touchstart 上即时加的兜底 —— iOS 不进 :active 时靠它走同一条样式 */
  .x0-ep-jump button:active, .x0-ep-jump button.is-press {
    border-color: var(--x0-accent);
    background: var(--x0-accent);
    color: #fff;
    transform: scale(.93);
  }
}

.x0-ep-panel {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  /* 中文注释：浮层态下面板自己可滚，滑到边界不能带动背页 */
  overscroll-behavior: contain;
  /* 同上：分集面板里的可点元素也不画系统点击遮罩（不支持的浏览器忽略本行，维持默认） */
  -webkit-tap-highlight-color: transparent;
}

/* 集数格子的定宽方格（grid + 窄格内的去内边距、居中、省略号）已写进 DPlayer 插件自己的 core style，主题侧不再重复；
   中文注释：格子宽 44px 是按“只显示数字”算的，后台「合并分集」已填 {n}；若改回“第{n}集”，三位数集号会被省略号截断 */
/* 集数格子同理：只有真悬停设备才给 hover，触屏用按下态，选完不残留描边 */
@media (hover: hover) {
  .x0-ep-panel .htt_dplayer_switch span:hover { border-color: var(--x0-accent) !important; color: var(--x0-accent) !important; }
}
@media (hover: none) {
  /* 中文注释：集数格子的按下态就不能用实心橙底 —— 当前集已经是实心橙，两个一个样就分不清了；
     这里用一层浅橙底 + 描边，既能看出“点到了”，又不会伪装成选中项 */
  .x0-ep-panel .htt_dplayer_switch span:active {
    border-color: var(--x0-accent) !important;
    background: rgba(255, 125, 59, .22) !important;
    color: var(--x0-accent) !important;
  }
}
/* 当前集：把插件内联的 #084dad 改成本主题橙 */
.x0-ep-panel .htt_dplayer_switch span[style*="background"] {
  border-color: var(--x0-accent) !important;
  background: var(--x0-accent) !important;
  color: #fff !important;
}

/* ---------------- 侧栏5 模块（网站分类 / 站点标签等） ---------------- */
/* 中文注释：侧栏5 为空时 .x0-vp-side5 里无任何子元素，高度为 0，不会多出间距 */
.x0-vp-side5 .function { margin: 0 0 16px; padding-top: 14px; border-top: 1px solid var(--x0-border); }
.x0-vp-side5 .function:last-child { margin-bottom: 0; }
/* 中文注释：侧栏5 里第一个模块的上实线，要跟上方的标签胶囊 / 选集区拉开距离；
   选集区改成浮层后脱离文档流，它原来那份 margin-top 也就没了，所以间距补在这里；
   用 :first-child 而不是给 .x0-vp-side5 本身加 margin，这样侧栏5 为空时不会多出 16px 空白 */
.x0-vp-side5 .function:first-child { margin-top: 16px; }
.x0-vp-side5 .function_t { margin: 0 0 10px; font-size: 16px; font-weight: 600; color: var(--x0-title); }
/* 中文注释：dd 默认有 40px 缩进，必须归零 */
.x0-vp-side5 .function_c { margin: 0; font-size: 13px; color: var(--x0-text-dim); }
.x0-vp-side5 .function_c ul { margin: 0; padding: 0; list-style: none; }
.x0-vp-side5 .function_c li { padding: 4px 0; border-bottom: 1px dashed var(--x0-border); }
.x0-vp-side5 .function_c li:last-child { border-bottom: 0; }
.x0-vp-side5 .function_c a { color: var(--x0-text); }
.x0-vp-side5 .function_c a:hover { color: var(--x0-accent); }
.x0-vp-side5 .ul-subcates { margin: 2px 0 6px; padding-left: 14px; }

/* ---------------- 侧栏5：网站分类模块每行两个 ----------------
   靠模块的 HTML ID（divCatalog）锁定，侧栏5 里的其他模块不会被误伤；
   后台「模块管理」里把这个 ID 改成别的值，下面五条选择器要跟着改。
   模块类型可能是 ul 或 div（div 时 li 直接挂在 div 下），所以容器那一条两种都写 */
.x0-vp-side5 #divCatalog .function_c > ul,
.x0-vp-side5 #divCatalog .function_c > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 中文注释：横线从“每格底部”改成“每格顶部”，首行两格不画：
   行与行之间一定有线，列表底部不会多一条收尾线，也不会因为分类总数是偶数而出现“半行横线” */
.x0-vp-side5 #divCatalog .function_c li {
  padding: 4px 0;
  border-bottom: 0;
  border-top: 1px dashed var(--x0-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;   /* 分类名一般 2~4 字，这一行只是防长名撑破格子 */
}
/* 只适用于无子分类的平铺列表（你确认过没有子分类） */
.x0-vp-side5 #divCatalog .function_c li:nth-child(-n+2) { border-top: 0; }
/* 竖虚线：画在左列每格右边缘；同一行两格等高，所以竖线上下连续 */
.x0-vp-side5 #divCatalog .function_c li:nth-child(odd) {
  padding-right: 8px;
  border-right: 1px dashed var(--x0-border);
}
.x0-vp-side5 #divCatalog .function_c li:nth-child(even) { padding-left: 8px; }

/* ---------------- 侧栏5：标签模块固定每行三个 ----------------
   锚点用模块的 HTML ID（divTags），与上面 divCatalog 同一套写法，也不再依赖 :has；
   标签名后面的数量 span 已在主题覆盖模板 template/module-tags.php 里删掉，
   所以不能再用 .tag-count 当锚点，否则胶囊布局整块失效 */
.x0-vp-side5 #divTags .function_c > ul,
.x0-vp-side5 #divTags .function_c > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.x0-vp-side5 #divTags .function_c li { padding: 0; border: 0; }
/* 中文注释：a 撑满整格，胶囊宽度随行内格子等分；长标签名单行截断，不撑破格子 */
.x0-vp-side5 #divTags .function_c li > a,
.x0-vp-side5 #divTags .function_c div > a {
  display: block;
  padding: 6px 4px;
  background: #232836;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--x0-text-dim);
}
.x0-vp-side5 #divTags .function_c li > a:hover,
.x0-vp-side5 #divTags .function_c div > a:hover { background: #2c3242; color: var(--x0-accent); }

/* ---------------- 大家都在看：6 列 x 3 行 ---------------- */
.x0-vp .x0-section-title { margin-bottom: 12px; }
.x0-vp .x0-grid { grid-template-columns: repeat(6, 1fr); gap: 12px; }
.x0-vp .x0-card-title { font-size: 13px; margin: 8px 8px 2px; }
.x0-vp .x0-card-intro {
  margin: 0 8px 8px;
  min-height: 0;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

/* ---------------- 播放页响应式 ---------------- */
@media (max-width: 1200px) {
  .x0-vp .x0-grid { grid-template-columns: repeat(5, 1fr); }
}

/* 中文注释：塌成单列后顺序为 播放器 -> 信息栏(含选集) -> 大家都在看；
   wrapper 用 display:contents 拆成不生成盒子，三个块重新变成栅格直接子项，再按 grid-row 定序 */
@media (max-width: 1100px) {
  .x0-vp-grid { grid-template-columns: 1fr; }
  .x0-vp-left { display: contents; }
  .x0-vp-stage { grid-row: 1; }
  .x0-vp-side  { grid-row: 2; }
  .x0-vp-reco  { grid-row: 3; }
  .x0-vp .x0-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ---------------- ≤1100：选集区收进底部浮层 ----------------
   中文注释：单列段里选集区跑到播放器下面很远，画面和选集不同屏，所以就地把它呈现成浮层；
   DOM 不动也不克隆 —— 插件按 .x0-ep-panel 这个类名搬按钮，多一个同名容器就会塞两份；
   变成 fixed 后它自然不再占文档流，页面里原来那块选集区就消失了 */
@media (max-width: 1100px) {
  .x0-vp-epsbtn { display: inline-block; }
  .x0-ep-close { display: block; }
  #x0-vp-eps {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 120;                    /* 顶栏是 100，必须盖过它 */
    max-height: 82vh;
    margin: 0;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    background: var(--x0-bg-soft);
    border-top: 1px solid var(--x0-border);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .45);
    overflow: hidden;
    visibility: hidden;              /* 收起时连 Tab 键也进不去，不能只靠移出屏幕 */
    transform: translateY(105%);
    transition: transform .28s ease, visibility 0s linear .28s;
  }
  #x0-vp-eps.open {
    visibility: visible;
    transform: none;
    transition: transform .28s ease, visibility 0s;
  }
  .x0-ep-mask.on {
    display: block;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 119;
    background: rgba(0, 0, 0, .55);
  }
  /* 浮层里空间比内嵌版充裕，面板从 224px 放宽到约 45vh，一屏多看几行 */
  #x0-vp-eps .x0-ep-panel { max-height: 45vh; }
  #x0-vp-eps .x0-vp-eps-head { margin-bottom: 12px; }
}

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

@media (max-width: 600px) {
  .x0-vp .x0-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .x0-vp .x0-card-intro { display: none; }
  .x0-vp-side { padding: 14px; }
  .x0-vp-title { font-size: 17px; }
  /* 中文注释：面板高度不再写死 224px，≤1100 那段已经是浮层态，统一听 45vh 那条 */
  .x0-ep-panel { overflow-x: hidden; overflow-y: auto; }
}

/* ---------------- 触屏输入框字号（防 iOS 聚焦自动放大页面） ----------------
   中文注释：iOS Safari 聚焦字号小于 16px 的输入框时会自动放大整个视口，而且不会自己缩回；
   这里只在触屏设备上把字号提到 16px 卡过阈值，PC 端字号完全不变。
   搜索框上下 padding 由 7px 降到 6px，用来抵消字号撑高的增量，整组高度基本不动。
   注：这比在 viewport 里加 user-scalable=no 更安全 —— 后者会把用户手动缩放整个关掉，是无障碍倒退 */
@media (hover: none) {
  .x0-search input, .x0-drawer .x0-search input, .x0-input, .x0-textarea { font-size: 16px; }
  .x0-search input { padding: 6px 12px; }
}