/* =============================================================
   style45h.css  v45h  星空星辰 - 通用样式
   -------------------------------------------------------------
   1) 主题色板：默认深蓝 #02074c 背景 / 金色 #FAD997 栏目标题 / 白色主体文本
   2) 响应式尺寸：五档
   3) 布局：hero(banner) / nav(176高) / container(1200宽) / footer
   4) 组件：卡片 / 发光按钮 / 翻页 / 详情 / 调试页光源效果
   ============================================================= */

/* =============================================================
   1. 主题色板（深蓝暗色默认主题）
   ============================================================= */
:root {
  color-scheme: dark;

  /* 主色 - 深蓝夜空 */
  --c-btn: #5067B5;
  --c-bg-1: #02074c;
  --c-bg-2: #0a1358;
  --c-bg-3: #111d66;
  --c-bg-grad: linear-gradient(180deg, #02074c 0%, #0a1358 50%, #02074c 100%);

  /* 金色 - 栏目标题 */
  --c-gold: #FFCD87;
  --c-gold-2: #f6c66a;
  --c-gold-soft: rgba(250, 217, 151, .55);

  /* 文字 */
  --c-text: #ffffff;
  --c-text-sub: rgba(255, 255, 255, .78);
  --c-text-mut: rgba(255, 255, 255, .55);

  /* 表面 / 边框 */
  --c-surface: rgba(255, 255, 255, .06);
  --c-surface-2: rgba(255, 255, 255, .12);
  --c-bd: rgba(250, 217, 151, .42);
  --c-bd-a: rgba(255,255,255,0.3);
  --c-bd-soft: rgba(255, 255, 255, .16);
  --c-bd-strong: #FAD997;

  /* 星辰点缀色 */
  --c-star-cyan: #9fe8ff;
  --c-star-purple: #c9a9ff;

  /* 阴影 / 发光 */
  --shadow-card: 0 8px 30px rgba(0, 0, 30, .45);
  --c-glow: 0 0 18px rgba(126, 64, 125, .55);

  /* 页脚 */
  --c-footer-bg: #01041f;
  --c-footer-text: rgba(255, 255, 255, .92);
  --c-footer-bd: rgba(255, 255, 255, .12);

  /* 圆角 */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* 过渡 */
  --tr: .35s cubic-bezier(.4, 0, .2, 1);

  /* 版面尺寸 */
  --content-w: 1200px;
}

/* =============================================================
   2. 响应式尺寸 - 五档
   ============================================================= */
:root {
  --fs-hero-p: 12px;
  --fs-hero: 30px;
  --fs-nav: 14px;
  --fs-snav: 12px;
  --fs-st: 26px;
  --fs-h1: 16px;
  --fs-h2: 20px;
  --fs-title: 17px;
  --fs-sub: 13px;
  --fs-body: 12px;
  --fs-p-d: 12px;
  --fs-mark: 10px;
  --fs-xs: 11px;
  --fw-st: 700;
  --fw-sp: 500;
  --h-st-line: 2px;
  --r-md: 4px;
  --r-sm: 2px;
  --r-lg: 8px;
  --content-w: 91.46%;
  --sec-gap: 40px;
  --gap-p: 4px;
  --gap-card: 8px;
}

@media (min-width: 400px) {
  :root {
    --fs-hero: 34px;
    --fs-nav: 16px;
    --fs-snav: 12px;
    --fs-st: 4.68vw;
    --fs-h1: 18px;
    --fs-h2: 18px;
    --fs-title: 18px;
    --fs-body: 14px;
    --fs-p-d: 14px;
    --fs-mark: 12px;
    --fs-xs: 12px;
    --h-st-line: 2px;
    --r-md: 4px;
    --r-sm: 2px;
    --r-lg: 10px;
    --content-w: 91.46%;
    --sec-gap: 48px;
    --gap-card: 8px;
    --gap-p: 4px;
  }
}

@media (min-width: 768px) {
  :root {
    --fs-hero-p: 14px;
    --fs-hero: 46px;
    --fs-nav: 30px;
    --fs-snav: 14px;
    --fs-st: 36px;
    --fs-h1: 20px;
    --fs-h2: 26px;
    --fs-title: 20px;
    --fs-sub: 15px;
    --fs-body: 15px;
    --fs-p-d: 14px;
    --fs-mark: 13px;
    --fs-xs: 13px;
    --h-st-line: 2px;
    --r-md: 6px;
    --r-sm: 2px;
    --r-lg: 12px;
    --content-w: 91.46%;
    --sec-gap: 56px;
    --gap-card: 15px;
    --gap-p: 5px;
  }
}

@media (min-width: 1024px) {
  :root {
    --fs-hero-p: 16px;
    --fs-hero: 54px;
    --fs-nav: 39px;
    --fs-st: 48px;
    --fs-h1: 34px;
    --fs-h2: 28px;
    --fs-title: 21px;
    --fs-sub: 16px;
    --fs-body: 19px;
    --fs-p-d: 16px;
    --fs-mark: 16px;
    --h-st-line: 4px;
    --r-md: 8px;
    --r-sm: 3px;
    --content-w: 980px;
    --sec-gap: 64px;
    --gap-card: 20px;
    --gap-p: 6px;
  }
}


@media (min-width: 1280px) {
  :root {
    --fs-hero-p: 18px;
    --fs-hero: 62px;
    --fs-nav: 48px;
    --fs-st: 60px;
    --fs-h1: 42px;
    --fs-h2: 30px;
    --fs-title: 22px;
    --fs-sub: 48px;
    --fs-body: 24px;
    --fs-p-d: 20px;
    --fs-mark: 20px;
    --sec-gap: 72px;
    --gap-card: 24px;
    --gap-p: 8px;
    --h-st-line: 4px;
    --r-md: 10px;
    --r-sm: 4px;
    --content-w: 980px;
  }
}
@media (min-width: 1600px) {
  :root {
    --fs-hero-p: 18px;
    --fs-hero: 62px;
    --fs-nav: 48px;
    --fs-st: 75px;
    --fs-h1: 42px;
    --fs-h2: 30px;
    --fs-title: 22px;
    --fs-sub: 48px;
    --fs-body: 24px;
    --fs-p-d: 24px;
    --fs-mark: 20px;
    --sec-gap: 72px;
    --gap-card: 24px;
    --gap-p: 8px;
    --h-st-line: 4px;
    --r-md: 10px;
    --r-sm: 4px;
    --content-w: 1200px;
  }
}

@media (min-width: 1920px) {
  :root {
    --fs-hero-p: 20px;
    --fs-hero: 70px;
    --fs-nav: 48px;
    --fs-st: 90px;
    --fs-h1: 42px;
    --fs-h2: 32px;
    --fs-title: 24px;
    --fs-sub: 48px;
    --fs-body: 24px;
    --fs-p-d: 24px;
    --fs-mark: 20px;
    --h-st-line: 6px;
    --content-w: 1200px;
    --r-md: 10px;
    --r-sm: 4px;
    --sec-gap: 80px;
    --gap-card: 24px;
    --gap-p: 8px;
  }
}

/* =============================================================
   3. 基础重置
   ============================================================= */
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", Arial, sans-serif;
  font-size: var(--fs-body);
  color: var(--c-text);
  line-height: 1.6;
  transition: background var(--tr), color var(--tr);
  overflow-y: auto;
  min-height: 100vh;
}

