@charset "UTF-8";
/* ==========================================================================
   内页公共样式（动漫 / 直播 / 搜索 / 充值 / 用户中心 …）
   --------------------------------------------------------------------------
   与 home.css 同一套约定：
   - 类名与旧站（Tailwind CSS v4）完全一致，只补 home.css 里没有用到的那些；
   - 取值来自项目自身编译出的 Tailwind 产物。颜色写「lab() 换算出的 sRGB 十六进制」：
     旧站的调色板是 lab() 定义的，浏览器把它渲染到 sRGB 屏幕上就是这个值
     （直接抄 Tailwind 源码里的 hex 会差 1-2 个色阶，例如 yellow-500 的
     源码 hex 是 #edb200，实际渲染是 #f0b100）；
   - 栅格用 float + calc（IE 能用），现代内核在 @supports 里换成真 grid；
   - 间距类（gap-* / space-y-*）在 home.css 里已有兜底，这里只补缺的。
   加载顺序：home.css → site.css → compat.css
   ========================================================================== */

/* ==========================================================================
   1. 间距 / 尺寸（home.css 未收录的部分）
   ========================================================================== */

.mb-1\.5 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 32px; }
.ml-auto { margin-left: auto; }
.p-2\.5 { padding: 10px; }
/* 旧站是 padding-inline（IE 与 Chromium 86 都不认识），按 ltr 展开成左右内边距 */
.px-1 { padding-left: 4px; padding-right: 4px; }
.pt-6 { padding-top: 24px; }
.pb-1 { padding-bottom: 4px; }
.pb-2 { padding-bottom: 8px; }
.pb-8 { padding-bottom: 32px; }

.h-2 { height: 8px; }
.h-2\.5 { height: 10px; }
.w-2 { width: 8px; }
.w-2\.5 { width: 10px; }
.w-72 { width: 288px; }
/* space-y-* 全部收口到 home.css 的「纵向间距」一节：旧站那套是 :where() 零特异性，
   分散在多个文件里没法保证「元素自带的 mb-* 一定压过它」。 */

/* ==========================================================================
   1b. 响应式（旧站是 sm/md/lg/xl 断点，取值为 Tailwind v4 默认）
   --------------------------------------------------------------------------
   .lg\:block 是内页右侧栏（class="hidden lg:block w-72 shrink-0"）的开关，
   漏了它整条侧栏会一直是 display:none，左栏撑满、卡片变宽、整页高度全错。
   ========================================================================== */

@media (min-width: 64rem) {              /* lg = 1024px */
  .lg\:block { display: block; }
  .lg\:flex-row { flex-direction: row; }
}

/* ==========================================================================
   2. 圆角 / 阴影 / 透明度
   ========================================================================== */

.rounded-md { border-radius: 6px; }          /* Tailwind v4: .375rem = 6px */
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
.opacity-60 { opacity: 0.6; }

/* ==========================================================================
   3. 文字 / 溢出
   ========================================================================== */

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.overflow-x-auto { overflow-x: auto; }
/* 分类筛选那条横向滚动条：旧站用自定义工具类隐藏滚动条 */
.scrollbar-hide {
  -ms-overflow-style: none;                  /* IE10/11 */
  scrollbar-width: none;                     /* 火狐 */
}
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ==========================================================================
   4. 颜色（sRGB 十六进制 = 旧站 lab() 调色板的实际渲染值）
   ========================================================================== */

