/* =========================================================
   x0hongguo 深色短剧主题
   现代浏览器（Chrome/Edge/移动端），CSS 变量便于改配色
   ========================================================= */

:root {
  --x0hg-bg: #17181a;          /* 页面底色 */
  --x0hg-card: #212224;        /* 卡片/容器底色 */
  --x0hg-chip: #2a2d31;        /* 胶囊/次级面 */
  --x0hg-hover: #2f3237;       /* 悬浮态 */
  --x0hg-border: #2c2e31;      /* 边框 */
  --x0hg-text: #c9ccd1;        /* 正文文字 */
  --x0hg-dim: #8a8f98;         /* 次要文字 */
  --x0hg-title: #f2f3f5;       /* 标题 */
  --x0hg-chip-text: #b6bbc4;   /* 胶囊文字 */
  --x0hg-accent: #ff6a1a;      /* 强调色（橙） */
  --x0hg-accent-soft: rgba(255, 106, 26, .16);
  --x0hg-radius: 8px;
  --x0hg-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

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

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

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

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

.x0hg-wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.x0hg-main { padding: 20px 16px 44px; }

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

.x0hg-header-in {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 60px;
  gap: 8px;
}

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

/* 中文注释：导航模块输出可能是 ul>li>a 也可能是裸 a，两种都兜住 */
.x0hg-nav { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.x0hg-nav ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.x0hg-nav li { display: inline-block; list-style: none; }
.x0hg-nav li a, .x0hg-nav ul li a, .x0hg-nav > a {
  display: block; padding: 8px 14px; border-radius: var(--x0hg-radius);
  color: var(--x0hg-dim); font-size: 15px;
}
.x0hg-nav li a:hover, .x0hg-nav ul li a:hover { color: var(--x0hg-title); background: var(--x0hg-chip); }
.x0hg-nav li.on a, .x0hg-nav ul li.on a { color: var(--x0hg-title); font-weight: 600; }

/* ---------------- 搜索（圆角胶囊 + 内嵌放大镜） ---------------- */
.x0hg-search { position: relative; display: flex; margin-left: auto; }
.x0hg-search input {
  width: 260px; padding: 0 40px 0 16px; height: 36px;
  background: var(--x0hg-chip); border: 1px solid transparent;
  border-radius: 999px; color: var(--x0hg-title); font-size: 13px; outline: none;
}
.x0hg-search input::placeholder { color: var(--x0hg-dim); }
.x0hg-search input:focus { border-color: var(--x0hg-accent); background: #232528; }
.x0hg-search button {
  /* 中文注释：放大镜图标绝对定位压在输入框右端，不参与表单布局 */
  position: absolute; right: 0; top: 0; width: 40px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 0; padding: 0; cursor: pointer;
}
.x0hg-search button svg { width: 17px; height: 17px; fill: none; stroke: var(--x0hg-dim); stroke-width: 1.8; stroke-linecap: round; }
.x0hg-search button:hover svg { stroke: var(--x0hg-accent); }

/* ---------------- 汉堡按钮与手机抽屉（桌面隐藏） ---------------- */
.x0hg-burger {
  display: none; flex-direction: column; justify-content: center;
  width: 40px; height: 40px; padding: 9px;
  /* 中文注释：手机上 .x0hg-search 整体隐藏，而右推的 margin-left:auto 原本挂在搜索框上，
     所以按钮必须自己顶到行尾，否则它只会紧跟在 Logo 右边 */
  margin-left: auto;
  /* 中文注释：WebKit 的 button 自带内部匿名盒，不重置 appearance 时 display:flex 管不了子元素；
     旧版 iOS 会退成收缩适配宽度，空 span 算出来就是 0 宽——线条有高度没宽度 */
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 1px solid var(--x0hg-border); border-radius: var(--x0hg-radius); cursor: pointer;
}
/* 线条宽 100% 写死，不依赖 flex 的 align-items:stretch（老 WebKit 上 stretch 不生效就没宽）；
   间距用兄弟 margin 而不是 flex gap —— flex 容器的 gap 要 iOS 14.5+ 才支持 */
.x0hg-burger span { display: block; width: 100%; height: 2px; background: var(--x0hg-text); border-radius: 2px; }
.x0hg-burger span + span { margin-top: 5px; }

.x0hg-drawer {
  display: none;
  background: #1b1c1e; border-bottom: 1px solid var(--x0hg-border);
  padding: 12px 16px 16px;
}
/* 中文注释：抽屉打开时覆盖在页面内容上层，不推移文档流 */
.x0hg-drawer.open {
  display: block;
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 99;
  box-shadow: var(--x0hg-shadow);
}
.x0hg-drawer .x0hg-search { margin: 0 0 10px; }
.x0hg-drawer .x0hg-search input { flex: 1; width: 100%; }
.x0hg-drawer-nav ul, .x0hg-drawer-nav { display: block; margin: 0; padding: 0; list-style: none; }
.x0hg-drawer-nav li { display: block; list-style: none; }
.x0hg-drawer-nav li a, .x0hg-drawer-nav a {
  display: block; padding: 12px 10px; color: var(--x0hg-text);
  border-bottom: 1px solid var(--x0hg-border);
}

/* ---------------- 面包屑 ---------------- */
.x0hg-crumbs { font-size: 13px; color: var(--x0hg-dim); margin-bottom: 14px; }
.x0hg-crumbs a { color: var(--x0hg-dim); }
.x0hg-crumbs a:hover { color: var(--x0hg-accent); }

/* ---------------- 列表页标题与描述 ---------------- */
.x0hg-page-title { margin: 0 0 6px; font-size: 24px; color: var(--x0hg-title); }
.x0hg-page-desc { margin: 0 0 20px; font-size: 13px; color: var(--x0hg-dim); }

/* ---------------- hero ---------------- */
.x0hg-hero { margin-bottom: 30px; }
.x0hg-hero-in {
  position: relative; display: block; height: 340px;
  border-radius: 12px; overflow: hidden; background: #0f1012;
}
.x0hg-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.x0hg-hero-mask {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10, 11, 12, .92) 0%, rgba(10, 11, 12, .62) 46%, rgba(10, 11, 12, .12) 100%);
}
.x0hg-hero-text {
  position: absolute; left: 0; bottom: 0; max-width: 62%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 26px 30px;
}
.x0hg-hero-title { font-size: 30px; font-weight: 700; color: #fff; line-height: 1.3; }
.x0hg-hero-desc {
  font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, .74);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.x0hg-hero-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.x0hg-hero .x0hg-chip { background: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .86); }
.x0hg-hero-btn {
  display: inline-block; padding: 8px 24px; border-radius: 999px;
  background: var(--x0hg-accent); color: #fff; font-size: 14px;
}
.x0hg-hero-in:hover .x0hg-hero-btn { filter: brightness(1.1); }

/* ---------------- 区块标题与首页横滚行 ---------------- */
.x0hg-block { margin-bottom: 30px; }
.x0hg-block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.x0hg-block-title { margin: 0; font-size: 20px; }
.x0hg-block-title a { color: var(--x0hg-title); }
.x0hg-block-more { font-size: 13px; color: var(--x0hg-dim); }

.x0hg-row {
  display: flex; gap: 14px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
.x0hg-row::-webkit-scrollbar { height: 5px; }
.x0hg-row::-webkit-scrollbar-track { background: transparent; }
.x0hg-row::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 3px; }
.x0hg-row > .x0hg-card { flex: 0 0 180px; scroll-snap-align: start; }

/* ---------------- 卡片 ---------------- */
.x0hg-card {
  background: var(--x0hg-card);
  border-radius: var(--x0hg-radius);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}

.x0hg-card-cover {
  display: block;
  position: relative;
  aspect-ratio: 3 / 4;
  background: #0f1012 center / cover no-repeat;
  overflow: hidden;
}
.x0hg-card-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 右下角"全N集"角标 */
.x0hg-card-badge {
  position: absolute; right: 6px; bottom: 6px;
  padding: 1px 6px; border-radius: 3px;
  background: rgba(0, 0, 0, .66); color: #fff;
  font-size: 12px; line-height: 18px; white-space: nowrap;
}

.x0hg-card-title {
  margin: 8px 10px 4px; font-size: 14px; font-weight: 500;
  color: var(--x0hg-title);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.x0hg-card-title a { color: inherit; }

/* ---------------- 标签胶囊（卡片下方 / hero / 播放页信息栏共用） ---------------- */
.x0hg-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.x0hg-chip {
  padding: 2px 8px; border-radius: 4px;
  background: var(--x0hg-chip); color: var(--x0hg-chip-text);
  font-size: 12px; line-height: 18px; white-space: nowrap;
}
a.x0hg-chip:hover { color: #fff; background: var(--x0hg-hover); }
/* 中文注释：卡片里的胶囊行要跟着卡片内边距走，公共定义不带 padding */
.x0hg-card .x0hg-chip-row { padding: 0 10px 10px; }

/* ---------------- 分类页标签筛选区 ---------------- */
/* 中文注释：--x0hg-tags-rows 改这里就能调收起态显示几行，JS 只负责"真溢出了才放按钮" */
.x0hg-tags { margin-bottom: 18px; }
.x0hg-tags-list {
  --x0hg-tags-rows: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* 中文注释：收起态真实高度 = N 个胶囊(32) + N-1 个行间距(8)。
     少算间距会把最后一行切成一小条，看着就像被下面的展开按钮挡住 */
  max-height: calc(var(--x0hg-tags-rows) * 32px + (var(--x0hg-tags-rows) - 1) * 8px);
  overflow: hidden;
}
.x0hg-tags.is-open .x0hg-tags-list { max-height: none; }
.x0hg-tag {
  height: 32px; padding: 0 14px; border-radius: 999px;
  background: var(--x0hg-chip); color: var(--x0hg-chip-text);
  font-size: 13px; line-height: 32px;
  white-space: nowrap; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
.x0hg-tag:hover { color: #fff; background: var(--x0hg-hover); }
.x0hg-tag.is-on { color: var(--x0hg-accent); background: var(--x0hg-accent-soft); }

/* 按钮默认带 hidden 属性，JS 判定标签确实溢出后才放出来；
   故意不写 display：作者层的任何 display 都会盖掉浏览器 UA 的 [hidden]{display:none}，按钮就再也藏不掉了 */
.x0hg-tags-toggle {
  margin-top: 12px; height: 24px; padding: 0 12px;
  border: 1px solid var(--x0hg-border); border-radius: 999px;
  background: transparent; color: var(--x0hg-dim);
  font: inherit; font-size: 12px; line-height: 22px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.x0hg-tags-toggle::after {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); vertical-align: middle; transition: transform .2s;
}
.x0hg-tags.is-open .x0hg-tags-toggle::after { transform: rotate(-135deg); margin-bottom: -2px; }

/* ---------------- 列表网格：桌面 6 列 ---------------- */
.x0hg-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

/* ---------------- 分页 ---------------- */
.x0hg-pagebar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 30px 0 6px; }
.x0hg-pb {
  min-width: 34px; height: 34px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--x0hg-card); border: 1px solid var(--x0hg-border);
  border-radius: 6px; color: var(--x0hg-text); font-size: 13px;
}
.x0hg-pb.now { background: var(--x0hg-accent); border-color: var(--x0hg-accent); color: #fff; }

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

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

/* =========================================================
   播放页
   ========================================================= */
.x0hg-vp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 24px;
  align-items: start;
}
.x0hg-vp-left { min-width: 0; }

.x0hg-vp-stage { border-radius: 10px; overflow: hidden; background: #000; }
/* 播放器接管位：类名沿用 x0video 的 .x0-player，切主题不必改插件后台配置 */
.x0-player {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
.x0hg-player-tip { color: #6a6f76; font-size: 14px; }
/* 插件把 .htt_dplayer_group 搬进来后，占位提示让位，播放器自己撑满 */
.x0hg-vp .x0-player:has(.htt_dplayer_group) .x0hg-player-tip { display: none; }
.x0hg-vp .x0-player .htt_dplayer_group { position: relative; z-index: 1; height: 100% !important; text-align: left !important; }

.x0hg-vp-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 12px; font-size: 13px; color: var(--x0hg-dim);
}
.x0hg-vp-stat a { color: var(--x0hg-dim); }
.x0hg-vp-stat a:hover { color: var(--x0hg-accent); }
.x0hg-vp-copy {
  margin-left: auto; padding: 5px 16px;
  border: 1px solid var(--x0hg-border); border-radius: 999px;
  background: transparent; color: var(--x0hg-text);
  font: inherit; font-size: 13px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.x0hg-vp-side { min-width: 0; }

/* 海报 + 标题（中文注释：这块搬进左列后可用宽度变大，海报列从 96px 放到 120px） */
.x0hg-vp-info { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; }
.x0hg-vp-poster {
  display: block; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden;
  background: #0f1012 center / cover no-repeat;
}
.x0hg-vp-poster img { display: block; width: 100%; height: 100%; object-fit: cover; }
.x0hg-vp-infotext { min-width: 0; }
.x0hg-vp-title { margin: 0 0 8px; font-size: 20px; line-height: 1.35; color: var(--x0hg-title); }
.x0hg-vp-info .x0hg-chip-row { margin-top: 2px; }

/* 小标题：简介 / 选集 / 推荐短剧 */
.x0hg-vp-h {
  margin: 22px 0 10px; font-size: 17px; font-weight: 600; color: var(--x0hg-title);
}
.x0hg-vp-h .x0hg-ep-count { margin-left: 6px; font-size: 12px; font-style: normal; font-weight: 400; color: var(--x0hg-dim); }

/* 正文：插件从这里把播放器和分集按钮搬走，所以必须留在 DOM 里 */
.x0hg-vp-body {
  margin: 16px 0 0; font-size: 13px; line-height: 1.75; color: var(--x0hg-text);
}
.x0hg-vp-body > *:first-child { margin-top: 0; }
.x0hg-vp-body p { margin: 0 0 .2em; }
.x0hg-vp-body img { max-width: 100%; border-radius: 6px; }

/* 简介：3 行截断，line-height 1.7 x 3 = 5.1em；content-box 保证内边距不吃掉这 3 行 */
.x0hg-vp-intro {
  box-sizing: content-box;
  margin: 0; font-size: 13px; line-height: 1.7; color: var(--x0hg-dim);
  max-height: 5.1em; overflow: hidden;
  transition: max-height .2s;
}
.x0hg-vp-intro.is-open { max-height: none; }
.x0hg-vp-more {
  margin-top: 6px; padding: 0; border: 0; background: transparent;
  color: var(--x0hg-accent); font: inherit; font-size: 13px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 选集：区间跳转 + 分集面板（面板类名沿用 .x0-ep-panel，插件后台配置填它） */
.x0hg-ep-jump { display: none; -webkit-tap-highlight-color: transparent; }
.x0hg-ep-jump.is-on {
  display: flex; gap: 8px; margin-bottom: 10px;
  overflow-x: auto; scrollbar-width: none;
}
.x0hg-ep-jump.is-on::-webkit-scrollbar { display: none; }
.x0hg-ep-jump button {
  flex: 0 0 auto; padding: 4px 12px;
  border: 1px solid var(--x0hg-border); border-radius: 999px;
  background: transparent; color: var(--x0hg-dim);
  font: inherit; font-size: 13px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.x0hg-ep-jump button.is-on { color: var(--x0hg-accent); border-color: var(--x0hg-accent); }

.x0-ep-panel {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 2px;
  /* 中文注释：面板自己可滚时，滑到边界不能带动背页 */
  overscroll-behavior: contain;
  -webkit-tap-highlight-color: transparent;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .16) transparent;
}
.x0-ep-panel::-webkit-scrollbar { width: 5px; height: 5px; }
.x0-ep-panel::-webkit-scrollbar-track,
.x0-ep-panel::-webkit-scrollbar-corner { background: transparent; }
.x0-ep-panel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 3px; }
/* 中文注释：分集格子的定宽方格与排布写在播放器插件自己的 core style 里，
   主题侧不再重复定义，否则两边抢列宽会错位；这里只接管颜色 */
.x0hg-vp-eps .htt_dplayer_switch span {
  border-color: var(--x0hg-border) !important;
  background: var(--x0hg-card) !important;
  color: var(--x0hg-text) !important;
}
/* 当前集：把插件内联的 #084dad 改成本主题橙 */
.x0-ep-panel .htt_dplayer_switch span[style*="background"] {
  border-color: var(--x0hg-accent) !important;
  background: var(--x0hg-accent) !important;
  color: #fff !important;
}

/* 推荐短剧：右栏单列横卡。中文注释：列数交给 auto-fill，右栏 340~400px 时是 1 列，
   塌成单列铺满整行时自动变多列，不必为它写断点 */
.x0hg-vp-reco-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
}
.x0hg-reco-item { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.x0hg-reco-cover {
  flex: 0 0 76px; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: #0f1012;
}
.x0hg-reco-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.x0hg-reco-txt { min-width: 0; padding-top: 2px; }
.x0hg-reco-name {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  font-size: 14px; color: var(--x0hg-title);
}
/* 中文注释：简介压在标题与播放数之间，两行的正文高度约 42px，
   仍在封面框 76x4:3=101px 之内，卡片不会因为多这一行而变高；要三行只改这里的 clamp */
.x0hg-reco-intro {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  margin-top: 4px; font-size: 12px; color: var(--x0hg-dim);
}
.x0hg-reco-sub { display: block; margin-top: 4px; font-size: 12px; color: var(--x0hg-dim); }

/* 上下部：播放器下方一行两张，只有一侧时那张自动占满整行 */
.x0hg-vp-navrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.x0hg-nav-card {
  display: block; min-width: 0; padding: 10px 14px;
  border: 1px solid var(--x0hg-border); border-radius: var(--x0hg-radius);
  background: var(--x0hg-card);
}
.x0hg-nav-card.is-next { text-align: right; }
.x0hg-nav-dir { display: block; font-size: 12px; color: var(--x0hg-dim); }
.x0hg-nav-name {
  display: block; margin-top: 3px; font-size: 14px; color: var(--x0hg-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------------- 文章页兜底 ---------------- */
.x0hg-post-title { margin: 0 0 10px; font-size: 24px; color: var(--x0hg-title); }
.x0hg-post .x0hg-chip-row { margin-bottom: 16px; }
.x0hg-post-body { font-size: 15px; line-height: 1.8; color: var(--x0hg-text); }
.x0hg-post-body p { margin: 0 0 .6em; }
.x0hg-post-body img { max-width: 100%; border-radius: 6px; }

/* ---------------- 底部 ---------------- */
.x0hg-footer {
  border-top: 1px solid var(--x0hg-border);
  background: #1b1c1e;
  padding: 22px 0;
  margin-top: 20px;
  text-align: center;
}
.x0hg-copyright { margin: 0; font-size: 12px; color: #5a5f66; line-height: 1.9; }
.x0hg-copyright a { color: #5a5f66; }
.x0hg-copyright a:hover { color: var(--x0hg-accent); }

/* =========================================================
   hover 分档：真悬停设备才给 hover，触屏用按下态，点完不残留
   ========================================================= */
@media (hover: hover) {
  .x0hg-card:hover { transform: translateY(-3px); box-shadow: var(--x0hg-shadow); }
  .x0hg-tags-toggle:hover { color: var(--x0hg-accent); border-color: var(--x0hg-accent); }
  .x0hg-pb:hover { border-color: var(--x0hg-accent); color: var(--x0hg-accent); }
  .x0hg-pb.now:hover { color: #fff; }
  .x0hg-vp-copy:hover { border-color: var(--x0hg-accent); color: var(--x0hg-accent); }
  .x0hg-ep-jump button:hover { border-color: var(--x0hg-accent); color: var(--x0hg-accent); }
  .x0hg-reco-item:hover .x0hg-reco-name { color: var(--x0hg-accent); }
  .x0hg-nav-card:hover { border-color: var(--x0hg-accent); }
  .x0hg-nav-card:hover .x0hg-nav-name { color: var(--x0hg-title); }
  .x0-ep-panel .htt_dplayer_switch span:hover {
    border-color: var(--x0hg-accent) !important;
    color: var(--x0hg-accent) !important;
  }
}
@media (hover: none) {
  .x0hg-tags-toggle:active { color: var(--x0hg-accent); border-color: var(--x0hg-accent); }
  .x0hg-pb:active { border-color: var(--x0hg-accent); color: var(--x0hg-accent); }
  .x0hg-vp-copy:active { border-color: var(--x0hg-accent); color: var(--x0hg-accent); }
  .x0hg-ep-jump button:active, .x0hg-ep-jump button.is-press {
    border-color: var(--x0hg-accent); background: var(--x0hg-accent); color: #fff;
  }
  /* 中文注释：集数格子的按下态不能是实心橙底——当前集已经是实心橙，两个一样就分不清了；
     用一层浅橙底 + 描边，既表示"点到了"，又不伪装成选中项 */
  .x0-ep-panel .htt_dplayer_switch span:active,
  .x0-ep-panel .htt_dplayer_switch span.is-press {
    border-color: var(--x0hg-accent) !important;
    background: var(--x0hg-accent-soft) !important;
    color: var(--x0hg-accent) !important;
  }
}

/* =========================================================
   响应式
   ========================================================= */
@media (max-width: 1200px) {
  .x0hg-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .x0hg-vp-grid { grid-template-columns: minmax(0, 1fr) 340px; }
}

@media (max-width: 1100px) {
  /* 中文注释：塌成单列后 DOM 顺序就是 播放器/剧信息 -> 选集/推荐/侧栏5，不再需要 grid-row 定序 */
  .x0hg-vp-grid { grid-template-columns: 1fr; gap: 0; }
  .x0hg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .x0hg-row > .x0hg-card { flex-basis: 160px; }
}

@media (max-width: 992px) {
  .x0hg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .x0hg-hero-in { height: 280px; }
  .x0hg-hero-text { max-width: 78%; }
}

@media (max-width: 900px) {
  .x0hg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .x0hg-search input { width: 200px; }
}

@media (max-width: 600px) {
  /* 中文注释：顶栏内缩跟着 .x0hg-main 的 12px 走，否则按钮右缘比下面内容缩进 4px，看着像没贴右 */
  .x0hg-header-in { flex-wrap: nowrap; min-height: 54px; padding: 0 12px; }
  .x0hg-nav { display: none; }
  .x0hg-search { display: none; }
  /* 中文注释：抽屉里那条搜索框复用 .x0hg-search，被上一条整体隐藏后要单独放回来；
     选择器多一层类，特异性高于上一条，不需要 !important */
  .x0hg-drawer .x0hg-search { display: flex; }
  .x0hg-burger { display: flex; }
  .x0hg-logo { margin-right: 0; }

  .x0hg-main { padding: 14px 12px 32px; }
  .x0hg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .x0hg-row { gap: 10px; }
  .x0hg-row > .x0hg-card { flex-basis: calc((100% - 20px) / 3); }

  .x0hg-hero-in { height: 190px; border-radius: 8px; }
  .x0hg-hero-text { max-width: 100%; padding: 14px 16px; gap: 6px; }
  .x0hg-hero-title { font-size: 19px; }
  .x0hg-hero-desc { display: none; }
  .x0hg-hero-btn { padding: 5px 16px; font-size: 13px; }

  .x0hg-block-title { font-size: 17px; }
  .x0hg-card-title { font-size: 13px; margin: 6px 6px 3px; }
  .x0hg-card .x0hg-chip-row { padding: 0 6px 6px; gap: 4px; }
  .x0hg-chip { padding: 1px 5px; font-size: 11px; }
  .x0hg-card-badge { font-size: 11px; right: 4px; bottom: 4px; }

  .x0hg-tags-list { --x0hg-tags-rows: 3; }
  .x0hg-tag { font-size: 12px; padding: 0 11px; }

  .x0hg-vp-info { grid-template-columns: 84px minmax(0, 1fr); }
  .x0hg-vp-title { font-size: 18px; }
  .x0-ep-panel { max-height: 240px; overflow-x: hidden; }
}

/* 中文注释：iOS Safari 聚焦字号小于 16px 的输入框时会自动放大整个视口，而且不会自己缩回；
   只在触屏设备上把字号提到 16px 卡过阈值，PC 端字号不变。抽屉里的搜索框复用 .x0hg-search，一条规则两边都盖住；
   输入框高度是写死的 36px，字号变大不撑高，不需要像 x0video 那样补 padding */
@media (hover: none) {
  .x0hg-search input { font-size: 16px; }
}