/* 页面级背景色：深蓝渐变星空，作用于整个页面 */
.page-bg {
  inset: 0;
  z-index: -1;
  background: var(--c-bg-1);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* =============================================================
   4. 通用工具类
   ============================================================= */
.w100 {
  width: 100%;
}

.h100 {
  height: 100%;
}

.flex {
  display: flex;
}

.flec {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-sb {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.flex-1 {
  flex: 1;
}

.gap-8 {
  gap: 8px;
}

.gap-12 {
  gap: 12px;
}

.gap-16 {
  gap: 16px;
}

.gap-20 {
  gap: 20px;
}

.gap-24 {
  gap: 24px;
}

.mt10 {
  margin-top: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mb10 {
  margin-bottom: 10px;
}

.mb20 {
  margin-bottom: 20px;
}

.center {
  text-align: center;
}

.pr {
  position: relative;
}

.pa {
  position: absolute;
}

.t0 {
  top: 0;
}

.l0 {
  left: 0;
}

.r0 {
  right: 0;
}

.b0 {
  bottom: 0;
}

.z1 {
  z-index: 1;
}

.z2 {
  z-index: 2;
}

.z3 {
  z-index: 3;
}

.pn {
  pointer-events: none;
}

.ofh {
  overflow: hidden;
}

.hide {
  display: none;
}

.ellipsis-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rx {
  transform: rotateX(180deg);
}

.ry {
  transform: rotateY(180deg);
}

/* =============================================================
   5. 内容容器（1200 宽）
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  position: relative;
  padding: 0 24px;
}

main {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
}

/* =============================================================
   6. 顶部 Hero Banner（1920 x 640）
   ============================================================= */
.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 640;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 星空底图：img 元素铺满 + 滤镜与背景色叠加 */
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--c-bg-1);
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: brightness(.85) saturate(1.1) contrast(1.05);
  mix-blend-mode: screen;
  /*opacity: .55;*/
}

.hero img {
  width: 100%;
}

.hero__content {
  position: absolute;
  left: 13.54%;
  top: 9.375vw;
  width: 35.73%;
  aspect-ratio: 686 / 198;
  z-index: 2;
}

.hero__title {
  aspect-ratio: 686 / 159;
  font-size: var(--fs-hero);
  margin-bottom: .52vw;
}

.hero__org {
  aspect-ratio: 686 / 28;
}

.hero__mark {
  position: absolute;
  left: 3.54%;
  top: 26.25vw;
  width: 16.46%;
  aspect-ratio: 315 / 87;
  z-index: 2;
}

.hero__logo {
  position: absolute;
  aspect-ratio: 323 / 68;
  top: 2.08vw;
  left: 4.16vw;
  z-index: 5;
}

.hero__logo img {
  height: 52px;
  width: auto;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5));
}

/* =============================================================
   7. 导航栏（176 高度）
   ============================================================= */
.nav-wrap {
  position: relative;
  top: 0;
  z-index: 100;
  width: 100%;
  aspect-ratio: 1920 / 176;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border-top: 1px solid var(--c-bd-soft);
  border-bottom: 1px solid var(--c-bd);
  box-shadow: 0 6px 24px rgba(0, 0, 30, .35);
}