.bg-green-400 { background-color: #05df72; }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
.bg-primary-500\/90 { background-color: rgba(249, 115, 22, 0.9); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.text-white\/90 { color: rgba(255, 255, 255, 0.9); }
.text-yellow-500 { color: #f0b100; }
.fill-white { fill: #fff; }
.fill-yellow-400 { fill: #fdc700; }

/* 卡片封面上的黑色渐隐遮罩（旧站 bg-gradient-to-t from-black/70 to-transparent）。
   旧站的两端色是 lab()/color-mix，黑色到透明的插值在 oklab 与 sRGB 下等价，
   所以第一行给 IE/老内核用的 sRGB 写法就是最终效果；第二行保持与旧站同构。 */
.bg-gradient-to-t.from-black\/70.to-transparent {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));
  background-image: linear-gradient(to top in oklab, color-mix(in srgb, #000 70%, transparent), transparent);
}

/* ==========================================================================
   5. 悬浮 / 禁用态
   --------------------------------------------------------------------------
   旧站的 hover:xxx 是包在 @media (hover: hover) 里的，这里直接写 :hover：
   触屏内核（手机浏览器）本来就点不出 hover，桌面浏览器两者一致。
   ========================================================================== */

/* 卡片悬浮上移：旧站用 translate 属性（IE 不认识），这里换成等价的 transform */
.hover\:-translate-y-1:hover {
  -ms-transform: translateY(-4px);
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
}
.disabled\:opacity-40:disabled { opacity: 0.4; }
.group:hover .group-hover\:text-primary-400 { color: #fb923c; }

/* ==========================================================================
   6. 动画
   ========================================================================== */

@-webkit-keyframes pulse { 50% { opacity: 0.5; } }
@keyframes pulse { 50% { opacity: 0.5; } }
.animate-pulse { -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* ==========================================================================
   7. 栅格
   --------------------------------------------------------------------------
   旧站的写法是 <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">，IE 不认识
   repeat()/minmax()，grid 直接失效（子元素会变成一列竖排）。
   所以页面里在旧站类名之后再挂一个 gr- 前缀的栅格类，由它提供两套实现：
     - 基础声明：float + calc 列宽（IE8+ / 老 WebKit / 360 兼容模式都能用）；
     - @supports 里：切回真 grid（Chrome / 火狐 / 极速模式）。
   @supports (grid-template-columns: repeat(2, minmax(0, 1fr))) 这个闸门在 IE
   下判定为假（IE 只认旧规范的 -ms-grid），整块被忽略，不会盖掉 float 方案。
   列间距与 gap-4 = 16px 一致；行间距写在「第二行起的子元素」上，
   免得末行间距被算进容器高度（auto 高度下会比旧站高一个间距）。
   ========================================================================== */

/* 横幅区 / 卡片区：老内核（无媒体查询、无 flex/grid，如 IE7/8 与 360 兼容模式）
   直接给桌面列数 4 列 —— 与旧站桌面渲染一致；现代内核在 @supports 里走真 grid，
   响应式行为不受影响（旧 WebKit 等不支持 grid 的内核也统一按 4 列排）。
   选择器带 .grid 前缀 + :nth-child(n)：第 10 节通用 .grid-cols-N 的浮动规则
   与本块同源，必须把特异性提到 (0,3,1) 才能盖过它的 clear / margin-top。 */
.grid.gr-banner-grid:after,
.grid.gr-card-grid:after { content: ""; display: block; clear: both; }
.grid.gr-banner-grid > *,
.grid.gr-card-grid > * {
  float: left;
  width: 24%;
}
.grid.gr-banner-grid > *:nth-child(n),
.grid.gr-card-grid > *:nth-child(n) { clear: none; margin: 0 1% 16px 0; }
.grid.gr-banner-grid > *:nth-child(4n),
.grid.gr-card-grid > *:nth-child(4n) { margin-right: 0; }
.grid.gr-banner-grid > *:nth-child(4n+1),
.grid.gr-card-grid > *:nth-child(4n+1) { clear: left; }

/* 老内核通用列数兜底（各页响应式栅格按「桌面列数」补齐，360 兼容模式与
   现代桌面渲染一致）：gr-grid-2 / gr-grid-3 / gr-grid-4 / gr-grid-5。
   特异性处理同上。 */
.grid.gr-grid-2:after, .grid.gr-grid-3:after, .grid.gr-grid-4:after, .grid.gr-grid-5:after { content: ""; display: block; clear: both; }
.grid.gr-grid-2 > * { float: left; width: 49%; }
.grid.gr-grid-2 > *:nth-child(n) { clear: none; margin: 0 1% 16px 0; }
.grid.gr-grid-2 > *:nth-child(2n) { margin-right: 0; }
.grid.gr-grid-2 > *:nth-child(2n+1) { clear: left; }
.grid.gr-grid-3 > * { float: left; width: 32.3%; }
.grid.gr-grid-3 > *:nth-child(n) { clear: none; margin: 0 1% 16px 0; }
.grid.gr-grid-3 > *:nth-child(3n) { margin-right: 0; }
.grid.gr-grid-3 > *:nth-child(3n+1) { clear: left; }
.grid.gr-grid-4 > * { float: left; width: 24%; }
.grid.gr-grid-4 > *:nth-child(n) { clear: none; margin: 0 1% 16px 0; }
.grid.gr-grid-4 > *:nth-child(4n) { margin-right: 0; }
.grid.gr-grid-4 > *:nth-child(4n+1) { clear: left; }
.grid.gr-grid-5 > * { float: left; width: 19%; }
.grid.gr-grid-5 > *:nth-child(n) { clear: none; margin: 0 1% 16px 0; }
.grid.gr-grid-5 > *:nth-child(5n) { margin-right: 0; }
.grid.gr-grid-5 > *:nth-child(5n+1) { clear: left; }

/* 老内核：flex 横向滚动条（分类筛选 / 章节列表等）退化为单行行内流。
   现代内核 flex 布局不受影响（flex 子项的 display 计算值本就是 block，
   white-space 只影响行内排版）。 */
.flex.overflow-x-auto { white-space: nowrap; }
.flex.overflow-x-auto > * { display: inline-block; vertical-align: middle; }

/* ==========================================================================
   8. 主区两栏（正文 + 右侧栏，lg 起并排）
   --------------------------------------------------------------------------
   IE 不认识 flex 的 gap，也不支持 min-width:auto 之外的 flex 行为差异，
   这里直接退回块级流：正文在上、侧栏在下，与旧站在小屏下的排布一致。
   ========================================================================== */

@media (min-width: 64rem) {
  .gr-main-row:after { content: ""; display: block; clear: both; }
  .gr-main-row > * {
    float: left;
    width: 100%;
    margin: 0;
  }
  /* 左侧栏：flex-1 min-w-0；右侧栏：w-72 shrink-0 */
  .gr-main-row > *:first-child {
    width: calc(100% - 304px);          /* 288px + gap-6(24px) */
    margin-right: 24px;
  }
  .gr-main-row > *:last-child { width: 288px; }
}

@supports (grid-template-columns: repeat(2, minmax(0, 1fr))) {
  /* float 方案用的清浮动伪元素，在 grid/flex 容器里会变成一个「看不见的子项」：
     它照样参与 gap 和栅格轨道，等于凭空多出一个间距（横幅区 +16、主区两栏 +24）。
     切到真 grid/flex 后必须把它去掉。 */
  .grid.gr-banner-grid:after,
  .grid.gr-card-grid:after,
  .gr-main-row:after { content: none; display: none; }

  .grid { display: grid; }
  /* 各列数（.grid-cols-N）与响应式变体（.sm\:… / .md\:… 等）统一下沉到第 10 节末尾按
     基础 → sm → md → lg → xl 排好，这里不再声明：分散在两处会被后面的基础类反超，
     详见第 10 节那段注释。 */

  /* 栅格容器与子元素上的 float 方案全部作废 */
  .grid.gr-banner-grid,
  .grid.gr-card-grid,
  .gr-main-row { float: none; }

  .grid.gr-banner-grid > *,
  .grid.gr-banner-grid > *:nth-child(n),
  .grid.gr-banner-grid > *:nth-child(4n),
  .grid.gr-banner-grid > *:nth-child(4n+1),
  .grid.gr-card-grid > *,
  .grid.gr-card-grid > *:nth-child(n),
  .grid.gr-card-grid > *:nth-child(4n),
  .grid.gr-card-grid > *:nth-child(4n+1),
  .grid.gr-grid-2 > *, .grid.gr-grid-2 > *:nth-child(2n), .grid.gr-grid-2 > *:nth-child(2n+1),
  .grid.gr-grid-3 > *, .grid.gr-grid-3 > *:nth-child(3n), .grid.gr-grid-3 > *:nth-child(3n+1),
  .grid.gr-grid-4 > *, .grid.gr-grid-4 > *:nth-child(4n), .grid.gr-grid-4 > *:nth-child(4n+1),
  .grid.gr-grid-5 > *, .grid.gr-grid-5 > *:nth-child(5n), .grid.gr-grid-5 > *:nth-child(5n+1) {
    float: none;
    width: auto;
    margin: 0;
    clear: none;
  }
  .grid.gr-grid-2:after, .grid.gr-grid-3:after, .grid.gr-grid-4:after, .grid.gr-grid-5:after { content: none; display: none; }
  .flex.overflow-x-auto > * { display: block; }

  .gr-banner-grid { gap: 16px; }
  .gr-card-grid { gap: 16px; }

  @media (min-width: 40rem) {
    .gr-banner-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  @media (min-width: 64rem) {
    .gr-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (min-width: 80rem) {
    .gr-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* 主区两栏 */
  .gr-main-row > *,
  .gr-main-row > *:first-child,
  .gr-main-row > *:last-child {
    float: none;
    width: auto;
    margin: 0;
  }
  @media (min-width: 64rem) {
    .gr-main-row {
      display: flex;
      flex-direction: row;
      gap: 24px;
    }
    .gr-main-row > *:first-child {
      flex: 1 1 0%;
      min-width: 0;
    }
    .gr-main-row > *:last-child {
      flex-shrink: 0;
      width: 288px;
    }
  }
}

/* ==========================================================================
   9. 其余工具类（直播 / 榜单 / 搜索 / 充值 / 用户中心 / 公告 / 政策 / 青少年）
   --------------------------------------------------------------------------
   规则值取自旧站编译产物（ref-globals），换算方式同 home.css：
   颜色写 lab()/oklch() 实际渲染出的 sRGB 十六进制。
   带 -inset / -inline / -block 逻辑属性的类按 ltr 展开成 left/right、上下，
   IE 与老 WebKit 都认。
   ========================================================================== */

/* ---- 9.1 定位 ---- */
.-top-0\.5 { top: -2px; }
.-top-1 { top: -4px; }
.top-2\.5 { top: 10px; }
.top-10 { top: 40px; }
.top-16 { top: 64px; }
.top-36 { top: 144px; }
.-right-0\.5 { right: -2px; }
.-right-1 { right: -4px; }
.right-2\.5 { right: 10px; }
.right-20 { right: 80px; }
.bottom-2 { bottom: 8px; }
.bottom-10 { bottom: 40px; }
.left-2\.5 { left: 10px; }
.left-10 { left: 40px; }
.z-30 { z-index: 30; }

/* ---- 9.2 尺寸 ---- */
.h-20 { height: 80px; }
.h-40 { height: 160px; }
.h-60 { height: 240px; }
.h-auto { height: auto; }
.max-h-48 { max-height: 192px; }
.min-h-\[140px\] { min-height: 140px; }
.w-20 { width: 80px; }
.w-24 { width: 96px; }
.w-40 { width: 160px; }
.w-60 { width: 240px; }
.w-80 { width: 320px; }
.max-w-3xl { max-width: 768px; }
.max-w-4xl { max-width: 896px; }
.max-w-xl { max-width: 576px; }
.max-w-sm { max-width: 384px; }
.aspect-\[16\/10\] {
  /* IE/老内核：用 padding 撑高（16:10 → 62.5%）；现代内核走 aspect-ratio */
  height: 0;
  padding-bottom: 62.5%;
}
@supports (aspect-ratio: 16 / 10) {
  .aspect-\[16\/10\] { height: auto; padding-bottom: 0; aspect-ratio: 16 / 10; }
}

/* ---- 9.3 间距（逻辑属性展开成左右/上下，兼容 IE）---- */
.mx-4 { margin-left: 16px; margin-right: 16px; }
.mt-6 { margin-top: 24px; }
.ml-1 { margin-left: 4px; }
.ml-2 { margin-left: 8px; }
.p-1\.5 { padding: 6px; }
.p-5 { padding: 20px; }
.p-10 { padding: 40px; }
.px-0\.5 { padding-left: 2px; padding-right: 2px; }
.px-5 { padding-left: 20px; padding-right: 20px; }
.px-8 { padding-left: 32px; padding-right: 32px; }
.px-10 { padding-left: 40px; padding-right: 40px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-10 { padding-top: 40px; padding-bottom: 40px; }
.py-16 { padding-top: 64px; padding-bottom: 64px; }
.pt-1 { padding-top: 4px; }
.pt-2 { padding-top: 8px; }
.pt-4 { padding-top: 16px; }
.pr-12 { padding-right: 48px; }
.pb-4 { padding-bottom: 16px; }
.pl-2 { padding-left: 8px; }
.pl-5 { padding-left: 20px; }
.pl-12 { padding-left: 48px; }
.gap-2\.5 > * + * { margin-left: 10px; }
.gap-5 > * + * { margin-left: 20px; }
/* space-y-0.5 / 1.5 / 2.5 / 5 / 6 / 10 见 home.css「纵向间距」一节 */
@supports (aspect-ratio: 1 / 1) or (content-visibility: auto) {
  .gap-2\.5 { gap: 10px; }
  .gap-5 { gap: 20px; }
  .gap-2\.5 > * + *,
  .gap-5 > * + * { margin-left: 0; }
}

/* ---- 9.4 排版 / 列表 / 分隔线 ---- */
.font-semibold { font-weight: 600; }
/* 旧站的 .text-\[8px\] 只输出 font-size，行高照旧继承父级的比值
   （父级 text-sm → 20/14 = 1.4285714，8px 字号算出来 11.43px）。
   我这边原来多写了 line-height: 1.4，算出来 11.2px，徽标矮 0.23px。 */
.text-\[8px\] { font-size: 8px; }
.list-disc { list-style-type: disc; }
.list-none { list-style-type: none; }
.resize-none { resize: none; }
.overflow-y-auto { overflow-y: auto; }
.object-center { object-position: center; }
.rounded-t-lg { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.border-b-2 { border-bottom-width: 2px; border-bottom-style: solid; }
.border-l-2 { border-left-width: 2px; border-left-style: solid; }
.transition-shadow {
  -webkit-transition-property: box-shadow;
  transition-property: box-shadow;
  -webkit-transition-duration: .3s;
  transition-duration: .3s;
  -webkit-transition-timing-function: cubic-bezier(0, 0, .2, 1);
  transition-timing-function: cubic-bezier(0, 0, .2, 1);
}
/* 分隔线（divide-y + divide-gray-50）：给除最后一个以外的子元素加下边框。
   旧站同样包在 :where() 里（零特异性），所以这里也用 :where()，
   否则 `.divide-gray-50 > :not(:last-child)` 是 (0,2,0)，会把子元素自己的
   `border-gray-100` 这类工具类压掉。旧站给的是 border-color（四边），
   顺手对齐——border-top-width 是 0，四边颜色里可见的只有下边。
   不认 :where() 的内核的兜底版本在 home.css「纵向间距」一节。 */
:where(.divide-y > :not(:last-child)) {
  border-top-style: solid;
  border-bottom-style: solid;
  border-top-width: 0;
  border-bottom-width: 1px;
}
:where(.divide-gray-50 > :not(:last-child)) { border-color: #f9fafb; }
.first\:mt-0:first-child { margin-top: 0; }
.first\:pt-0:first-child { padding-top: 0; }
.first\:border-t-0:first-child { border-top-width: 0; border-top-style: solid; }
.opacity-10 { opacity: .1; }
.opacity-40 { opacity: .4; }

/* ---- 9.5 颜色（等号右边是旧站 lab()/oklch() 调色板的实际渲染值）---- */
.bg-amber-100 { background-color: #fef3c6; }
.bg-amber-500 { background-color: #fe9a00; }
.bg-black { background-color: #000; }                 /* 直播详情页整页底色 */
.bg-black\/20 { background-color: rgba(0, 0, 0, .2); }
.bg-blue-100 { background-color: #dbeafe; }
.bg-gray-300 { background-color: #d1d5dc; }
.bg-gray-400 { background-color: #99a1af; }
.bg-orange-100 { background-color: #ffedd4; }
.bg-orange-600 { background-color: #f54a00; }
.bg-primary-400 { background-color: #fb923c; }
.bg-purple-100 { background-color: #f3e8ff; }
.bg-sky-50 { background-color: #f0f9ff; }
.bg-white\/80 { background-color: rgba(255, 255, 255, .8); }

.text-amber-400 { color: #ffb900; }
.text-amber-600 { color: #e17100; }
.text-blue-600 { color: #155dfc; }
.text-indigo-500 { color: #615fff; }
.text-orange-400 { color: #ff8904; }
.text-orange-600 { color: #f54a00; }
.text-purple-600 { color: #9810fa; }
.text-white\/70 { color: rgba(255, 255, 255, .7); }

.border-amber-400 { border-color: #ffb900; }
.border-orange-600 { border-color: #f54a00; }
.border-primary-200 { border-color: #fed7aa; }
.border-primary-500 { border-color: #f97316; }

.fill-amber-400 { fill: #ffb900; }

/* ---- 9.6 渐变（island：旧站是 --tw-gradient-* 变量链，这里写成具体色值）---- */
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--gr-grad-from, transparent), var(--gr-grad-to, transparent)); }
.bg-gradient-to-br.from-amber-50.to-yellow-50 {
  background-image: linear-gradient(to bottom right, #fffbeb, #fefce8);
}
.bg-gradient-to-b.from-amber-50.to-yellow-50 {
  background-image: linear-gradient(to bottom, #fffbeb, #fefce8);
}
.bg-gradient-to-br.from-gray-50.to-slate-50 {
  background-image: linear-gradient(to bottom right, #f9fafb, #f8fafc);
}
.bg-gradient-to-b.from-gray-50.to-slate-50 {
  background-image: linear-gradient(to bottom, #f9fafb, #f8fafc);
}
.bg-gradient-to-br.from-orange-50.to-amber-50 {
  background-image: linear-gradient(to bottom right, #fff7ed, #fffbeb);
}
.bg-gradient-to-b.from-orange-50.to-amber-50 {
  background-image: linear-gradient(to bottom, #fff7ed, #fffbeb);
}
.bg-gradient-to-br.from-cyan-400.to-blue-500 {
  background-image: linear-gradient(to bottom right, #00d3f2, #2b7fff);
}
.bg-gradient-to-br.from-green-400.to-emerald-500 {
  background-image: linear-gradient(to bottom right, #05df72, #00bc7d);
}
.bg-gradient-to-br.from-orange-400.to-amber-500 {
  background-image: linear-gradient(to bottom right, #ff8904, #fe9a00);
}
.bg-gradient-to-br.from-purple-400.to-pink-500 {
  background-image: linear-gradient(to bottom right, #c27aff, #f6339a);
}
.bg-gradient-to-br.from-primary-400.to-pink-500 {
  background-image: linear-gradient(to bottom right, #fb923c, #f6339a);
}
.bg-gradient-to-r.from-primary-500.to-purple-500 {
  background-image: linear-gradient(to right, #f97316, #ad46ff);
}
/* 直播详情页粉丝团「加入」按钮（旧站 bg-gradient-to-r from-primary-500 to-pink-500） */
.bg-gradient-to-r.from-primary-500.to-pink-500 {
  background-image: linear-gradient(to right, #f97316, #f6339a);
}
.bg-gradient-to-r.from-primary-600.via-purple-600.to-pink-500 {
  background-image: linear-gradient(to right, #ea580c, #9810fa 50%, #f6339a);
}
/* 旧站 globals.css 里的自定义工具类：封面上的黑色渐隐遮罩 */
.gradient-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .3) 50%, rgba(0, 0, 0, 0));
}
.gradient-overlay-left {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(to right, rgba(0, 0, 0, .7), rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, 0));
}
/* ---- 9.7 阴影 / 描边 / 滤镜（组合类写成具体 box-shadow）----
   旧站的彩色阴影是两条规则叠出来的：`.shadow-md` 给 box-shadow 的形状，
   `.shadow-primary-500\/25` 给 --tw-shadow-color，值是
   color-mix(in oklab, #f97316 25%, transparent)。oklab 往返会让颜色偏 1-2 个色阶
   （#f97316 实际渲染成 rgb(247,116,24)、#fe9a00 → rgb(252,152,0)），
   所以这里直接写旧站渲染出来的那个 rgba，不能拿调色板原值乘 alpha。
   平铺 CSS 没有变量层，就把（尺寸 + 颜色）的每种组合写成一条规则——
   组合是照着旧站用到的五种枚举的，多写的没用，漏写的会变成黑色阴影。 */
.ring-2.ring-white\/30 { box-shadow: 0 0 0 2px rgba(255, 255, 255, .3); }

/* shadow-sm：0 1px 3px 0 / 0 1px 2px -1px */
.shadow-sm.shadow-primary-500\/25 {
  box-shadow: 0 1px 3px 0 rgba(247, 116, 24, .25), 0 1px 2px -1px rgba(247, 116, 24, .25);
}
/* shadow-md：0 4px 6px -1px / 0 2px 4px -2px */
.shadow-md.shadow-primary-500\/25 {
  box-shadow: 0 4px 6px -1px rgba(247, 116, 24, .25), 0 2px 4px -2px rgba(247, 116, 24, .25);
}
.shadow-md.shadow-amber-500\/30 {
  box-shadow: 0 4px 6px -1px rgba(252, 152, 0, .3), 0 2px 4px -2px rgba(252, 152, 0, .3);
}
.shadow-md.shadow-orange-700\/30 {
  box-shadow: 0 4px 6px -1px rgba(202, 53, 0, .3), 0 2px 4px -2px rgba(202, 53, 0, .3);
}
/* shadow-lg：0 10px 15px -3px / 0 4px 6px -4px */
.shadow-lg.shadow-primary-500\/25 {
  box-shadow: 0 10px 15px -3px rgba(247, 116, 24, .25), 0 4px 6px -4px rgba(247, 116, 24, .25);
}
.shadow-lg.shadow-amber-500\/30 {
  box-shadow: 0 10px 15px -3px rgba(252, 152, 0, .3), 0 4px 6px -4px rgba(252, 152, 0, .3);
}
.shadow-lg.shadow-orange-700\/30 {
  box-shadow: 0 10px 15px -3px rgba(202, 53, 0, .3), 0 4px 6px -4px rgba(202, 53, 0, .3);
}
.blur-3xl {
  -webkit-filter: blur(64px);
  filter: blur(64px);
}

/* ---- 9.8 悬浮态 ---- */
.hover\:bg-gray-100:hover { background-color: #f3f4f6; }
.hover\:bg-gray-50\/50:hover { background-color: rgba(249, 250, 251, .5); }
.hover\:border-primary-300:hover { border-color: #fdba74; }
.group:hover .group-hover\:text-primary-500 { color: #f97316; }

/* ---- 9.9 响应式（Tailwind v4 默认断点：sm 40rem / md 48rem / lg 64rem / xl 80rem）---- */
@media (min-width: 40rem) {
  .sm\:w-auto { width: auto; }
}
@media (min-width: 48rem) {
  .md\:p-8 { padding: 32px; }
  /* 行高不是 1.25：Tailwind v4 的 text-4xl 行高是 --text-4xl--line-height = calc(2.5 / 2.25)
     = 1.1111111 → 36 × 1.1111111 = 40px。写成 1.25 会让所有 text-4xl 的标题高 5px，
     它下面的整段内容跟着下移（live/anchor-apply 的 hero 就是这么整体错位 5px 的）。
     权威值取自旧站编译产物 ref-tw.css，可用 node D:/phpstudy/tmp/textaudit.mjs 复核。 */
  .md\:text-4xl { font-size: 36px; line-height: 1.1111111; }
}

/* ==========================================================================
   10. 其余栅格（榜单 / 直播 / 搜索 / 公告 等页面用到的）
   --------------------------------------------------------------------------
   同第 7 节：基础声明是 float + calc（IE/老内核），@supports 里换真 grid。
   行间距写在「第二行起的子元素」上，免得末行间距被算进容器高度。
   ========================================================================== */

.grid-cols-1 > * { width: 100%; }
.grid-cols-2 > * { float: left; width: 49%; margin: 0 1% 0 0; }
.grid-cols-2 > *:nth-child(2n) { margin-right: 0; }
.grid-cols-2 > *:nth-child(2n+1) { clear: left; }
.grid-cols-2 > *:nth-child(n+3) { margin-top: 16px; }
.grid-cols-3 > * { float: left; width: 32.3%; margin: 0 1% 0 0; }
.grid-cols-3 > *:nth-child(3n) { margin-right: 0; }
.grid-cols-3 > *:nth-child(3n+1) { clear: left; }
.grid-cols-3 > *:nth-child(n+4) { margin-top: 16px; }
.grid-cols-1:after, .grid-cols-2:after, .grid-cols-3:after { content: ""; display: block; clear: both; }

@supports (grid-template-columns: repeat(2, minmax(0, 1fr))) {
  /* 列数必须「基础在前、响应式在后」，跟 Tailwind 产物一个顺序：基础工具类先出，
     带 sm:/md:/lg:/xl: 的变体包在 @media 里后出，靠「同特异性后者胜」压过基础类。
     曾经基础类分散在第 7 节和第 10 节两处，结果 .grid-cols-1（第 10 节）排在
     .sm\:grid-cols-2（第 7 节）之后，1440px 下本该两栏的卡片被压成一栏、
     整页高出 300+ 像素。所以这里统一收口，别再往别处加。
     .grid-cols-4 / .sm\:grid-cols-8 在下面「详情页栅格」一节里，顺序同样是基础在前。 */
  .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }

  /* 断点与 Tailwind v4 默认一致：sm 40rem / md 48rem / lg 64rem / xl 80rem */
  @media (min-width: 40rem) {
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  @media (min-width: 48rem) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  @media (min-width: 64rem) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  }
  @media (min-width: 80rem) {
    .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  .grid-cols-1:after, .grid-cols-2:after, .grid-cols-3:after { content: none; display: none; }
  .grid-cols-1 > *, .grid-cols-2 > *, .grid-cols-2 > *:nth-child(2n), .grid-cols-2 > *:nth-child(n+3),
  .grid-cols-3 > *, .grid-cols-3 > *:nth-child(3n), .grid-cols-3 > *:nth-child(n+4) {
    float: none;
    width: auto;
    margin: 0;
    clear: none;
  }
}

/* ==========================================================================
   动漫排行榜：TOP3 第 3 名的名次徽章
   （旧站用 Tailwind 的 bg-gradient-to-br from-amber-600 to-orange-700，
   首页那组同名渐变组合里只有到 amber-700 的版本，这里补上到 orange-700 的。）
   第一条 sRGB 供 IE / 360 兼容模式使用（IE 会丢弃后面不认识的两条），
   后两条与旧站在现代浏览器下渲染的结果逐字节一致。
   ========================================================================== */
.bg-gradient-to-br.from-amber-600.to-orange-700 {
  background-image: linear-gradient(to bottom right, #e17100, #ca3500);
  background-image: linear-gradient(to bottom right, lab(60.3514 40.5624 87.1228) 0%, lab(46.4615 57.7275 70.8507) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(60.3514 40.5624 87.1228) 0%, lab(46.4615 57.7275 70.8507) 100%);
}

/* ==========================================================================
   搜索页：结果分组间距 / 空态 / 结果标题字重
   （旧站搜索结果分组用 space-y-8，空态用 py-20，结果标题里的计数用 font-normal；
   现有 CSS 里这三条没有规则，按本文件其它间距工具类的刻度补：
   0.25rem 一格 → py-20 = 80px、space-y-8 = 32px。三者都是 IE 认识的属性，
   不需要进 @supports。）
   ========================================================================== */
.font-normal { font-weight: 400; }
.py-20 { padding-top: 80px; padding-bottom: 80px; }
/* space-y-8 见 home.css「纵向间距」一节 */

/* ==========================================================================
   充值中心 / 个人中心（登录态）补齐
   --------------------------------------------------------------------------
   充值 / 个人中心 / 青少年三个页面在登录态下用到的工具类，1~11 节里没有规则的
   补在这里。数值来源与前面各节一致：
     - 颜色 = 旧站 lab()/oklch() 调色板的实际渲染值（同 9.5，十六进制）；
     - 间距 / 圆角 / 尺寸 = 旧站编译产物（tw.css）里的 Tailwind v4 刻度，
       --spacing 0.25rem、--radius-xl 0.75rem、--container-5xl 64rem，
       换算成 px 后与本文件其它同名条目写法一致。
   ========================================================================== */

/* ---- 12.1 定位 / 尺寸 / 间距 ---- */
.-top-2 { top: -8px; }                        /* 充值档位「最划算」角标 */
.-top-2\.5 { top: -10px; }                    /* VIP 档位角标 */
.-mt-4 { margin-top: -16px; }                 /* 个人中心：内容区上压住 banner */
.bottom-8 { bottom: 32px; }                   /* 充值页 toast */
.z-\[100\] { z-index: 100; }
.pt-5 { padding-top: 20px; }
.pb-10 { padding-bottom: 40px; }

/* 3:4 封面（最近观看 / 我的收藏）：写法同 9.2 的 aspect-[16/10] ——
   IE 没有 aspect-ratio，用 padding 撑高；认 aspect-ratio 的内核走 @supports。 */
.aspect-\[3\/4\] { height: 0; padding-bottom: 133.3333%; }
@supports (aspect-ratio: 3 / 4) {
  .aspect-\[3\/4\] { height: auto; padding-bottom: 0; aspect-ratio: 3 / 4; }
}

/* ---- 12.2 排版 / 对齐 ---- */
.text-\[10px\] { font-size: 10px; }           /* 旧站也只输出 font-size，行高照旧继承 */
.line-through { text-decoration: line-through; text-decoration-line: line-through; }
.items-baseline { -ms-flex-align: baseline; align-items: baseline; }
.items-end { -ms-flex-align: end; align-items: flex-end; }

/* ---- 12.3 颜色（等号右边是旧站 lab()/oklch() 调色板的实际渲染值）----
   amber-50 / amber-200 / amber-700 / gray-900 已在详情页那节补过，这里不重复。 */
.bg-amber-200 { background-color: #fee685; }
.bg-sky-500 { background-color: #00a6f4; }
.border-primary-400 { border-color: #fb923c; }          /* 选中的充值档位 */
.border-white\/30 { border-color: rgba(255, 255, 255, .3); }
.text-blue-500 { color: #2b7fff; }
.text-cyan-500 { color: #00b8db; }
.text-pink-500 { color: #f6339a; }

/* ---- 12.4 边框 / 圆角 ---- */
/* 币种页签的下边框去掉，和下面的内容卡拼成一体（旧站是 border-b-0） */
.border-b-0 { border-bottom-width: 0; border-bottom-style: solid; }
.rounded-b-xl { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.rounded-tr-xl { border-top-right-radius: 12px; }

/* ---- 12.5 悬浮态 / 禁用态 ---- */
.hover\:bg-amber-200:hover { background-color: #fee685; }
.hover\:bg-sky-600:hover { background-color: #0084d1; }
.hover\:text-amber-700:hover { color: #bb4d00; }
.hover\:shadow-sm:hover { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
.hover\:shadow-md:hover { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
/* 旧站是 hover:shadow-lg + hover:shadow-amber-500/25（后者只给 --tw-shadow-color 上色），
   这里按 9.7 的合并写法写成一条。 */
.hover\:shadow-lg.hover\:shadow-amber-500\/25:hover {
  box-shadow: 0 10px 15px -3px rgba(249, 156, 0, .25), 0 4px 6px -4px rgba(249, 156, 0, .25);
}
.group:hover .group-hover\:scale-105 { -ms-transform: scale(1.05); -webkit-transform: scale(1.05); transform: scale(1.05); }
.group:hover .group-hover\:text-gray-600 { color: #4a5565; }
.disabled\:opacity-60:disabled { opacity: .6; }

/* ---- 12.6 渐变（同 9.6：写成具体色值；认 lab() 的内核用后两条，
   与旧站 --tw-gradient-position: … in oklab 的插值结果逐字节一致）---- */
.bg-gradient-to-br.from-amber-50.to-orange-50 {
  background-image: linear-gradient(to bottom right, #fffbeb, #fff7ed);
  background-image: linear-gradient(to bottom right, lab(98.6252 -0.635982 8.42309) 0%, lab(97.7008 1.53738 5.90646) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(98.6252 -0.635982 8.42309) 0%, lab(97.7008 1.53738 5.90646) 100%);
}
/* 个人中心「功能入口」8 个图标方块的底色（旧站 bg-gradient-to-br from-X to-Y）。
   其中 from-green-400 to-emerald-500、from-orange-400 to-amber-500 在 9.6 已有，
   这里补其余 6 组；写法同上一节：第一条给 IE，后两条与旧站 oklab 插值一致。 */
.bg-gradient-to-br.from-pink-400.to-rose-500 {
  background-image: linear-gradient(to bottom right, #fb64b6, #ff2056);
  background-image: linear-gradient(to bottom right, lab(64.5597 64.3615 -12.7988) 0%, lab(56.101 79.4329 31.4532) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(64.5597 64.3615 -12.7988) 0%, lab(56.101 79.4329 31.4532) 100%);
}
.bg-gradient-to-br.from-blue-400.to-cyan-500 {
  background-image: linear-gradient(to bottom right, #50a2ff, #00b8db);
  background-image: linear-gradient(to bottom right, lab(65.0361 -1.42062 -56.9803) 0%, lab(67.805 -35.3952 -30.2018) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(65.0361 -1.42062 -56.9803) 0%, lab(67.805 -35.3952 -30.2018) 100%);
}
.bg-gradient-to-br.from-purple-400.to-violet-500 {
  background-image: linear-gradient(to bottom right, #c27aff, #8e51ff);
  background-image: linear-gradient(to bottom right, lab(63.6946 47.6127 -59.2066) 0%, lab(49.9355 55.1777 -81.8963) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(63.6946 47.6127 -59.2066) 0%, lab(49.9355 55.1777 -81.8963) 100%);
}
.bg-gradient-to-br.from-teal-400.to-cyan-500 {
  background-image: linear-gradient(to bottom right, #00d5be, #00b8db);
  background-image: linear-gradient(to bottom right, lab(76.0109 -53.3483 -2.27907) 0%, lab(67.805 -35.3952 -30.2018) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(76.0109 -53.3483 -2.27907) 0%, lab(67.805 -35.3952 -30.2018) 100%);
}
.bg-gradient-to-br.from-red-400.to-pink-500 {
  background-image: linear-gradient(to bottom right, #ff6467, #f6339a);
  background-image: linear-gradient(to bottom right, lab(63.7053 60.7449 31.3109) 0%, lab(56.9303 76.8162 -8.07021) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(63.7053 60.7449 31.3109) 0%, lab(56.9303 76.8162 -8.07021) 100%);
}
.bg-gradient-to-br.from-gray-400.to-slate-500 {
  background-image: linear-gradient(to bottom right, #99a1af, #62748e);
  background-image: linear-gradient(to bottom right, lab(65.9269 -0.832707 -8.17474) 0%, lab(48.0876 -2.03595 -16.5814) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(65.9269 -0.832707 -8.17474) 0%, lab(48.0876 -2.03595 -16.5814) 100%);
}
/* 注：个人中心的 4 列统计行（grid grid-cols-4 gap-3）的 float / grid 两套实现
   由后面「详情页栅格」一节统一提供，这里不重复。 */

/* ==========================================================================
   动漫详情页（pages/manga-detail.php）
   --------------------------------------------------------------------------
   旧站是 Tailwind v4，下面这些类名在本文件与 home.css 里都没有对应规则
   （用「类名 -> 是否有 .类名 选择器」全量扫过一遍确认过）。取值口径同本文件开头：
   颜色写「lab() 换算出的 sRGB 十六进制」，间距按 0.25rem 一格。
   用的都是 IE 认识的属性，不进 @supports。
   ========================================================================== */

/* 简介 / 评论正文的断行：IE 只认 word-wrap，现代内核用 overflow-wrap */
.break-words { word-wrap: break-word; overflow-wrap: break-word; }
/* 星级评分：选中态是填充星（fill="currentColor"），没选中的是描边星 */
.fill-current { fill: currentColor; }

/* 简介与评论区的间距 / 宽度（max-w-5xl = 64rem = 1024px，max-h-64 = 16rem = 256px） */
.max-w-5xl { max-width: 1024px; }
.max-h-64 { max-height: 256px; }
.mx-1\.5 { margin-left: 6px; margin-right: 6px; }
.p-0\.5 { padding: 2px; }
/* 剧集列表锚点：跳到某一话时给吸顶页头留出 5rem 空间 */
.scroll-mt-20 { scroll-margin-top: 80px; }

/* 打榜 / 评分卡片的琥珀色系（amber-50 #fffbeb / amber-200 #fee685 / amber-700 #bb4d00） */
.bg-amber-50 { background-color: #fffbeb; }
.border-amber-200 { border-color: #fee685; }
.text-amber-700 { color: #bb4d00; }
.bg-orange-300 { background-color: #ffb86a; }

/* 礼物按钮悬浮态（hover:bg-amber-100 → #fef3c6） */
.hover\:bg-amber-100:hover { background-color: #fef3c6; }
/* 礼物卡未选中时是 border-gray-100，悬浮时加深到 gray-200 */
.hover\:border-gray-200:hover { border-color: #e5e7eb; }
/* 评论作者名悬浮变橙（orange-500 #ff6900） */
.hover\:text-orange-500:hover { color: #ff6900; }

/* 评论输入框右下角的「发布」按钮：未禁用时是橙色，禁用时回到灰底灰字 */
.disabled\:bg-gray-200:disabled { background-color: #e5e7eb; }
.disabled\:text-gray-400:disabled { color: #99a1af; }

/* 评分区右对齐 */
.justify-end { justify-content: flex-end; }

/* ==========================================================================
   直播详情页（pages/live-detail.php）
   --------------------------------------------------------------------------
   整页是深色的（bg-gray-950 打底），下面这批同样是两个 CSS 文件里都没有的类。
   ========================================================================== */

/* 直播加载指示器：转圈 + 「正在连接直播流」的脉冲提示点 */
@-webkit-keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
@keyframes spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
.animate-spin {
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}
@-webkit-keyframes ping { 75%, 100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } }
@keyframes ping { 75%, 100% { -webkit-transform: scale(2); transform: scale(2); opacity: 0; } }
.animate-ping {
  -webkit-animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
/* 播放器里的视频按原始比例缩放，不裁切（IE 不认识 object-fit，会退回拉伸整块，
   与旧站在 IE 下的表现一致 —— 旧站也是靠 object-contain） */
.object-contain { object-fit: contain; }
.opacity-75 { opacity: 0.75; }

/* 深色面板（gray-800 #1e2939 / gray-900 #101828 / gray-950 #030712） */
.bg-gray-800 { background-color: #1e2939; }
.bg-gray-900 { background-color: #101828; }
.bg-gray-950 { background-color: #030712; }
.border-gray-700 { border-color: #364153; }
.border-gray-800 { border-color: #1e2939; }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.2); }
/* 充值按钮 / 送礼按钮的主色 */
.bg-primary-500\/80 { background-color: rgba(249, 115, 22, 0.8); }
/* 「已结束」标记 */
.bg-red-600 { background-color: #e7000b; }

/* 加载指示器：4px 白圈，只有上边是实白 */
.border-4 { border-width: 4px; }
.border-t-white { border-top-color: #fff; }

/* 聊天面板左侧分隔线（旧站 border-l border-gray-800） */
.border-l { border-left-style: solid; border-left-width: 1px; }
/* 粉丝团 tab 底部的 0.5 格指示条（h-0.5 = 2px），定位在中间 1/2 宽 */
.h-0\.5 { height: 2px; }
.left-1\/4 { left: 25%; }
.right-1\/4 { right: 25%; }

/* 聊天面板高度：移动端固定 400px，lg 起交给 flex 撑满
   （h-[calc(100vh-64px)] 是播放器区域：减掉 4rem 的吸顶页头） */
.h-\[400px\] { height: 400px; }
.min-h-\[240px\] { min-height: 240px; }
.h-\[calc\(100vh-64px\)\] { height: calc(100vh - 64px); }
.max-w-\[1600px\] { max-width: 1600px; }

/* 深色输入框的占位符（gray-500 #6a7282），写法与 home.css 的 placeholder-gray-400 一致 */
.placeholder-gray-500::-webkit-input-placeholder { color: #6a7282; }
.placeholder-gray-500:-ms-input-placeholder { color: #6a7282; }
.placeholder-gray-500::placeholder { color: #6a7282; }

/* 深色面板上的悬浮态 */
.hover\:bg-gray-800:hover { background-color: #1e2939; }
.hover\:text-gray-300:hover { color: #d1d5dc; }
.hover\:text-white:hover { color: #fff; }
.hover\:bg-black\/70:hover { background-color: rgba(0, 0, 0, 0.7); }
/* 直播结束后的黑色遮罩（absolute inset-0 bg-black/80 z-10） */
.bg-black\/80 { background-color: rgba(0, 0, 0, 0.8); }

/* ==========================================================================
   详情页「点了之后才出现」的样式
   --------------------------------------------------------------------------
   下面这些类只在交互态下才出现在 DOM 里（关注后的灰底、送礼后弹幕里的礼物
   表情弹跳、表情面板的选中态……），首屏 HTML 里没有，所以类名扫描扫不到。
   取值同本文件其它工具类。
   ========================================================================== */

/* 关注按钮已关注态：bg-gray-600 text-gray-300 hover:bg-gray-500 */
.bg-gray-600 { background-color: #4a5565; }
.hover\:bg-gray-500:hover { background-color: #6a7282; }
/* 粉丝团「已加入粉丝团」态：bg-gray-700 hover:bg-gray-600 */
.bg-gray-700 { background-color: #364153; }
.hover\:bg-gray-600:hover { background-color: #4a5565; }
/* 弹幕里的系统提示底色 */
.bg-gray-800\/50 { background-color: rgba(30, 41, 57, 0.5); }

/* 送礼弹幕里的礼物表情（旧站 animate-bounce） */
@-webkit-keyframes bounce {
  0%, 100% { -webkit-transform: translateY(-25%); transform: translateY(-25%); -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}
@keyframes bounce {
  0%, 100% { -webkit-transform: translateY(-25%); transform: translateY(-25%); -webkit-animation-timing-function: cubic-bezier(0.8, 0, 1, 1); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation-timing-function: cubic-bezier(0, 0, 0.2, 1); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}
.animate-bounce {
  -webkit-animation: bounce 1s infinite;
  animation: bounce 1s infinite;
}

/* 收藏按钮已收藏态（bg-pink-50 text-pink-600 border border-pink-200 hover:bg-pink-100） */
.bg-pink-50 { background-color: #fdf2f8; }
.text-pink-600 { color: #e60076; }
.border-pink-200 { border-color: #fccee8; }
.hover\:bg-pink-100:hover { background-color: #fce7f3; }

/* 金币不足弹窗（fixed inset-0 z-[100] … w-[360px] max-w-full） */
.w-\[360px\] { width: 360px; }
.max-w-full { max-width: 100%; }

/* 直播聊天面板剩下的几处 */
.bg-gray-900\/50 { background-color: rgba(16, 24, 40, 0.5); }   /* gray-900 #101828 的 50% */
.break-all { word-break: break-all; }
.inline { display: inline; }
.mr-1\.5 { margin-right: 6px; }
.max-h-40 { max-height: 160px; }
.text-primary-400 { color: #fb923c; }
.hover\:bg-gray-700:hover { background-color: #364153; }
/* 粉丝团「加入」按钮的悬浮态 */
.hover\:opacity-90:hover { opacity: 0.9; }

/* ==========================================================================
   直播弹幕里的用户头像色块 + 表情面板栅格
   --------------------------------------------------------------------------
   弹幕首屏是隐藏模板（旧站是客户端 setInterval 造的），所以这批色块只在
   JS 把模板显示出来之后才用得上；色值同样是旧站 lab() 调色板的 sRGB 渲染值，
   第三条声明与旧站的 `linear-gradient(to bottom right in oklab, …)` 同构。
   表情面板是 `grid grid-cols-8 gap-1`，写法同第 10 节（float + calc / @supports）。
   ========================================================================== */

.grid-cols-8 > * { float: left; width: 12%; margin: 0 0.25% 4px 0; }
.grid-cols-8 > *:nth-child(8n) { margin-right: 0; }
.grid-cols-8 > *:nth-child(8n+1) { clear: left; }
.grid-cols-8:after { content: ""; display: block; clear: both; }

@supports (grid-template-columns: repeat(8, minmax(0, 1fr))) {
  .grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .grid-cols-8 > *, .grid-cols-8 > *:nth-child(8n), .grid-cols-8 > *:nth-child(8n+1) {
    float: none;
    width: auto;
    margin: 0;
    clear: none;
  }
  .grid-cols-8:after { content: none; display: none; }
}

/* 播放器底部弹幕条的渐隐遮罩（旧站 bg-gradient-to-t from-black/80 via-black/40 to-transparent）。
   同第 4 节：第一条 sRGB 给 IE/360 兼容模式，第二条与旧站同构；
   黑色到透明的插值在 oklab 与 sRGB 下等价，两条渲染结果相同。 */
.bg-gradient-to-t.from-black\/80.via-black\/40.to-transparent {
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0));
  background-image: linear-gradient(to top in oklab, color-mix(in srgb, #000 80%, transparent), color-mix(in srgb, #000 40%, transparent) 50%, transparent);
}
/* 聊天面板的滚动区在 lg 起允许收缩（否则 flex 子项撑高，整页跟着变长） */
@media (min-width: 64rem) {
  .lg\:w-\[320px\] { width: 320px; }
  .lg\:h-auto { height: auto; }
  .lg\:h-full { height: 100%; }
  .lg\:min-h-0 { min-height: 0; }
}
@media (min-width: 80rem) {
  .xl\:w-\[360px\] { width: 360px; }
}

/* ==========================================================================
   详情页栅格（grid-cols-4 / sm:grid-cols-8）
   --------------------------------------------------------------------------
   与第 10 节同一套写法：基础是 float + calc（IE / 老内核），@supports 里换真 grid。
   这几处栅格用的间距不同（礼物栏 gap-2 = 8px、个人中心统计卡 gap-3 = 12px），
   所以按「列数 + gap」分别写：4 列 n 格的总间距 = (4-1) × gap，单元格宽度取余数。
   个人中心（pages/profile.php）的统计卡也用 grid-cols-4 gap-3，一并补齐。
   ========================================================================== */

.grid-cols-4 > * { width: 24%; }
.grid.grid-cols-4.gap-2 > * { float: left; width: 24%; margin: 0 0.45% 8px 0; }
.grid.grid-cols-4.gap-2 > *:nth-child(4n) { margin-right: 0; }
.grid.grid-cols-4.gap-2 > *:nth-child(4n+1) { clear: left; }
.grid.grid-cols-4.gap-3 > * { float: left; width: 24%; margin: 0 0.65% 12px 0; }
.grid.grid-cols-4.gap-3 > *:nth-child(4n) { margin-right: 0; }
.grid.grid-cols-4.gap-3 > *:nth-child(4n+1) { clear: left; }
.grid.grid-cols-4:after { content: ""; display: block; clear: both; }

/* sm 起礼物栏从 4 列变 8 列（旧站 grid-cols-4 sm:grid-cols-8 gap-2） */
@media (min-width: 40rem) {
  .grid.grid-cols-4.sm\:grid-cols-8.gap-2 > * { width: 12%; }
  .grid.grid-cols-4.sm\:grid-cols-8.gap-2 > *:nth-child(4n) { margin-right: 8px; }
  .grid.grid-cols-4.sm\:grid-cols-8.gap-2 > *:nth-child(4n+1) { clear: none; }
  .grid.grid-cols-4.sm\:grid-cols-8.gap-2 > *:nth-child(8n) { margin-right: 0; }
  .grid.grid-cols-4.sm\:grid-cols-8.gap-2 > *:nth-child(8n+1) { clear: left; }
  /* 剧集列表在窄屏竖排、sm 起横排 */
  .sm\:flex-row { flex-direction: row; }
  .sm\:w-44 { width: 176px; }
}

@supports (grid-template-columns: repeat(4, minmax(0, 1fr))) {
  .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-cols-4 > *,
  .grid.grid-cols-4.gap-2 > *, .grid.grid-cols-4.gap-2 > *:nth-child(4n), .grid.grid-cols-4.gap-2 > *:nth-child(4n+1),
  .grid.grid-cols-4.gap-3 > *, .grid.grid-cols-4.gap-3 > *:nth-child(4n), .grid.grid-cols-4.gap-3 > *:nth-child(4n+1) {
    float: none;
    width: auto;
    margin: 0;
    clear: none;
  }
  .grid.grid-cols-4:after { content: none; display: none; }
  @media (min-width: 40rem) {
    .sm\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .grid.grid-cols-4.sm\:grid-cols-8.gap-2 > *,
    .grid.grid-cols-4.sm\:grid-cols-8.gap-2 > *:nth-child(4n), .grid.grid-cols-4.sm\:grid-cols-8.gap-2 > *:nth-child(4n+1),
    .grid.grid-cols-4.sm\:grid-cols-8.gap-2 > *:nth-child(8n), .grid.grid-cols-4.sm\:grid-cols-8.gap-2 > *:nth-child(8n+1) {
      float: none;
      width: auto;
      margin: 0;
      clear: none;
    }
  }
}

/* ==========================================================================
   直播弹幕头像色块：旧站 liveChatUsers 的 avatarGradient 组合
   （bg-gradient-to-br from-X to-Y，共 25 组；from-primary-400 to-pink-500 与
   from-primary-600 to-purple-600 本文件/home.css 里已有，不重复。）
   三条声明的含义同第 4 节：第一条 sRGB 供 IE/360 兼容模式，后两条与旧站同构。
   ========================================================================== */
.bg-gradient-to-br.from-amber-400.to-yellow-400 {
  background-image: linear-gradient(to bottom right, #ffb900, #fdc700);
  background-image: linear-gradient(to bottom right, lab(80.1641% 16.6016 99.2089) 0%, lab(83.2664% 8.65132 106.895) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(80.1641% 16.6016 99.2089) 0%, lab(83.2664% 8.65132 106.895) 100%);
}
.bg-gradient-to-br.from-blue-400.to-cyan-400 {
  background-image: linear-gradient(to bottom right, #50a2ff, #00d3f2);
  background-image: linear-gradient(to bottom right, lab(65.0361% -1.42062 -56.9803) 0%, lab(76.6045% -40.9406 -29.6231) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(65.0361% -1.42062 -56.9803) 0%, lab(76.6045% -40.9406 -29.6231) 100%);
}
.bg-gradient-to-br.from-blue-500.to-indigo-400 {
  background-image: linear-gradient(to bottom right, #2b7fff, #7c86ff);
  background-image: linear-gradient(to bottom right, lab(54.1736% 13.3368 -74.6839) 0%, lab(59.866% 22.4833 -64.4485) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(54.1736% 13.3368 -74.6839) 0%, lab(59.866% 22.4833 -64.4485) 100%);
}
.bg-gradient-to-br.from-cyan-400.to-teal-400 {
  background-image: linear-gradient(to bottom right, #00d3f2, #00d5be);
  background-image: linear-gradient(to bottom right, lab(76.6045% -40.9406 -29.6231) 0%, lab(76.0109% -53.3483 -2.27907) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(76.6045% -40.9406 -29.6231) 0%, lab(76.0109% -53.3483 -2.27907) 100%);
}
.bg-gradient-to-br.from-emerald-400.to-teal-400 {
  background-image: linear-gradient(to bottom right, #00d492, #00d5be);
  background-image: linear-gradient(to bottom right, lab(75.0771% -60.7313 19.4146) 0%, lab(76.0109% -53.3483 -2.27907) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(75.0771% -60.7313 19.4146) 0%, lab(76.0109% -53.3483 -2.27907) 100%);
}
.bg-gradient-to-br.from-fuchsia-400.to-purple-400 {
  background-image: linear-gradient(to bottom right, #ed6bff, #c27aff);
  background-image: linear-gradient(to bottom right, lab(66.1178% 66.0652 -52.4733) 0%, lab(63.6946% 47.6127 -59.2066) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(66.1178% 66.0652 -52.4733) 0%, lab(63.6946% 47.6127 -59.2066) 100%);
}
.bg-gradient-to-br.from-gray-400.to-slate-400 {
  background-image: linear-gradient(to bottom right, #99a1af, #90a1b9);
  background-image: linear-gradient(to bottom right, lab(65.9269% -.832707 -8.17474) 0%, lab(65.5349% -2.25151 -14.5072) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(65.9269% -.832707 -8.17474) 0%, lab(65.5349% -2.25151 -14.5072) 100%);
}
.bg-gradient-to-br.from-green-400.to-emerald-400 {
  background-image: linear-gradient(to bottom right, #05df72, #00d492);
  background-image: linear-gradient(to bottom right, lab(78.503% -64.9265 39.7492) 0%, lab(75.0771% -60.7313 19.4146) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(78.503% -64.9265 39.7492) 0%, lab(75.0771% -60.7313 19.4146) 100%);
}
.bg-gradient-to-br.from-indigo-400.to-blue-400 {
  background-image: linear-gradient(to bottom right, #7c86ff, #50a2ff);
  background-image: linear-gradient(to bottom right, lab(59.866% 22.4833 -64.4485) 0%, lab(65.0361% -1.42062 -56.9803) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(59.866% 22.4833 -64.4485) 0%, lab(65.0361% -1.42062 -56.9803) 100%);
}
.bg-gradient-to-br.from-lime-300.to-emerald-400 {
  background-image: linear-gradient(to bottom right, #bbf451, #00d492);
  background-image: linear-gradient(to bottom right, lab(89.9218% -35.6546 68.5254) 0%, lab(75.0771% -60.7313 19.4146) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(89.9218% -35.6546 68.5254) 0%, lab(75.0771% -60.7313 19.4146) 100%);
}
.bg-gradient-to-br.from-lime-400.to-green-400 {
  background-image: linear-gradient(to bottom right, #9ae600, #05df72);
  background-image: linear-gradient(to bottom right, lab(83.7876% -45.0447 88.4738) 0%, lab(78.503% -64.9265 39.7492) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(83.7876% -45.0447 88.4738) 0%, lab(78.503% -64.9265 39.7492) 100%);
}
.bg-gradient-to-br.from-orange-300.to-red-400 {
  background-image: linear-gradient(to bottom right, #ffb86a, #ff6467);
  background-image: linear-gradient(to bottom right, lab(80.8059% 21.7313 50.4455) 0%, lab(63.7053% 60.7449 31.3109) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(80.8059% 21.7313 50.4455) 0%, lab(63.7053% 60.7449 31.3109) 100%);
}
.bg-gradient-to-br.from-orange-400.to-amber-400 {
  background-image: linear-gradient(to bottom right, #ff8904, #ffb900);
  background-image: linear-gradient(to bottom right, lab(70.0429% 42.5156 75.8207) 0%, lab(80.1641% 16.6016 99.2089) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(70.0429% 42.5156 75.8207) 0%, lab(80.1641% 16.6016 99.2089) 100%);
}
.bg-gradient-to-br.from-pink-400.to-rose-400 {
  background-image: linear-gradient(to bottom right, #fb64b6, #ff637e);
  background-image: linear-gradient(to bottom right, lab(64.5597% 64.3615 -12.7988) 0%, lab(64.4124% 63.0291 19.2068) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(64.5597% 64.3615 -12.7988) 0%, lab(64.4124% 63.0291 19.2068) 100%);
}
.bg-gradient-to-br.from-pink-500.to-fuchsia-400 {
  background-image: linear-gradient(to bottom right, #f6339a, #ed6bff);
  background-image: linear-gradient(to bottom right, lab(56.9303% 76.8162 -8.07021) 0%, lab(66.1178% 66.0652 -52.4733) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(56.9303% 76.8162 -8.07021) 0%, lab(66.1178% 66.0652 -52.4733) 100%);
}
.bg-gradient-to-br.from-purple-400.to-violet-400 {
  background-image: linear-gradient(to bottom right, #c27aff, #a684ff);
  background-image: linear-gradient(to bottom right, lab(63.6946% 47.6127 -59.2066) 0%, lab(62.8239% 34.9159 -60.0512) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(63.6946% 47.6127 -59.2066) 0%, lab(62.8239% 34.9159 -60.0512) 100%);
}
.bg-gradient-to-br.from-red-400.to-pink-400 {
  background-image: linear-gradient(to bottom right, #ff6467, #fb64b6);
  background-image: linear-gradient(to bottom right, lab(63.7053% 60.7449 31.3109) 0%, lab(64.5597% 64.3615 -12.7988) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(63.7053% 60.7449 31.3109) 0%, lab(64.5597% 64.3615 -12.7988) 100%);
}
.bg-gradient-to-br.from-red-500.to-orange-400 {
  background-image: linear-gradient(to bottom right, #fb2c36, #ff8904);
  background-image: linear-gradient(to bottom right, lab(55.4814% 75.0732 48.8528) 0%, lab(70.0429% 42.5156 75.8207) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(55.4814% 75.0732 48.8528) 0%, lab(70.0429% 42.5156 75.8207) 100%);
}
.bg-gradient-to-br.from-rose-400.to-red-400 {
  background-image: linear-gradient(to bottom right, #ff637e, #ff6467);
  background-image: linear-gradient(to bottom right, lab(64.4124% 63.0291 19.2068) 0%, lab(63.7053% 60.7449 31.3109) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(64.4124% 63.0291 19.2068) 0%, lab(63.7053% 60.7449 31.3109) 100%);
}
.bg-gradient-to-br.from-sky-300.to-indigo-400 {
  background-image: linear-gradient(to bottom right, #74d4ff, #7c86ff);
  background-image: linear-gradient(to bottom right, lab(80.3307% -20.2945 -31.385) 0%, lab(59.866% 22.4833 -64.4485) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(80.3307% -20.2945 -31.385) 0%, lab(59.866% 22.4833 -64.4485) 100%);
}
.bg-gradient-to-br.from-sky-400.to-blue-400 {
  background-image: linear-gradient(to bottom right, #00bcff, #50a2ff);
  background-image: linear-gradient(to bottom right, lab(70.687% -23.6078 -45.9483) 0%, lab(65.0361% -1.42062 -56.9803) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(70.687% -23.6078 -45.9483) 0%, lab(65.0361% -1.42062 -56.9803) 100%);
}
.bg-gradient-to-br.from-teal-400.to-green-400 {
  background-image: linear-gradient(to bottom right, #00d5be, #05df72);
  background-image: linear-gradient(to bottom right, lab(76.0109% -53.3483 -2.27907) 0%, lab(78.503% -64.9265 39.7492) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(76.0109% -53.3483 -2.27907) 0%, lab(78.503% -64.9265 39.7492) 100%);
}
.bg-gradient-to-br.from-violet-300.to-pink-400 {
  background-image: linear-gradient(to bottom right, #c4b4ff, #fb64b6);
  background-image: linear-gradient(to bottom right, lab(76.7419% 18.391 -37.0706) 0%, lab(64.5597% 64.3615 -12.7988) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(76.7419% 18.391 -37.0706) 0%, lab(64.5597% 64.3615 -12.7988) 100%);
}
.bg-gradient-to-br.from-violet-400.to-purple-400 {
  background-image: linear-gradient(to bottom right, #a684ff, #c27aff);
  background-image: linear-gradient(to bottom right, lab(62.8239% 34.9159 -60.0512) 0%, lab(63.6946% 47.6127 -59.2066) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(62.8239% 34.9159 -60.0512) 0%, lab(63.6946% 47.6127 -59.2066) 100%);
}
.bg-gradient-to-br.from-yellow-400.to-orange-400 {
  background-image: linear-gradient(to bottom right, #fdc700, #ff8904);
  background-image: linear-gradient(to bottom right, lab(83.2664% 8.65132 106.895) 0%, lab(70.0429% 42.5156 75.8207) 100%);
  background-image: linear-gradient(to bottom right in oklab, lab(83.2664% 8.65132 106.895) 0%, lab(70.0429% 42.5156 75.8207) 100%);
}

/* ==========================================================================
   补缺工具类（动漫详情 / 主播申请 / 公告 等页面用到、此前未收录的）
   --------------------------------------------------------------------------
   取值与旧站编译产物一致：--spacing = .25rem = 4px；琥珀色系按本文件惯例
   用 lab() 调色板的 sRGB 渲染值（amber-50 #fffbeb / amber-300 #ffd230 /
   amber-800 #973c00，换算方法见文件头注释）。
   全部是 IE 认识的属性，不进 @supports。
   ========================================================================== */
.pt-3 { padding-top: 12px; }
.pb-3 { padding-bottom: 12px; }
/* 旧站是 padding-block: calc(var(--spacing) * 12)，IE 不认识 padding-block，
   按 ltr 展开成上下内边距 */
.py-12 { padding-top: 48px; padding-bottom: 48px; }

.border-amber-300 { border-color: #ffd230; }
.text-amber-300 { color: #ffd230; }   /* 详情页当前章节皇冠 */
.text-amber-800 { color: #973c00; }
.text-cyan-600 { color: #0092b8; }    /* 充值页「钻石充值」激活页签（lab(55.1767 -26.7496 -30.5138) 的 sRGB 渲染值） */
.hover\:bg-amber-50:hover { background-color: #fffbeb; }

/* line-clamp-4：与 home.css 的 line-clamp-1 / 2 同一套 -webkit-box 写法 */
.line-clamp-4 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

/* 空态整行占满：动漫分类页空态卡（grid-cols-2 sm:grid-cols-3 md:grid-cols-4
   lg:grid-cols-5 里的 col-span-full py-20 text-center）。
   IE 走 float 清除 + 100% 宽（比 .grid-cols-N > * 的 float:left 多一个类，特异性压得住）；
   现代内核在 @supports 里换真 grid-column。 */
.grid-cols-2 > .col-span-full,
.grid-cols-3 > .col-span-full,
.grid-cols-4 > .col-span-full,
.grid-cols-8 > .col-span-full {
  float: none;
  width: 100%;
  margin: 0;
  clear: both;
}
@supports (grid-template-columns: repeat(2, minmax(0, 1fr))) {
  .col-span-full { grid-column: 1 / -1; }
}

/* ==========================================================================
   个人中心「修改头像」弹窗（对齐旧站 AvatarUploadDialog.tsx）
   ========================================================================== */
.w-\[440px\] { width: 440px; }
.w-\[260px\] { width: 260px; }
.h-\[260px\] { height: 260px; }
.h-52 { height: 208px; }
.border-dashed { border-style: dashed; }
.p-1\.5 { padding: 6px; }
.cursor-move { cursor: move; }
.touch-none { touch-action: none; }
.accent-primary-500 { accent-color: #f97316; }

/* ==========================================================================
   偏好设置页（对齐旧站 /user/settings）
   ========================================================================== */
.pb-12 { padding-bottom: 48px; }
.translate-x-6 {
  -ms-transform: translateX(24px);
  -webkit-transform: translateX(24px);
  transform: translateX(24px);
}

/* ==========================================================================
   实名认证弹窗 + 头像裁剪框（sky 色系 / border-white）
   ========================================================================== */
.bg-sky-100 { background-color: #dff2fe; }
.text-sky-600 { color: #0084d1; }
.hover\:bg-sky-600:hover { background-color: #0084d1; }

/* ---- 用户子页补充（bg-purple-50 / hover:text-red-500 此前只在 admin.css） ---- */
.bg-purple-50 { background-color: #faf5ff; }
.hover\:text-red-500:hover { color: #ef4444; }

/* ---- 用户子页补充（B 组） ---- */
.bg-blue-500 { background-color: #3b82f6; }
.hover\:bg-blue-600:hover { background-color: #2563eb; }
.bg-teal-500 { background-color: #14b8a6; }
.hover\:bg-teal-600:hover { background-color: #0d9488; }
.py-3\.5 { padding-top: 14px; padding-bottom: 14px; }
.bg-blue-50 { background-color: #eff6ff; }

/* ---- 老内核：未登录门/空态居中兜底（main.flex-1.flex 是各页门卡的居中容器，
        flex 不可用时卡片会贴左上角） ---- */
main.flex-1.flex { padding: 48px 16px; }
main.flex-1.flex > * { margin-left: auto; margin-right: auto; }
@supports (display: flex) {
  main.flex-1.flex { padding: 0; }
  /* 恢复门卡自身的 mx-4（16px）语义，避免小屏贴边 */
  main.flex-1.flex > * { margin-left: 16px; margin-right: 16px; }
}

/* ---- 用户子页补充（细节审计） ---- */
.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
.translate-x-1 {
  -ms-transform: translateX(4px);
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
}
.hover\:border-gray-300:hover { border-color: #d1d5db; }
.text-purple-500 { color: #a855f7; }
.text-teal-500 { color: #14b8a6; }
.text-purple-400 { color: #c084fc; }
/* user-wallet 未登录门渐变（原站 bg-gradient-to-br from-amber-400 to-orange-500） */
.bg-gradient-to-br.from-amber-400.to-orange-500 {
  background-image: linear-gradient(to bottom right, #fdc700, #ff8904);
}

/* ---- 白字渐变容器补纯色兜底（IE8 无线性渐变时白字不至于白底不可见） ---- */
.bg-gradient-to-r.from-primary-600.via-purple-600.to-pink-500 { background-color: #9810fa; }
.bg-gradient-to-r.from-primary-500.to-purple-500 { background-color: #ad46ff; }
.bg-gradient-to-r.from-primary-600.to-purple-600 { background-color: #9810fa; }
.bg-gradient-to-br.from-primary-600.to-purple-600 { background-color: #9810fa; }
.bg-gradient-to-br.from-primary-500.to-purple-600 { background-color: #9810fa; }
.bg-gradient-to-br.from-primary-400.to-pink-500 { background-color: #fb6d9c; }
.bg-gradient-to-br.from-gray-400.to-slate-500 { background-color: #909cb0; }
.bg-gradient-to-br.from-slate-900.via-indigo-950.to-purple-950 { background-color: #0f172a; }
.bg-gradient-to-br.from-slate-800.via-indigo-900.to-purple-900 { background-color: #1e293b; }

/* ---- 老内核：全屏遮罩弹窗的居中兜底（fixed + flex 居中不可用时卡片贴左上角） ---- */
#grAuthDialog, #grVerifyDialog, #grAvatarDialog, #grYouthDialog, #grYouthEntry,
[data-gr-recharge-dialog] {
  text-align: center;
}
#grAuthDialog > div, #grVerifyDialog > div, #grAvatarDialog > div,
#grYouthDialog > div, #grYouthEntry > div, [data-gr-recharge-dialog] > div {
  display: inline-block;
  vertical-align: top;
  text-align: left;
  margin-top: 56px;
}
@supports (display: flex) {
  #grAuthDialog, #grVerifyDialog, #grAvatarDialog, #grYouthDialog, #grYouthEntry,
  [data-gr-recharge-dialog] {
    text-align: left;
  }
  #grAuthDialog > div, #grVerifyDialog > div, #grAvatarDialog > div,
  #grYouthDialog > div, #grYouthEntry > div, [data-gr-recharge-dialog] > div {
    display: block;
    margin-top: 0;
  }
}

/* ==========================================================================
   个人中心 CSS2 布局类（gr-p2-*）
   --------------------------------------------------------------------------
   按用户要求：个人中心页不使用 flex/grid 依赖，一律用 CSS2（浮动 / 行内块 /
   文本对齐）复刻原站布局。现代浏览器与 360 兼容模式渲染一致。
   ========================================================================== */

/* 通用行容器（清浮动）与左右浮动 */
.gr-p2-row { display: block; }
.gr-p2-row:after { content: ""; display: block; clear: both; }
.gr-p2-left { float: left; }
.gr-p2-right { float: right; }
.gr-p2-between > .gr-p2-left,
.gr-p2-between > .gr-p2-right { line-height: 1.6; }

/* 行内块元素（图标 + 文字并排） */
.gr-p2-inline { display: inline-block; vertical-align: middle; }
.gr-p2-inline svg { vertical-align: middle; margin-right: 4px; }

/* 横幅：头像左浮 + 信息区（CSS2 float 布局） */
.gr-p2-banner { display: block; }
.gr-p2-banner:after { content: ""; display: block; clear: both; }
.gr-p2-banner .gr-p2-avatar { float: left; }
.gr-p2-banner .gr-p2-banner-info { margin-left: 100px; }  /* 80px 头像 + 20px 间距 */
.gr-p2-title-row .gr-p2-vip { margin-left: 8px; }
.gr-p2-block { display: block; }
.gr-p2-block svg { vertical-align: middle; margin-right: 2px; }

/* 功能入口卡片：块级 + 居中（flex-col items-center 的 CSS2 等价） */
.gr-p2-entry { display: block; text-align: center; }
.gr-p2-entry .gr-p2-entry-icon { margin: 0 auto 8px; }
.gr-p2-entry > span { display: block; }

/* 区块标题行：标题左浮 + 查看更多右浮（垂直居中近似） */
.gr-p2-section-head { display: block; }
.gr-p2-section-head:after { content: ""; display: block; clear: both; }
.gr-p2-section-head .gr-p2-left { line-height: 28px; }
.gr-p2-section-head .gr-p2-right { line-height: 28px; }
.gr-p2-section-head .gr-p2-right svg { vertical-align: middle; margin-left: 2px; }

/* ==========================================================================
   未成年人提醒弹窗（漫画阅读态 / 直播间进入时弹，片段在
   includes/partials/minor-notice.php，两个页面都加载本文件）
   ========================================================================== */

/* 要点行的圆点：跟第一行文字对齐，而不是跟整块（要点在 380 宽的卡片里会折行，
   用 items-center 时圆点会掉到两行正中间）。text-sm 的行高是 20px、圆点 6px，
   所以上边距 (20 - 6) / 2 = 7px。 */
.minor-dot { margin-top: 7px; }

/* ==========================================================================
   直播连麦（腾讯 TRTC 自由集成，pages/live-detail.php）
   --------------------------------------------------------------------------
   本区块只服务现代浏览器：连麦按钮、连麦舞台由服务端对老内核整体不渲染
   （gr_ie_kernel() 为真时 HTML 里根本不存在这些节点），所以这里可以用 flex，
   不需要为 IE 写降级。老内核看到的是 cosstream-banner（琥珀色提示条）——
   那个条本身只用了纯色 / 内边距 / 下划线，Trident 渲染无压力。
   ========================================================================== */

/* 连麦舞台：盖在 mp4 之上（absolute 占满视频容器），JS 按人数塞 tile */
.costream-stage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  background: #000;
}

/* 舞台内右上角「挂断」按钮（任何布局下都点得到） */
.costream-stage-controls {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
}
.costream-stage-hangup {
  padding: 8px 16px;
  background: #e7000b;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

/* 手机端（低于 lg 1024px）：连麦舞台全屏 100vh。
   不设 z-index——保持低于顶栏徽章/挂断按钮那层（z-20）和页头（z-30），
   这样挂断按钮在手机上始终可点；舞台是定位元素，天然盖过聊天面板的静态内容。
   接听通知条改成固定悬浮：手机端视频容器只有 240px 高，通知条放在顶栏里
   会和视频底部渐变层重叠（底部层 DOM 靠后盖住它，接听/挂断全被压死）。 */
@media (max-width: 1023.98px) {
  .costream-stage {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
  }
  [data-gr-call-notice] {
    position: fixed;
    left: 50%;
    top: 76px;
    transform: translateX(-50%);
    z-index: 60;
    max-width: calc(100vw - 24px);
  }
}

/* 一块画面：flex 均分宽度；1 人 = 自己满屏，2 人 = 左右各半 */
.costream-tile {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
}

/* SDK 注入的 video 撑满 tile，不裁切保持比例 */
.costream-tile-view {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.costream-tile-view video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* 本地预览 video（srcObject 自渲染路径,不经过 SDK 的 view 渲染） */
.costream-tile-localvideo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

/* 画面左下角的名字角标（独立节点，SDK 塞 video 时冲不掉） */
.costream-tile-name {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 2;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 12px;
  border-radius: 6px;
}

/* 老内核兼容提示条：琥珀底 + 「用火狐打开本直播间」+「下载小助手」 */
.costream-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background: rgba(180, 83, 9, 0.9);
  color: #fff;
  font-size: 12px;
  padding: 6px 12px;
}
.costream-banner a {
  color: #fde68a;
  text-decoration: underline;
  margin: 0 6px;
  font-weight: 700;
}
.costream-banner a:hover {
  color: #fff;
}