.nav {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav__inner {
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 20px;
}

.nav__item {
  position: relative;
  padding: 10px 26px;
  font-size: var(--fs-nav);
  letter-spacing: .06em;
  transition: var(--tr);
  white-space: nowrap;
  color: rgba(248, 214, 195, 1);
  /* 渐变填充：暖粉 → 橙棕 */
  background: linear-gradient(90deg, rgba(248, 214, 195, 1) 0%, rgba(227, 146, 111, 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 文字描边 */
  -webkit-text-stroke: 1px #FAD997;
}

.nav__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-gold);
  opacity: 0;
  box-shadow: 0 0 8px var(--c-gold);
  transition: var(--tr);
}

.nav__item:hover {
  filter: drop-shadow(0 0 10px rgba(250, 217, 151, .6));
}

.nav__item.is-active {
  font-weight: 700;
  filter: drop-shadow(0 0 12px rgba(250, 217, 151, .7));
}

.nav__item.is-active::before {
  opacity: 1;
}

/* 小屏导航栏 */
.nav-m {
  display: none;
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
}

.nav-m__toggle {
  width: 100%;
  height: 64px;
  background: #02074c;
  border: none;
  border-bottom: 1px solid var(--c-bd);
  color: var(--c-gold);
  font-size: 22px;
}

.nav-m__panel {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #02074c;
  border-bottom: 1px solid var(--c-bd);
  flex-direction: column;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: var(--tr);
}

.nav-m__panel.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.nav-m__item {
  padding: 16px 24px;
  color: var(--c-text-sub);
  font-size: var(--fs-nav);
  border-bottom: 1px solid var(--c-bd-soft);
  transition: var(--tr);
}

.nav-m__item:hover,
.nav-m__item.is-active {
  color: var(--c-gold);
}



/* =============================================================
   8. 栏目标题（金色）
   ============================================================= */
.section {
  position: relative;
  width: 100%;
}

.sec-s1 {
  padding-top: 5.3125%;
  box-sizing: border-box;
}

.section__inner {
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.sec-inner-1 {
  aspect-ratio: 1200 / 777;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.sec-inner-s2 {
  aspect-ratio: 1200 / 1138;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

/* 详情页专用：顶部加额外间距避开导航栏 */
.sec-detail {
  padding-top: 4.16%;
  padding-bottom: 4.16%;
}

.sec-title {
  display: flex;
  align-items: center;
  gap: 20px;
}

.sec-t1, .sec-t2 {
  width: 81.41%;
  aspect-ratio: 977 / 184;
  padding-top: 4.83%;
  margin: 0 auto;
  position: relative;
}
.sec-t1::before, .sec-t2::before {
  content: '';
  position: absolute;
  left: 56.70%;
  top: 0;
  height: 100%;
  aspect-ratio: 1 / 1;
  background-image: url(./topic-xingchen-v8-sunstar-4.png);
  background-size: 100% 100%;
}
.sec-t2-wrap {
  width: 100%;
  aspect-ratio: 1200 / 264;
}

.sec-title__line {
  flex: 1;
  height: var(--h-st-line);
  background: linear-gradient(90deg, transparent 0%, var(--c-gold) 50%, transparent 100%);
  background-image: url(./topic-xingchen-v8-bd-line.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.sec-title__line::before {
  content: '';
  display: block;
  position: absolute;
  --h: var(--h-st-line, 4px);
  width: var(--h);
  aspect-ratio: 1 / 1;
  left: 110.18%;
  background-color: var(--c-gold);
}
.sec-title__line:nth-child(n+2) {
  transform: rotateY(180deg);
}

.sec-title__main {
  width: 55.78%;
  position: relative;
  text-align: center;
  font-size: var(--fs-st);
  font-weight: 700;
  letter-spacing: .14em;
  white-space: nowrap;
  /* 横向线性渐变填充 */
  background: linear-gradient(90deg, rgba(248, 214, 195, 1) 0%, rgba(227, 146, 111, 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-gold);
  /* 文字描边 */
  text-stroke: 1px #FAD997;
  -webkit-text-stroke: 1px #FAD997;
  /*text-shadow: -1.5px -1px 2px #823220, 0 4px 4px #F9D58E, 0 2px 10px #6A1217;*/
}

/* =============================================================
   9. 通用卡片
   ============================================================= */
.card {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  /*background: var(--c-surface);*/
  /*border: 1px solid var(--c-bd);*/
  transition: transform var(--tr), box-shadow var(--tr), border-color var(--tr);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0px;
  /*background: linear-gradient(135deg, var(--c-gold) 0%, transparent 50%, var(--c-star-cyan) 100%);*/
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .5;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card), var(--c-glow);
  border-color: var(--c-gold);
}

.card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #030a36;
}

.card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}

.card:hover .card__img img {
  transform: scale(1.1);
}

.card__body {
  padding: 16px 20px;
}

.card__title {
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.3;
  margin-bottom: 6px;
}

.card__desc {
  font-size: var(--fs-mark);
  color: var(--c-text-sub);
  line-height: 1.5;
}

.card__tag {
  display: inline-block;
  padding: 2px 12px;
  margin-bottom: 10px;
  font-size: var(--fs-xs);
  color: var(--c-gold);
  background: rgba(250, 217, 151, .15);
  border: 1px solid var(--c-bd);
  border-radius: var(--r-pill);
}

/* =============================================================
   10. 列表页
   ============================================================= */
.sec-re-list {
  padding-top: 4.16%;
  padding-bottom: 4.16%;
}

/* 列表页：网格 / 列表布局切换（右侧 sticky 始终可见） */
.layout-toggle {
  position: sticky;
  top: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  width: 18%;
  aspect-ratio: 216 / 48;
  gap: 8px;
  margin: 0 0 28px auto;
  /*background: var(--c-surface);*/
  padding: 4px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.layout-toggle__btn {
  width: 48.14%;
  aspect-ratio: 104 / 48;
  border: none;
  border-radius: var(--r-sm);
  background-color: var(--c-btn);
  color: var(--c-text-sub);
  font-size: var(--fs-mark);
  transition: var(--tr);
  cursor: pointer;
  opacity: 0.6;
  display: flex;
  gap: 5%;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.layout-toggle__btn:hover {
  opacity: 1;
  box-shadow: 0 0 14px rgba(250, 217, 151, .55), var(--c-glow);
  filter: drop-shadow(0 0 6px rgba(250, 217, 151, .5));
}

.layout-toggle__btn:first-child::before {
  content: '';
  display: block;
  height: 41.66%;
  aspect-ratio: 1 / 1;
  background-image: url(./topic-xingchen-v8-grid-icon.png);
  background-size: 100% 100%;
  transform: translateY(5%);
}
.layout-toggle__btn:last-child::before {
  content: '';
  display: block;
  height: 54.16%;
  aspect-ratio: 1 / 1;
  background-image: url(./topic-xingchen-v8-list-icon.png);
  background-size: 100% 100%;
  transform: translateY(5%);
}

.layout-toggle__btn.is-active {
  opacity: 0.99;
}

/* 网格卡片集：每行3列（移动2列） */
/* ============================================================
   列表页布局：grid 3 列 / list 横条，图片统一 card-f.png 铺满
   ============================================================ */
/* ---- Grid 模式：卡片窗口 384 x 324 ---- */
.gl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-card);
}

/* 整卡窗口宽高比 384/324，图片绝对铺满，文字叠加 */
.gl-grid .card {
  position: relative;
  aspect-ratio: 384 / 324;
  overflow: hidden;
  /*background: var(--c-surface);*/
  /*border: 1px solid var(--c-bd);*/
}
/* 背景层：卡片底层装饰 */
.gl-grid .gl-grid-bg {
  position: absolute;
  width: 100%;
  bottom: 0;
  aspect-ratio: 384 / 228;
  border-radius: var(--r-md);
  pointer-events: none;
  background-image: url(./topic-xingchen-v8-card-bg-list.png);
  background-size: 100% 100%;
}
/* 内容容器：承接图片与文字，铺满卡片 */
.gl-grid .gl-grid-inner {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 87.5%;
  aspect-ratio: 384 / 306;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.gl-grid .card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 336 / 216;
  border-radius: var(--r-md);
  background: #030a36;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gl-grid .card__img::after {
  content: '';
  display: block;
  position: relative;
  width: 21.4%;
  aspect-ratio: 1 / 1;
  background-image: url(./topic-xingchen-v8-play-bg.png);
  background-size: 100% 100%;
}
.gl-grid .card__img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gl-grid .card__body {
  position: relative;
  width: 100%;
  aspect-ratio: 336 / 74;
  /*background: linear-gradient(0deg, rgba(2, 7, 76, .88) 0%, rgba(2, 7, 76, .35) 70%, transparent 100%);*/
}
.gl-grid .card__title {
  color: var(--c-text);
  font-size: var(--fs-body);
  font-weight: normal;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gl-grid .card__desc {
  font-size: var(--fs-mark);
  display: -webkit-box;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- List 模式：卡片容器 1200 x 264 横条 ---- */
.gl-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-card);
}

/* 整卡容器宽高比 1200/264，图片铺满整卡，文字叠加 */
.gl-list .card {
  position: relative;
  aspect-ratio: 1200 / 264;
  overflow: hidden;
  /*background: var(--c-surface);*/
  /*border: 1px solid var(--c-bd);*/
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gl-list .gl-grid-inner {
  width: 100%;
  aspect-ratio: 1200 / 216;
  display: flex;
  align-items: center;
  gap: var(--gap-card);
}
.gl-list .gl-grid-bg {
  position: absolute;
  height: 100%;
  right: 0;
  width: 95%;
  border-radius: var(--r-md);
  z-index: 0;
  pointer-events: none;
  background-image: url(./topic-xingchen-v8-card-bg-list.png);
  background-size: 100% 100%;
}
.gl-list .card__img {
  position: relative;
  width: 28%;
  aspect-ratio: 336 / 216;
  border-radius: var(--r-md);
  background: #030a36;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gl-list .card__img img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gl-list .card__img::after {
  content: '';
  display: block;
  position: relative;
  width: 21.4%;
  aspect-ratio: 1 / 1;
  background-image: url(./topic-xingchen-v8-play-bg.png);
  background-size: 100% 100%;
}
.gl-list .card__body {
  position: relative;
  flex: 1;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  padding: var(--fs-mark) var(--gap-card) var(--fs-mark) 0;
}
.gl-list .card__title {
  width: 100%;
  flex: 1;
  font-size: var(--fs-body);
  color: var(--c-text);
}
.gl-list .card__desc {
  font-size: var(--fs-mark);
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =============================================================
   11. 详情页
   ============================================================= */
.breadcrumb {
  width: 100%;
  aspect-ratio: 1200 / 60;
  display: flex;
  gap: 8px;
  font-size: var(--fs-body);
  color: var(--c-text-sub);
  padding: 0px 0px 2% 0px;
  /*background: var(--c-surface);*/
  border-radius: var(--r-md);
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--c-text-sub);
  transition: var(--tr);
}

.breadcrumb a:hover {
  color: var(--c-text);
}
.breadcrumb span:hover {
  color: var(--c-text);
}

.breadcrumb span.sep {
  opacity: .5;
}


.detail {
  width: 100%;
  background: var(--c-surface);
  /*border: 1px solid var(--c-bd);*/
  border-radius: var(--r-lg);
  padding: clamp(24px, 8%, 96px);
  position: relative;
  overflow: hidden;
}

.detail::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  /*background: linear-gradient(90deg, var(--c-gold) 0%, var(--c-star-cyan) 50%, var(--c-star-purple) 100%);*/
}

.detail__title {
  font-size: var(--fs-h1);
  font-weight: bold;
  text-align: center;
  background: linear-gradient(90deg, #fff 0%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 16px;
}

.detail__meta {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: var(--fs-body);
  color: var(--c-text-sub);
  padding-bottom: 16px;
  margin-bottom: 28px;
  /*border-bottom: 1px dashed var(--c-bd-soft);*/
}

.detail__lead {
  font-size: var(--fs-sub);
  font-weight: 600;
  line-height: 1.7;
  padding: 18px 22px;
  margin-bottom: 28px;
  background: linear-gradient(90deg, rgba(250, 217, 151, .1) 0%, transparent 100%);
  border-left: 3px solid var(--c-gold);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.txt-body {
  color: var(--c-text-sub);
  font-size: var(--fs-p-d);
  line-height: 1.9;
}

.txt-body p {
  margin-bottom: 18px;
  text-indent: 2em;
}

.txt-body h2 {
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--c-text);
  margin: 28px 0 14px;
  padding-left: 12px;
  /*border-left: 3px solid var(--c-gold);*/
}

.txt-body h3 {
  font-size: var(--fs-sub);
  font-weight: 700;
  color: var(--c-text);
  margin: 20px 0 10px;
}

.txt-body figure {
  margin: 24px 0;
  text-align: center;
}

.txt-body figure img {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  border-radius: var(--r-md);
  border: 1px solid var(--c-bd);
  display: block;
  transition: transform .5s ease;
}

.txt-body figure:hover img {
  transform: scale(1.02);
}

.txt-body figcaption {
  font-size: var(--fs-mark);
  color: var(--c-text-mut);
  margin-top: 8px;
}

.txt-body ul,
.txt-body ol {
  margin: 0 0 18px 2em;
}

.txt-body li {
  margin-bottom: 6px;
}

.txt-body blockquote {
  margin: 18px 0;
  padding: 14px 20px;
  background: var(--c-surface-2);
  border-left: 3px solid var(--c-star-cyan);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--c-text);
  font-style: italic;
}

.txt-body strong {
  color: var(--c-gold);
}

.detail__nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px dashed var(--c-bd-soft);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-bd);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: var(--tr);
  white-space: nowrap;
}

.btn:hover {
  border-color: var(--c-gold);
  background: var(--c-surface-2);
  color: var(--c-gold);
  box-shadow: var(--c-glow);
}

/* 详情页图鉴区 */
.detail-gallery {
  width: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-bd);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-top: 32px;
}

.detail-gallery__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.detail-gallery__img {
  max-width: 48%;
  border-radius: var(--r-md);
  border: 1px solid var(--c-bd);
}

/* 详情页：图文视频混合富文本 */
.txt-body video {
  display: block;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  border-radius: var(--r-md);
  border: 1px solid var(--c-bd);
}

.txt-body .txt-video-figure {
  text-align: center;
  margin: 24px 0;
}

.txt-body .txt-video-figure video {
  margin-bottom: 8px;
}
.bg-star-group {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 9;
}
.star-g1 {
  position: absolute;
  top: 11.77vw;
  width: 100%;
  aspect-ratio: 1920 / 1365;
}
.star-g2 {
  position: absolute;
  bottom: 9.35vw;
  width: 100%;
  aspect-ratio: 1920 / 774;
}
.list-bg-group.bg-star-group{
  width: 100%;
  aspect-ratio: 1920 / 2538;
  bottom: auto;
  top: 0
}
/* =============================================================
   12. 页脚
   ============================================================= */
.footer {
  width: 100%;
  /*margin-top: 60px;*/
  background: var(--c-footer-bg);
  color: var(--c-footer-text);
  /*border-top: 2px solid var(--c-gold);*/
  box-shadow: 0 -4px 24px rgba(250, 217, 151, .12);
  position: relative;
  padding: 40px 0 24px;
}

.footer::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  /*background: linear-gradient(90deg, transparent 0%, var(--c-gold) 50%, transparent 100%);*/
}

.footer__inner {
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}

.footer__left img {
  height: 44px;
  width: auto;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: clamp(9px, 0.8vw, 24px);
  line-height: 2;
  flex: 1;
  min-width: 280px;
}

.footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--gap-p);
  text-align: center;
}

.footer__col li {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.footer__col a {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  color: var(--c-footer-text);
  transition: var(--tr);
}

.footer__col a:hover {
  color: var(--c-gold);
}

.beian {
  width: 16px;
  height: 16px;
}

.footer__right img {
  height: 44px;
  width: auto;
}

.footer__bottom {
  width: 100%;
  max-width: var(--content-w);
  margin: 24px auto 0;
  padding: 16px 24px 0;
  border-top: 1px solid var(--c-footer-bd);
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--c-text-mut);
  display: none;
}

/* =============================================================
   13. 主题切换按钮
   ============================================================= */
.theme-toggle {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 999;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--c-bd);
  background: var(--c-surface);
  color: var(--c-gold);
  font-size: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card), var(--c-glow);
  transition: var(--tr);
}

.theme-toggle:hover {
  transform: scale(1.1);
}

/* =============================================================
   14. 滚动条 / 通用动画
   ============================================================= */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .05);
}

::-webkit-scrollbar-thumb {
  background: var(--c-gold);
  border-radius: 4px;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fade-in-up .8s ease both;
}

/* =============================================================
   15. 首页栏目一：活动动态（左文右图 / 移动端上下）
   ============================================================= */
.activity {
  width: 100%;
  aspect-ratio: 1200 / 513;
  padding: 3.66% 2%;
  background: var(--c-surface);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.activity__bg_rect {
  padding-bottom: 26.30%;
  position: relative;
}
.activity__bg {
  position: absolute;
  bottom: -15.20%;
  left: 0;
  right: 0;
  aspect-ratio: 1920 / 1365;
  background-image: url(./topic-xingchen-v8-starriver.png);
  background-size: 100% auto;
  background-position: center bottom;
  overflow: hidden;
}
.star-bg-tl {
  position: absolute;
  top: 40.95%;
  left: 0;
  width: 12.34%;
  aspect-ratio: 237 / 321;
  background-image: url(./topic-xingchen-v8-star-tl.png);
  background-size: 100% auto;
  background-position: center center;
}
.star-bg-tr {
  position: absolute;
  top: -4.72%;
  left: 90.0%;
  width: 15.98%;
  aspect-ratio: 307 / 307;
  background-image: url(./topic-xingchen-v8-star-tr.png);
  background-size: 100% auto;
  background-position: center center;
}
.gal__bg {
  position: absolute;
  pointer-events: none;
  width: 100%;
  bottom: 0;
  left: 0;
  aspect-ratio: 1920 / 774;
}
.star-bg-bl {
  position: absolute;
  top: 0;
  left: -6.45%;
  width: 19.94%;
  aspect-ratio: 383 / 433;
  background-image: url(./topic-xingchen-v8-star-bl.png);
  background-size: 100% auto;
  background-position: center center;
}
.star-bg-br {
  position: absolute;
  bottom: 0;
  left: 87.18%;
  width: 15.72%;
  aspect-ratio: 302 / 342;
  background-image: url(./topic-xingchen-v8-star-br.png);
  background-size: 100% auto;
  background-position: center center;
}
.activity__inner {
  width: 100%;
  aspect-ratio: 1152 / 336;
  display:  flex;
  align-items: center;
  justify-content: space-between;
  
}
/* 左：文章列表 */
.activity__list {
  flex: 0 0 50.69%;
  aspect-ratio: 584 / 336;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.activity__row {
  display: flex;
  aspect-ratio: 584 / 46;
  padding-top: 2.22%;
  padding-bottom: 2.22%;
  align-items: center;
  border: 0px solid transparent;
  box-sizing: border-box;
  padding-right: 0.5vw;
  cursor: pointer;
  transition: var(--tr);
  opacity: 0;
  transform: translateX(-30px);
  border-bottom: 1px solid var(--c-bd-a);
}
.activity__row:first-child{
  padding-top: 0;
}
.activity__row:last-child{
  padding-bottom: 0;
  border-bottom: none
}

.activity__row.is-revealed {
  opacity: 1;
  transform: translateX(0);
  transition: opacity .5s ease var(--anim-delay, 0s), transform .5s cubic-bezier(.18, .84, .27, 1) var(--anim-delay, 0s);
}
/* 逐行错落入场延时 */
.activity__row:nth-child(1) { --anim-delay: 0s; }
.activity__row:nth-child(2) { --anim-delay: .12s; }
.activity__row:nth-child(3) { --anim-delay: .24s; }
.activity__row:nth-child(4) { --anim-delay: .36s; }
.activity__row:nth-child(5) { --anim-delay: .48s; }
.activity__row:nth-child(6) { --anim-delay: .60s; }

/* 激活态（hover 或最后激活）高亮 */
.activity__row:hover,
.activity__row.is-active {
  /*background: linear-gradient(90deg, rgba(250, 217, 151, .16) 0%, transparent 100%);
  box-shadow: inset 3px 0 0 var(--c-gold);*/
}
.activity__row:hover .activity__row-title,
.activity__row.is-active .activity__row-body {
  color: var(--c-gold);
}
.activity__row:hover .activity__row-thumb::before,
.activity__row.is-active .activity__row-thumb::before {
  filter: brightness(1.3);
  box-shadow: 0 0 12px rgba(250, 217, 151, .6);
}

.activity__row-thumb {
  /*flex: 0 0 46px;*/
  width: 2.4vw;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.activity__row-thumb::before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(./topic-xingchen-v8-simstar-4.png);
  background-size: 100% 100%;
  /* 缓慢呼吸：轻微缩放 + 明暗起伏 */
  animation: thumb-breathe 2s ease-in-out infinite;
}

/* 缩略图呼吸动画：缓慢缩放 + 明暗起伏 */
@keyframes star-breathe {
  0%, 100% { transform: scale(1); filter: brightness(0.8); }
  50%      { transform: scale(1.02); filter: brightness(1.25); }
}
.star-breathe {
  animation: star-breathe 1.8s ease-in-out infinite;
}
.activity__row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 缩略图呼吸动画：缓慢缩放 + 明暗起伏 */
@keyframes thumb-breathe {
  0%, 100% { transform: scale(1); filter: brightness(0.8); }
  50%      { transform: scale(1.09); filter: brightness(1.25); }
}

.activity__row-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: var(--c-text);
  justify-content: space-between;
  min-width: 0;
}

.activity__row-title {
  flex: 1;
  padding-left: 0.4vw;
  padding-right: 0.6vw;
  line-height: 1.1;
  font-size: calc(var(--fs-body) * 0.99);
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity__row:hover .activity__row-body {
  color: var(--c-gold);
}

.activity__row-date {
  opacity: 0.8;
}

/* 右：图文详情 */
.activity__feature {
  width: 45.83%;
  aspect-ratio: 528 / 336;
  min-width: 0;
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 0px solid var(--c-bd);
  cursor: pointer;
  display: block;
  background: var(--c-surface);
}

.activity__feature:hover {
  box-shadow: var(--shadow-card), var(--c-glow);
  border-color: var(--c-gold);
}

.activity__feature-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  z-index: 1;
  transition: opacity .6s ease, transform .6s ease;
}
.activity__feature-img.is-active {
  opacity: 1;
  z-index: 2;
}
.activity__feature:hover .activity__feature-img.is-active {
  transform: scale(1.1);
}

.activity__feature-body {
  position: absolute;
  aspect-ratio: 528 / 80;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1vw 1vw;
  box-sizing: border-box;
  background: rgba(0, 0, 0, .4);
  z-index: 3;
  display: flex;
  align-items: center;
}

.activity__feature-title {
  width: 100%;
  font-size: calc(var(--fs-body) * 1.1);
  font-weight: bold;
  color: var(--c-text);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* 底部装饰更多链接 */
.sec-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 4.66%;
  color: var(--c-text);
  font-size: var(--fs-mark);
  cursor: pointer;
  transition: var(--tr);
  text-decoration: none;
}

.sec-more::before, .sec-more::after {
  content: "";
  aspect-ratio: 68 / 26;
  height: var(--fs-mark);
  background-image: url(./topic-xingchen-v8-moon-list.png);
  background-size: 100% 100%;
}

.sec-more::after {
  transform: rotateY(180deg);
}

.sec-more:hover {
  text-shadow: 0 0 12px var(--c-gold-soft);
  letter-spacing: .08em;
}

/* =============================================================
   16. 首页栏目二：星辰风采（2x3 批量切换卡片集）
   ============================================================= */
.gal {
  position: relative;
  width: 100%;
}

.gal__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 874;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.gal__title {
  font-size: var(--fs-sub);
  color: var(--c-text);
}
.gal__stage__title {
  width: 30.58%;
  aspect-ratio: 367 / 129;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.gal__stage__title::before {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  aspect-ratio: 1 / 1;
  background-image: url(./topic-xingchen-v8-moon-star.png);
  background-size: 100% 100%;
}
.gal__stage__title::after {
  content: '';
  position: absolute;
  display: block;
  top: 50%;
  right: 0;
  height: 37.2%;
  aspect-ratio: 70 / 48;
  background-image: url(./topic-xingchen-v8-dub-moon.png);
  background-size: 100% 100%;
  transform: translateY(-50%);
}

.gal__stage__footer {
  width: 100%;
  aspect-ratio: 1200 / 95;
}
.gal__set {
  width: 100%;
  aspect-ratio: 1200 / 600;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-card);
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none;
  position: relative;
}

.gal__set.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 切换动画 */
.gal__set.is-out {
  animation: gal-out .5s cubic-bezier(.4, 0, .2, 1) both;
}

.gal__set.is-in {
  animation: gal-in .6s cubic-bezier(.18, .84, .27, 1) both;
}

@keyframes gal-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(-30px) scale(.95);
  }
}

@keyframes gal-in {
  from {
    opacity: 0;
    transform: translateY(30px) scale(.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 卡片（上图下文） */
.gal__card {
  position: relative;
  display: flex;
  aspect-ratio: 384 / 288;
  transition: var(--tr);
  border-radius: var(--r-md);
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
}
.gal__card__inner {
  width: 87.5%;
  margin: 0 auto;
  aspect-ratio: 384 / 272;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.gal__card__bg {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  aspect-ratio: 384 / 206;
  border-radius: var(--r-md);
  pointer-events: none;
  background-color: rgba(255, 205, 135, 1);
  /* 渐变背景：暖橙 → 冷蓝，左上到右下 */
  background-image: 
  linear-gradient(145deg, rgba(24, 30, 106, 1) 0%, rgba(24, 30, 106, 0.9) 70%, rgba(97, 125, 203, 0.8) 100%);
}
/* 组切换进入时，卡片逐张错落浮现 */
.gal__set.is-in .gal__card {
  animation: gal-card-in .6s cubic-bezier(.18, .84, .27, 1) both;
}
.gal__set.is-in .gal__card:nth-child(1) { animation-delay: .05s; }
.gal__set.is-in .gal__card:nth-child(2) { animation-delay: .15s; }
.gal__set.is-in .gal__card:nth-child(3) { animation-delay: .25s; }
.gal__set.is-in .gal__card:nth-child(4) { animation-delay: .35s; }
.gal__set.is-in .gal__card:nth-child(5) { animation-delay: .45s; }
.gal__set.is-in .gal__card:nth-child(6) { animation-delay: .55s; }
@keyframes gal-card-in {
  from { opacity: 0; transform: translateY(20px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.gal__card__img {
  position: relative;
  width: 100%;
  aspect-ratio: 336 / 216;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 0px solid var(--c-bd);
  background: #030a36;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gal__card__img::after {
  position: absolute;
  content: '';
  width: 17.85%;
  aspect-ratio: 1 / 1;
  background-image: url(./topic-xingchen-v8-play-bg.png);
  background-size: 100% 100%;
}
.gal__card__img img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}

.gal__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card), var(--c-glow);
  border-color: var(--c-gold);
}

.gal__card:hover .gal__card__img img {
  transform: scale(1.1);
}

.gal__card__body {
  width: 100%;
  padding: 12px 6px 0;
}

.gal__card__title {
  font-size: var(--fs-body);
  color: var(--c-text);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gal__card:hover .gal__card__title {
  color: var(--c-gold);
}

.gal__card__desc {
  font-size: var(--fs-xs);
  color: var(--c-text-mut);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 批量切换控制 */
.gal__ctrl {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  position: absolute;
  bottom: 2%;
  left: 0;
  width: 100%;
}

.gal__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--c-bd);
  background: var(--c-surface);
  color: var(--c-gold);
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--tr);
  cursor: pointer;
}

.gal__btn:hover,
.gal__btn.is-active {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: #02074c;
  box-shadow: var(--c-glow);
}

.gal__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gal__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  cursor: pointer;
  transition: var(--tr);
}

.gal__dot.is-active {
  width: 26px;
  border-radius: 5px;
  background: var(--c-gold);
  box-shadow: var(--c-glow);
}
.index-bottom {
  width: 100%;
  aspect-ratio: 1920 / 180;
}
/* =============================================================
   17. 响应式：活动动态 / 卡片集 / 列表布局
   ============================================================= */


/* =============================================================
   18. 样式调试页（debug.html）
   ============================================================= */
.debug-hero {
  padding: 60px 0 30px;
  text-align: center;
}

.debug-hero h1 {
  font-size: var(--fs-hero);
  font-weight: 700;
  letter-spacing: .12em;
  background: linear-gradient(90deg, #fff 0%, var(--c-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}

.debug-hero p {
  color: var(--c-text-sub);
  font-size: var(--fs-sub);
}

.debug-section {
  margin-bottom: 56px;
}

.debug-section .sec-title {
  margin-bottom: 20px;
}

/* 效果展示面板 */
.eff-canvas {
  position: relative;
  width: 100%;
  height: 300px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-bd);
  background:
    radial-gradient(circle at 30% 20%, rgba(2, 10, 60, .5) 0%, transparent 50%),
    linear-gradient(180deg, #030a36 0%, #02074c 100%);
}

.eff-canvas canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.eff-canvas__label {
  position: absolute;
  top: 12px;
  left: 16px;
  z-index: 5;
  padding: 4px 12px;
  font-size: var(--fs-mark);
  color: var(--c-gold);
  background: rgba(2, 7, 76, .7);
  border: 1px solid var(--c-bd);
  border-radius: var(--r-pill);
  pointer-events: none;
  letter-spacing: .05em;
}

/* 调试页网格：效果并排 */
.eff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}



/* 调试页说明卡片 */
.debug-note {
  margin-top: 16px;
  padding: 14px 18px;
  font-size: var(--fs-mark);
  color: var(--c-text-sub);
  background: var(--c-surface);
  border: 1px solid var(--c-bd-soft);
  border-radius: var(--r-md);
  line-height: 1.7;
}

.debug-note code {
  padding: 1px 6px;
  background: rgba(250, 217, 151, .15);
  color: var(--c-gold);
  border-radius: 4px;
}

/* 纯 CSS 光源效果 */
/* ---- CSS LensFlare（静态光晕） ---- */
.css-lensflare {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-bd);
  background: radial-gradient(circle at 50% 45%, rgba(250, 217, 151, .25) 0%, transparent 55%),
    linear-gradient(180deg, #030a36 0%, #02074c 100%);
}

.css-lensflare::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 240px;
  height: 240px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 0%, var(--c-gold) 15%, rgba(250, 217, 151, .4) 35%, transparent 60%);
  border-radius: 50%;
  filter: blur(2px);
  animation: css-flare-pulse 4s ease-in-out infinite;
}

.css-lensflare::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 60%;
  height: 10px;
  transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent 0%, rgba(250, 217, 151, .6) 50%, transparent 100%);
  filter: blur(6px);
}

@keyframes css-flare-pulse {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: .85;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
  }
}

/* ---- CSS GodRays（锥形光束） ---- */
.css-godrays {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-bd);
  background: linear-gradient(180deg, #040a44 0%, #02074c 100%);
}

.css-godrays::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 12px var(--c-gold), 0 0 30px var(--c-gold);
}

.css-godrays .ray {
  position: absolute;
  left: 50%;
  top: 0;
  width: 12px;
  height: 200%;
  transform-origin: top center;
  background: linear-gradient(180deg, rgba(250, 217, 151, .28) 0%, transparent 70%);
  filter: blur(6px);
  animation: godray-spin 18s linear infinite;
  pointer-events: none;
}

@keyframes godray-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- CSS Bloom（多光斑呼吸） ---- */
.css-bloom {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-bd);
  background: #02074c;
}

.css-bloom i {
  position: absolute;
  display: block;
  border-radius: 50%;
  pointer-events: none;
  animation: css-bloom-pulse var(--bdur, 3s) ease-in-out infinite;
  animation-delay: var(--bd, 0s);
}

@keyframes css-bloom-pulse {

  0%,
  100% {
    transform: scale(.7);
    opacity: .4;
  }

  50% {
    transform: scale(1.25);
    opacity: .9;
  }
}

@media (max-width: 768px) {
  .hero__logo img {
    height: 4vw;
  }
  .sec-re-list {
    padding-top: 4.26%;
    padding-bottom: 4.26%;
  }
  .sec-detail {
    padding-top: 4.26%;
    padding-bottom: 4.26%;
  }
  .footer__left, .footer__right {
    display: none;
  }
  .eff-grid {
    grid-template-columns: 1fr;
  }
  .nav-wrap {
    aspect-ratio: 375 / 40;
  }
  .breadcrumb {
    font-size: var(--fs-snav);
  }
  .detail__meta {
    font-size: var(--fs-xs);
  }
  .layout-toggle {
    width: 31.4%;
  }
  .layout-toggle__btn {
    font-size: var(--fs-xs);
  }
  .gl-grid .card{
    aspect-ratio: 167.5 / 141;
  }
  .gl-grid .gl-grid-inner{
    aspect-ratio: 151.5 / 136;
  }
  .gl-grid .card__img {
    aspect-ratio: 151.5 / 97;
  }
  .gl-grid .card__body {
    aspect-ratio: 151.5 / 35;
    padding: 2px 2px;
  }
  .gl-grid .card__title {
    margin-bottom: 2px;
    line-height: 1.2;
  }
  .gl-list .card {
    aspect-ratio: 343 / 110;
  }
  .gl-list .gl-grid-inner {
    aspect-ratio: 343 / 97;
  }
  .gl-list .card__img {
    width: 44.16%;
    aspect-ratio: 151.5 / 97;
  }
  .sec-t1, .sec-t2 {
    width: 81.62%;
    aspect-ratio: 280 / 53
  }
  .sec-title__main {
    width: auto;
  }
  .activity {
    flex-direction: column;
    aspect-ratio: 343 / 470;
    gap: 0px;
    padding-left: 0;
    padding-right: 0;
    justify-content: center;
  }
  .activity__inner {
    flex-direction: column-reverse;
    justify-content:center;
    gap: 8px;
    width: 90.67%;
    aspect-ratio: 311 / 404;
    margin: 0 auto;
  }
  .activity__feature {
    width: 100%;
    aspect-ratio: 311 / 200;
  }
  .activity__feature-body {
    aspect-ratio: 311 / 40;
  }
  .activity__row {
    aspect-ratio: 311 / 40;
  }
  .activity__list {
    flex: none;
    width: 100%;
    aspect-ratio :311/ 196;
  }
  .activity__row-thumb {
    aspect-ratio: 1 / 1;
    width: 8.53vw;
    max-width: 50px
  }
  .sec-more {
    padding-top: 4.66%;
  }
  .activity__bg{
    bottom: -8%;
  }
  .sec-inner-s2 {
    aspect-ratio: 343 / 434;
  }
  .gal__stage {
    aspect-ratio: 343 / 357;
  }
  .gal__stage__title {
    width: 31.19%;
    aspect-ratio: 107 / 37;
  }
  .gal__set {
    grid-template-columns: repeat(2, 1fr);
    aspect-ratio: 343 / 270;
    overflow-y: hidden;
  }
  .gal__card{
    aspect-ratio: 167.5 / 131;
  }
  .gal__card:nth-child(n+5) {
    display: none;
  }
  .gal__card__inner {
    aspect-ratio: 151.5 / 123;
  }
  .gal__card__img {
    aspect-ratio: 151.5 / 97;
  }
  .gal__stage__footer .sec-more {
    padding-top: 0;
  }
  .nav__item {
    -webkit-text-stroke: 0px #FAD997;
  }
  .footer {
    display: none;
  }
  .gl-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
}
@media (max-width: 768px) {

  /* 活动动态：上下结构（上列表、下图文） */
  .activity__feature img {
    height: 100%;
  }

  /* 列表布局移动端：横条卡片，文字内边距收缩 */
  .gl-list .card__body {
    padding: 2.33% 2.33%;
  }
  /* 详情页图鉴：移动端单列 */
  .detail-gallery__img {
    max-width: 100%;
  }
}

/* TRS topic integration corrections. */
[data-topic-section][hidden] { display: none !important; }
.topic-empty { margin: 48px auto; text-align: center; color: var(--c-text-sub); }
.topic-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 32px auto 0; }
.topic-pagination a, .topic-pagination span { min-width: 34px; padding: 6px 10px; text-align: center; border: 1px solid var(--c-bd); color: var(--c-text-sub); }
.topic-pagination .is-active { color: var(--c-gold); border-color: var(--c-gold); }
.topic-pagination .is-disabled { opacity: .45; }
.layout-toggle__btn { white-space: nowrap; flex-wrap: nowrap; }
.layout-toggle__btn::before { flex: 0 0 auto; }
.card__meta { display: block; margin-top: 4px; font-size: .82em; opacity: .78; }
/* v8 stable list card layout. */
.gl-grid .card__body {
  display: grid;
  grid-template-rows: minmax(1.15em, auto) minmax(1em, auto);
  gap: 2px;
  overflow: hidden;
  padding: 6px 12px 4px;
  align-content: start;
}
.gl-grid .card__title {
  grid-row: 1;
  min-width: 0;
  margin: 0;
  display: block;
  font-size: calc(var(--fs-body) * .84);
  line-height: 1.14;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gl-grid .card__meta {
  grid-row: 2;
  min-width: 0;
  margin: 0;
  font-size: calc(var(--fs-body) * .68);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* v8 fixed gallery media. */
.gal__card__inner {
  height: 100%;
  aspect-ratio: auto;
  justify-content: flex-start;
}
.gal__card__img {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 336 / 216;
}
.gal__card__body {
  flex: 0 0 auto;
  min-width: 0;
  overflow: hidden;
  padding: 8px 6px 0;
}
.gal__card__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.footer__col li > span {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}
.footer__record { gap: 4px; }
/* v8 TRS rich text normalization. */
.detail .txt-body {
  max-width: 820px;
  margin: 0 auto;
  color: var(--c-text-sub);
  font-size: var(--fs-p-d);
  line-height: 1.9;
  letter-spacing: 0;
}
.detail .txt-body p {
  margin: 0 0 18px;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  text-indent: 2em;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: 0 !important;
}
.detail .txt-body p span,
.detail .txt-body p font {
  background: transparent !important;
  background-color: transparent !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: 0 !important;
}
/* v8 automatic image/video detail media. */
.detail .txt-body img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.detail .txt-body video,
.detail .txt-body iframe {
  display: block;
  max-width: 100% !important;
  margin-left: auto;
  margin-right: auto;
}
.detail .txt-body video {
  width: 100%;
  height: auto !important;
}
.detail .txt-body table {
  max-width: 100% !important;
}
.detail-auto-video { margin-top: 4px; }
.detail-video-region {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-md);
  background: #000;
}
.detail-video-player {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.detail-video-unavailable {
  padding: 48px 16px;
  border-radius: var(--r-md);
  background: rgba(250, 217, 151, .08);
  color: var(--c-text-mut);
  text-align: center;
}
.detail-video-body {
  margin-top: 24px;
}
.detail-video-body:empty {
  display: none;
}
.topic-detail-cover { max-width: 900px; margin: 0 auto 28px; }
.topic-detail-cover img { display: block; width: 100%; height: auto; }
.topic-detail-actions { display: flex; justify-content: center; margin-top: 32px; }
/* Cards represent ordinary content by default, so do not imply video playback. */
.gl-grid .card__img::after, .gl-list .card__img::after, .gal__card__img::after { display: none; }

@media (max-width: 768px) {
  .nav-wrap { display: none; }
  .nav-m { display: block; }
  .nav-m__panel { display: flex; }
  .footer { display: block; }
  .footer__inner { display: block; padding: 28px 18px 16px; }
  .footer__col { width: 100%; }
  .footer__col li { display: block; line-height: 1.8; }
  .footer__col li span { margin: 0 4px; }
  .layout-toggle { min-width: 136px; }
  .gl-grid .card__body { gap: 0; padding: 3px 2px 2px; }
  .gl-grid .card__title { line-height: 1.12; }
  .gl-grid .card__meta { line-height: 1.1; }
  .detail-video-body { margin-top: 20px; }
}