/* ========================================
   国学坊 · 新中式简洁现代风
   Design tokens + base + components
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700;900&family=Noto+Sans+SC:wght@300;400;500;700&family=ZCOOL+XiaoWei&display=swap');

:root {
  /* 色彩 — 朱砂 / 米色 / 墨黑 / 烫金 */
  --gx-bg:        #FFFFFF;
  --gx-bg-soft:   #FBF8F1;
  --gx-bg-card:   #FAF5E9;
  --gx-bg-deep:   #F5EFE0;
  --gx-ink:       #1A1A1A;
  --gx-ink-soft:  #4B5563;
  --gx-ink-mute:  #9CA3AF;
  --gx-line:      #E5E0D3;
  --gx-line-soft: #F0EBDD;
  --gx-red:       #8B0000;
  --gx-red-light: #B91C1C;
  --gx-red-deep:  #6B0000;
  --gx-gold:      #C9A227;
  --gx-gold-soft: #D4AF37;
  --gx-jade:      #3F7B6B;

  /* AI/科技点缀渐变 */
  --gx-grad-cta: linear-gradient(135deg, #8B0000 0%, #B91C1C 50%, #C9A227 100%);
  --gx-grad-soft: linear-gradient(135deg, #FBF8F1 0%, #FAF5E9 100%);

  /* 字体栈 */
  --gx-font-serif:   'Noto Serif SC', 'Songti SC', '宋体', SimSun, serif;
  --gx-font-sans:    'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --gx-font-kai:     'ZCOOL XiaoWei', 'KaiTi', '楷体', STKaiti, serif;
  --gx-font-zhuan:   'ZCOOL XiaoWei', serif;

  /* 间距 */
  --gx-sp-1: 4px;
  --gx-sp-2: 8px;
  --gx-sp-3: 12px;
  --gx-sp-4: 16px;
  --gx-sp-5: 24px;
  --gx-sp-6: 32px;
  --gx-sp-8: 48px;
  --gx-sp-10: 64px;

  /* 圆角 */
  --gx-radius-sm: 4px;
  --gx-radius:    8px;
  --gx-radius-lg: 16px;

  /* 阴影 */
  --gx-shadow-sm: 0 1px 2px rgba(26,26,26,0.04);
  --gx-shadow:    0 4px 12px rgba(139,0,0,0.06), 0 1px 3px rgba(26,26,26,0.04);
  --gx-shadow-lg: 0 12px 32px rgba(139,0,0,0.10), 0 4px 8px rgba(26,26,26,0.06);

  /* 容器 */
  --gx-container: 1320px;
}

/* ========================================
   Reset + Base
   ======================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--gx-font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--gx-ink);
  background: var(--gx-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--gx-red); }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }

h1, h2, h3, h4 { font-family: var(--gx-font-serif); font-weight: 600; line-height: 1.3; }

.container { max-width: var(--gx-container); margin: 0 auto; padding: 0 var(--gx-sp-5); }

/* ========================================
   印章 / 装饰元素
   ======================================== */
.gx-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--gx-red);
  color: #FFFFFF;
  font-family: var(--gx-font-zhuan);
  font-size: 18px;
  font-weight: 700;
  border-radius: 4px;
  border: 2px solid var(--gx-red);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--gx-red);
  transform: rotate(-3deg);
  letter-spacing: 0;
}
.gx-seal.lg { width: 56px; height: 56px; font-size: 28px; border-radius: 6px; }
.gx-seal.sm { width: 24px; height: 24px; font-size: 12px; }

/* 中式分隔线 */
.gx-divider {
  display: flex;
  align-items: center;
  gap: var(--gx-sp-3);
  margin: var(--gx-sp-6) 0;
  color: var(--gx-gold);
}
.gx-divider::before, .gx-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gx-line) 30%, var(--gx-line) 70%, transparent);
}
.gx-divider span { font-family: var(--gx-font-serif); font-size: 14px; color: var(--gx-ink-mute); letter-spacing: 4px; }

/* 章节标题(印章式) */
.gx-section-title {
  display: flex;
  align-items: center;
  gap: var(--gx-sp-3);
  margin-bottom: var(--gx-sp-5);
  font-family: var(--gx-font-serif);
  font-size: 22px;
  font-weight: 600;
}
.gx-section-title::before {
  content: '';
  width: 4px;
  height: 22px;
  background: var(--gx-red);
  border-radius: 2px;
}
.gx-section-title .sub {
  font-family: var(--gx-font-sans);
  font-size: 13px;
  font-weight: 400;
  color: var(--gx-ink-mute);
  letter-spacing: 2px;
  margin-left: var(--gx-sp-2);
}

/* ========================================
   Header / Top Nav
   ======================================== */
.gx-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--gx-line);
}
.gx-header-inner {
  display: flex;
  align-items: center;
  height: 64px;
  gap: var(--gx-sp-6);
}
.gx-logo {
  display: flex;
  align-items: center;
  gap: var(--gx-sp-3);
  font-family: var(--gx-font-serif);
  font-size: 20px;
  font-weight: 700;
  color: var(--gx-ink);
  white-space: nowrap;
}
.gx-logo .name { letter-spacing: 4px; }
.gx-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.gx-nav::-webkit-scrollbar { display: none; }
.gx-nav a {
  display: inline-block;
  padding: 6px 9px;
  font-size: 14.5px;
  color: var(--gx-ink-soft);
  border-radius: var(--gx-radius-sm);
  white-space: nowrap;
  position: relative;
  transition: all 0.2s;
}
.gx-nav a:hover { color: var(--gx-red); background: var(--gx-bg-soft); }
.gx-nav a.active { color: var(--gx-red); font-weight: 500; }
.gx-nav a.active::after {
  content: ''; position: absolute;
  left: 50%; bottom: -4px; transform: translateX(-50%);
  width: 4px; height: 4px; background: var(--gx-red); border-radius: 50%;
}
.gx-header-actions { display: flex; align-items: center; gap: var(--gx-sp-3); }
.gx-search {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 3px 3px 10px;
  background: var(--gx-bg-soft);
  border: 1px solid var(--gx-line-soft);
  border-radius: var(--gx-radius);
  width: 220px;
  transition: all 0.2s;
}
.gx-search:focus-within { border-color: var(--gx-red); background: #fff; }
.gx-search input { background: none; border: none; outline: none; flex: 1; min-width: 0; font-size: 13px; padding: 5px 0; }
.gx-search .icon { color: var(--gx-ink-mute); font-size: 14px; flex-shrink: 0; }
.gx-search button {
  flex-shrink: 0;
  border: none;
  background: var(--gx-grad-cta);
  color: #FFF;
  padding: 6px 12px;
  border-radius: calc(var(--gx-radius) - 2px);
  font-size: 13px;
  letter-spacing: 1px;
  font-family: inherit;
  cursor: pointer;
  transition: opacity .2s;
}
.gx-search button:hover { opacity: .88; }
.gx-btn-tool {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  background: var(--gx-grad-cta);
  color: #FFF;
  border-radius: var(--gx-radius);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 1px;
  box-shadow: var(--gx-shadow-sm);
  transition: all 0.2s;
}
.gx-btn-tool:hover { color: #FFF; transform: translateY(-1px); box-shadow: var(--gx-shadow); }
.gx-btn-tool::before { content: '✦'; font-size: 12px; }

/* ========================================
   Hero / 今日栏目
   ======================================== */
.gx-hero {
  padding: var(--gx-sp-8) 0 var(--gx-sp-6);
  background:
    radial-gradient(ellipse at top, var(--gx-bg-deep) 0%, transparent 60%),
    var(--gx-bg);
  position: relative;
  overflow: hidden;
}
.gx-hero::before {
  content: '学';
  position: absolute;
  right: -40px;
  top: -20px;
  font-family: var(--gx-font-zhuan);
  font-size: 360px;
  color: var(--gx-line-soft);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
  font-weight: 900;
}
.gx-hero-title {
  font-family: var(--gx-font-serif);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: 4px;
  margin-bottom: var(--gx-sp-2);
  position: relative;
}
.gx-hero-sub {
  font-family: var(--gx-font-kai);
  font-size: 16px;
  color: var(--gx-ink-soft);
  letter-spacing: 3px;
  margin-bottom: var(--gx-sp-6);
}

.gx-daily {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gx-sp-4);
  position: relative;
}
.gx-daily-card {
  background: #FFF;
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius-lg);
  padding: var(--gx-sp-5);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}
.gx-daily-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gx-grad-cta);
  opacity: 0;
  transition: opacity 0.3s;
}
.gx-daily-card:hover { transform: translateY(-4px); box-shadow: var(--gx-shadow-lg); }
.gx-daily-card:hover::before { opacity: 1; }
.gx-daily-card .label {
  display: inline-block;
  font-size: 12px;
  color: var(--gx-red);
  background: var(--gx-bg-card);
  padding: 2px 8px;
  border-radius: var(--gx-radius-sm);
  letter-spacing: 2px;
  margin-bottom: var(--gx-sp-3);
}
.gx-daily-card .main {
  font-family: var(--gx-font-serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 4px;
  margin-bottom: var(--gx-sp-2);
}
.gx-daily-card .desc {
  font-size: 13px;
  color: var(--gx-ink-soft);
  line-height: 1.6;
}
.gx-daily-card .meta {
  margin-top: var(--gx-sp-3);
  padding-top: var(--gx-sp-3);
  border-top: 1px dashed var(--gx-line);
  font-size: 12px;
  color: var(--gx-ink-mute);
  display: flex;
  justify-content: space-between;
}
.gx-daily-card .tag-shang { color: var(--gx-jade); }
.gx-daily-card .tag-ji { color: var(--gx-red); }

/* ========================================
   11 主题方格
   ======================================== */
.gx-section { padding: var(--gx-sp-8) 0; }
.gx-themes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gx-sp-4);
}
.gx-theme-card {
  background: var(--gx-bg-card);
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius-lg);
  padding: var(--gx-sp-5);
  display: flex;
  align-items: center;
  gap: var(--gx-sp-4);
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}
.gx-theme-card:hover {
  background: #FFF;
  border-color: var(--gx-red);
  transform: translateY(-3px);
  box-shadow: var(--gx-shadow);
}
.gx-theme-card:hover .gx-theme-icon { transform: scale(1.1) rotate(-5deg); }
.gx-theme-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--gx-font-serif);
  font-size: 28px;
  color: var(--gx-red);
  background: #FFF;
  border-radius: var(--gx-radius);
  border: 1px solid var(--gx-line);
  transition: all 0.3s;
  flex-shrink: 0;
}
.gx-theme-info .title {
  font-family: var(--gx-font-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 2px;
}
.gx-theme-info .desc {
  font-size: 12px;
  color: var(--gx-ink-mute);
  letter-spacing: 1px;
}

/* ========================================
   工具中心 (热门工具卡)
   ======================================== */
.gx-tools-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gx-sp-4);
}
.gx-tool-card {
  background: #FFF;
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
  padding: var(--gx-sp-4);
  text-align: center;
  transition: all 0.25s;
  position: relative;
}
.gx-tool-card.hot::after {
  content: 'HOT';
  position: absolute;
  top: -6px; right: -6px;
  background: var(--gx-grad-cta);
  color: #FFF;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 1px;
}
.gx-tool-card.ai::after {
  content: 'AI';
  position: absolute;
  top: -6px; right: -6px;
  background: linear-gradient(135deg, #1E3A8A, #C9A227);
  color: #FFF;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 1px;
}
.gx-tool-card:hover { border-color: var(--gx-red); transform: translateY(-2px); box-shadow: var(--gx-shadow); }
.gx-tool-card .icon { font-size: 24px; margin-bottom: var(--gx-sp-2); color: var(--gx-red); }
.gx-tool-card .name { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
.gx-tool-card .sub { font-size: 11px; color: var(--gx-ink-mute); }

/* ========================================
   阅读 / 精选(混排)
   ======================================== */
.gx-feature-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--gx-sp-5);
}
.gx-feature-main {
  background: var(--gx-grad-soft);
  border-radius: var(--gx-radius-lg);
  padding: var(--gx-sp-6);
  border: 1px solid var(--gx-line);
  position: relative;
  overflow: hidden;
}
.gx-feature-main::before {
  content: '「';
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--gx-font-serif);
  font-size: 80px;
  color: var(--gx-red);
  opacity: 0.15;
  line-height: 1;
}
.gx-feature-main .quote {
  font-family: var(--gx-font-kai);
  font-size: 24px;
  letter-spacing: 4px;
  line-height: 1.8;
  margin-bottom: var(--gx-sp-3);
  position: relative;
}
.gx-feature-main .source {
  font-family: var(--gx-font-serif);
  font-size: 14px;
  color: var(--gx-ink-soft);
  letter-spacing: 2px;
}
.gx-feature-main .source::before { content: '— '; }
.gx-feature-side {
  display: flex;
  flex-direction: column;
  gap: var(--gx-sp-3);
}
.gx-feature-item {
  background: #FFF;
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
  padding: var(--gx-sp-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all 0.2s;
}
.gx-feature-item:hover { border-color: var(--gx-red); }
.gx-feature-item .cat { font-size: 11px; color: var(--gx-red); letter-spacing: 2px; }
.gx-feature-item .title { font-family: var(--gx-font-serif); font-size: 16px; font-weight: 500; }
.gx-feature-item .snip { font-size: 12px; color: var(--gx-ink-mute); line-height: 1.5; }

/* ========================================
   Footer
   ======================================== */
.gx-footer {
  margin-top: var(--gx-sp-10);
  padding: var(--gx-sp-8) 0 var(--gx-sp-5);
  background: var(--gx-bg-soft);
  border-top: 1px solid var(--gx-line);
  font-size: 13px;
  color: var(--gx-ink-soft);
}
.gx-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: var(--gx-sp-6);
  margin-bottom: var(--gx-sp-6);
}
.gx-footer h4 { font-size: 14px; margin-bottom: var(--gx-sp-3); color: var(--gx-ink); }
.gx-footer ul { list-style: none; }
.gx-footer ul li { margin-bottom: 6px; }
.gx-footer ul li a { color: var(--gx-ink-soft); font-size: 13px; }
.gx-footer ul li a:hover { color: var(--gx-red); }
.gx-footer .brand-block { font-size: 13px; line-height: 1.7; }
.gx-footer .brand-block .logo { font-family: var(--gx-font-serif); font-size: 18px; color: var(--gx-ink); margin-bottom: var(--gx-sp-3); letter-spacing: 4px; }
.gx-footer-bottom {
  padding-top: var(--gx-sp-4);
  border-top: 1px solid var(--gx-line);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--gx-ink-mute);
}
.gx-disclaimer {
  margin-top: var(--gx-sp-3);
  padding: var(--gx-sp-3) var(--gx-sp-4);
  background: var(--gx-bg-card);
  border-left: 3px solid var(--gx-gold);
  border-radius: var(--gx-radius-sm);
  font-size: 12px;
  color: var(--gx-ink-soft);
  line-height: 1.6;
}

/* ========================================
   Breadcrumb
   ======================================== */
.gx-crumb {
  padding: var(--gx-sp-4) 0;
  font-size: 13px;
  color: var(--gx-ink-mute);
}
.gx-crumb a { color: var(--gx-ink-soft); }
.gx-crumb a:hover { color: var(--gx-red); }
.gx-crumb .sep { margin: 0 8px; color: var(--gx-line); }

/* ========================================
   详情页
   ======================================== */
.gx-detail-hero {
  background: var(--gx-grad-soft);
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius-lg);
  padding: var(--gx-sp-8) var(--gx-sp-6);
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: var(--gx-sp-6);
}
.gx-detail-hero::after {
  content: '☰';
  position: absolute;
  right: -20px; bottom: -40px;
  font-size: 240px;
  color: var(--gx-line);
  opacity: 0.6;
  line-height: 1;
  font-family: var(--gx-font-serif);
}
.gx-detail-symbol {
  display: inline-block;
  font-family: var(--gx-font-serif);
  font-size: 64px;
  color: var(--gx-red);
  letter-spacing: 4px;
  margin-bottom: var(--gx-sp-3);
  position: relative;
}
.gx-detail-symbol .seal {
  position: absolute;
  top: 0; right: -50px;
  width: 44px; height: 44px;
  background: var(--gx-red);
  color: #FFF;
  font-family: var(--gx-font-zhuan);
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  transform: rotate(-8deg);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--gx-red);
}
.gx-detail-title {
  font-family: var(--gx-font-serif);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 6px;
  margin-bottom: var(--gx-sp-3);
}
.gx-detail-tags {
  display: flex;
  gap: var(--gx-sp-2);
  justify-content: center;
  flex-wrap: wrap;
}
.gx-tag {
  display: inline-block;
  padding: 3px 12px;
  background: #FFF;
  border: 1px solid var(--gx-line);
  border-radius: 100px;
  font-size: 12px;
  color: var(--gx-ink-soft);
  letter-spacing: 1px;
}
.gx-tag.shang { color: var(--gx-jade); border-color: var(--gx-jade); }
.gx-tag.ji { color: var(--gx-red); border-color: var(--gx-red); }
.gx-tag.gold { color: var(--gx-gold); border-color: var(--gx-gold); }

.gx-detail-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--gx-sp-6); }
.gx-detail-main { min-width: 0; }
.gx-content-block {
  background: #FFF;
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
  padding: var(--gx-sp-5) var(--gx-sp-6);
  margin-bottom: var(--gx-sp-4);
}
.gx-content-block h3 {
  display: flex;
  align-items: center;
  gap: var(--gx-sp-2);
  font-size: 18px;
  margin-bottom: var(--gx-sp-3);
  color: var(--gx-red-deep);
}
.gx-content-block h3::before {
  content: '「';
  font-size: 22px;
  color: var(--gx-red);
}
.gx-content-block h3::after {
  content: '」';
  font-size: 22px;
  color: var(--gx-red);
}
.gx-content-block p { margin-bottom: var(--gx-sp-3); line-height: 1.9; }
.gx-content-block .ancient {
  font-family: var(--gx-font-kai);
  font-size: 18px;
  letter-spacing: 3px;
  text-align: center;
  padding: var(--gx-sp-4);
  background: var(--gx-bg-soft);
  border-radius: var(--gx-radius);
  border-left: 3px solid var(--gx-red);
}

/* 原 Tab 切换 → 改为全部展开 (2026-05-26):隐藏 chip 行,所有 panel 都显示,每个 panel 头部用 data-section-label 渲染小标题 */
.gx-tabs { display: none; }
.gx-tab-content { display: block !important; padding: var(--gx-sp-5) var(--gx-sp-6); }
.gx-tab-content + .gx-tab-content { border-top: 1px dashed var(--gx-line-soft); }
.gx-tab-content[data-section-label]::before {
  content: attr(data-section-label);
  display: inline-block;
  font-family: var(--gx-font-zhuan);
  font-size: 14px;
  letter-spacing: 4px;
  color: var(--gx-red);
  padding: 4px 14px;
  background: linear-gradient(to right, rgba(196,30,58,.08), transparent);
  border-left: 3px solid var(--gx-red);
  margin-bottom: var(--gx-sp-4);
}

/* 侧栏 */
.gx-sidebar { position: sticky; top: 84px; align-self: start; }
.gx-side-block {
  background: #FFF;
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
  padding: var(--gx-sp-4);
  margin-bottom: var(--gx-sp-3);
}
.gx-side-block h4 {
  font-size: 14px;
  margin-bottom: var(--gx-sp-3);
  padding-bottom: var(--gx-sp-2);
  border-bottom: 1px dashed var(--gx-line);
  color: var(--gx-red);
  letter-spacing: 2px;
}
.gx-side-block ul { list-style: none; }
.gx-side-block ul li { margin-bottom: var(--gx-sp-2); font-size: 13px; }
.gx-side-block ul li a { display: flex; align-items: center; gap: 6px; color: var(--gx-ink-soft); }
.gx-side-block ul li a::before { content: '·'; color: var(--gx-gold); }

/* 跨主题聚合 - 延伸阅读 */
.gx-cross-theme {
  margin-top: var(--gx-sp-6);
}
.gx-cross-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gx-sp-3);
}
.gx-cross-card {
  background: var(--gx-bg-card);
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
  padding: var(--gx-sp-4);
  transition: all 0.2s;
}
.gx-cross-card:hover { background: #FFF; border-color: var(--gx-red); }
.gx-cross-card .from {
  font-size: 11px;
  color: var(--gx-gold);
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.gx-cross-card .from::before { content: '⊗ '; }
.gx-cross-card .title {
  font-family: var(--gx-font-serif);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 6px;
}
.gx-cross-card .snip {
  font-size: 12px;
  color: var(--gx-ink-mute);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 相关推荐 */
.gx-related-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--gx-sp-3);
}
.gx-related-item {
  background: #FFF;
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
  padding: var(--gx-sp-4);
  text-align: center;
  transition: all 0.2s;
}
.gx-related-item:hover { transform: translateY(-2px); border-color: var(--gx-red); box-shadow: var(--gx-shadow-sm); }
.gx-related-item .sym {
  font-family: var(--gx-font-serif);
  font-size: 36px;
  color: var(--gx-red);
  margin-bottom: var(--gx-sp-2);
}
.gx-related-item .name { font-size: 14px; letter-spacing: 2px; margin-bottom: 2px; }
.gx-related-item .sub { font-size: 11px; color: var(--gx-ink-mute); }

/* 6-col 紧凑变体 — 用于有 6 个均匀分类卡的场景 (jiemeng/...) */
.gx-related-grid.is-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gx-sp-3); }
.gx-related-grid.is-cols-6 .gx-related-item { padding: var(--gx-sp-3); }
.gx-related-grid.is-cols-6 .gx-related-item .sym { font-size: 30px; }
.gx-related-grid.is-cols-6 .gx-related-item .name { font-size: 13px; letter-spacing: 1px; }
.gx-related-grid.is-cols-6 .gx-related-item .sub { font-size: 11px; }

/* 自适应填充 — 项目数不定/偏少时让卡片自然撑开,避免大片留白 */
.gx-related-grid.is-cols-auto { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* 紧凑两列列表 — 适合「相关场景/相关条目」少量+带预览的横向密集陈列 */
.gx-related-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gx-sp-3);
}
.gx-related-list a {
  display: flex;
  align-items: baseline;
  gap: var(--gx-sp-3);
  padding: var(--gx-sp-3) var(--gx-sp-4);
  background: #FFF;
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
  text-decoration: none;
  color: var(--gx-ink);
  transition: border-color .2s, box-shadow .2s, color .2s;
  min-width: 0;
}
.gx-related-list a:hover { border-color: var(--gx-red); box-shadow: var(--gx-shadow-sm); color: var(--gx-red); }
.gx-related-list .sym {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gx-red);
  color: #FFF;
  border-radius: 4px;
  font-family: var(--gx-font-serif);
  font-size: 16px;
}
.gx-related-list .body { flex: 1; min-width: 0; }
.gx-related-list .name {
  font-family: var(--gx-font-kai);
  font-size: 14px;
  letter-spacing: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gx-related-list .sub {
  font-size: 12px;
  color: var(--gx-ink-mute);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ========================================
   列表页
   ======================================== */
.gx-list-header {
  padding: var(--gx-sp-6) 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid var(--gx-line);
  margin-bottom: var(--gx-sp-5);
}
.gx-list-title { font-size: 28px; letter-spacing: 4px; }
.gx-list-title .sub { font-family: var(--gx-font-kai); font-size: 14px; color: var(--gx-ink-mute); margin-left: var(--gx-sp-3); letter-spacing: 2px; }
.gx-filter {
  display: flex;
  gap: var(--gx-sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--gx-sp-5);
}
.gx-filter-item {
  padding: 6px 14px;
  font-size: 13px;
  background: var(--gx-bg-soft);
  border-radius: 100px;
  color: var(--gx-ink-soft);
  cursor: pointer;
  transition: all 0.2s;
}
.gx-filter-item:hover { color: var(--gx-red); }
.gx-filter-item.active { background: var(--gx-red); color: #FFF; }

.gx-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gx-sp-4);
}
.gx-card-grid.is-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gx-card-grid.is-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gx-card-grid.is-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gx-card {
  background: #FFF;
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius-lg);
  padding: var(--gx-sp-5);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 180px;
}
.gx-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 28px;
  background: linear-gradient(to bottom, var(--gx-red), transparent);
  opacity: 0.4;
  transition: opacity 0.3s, height 0.3s;
}
.gx-card:hover {
  transform: translateY(-3px);
  border-color: var(--gx-red);
  box-shadow: var(--gx-shadow);
}
.gx-card:hover::before { opacity: 1; height: 56px; }
.gx-card:hover .gx-card-name { color: var(--gx-red); }
.gx-card-num { display: none; }
.gx-card-sym { display: none; }
.gx-card-name {
  font-family: var(--gx-font-serif);
  font-size: 22px;
  letter-spacing: 3px;
  line-height: 1.45;
  margin-bottom: var(--gx-sp-2);
  color: var(--gx-ink);
  transition: color 0.25s;
}
.gx-card-meta {
  font-family: var(--gx-font-kai);
  font-size: 13px;
  color: var(--gx-ink-soft);
  letter-spacing: 1.5px;
  margin-bottom: var(--gx-sp-3);
  padding-bottom: var(--gx-sp-3);
  border-bottom: 1px dashed var(--gx-line);
}
.gx-card-desc { font-size: 13px; color: var(--gx-ink-soft); line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.gx-card-tags { display: flex; gap: 6px; margin-top: var(--gx-sp-3); flex-wrap: wrap; }

/* Pagination */
.gx-pager {
  display: flex;
  justify-content: center;
  gap: var(--gx-sp-2);
  margin: var(--gx-sp-6) 0;
}
.gx-pager a, .gx-pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  background: #FFF;
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius-sm);
  font-size: 14px;
  color: var(--gx-ink-soft);
  transition: all 0.2s;
}
.gx-pager a:hover { border-color: var(--gx-red); color: var(--gx-red); }
.gx-pager .active { background: var(--gx-red); color: #FFF; border-color: var(--gx-red); }

/* ========================================
   工具页 (AI 风)
   ======================================== */
.gx-tool-hero {
  background:
    radial-gradient(ellipse at center, rgba(201,162,39,0.08) 0%, transparent 70%),
    var(--gx-bg-soft);
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius-lg);
  padding: var(--gx-sp-8) var(--gx-sp-6);
  margin-bottom: var(--gx-sp-5);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.gx-tool-hero::before, .gx-tool-hero::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,0,0,0.06) 0%, transparent 70%);
}
.gx-tool-hero::before { top: -60px; left: -60px; }
.gx-tool-hero::after { bottom: -60px; right: -60px; }
.gx-tool-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: linear-gradient(135deg, #1E3A8A, #C9A227);
  color: #FFF;
  font-size: 11px;
  letter-spacing: 3px;
  border-radius: 100px;
  margin-bottom: var(--gx-sp-4);
  position: relative;
}
.gx-tool-badge::before { content: '✦'; font-size: 10px; }
.gx-tool-hero h1 {
  font-size: 36px;
  letter-spacing: 8px;
  margin-bottom: var(--gx-sp-2);
  position: relative;
}
.gx-tool-hero .sub {
  font-family: var(--gx-font-kai);
  color: var(--gx-ink-soft);
  letter-spacing: 4px;
  font-size: 15px;
  position: relative;
}

.gx-tool-body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gx-sp-5); align-items: start; }
@media (max-width: 900px) { .gx-tool-body { grid-template-columns: 1fr; } }

.gx-form {
  background: #FFF;
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius-lg);
  padding: var(--gx-sp-6);
}
.gx-form h3 {
  font-size: 18px;
  margin-bottom: var(--gx-sp-4);
  padding-bottom: var(--gx-sp-3);
  border-bottom: 1px solid var(--gx-line-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.gx-form h3::before { content: '◆'; color: var(--gx-red); }
.gx-field { margin-bottom: var(--gx-sp-4); }
.gx-field label {
  display: block;
  font-size: 13px;
  color: var(--gx-ink-soft);
  margin-bottom: 6px;
  letter-spacing: 2px;
}
.gx-field input[type=text],
.gx-field input[type=date],
.gx-field input[type=number],
.gx-field select {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
  background: var(--gx-bg-soft);
  transition: all 0.2s;
}
.gx-field input:focus, .gx-field select:focus {
  outline: none;
  border-color: var(--gx-red);
  background: #FFF;
  box-shadow: 0 0 0 3px rgba(139,0,0,0.08);
}
.gx-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gx-sp-3); }
.gx-radio-group { display: flex; gap: var(--gx-sp-3); }
.gx-radio {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
  cursor: pointer;
  transition: all 0.2s;
  background: var(--gx-bg-soft);
}
.gx-radio input { margin: 0; }
.gx-radio.checked { background: #FFF; border-color: var(--gx-red); color: var(--gx-red); font-weight: 500; }

.gx-submit {
  width: 100%;
  padding: 14px;
  background: var(--gx-grad-cta);
  color: #FFF;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 6px;
  border-radius: var(--gx-radius);
  margin-top: var(--gx-sp-3);
  box-shadow: 0 4px 12px rgba(139,0,0,0.2);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.gx-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(139,0,0,0.3); }
.gx-submit::before { content: '✦'; }

/* 结果面板 */
.gx-result {
  background: linear-gradient(180deg, #FFF 0%, var(--gx-bg-soft) 100%);
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius-lg);
  padding: var(--gx-sp-6);
  min-height: 400px;
  position: relative;
}
.gx-result-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 380px;
  text-align: center;
  color: var(--gx-ink-mute);
}
.gx-result-empty .sym {
  font-family: var(--gx-font-serif);
  font-size: 80px;
  color: var(--gx-line);
  margin-bottom: var(--gx-sp-3);
}
.gx-result-empty .hint { font-size: 14px; letter-spacing: 2px; }

.gx-result-card {
  background: #FFF;
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
  padding: var(--gx-sp-4);
  margin-bottom: var(--gx-sp-3);
}
.gx-result-card h4 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--gx-red);
  margin-bottom: var(--gx-sp-3);
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--gx-line);
  letter-spacing: 2px;
}
.gx-result-card h4::before { content: '✦'; }

.gx-bazi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gx-sp-2);
  text-align: center;
}
.gx-bazi-col {
  background: var(--gx-bg-soft);
  border-radius: var(--gx-radius);
  padding: var(--gx-sp-3);
}
.gx-bazi-col .label { font-size: 11px; color: var(--gx-ink-mute); letter-spacing: 2px; margin-bottom: 6px; }
.gx-bazi-col .char {
  font-family: var(--gx-font-serif);
  font-size: 28px;
  color: var(--gx-red);
  font-weight: 600;
  display: block;
  margin: 4px 0;
  letter-spacing: 2px;
}
.gx-bazi-col .pinyin { font-size: 11px; color: var(--gx-ink-mute); }

/* ========================================
   列表视图切换
   ======================================== */
.gx-list-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gx-sp-4);
  gap: var(--gx-sp-3);
  flex-wrap: wrap;
}
.gx-list-bar .count { font-size: 13px; color: var(--gx-ink-mute); letter-spacing: 1px; }
.gx-list-bar .count em { color: var(--gx-red); font-style: normal; font-weight: 600; font-size: 16px; margin: 0 4px; }
.gx-view-toggle {
  display: inline-flex;
  background: var(--gx-bg-soft);
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius);
  padding: 3px;
}
.gx-view-toggle button {
  padding: 6px 14px;
  font-size: 13px;
  color: var(--gx-ink-soft);
  border-radius: var(--gx-radius-sm);
  letter-spacing: 1px;
  transition: all 0.2s;
}
.gx-view-toggle button.active {
  background: #FFF;
  color: var(--gx-red);
  font-weight: 500;
  box-shadow: var(--gx-shadow-sm);
}
.gx-view-toggle .icon { font-size: 14px; margin-right: 4px; }

/* 列表瘦身: 当切到 list 视图,卡片变横排 row */
.gx-card-grid.is-list {
  display: flex;
  flex-direction: column;
  gap: var(--gx-sp-2);
}
.gx-card-grid.is-list .gx-card {
  display: flex;
  align-items: center;
  gap: var(--gx-sp-4);
  padding: var(--gx-sp-3) var(--gx-sp-4);
  border-radius: var(--gx-radius);
}
.gx-card-grid.is-list .gx-card:hover { transform: none; background: var(--gx-bg-soft); }
.gx-card-grid.is-list .gx-card-num {
  position: static;
  flex-shrink: 0;
  font-size: 12px;
  text-align: center;
  background: var(--gx-bg-soft);
  color: var(--gx-red);
  padding: 6px 10px;
  border-radius: var(--gx-radius-sm);
  letter-spacing: 1px;
  font-family: var(--gx-font-serif);
}
.gx-card-grid.is-list .gx-card-sym {
  font-size: 28px;
  margin-bottom: 0;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}
.gx-card-grid.is-list .gx-card-name {
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 0;
  flex-shrink: 0;
  min-width: 96px;
}
.gx-card-grid.is-list .gx-card-meta {
  font-size: 12px;
  margin-bottom: 0;
  color: var(--gx-ink-mute);
  flex-shrink: 0;
}
.gx-card-grid.is-list .gx-card-desc {
  flex: 1;
  font-size: 12px;
  -webkit-line-clamp: 1;
  margin: 0;
  min-width: 0;
}
.gx-card-grid.is-list .gx-card-tags {
  margin-top: 0;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
.gx-card-grid.is-list .gx-card-tags .gx-tag:nth-child(n+2) { display: none; }

/* ========================================
   移动专属组件 (汉堡/抽屉/底栏)
   ======================================== */
.gx-hamburger {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--gx-radius-sm);
  position: relative;
  cursor: pointer;
  padding: 0;
}
.gx-hamburger:active { background: var(--gx-bg-card); }
.gx-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--gx-ink);
  border-radius: 2px;
  position: relative;
  transition: all 0.25s;
}
.gx-hamburger span::before,
.gx-hamburger span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--gx-ink);
  border-radius: 2px;
  transition: all 0.25s;
}
.gx-hamburger span::before { top: -7px; }
.gx-hamburger span::after  { top: 7px; }
.gx-hamburger.open span { background: transparent; }
.gx-hamburger.open span::before { top: 0; transform: rotate(45deg); background: var(--gx-red); }
.gx-hamburger.open span::after  { top: 0; transform: rotate(-45deg); background: var(--gx-red); }

.gx-mob-search-btn {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--gx-ink);
  background: transparent;
  border: none;
  border-radius: var(--gx-radius-sm);
  cursor: pointer;
  padding: 0;
}
.gx-mob-search-btn:active { background: var(--gx-bg-card); }
.gx-drawer-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.gx-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(26,26,26,0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.gx-drawer.open { opacity: 1; pointer-events: auto; }
.gx-drawer-panel {
  position: absolute;
  top: 0; right: 0;
  width: min(85vw, 360px);
  height: 100%;
  background: #FFF;
  padding: var(--gx-sp-5) var(--gx-sp-4);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: var(--gx-sp-4);
}
.gx-drawer.open .gx-drawer-panel { transform: translateX(0); }
.gx-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: var(--gx-sp-4);
  border-bottom: 1px solid var(--gx-line);
}
.gx-drawer-head .title { font-family: var(--gx-font-serif); font-size: 18px; letter-spacing: 4px; }
.gx-drawer-close { font-size: 22px; color: var(--gx-ink-soft); width: 32px; height: 32px; }
.gx-drawer-search {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 5px 5px 14px;
  background: var(--gx-bg-soft);
  border-radius: var(--gx-radius);
  border: 1px solid var(--gx-line);
}
.gx-drawer-search input { flex: 1; min-width: 0; background: none; border: none; outline: none; font-size: 14px; padding: 6px 0; }
.gx-drawer-search button {
  flex-shrink: 0; border: none; cursor: pointer; font-family: inherit;
  background: var(--gx-grad-cta); color: #FFF;
  padding: 8px 16px; border-radius: calc(var(--gx-radius) - 2px);
  font-size: 13px; letter-spacing: 2px;
}
.gx-drawer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gx-sp-2); }
.gx-drawer-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gx-sp-4) var(--gx-sp-2);
  background: var(--gx-bg-soft);
  border-radius: var(--gx-radius);
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--gx-ink);
  gap: 6px;
}
.gx-drawer-nav a .ic {
  font-size: 22px;
  color: var(--gx-red);
  font-family: var(--gx-font-serif);
}
.gx-drawer-nav a.active { background: var(--gx-red); color: #FFF; }
.gx-drawer-nav a.active .ic { color: #FFF; }
.gx-drawer-cta {
  display: block;
  text-align: center;
  padding: 12px;
  background: var(--gx-grad-cta);
  color: #FFF;
  border-radius: var(--gx-radius);
  letter-spacing: 4px;
}

/* 底部 tab bar */
.gx-tabbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 99;
  background: rgba(255,255,255,0.96);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--gx-line);
  padding: 6px 0 calc(env(safe-area-inset-bottom, 0px) + 18px);
}
.gx-tabbar-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 64px 1fr 1fr;
  max-width: 540px;
  margin: 0 auto;
  align-items: end;
}
.gx-tabbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px;
  font-size: 11px;
  color: var(--gx-ink-mute);
  letter-spacing: 1px;
}
.gx-tabbar-item .ic { font-size: 18px; color: var(--gx-ink-soft); font-family: var(--gx-font-serif); }
.gx-tabbar-item.active { color: var(--gx-red); }
.gx-tabbar-item.active .ic { color: var(--gx-red); }
.gx-tabbar-fab {
  width: 52px; height: 52px;
  margin: -22px auto 0;
  border-radius: 50%;
  background: var(--gx-grad-cta);
  color: #FFF;
  font-size: 22px;
  font-family: var(--gx-font-serif);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(139,0,0,0.35);
  position: relative;
}
.gx-tabbar-fab::after {
  content: '工具';
  position: absolute;
  bottom: -16px; left: 50%; transform: translateX(-50%);
  font-size: 11px;
  color: var(--gx-red);
  letter-spacing: 1px;
  white-space: nowrap;
}

/* 横滑容器(今日卡 / 主题图标) */
.gx-hscroll {
  display: flex;
  gap: var(--gx-sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px var(--gx-sp-5);
  margin: 0 calc(var(--gx-sp-5) * -1);
}
.gx-hscroll::-webkit-scrollbar { display: none; }
.gx-hscroll > * { scroll-snap-align: start; flex-shrink: 0; }

/* 紧凑主题图标(8 列方格) */
.gx-themes.is-compact {
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gx-sp-2);
}
.gx-themes.is-compact .gx-theme-card {
  flex-direction: column;
  padding: var(--gx-sp-3) var(--gx-sp-2);
  gap: 6px;
  border-radius: var(--gx-radius);
  text-align: center;
}
.gx-themes.is-compact .gx-theme-icon {
  width: 44px; height: 44px;
  font-size: 22px;
}
.gx-themes.is-compact .gx-theme-info .title { font-size: 14px; letter-spacing: 1px; }
.gx-themes.is-compact .gx-theme-info .desc { display: none; }

/* Sticky 底部 CTA(工具页 / 详情页用) */
.gx-sticky-cta {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 50;
  padding: 10px var(--gx-sp-4) calc(env(safe-area-inset-bottom, 0px) + 10px);
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--gx-line);
}
.gx-sticky-cta a {
  display: block;
  padding: 13px;
  background: var(--gx-grad-cta);
  color: #FFF;
  border-radius: var(--gx-radius);
  text-align: center;
  letter-spacing: 4px;
  font-weight: 500;
}

/* ========================================
   响应式 — 分级断点 (1100 / 900 / 768 / 480)
   ======================================== */
@media (max-width: 1100px) {
  .gx-tools-grid { grid-template-columns: repeat(4, 1fr); }
  .gx-related-grid { grid-template-columns: repeat(4, 1fr); }
  .gx-related-grid.is-cols-6 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gx-search { width: 190px; }
}

@media (max-width: 900px) {
  .gx-daily { grid-template-columns: repeat(2, 1fr); }
  .gx-themes { grid-template-columns: repeat(3, 1fr); }
  .gx-tools-grid { grid-template-columns: repeat(4, 1fr); }
  .gx-feature-row { grid-template-columns: 1fr; }
  .gx-detail-body { grid-template-columns: minmax(0, 1fr); }
  .gx-cross-grid { grid-template-columns: repeat(2, 1fr); }
  .gx-related-grid { grid-template-columns: repeat(3, 1fr); }
  .gx-related-grid.is-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gx-related-list { grid-template-columns: 1fr; }
  .gx-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gx-card-grid.is-cols-5,
  .gx-card-grid.is-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gx-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
  .gx-tool-body { grid-template-columns: 1fr; }
  .gx-header-inner { gap: var(--gx-sp-3); }
  .gx-search { width: 180px; }
  .gx-search button { padding: 6px 10px; letter-spacing: 1px; }
  .gx-sidebar { position: static; }
}

@media (max-width: 768px) {
  /* —— 容器收紧 —— */
  .container { padding: 0 var(--gx-sp-4); }
  /* tabbar(72) + FAB 上探(22)+ 安全留白 = ~96 */
  body { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 88px); }

  /* —— 顶部:隐藏 desktop nav/搜索/CTA,改用汉堡 + 图标 —— */
  .gx-nav,
  .gx-search,
  .gx-header-actions .gx-btn-tool { display: none; }
  .gx-hamburger { display: inline-flex; }
  .gx-mob-search-btn { display: inline-flex; }
  .gx-header-inner { height: 56px; justify-content: space-between; gap: var(--gx-sp-2); }
  .gx-header-actions { gap: 0; margin-left: auto; }
  .gx-logo .name { font-size: 17px; letter-spacing: 2px; }
  .gx-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.96); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); }

  /* —— Hero 调整:防孤字、缩字距、收紧装饰 —— */
  .gx-hero { padding: var(--gx-sp-6) 0 var(--gx-sp-5); }
  .gx-hero::before { font-size: 200px; right: -30px; top: 10px; opacity: 0.4; }
  .gx-hero-title { font-size: 26px; letter-spacing: 3px; }
  .gx-hero-sub { margin-bottom: var(--gx-sp-4); font-size: 13px; letter-spacing: 1px; line-height: 1.7; }

  /* —— 今日卡:横滑 —— */
  .gx-daily {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--gx-sp-3);
    padding: 4px var(--gx-sp-4);
    margin: 0 calc(var(--gx-sp-4) * -1);
  }
  .gx-daily::-webkit-scrollbar { display: none; }
  .gx-daily-card {
    flex-shrink: 0;
    width: 78vw;
    max-width: 320px;
    scroll-snap-align: start;
    padding: var(--gx-sp-4);
  }
  .gx-daily-card .main { font-size: 24px; letter-spacing: 3px; }

  /* —— 主题方格:紧凑 4 列 icon —— */
  .gx-themes { grid-template-columns: repeat(4, 1fr); gap: var(--gx-sp-2); }
  .gx-theme-card {
    flex-direction: column;
    padding: var(--gx-sp-3) 6px;
    gap: 6px;
    border-radius: var(--gx-radius);
    text-align: center;
  }
  .gx-theme-icon { width: 42px; height: 42px; font-size: 22px; }
  .gx-theme-info .title { font-size: 13px; letter-spacing: 1px; }
  .gx-theme-info .desc { display: none; }

  /* —— 工具卡:3 列紧凑 —— */
  .gx-tools-grid { grid-template-columns: repeat(3, 1fr); gap: var(--gx-sp-3); }
  .gx-tool-card { padding: var(--gx-sp-3); }
  .gx-tool-card .icon { font-size: 22px; }

  /* —— 章节标题缩 —— */
  .gx-section { padding: var(--gx-sp-6) 0; }
  .gx-section-title { font-size: 18px; }

  /* —— 列表页:默认切到 list-row 模式 —— */
  .gx-list-header { padding: var(--gx-sp-4) 0 var(--gx-sp-3); flex-direction: column; align-items: flex-start; gap: var(--gx-sp-3); }
  .gx-list-title { font-size: 22px; letter-spacing: 2px; }
  .gx-list-title .sub { display: block; margin-left: 0; margin-top: 4px; font-size: 12px; }
  .gx-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 calc(var(--gx-sp-4) * -1) var(--gx-sp-4);
    padding: 0 var(--gx-sp-4);
    gap: 6px;
  }
  .gx-filter::-webkit-scrollbar { display: none; }
  .gx-filter-item { flex-shrink: 0; font-size: 12px; padding: 5px 12px; }
  .gx-view-toggle button { padding: 5px 10px; font-size: 12px; }

  /* —— 卡片 grid 默认变 2 列;list 模式仍为横排 —— */
  .gx-card-grid,
  .gx-card-grid.is-cols-3,
  .gx-card-grid.is-cols-5,
  .gx-card-grid.is-cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gx-sp-3); }
  .gx-card { padding: var(--gx-sp-3); border-radius: var(--gx-radius); }
  .gx-card-num { font-size: 11px; top: 8px; right: 10px; }
  .gx-card-sym { font-size: 36px; margin-bottom: 4px; }
  .gx-card-name { font-size: 16px; letter-spacing: 2px; }
  .gx-card-meta { font-size: 12px; }
  .gx-card-desc { font-size: 12px; -webkit-line-clamp: 2; }

  /* —— 详情页 —— */
  .gx-detail-hero { padding: var(--gx-sp-6) var(--gx-sp-4); border-radius: var(--gx-radius); }
  .gx-detail-symbol { font-size: 48px; }
  .gx-detail-symbol .seal { width: 32px; height: 32px; font-size: 16px; right: -36px; }
  .gx-detail-title { font-size: 24px; letter-spacing: 4px; }
  .gx-detail-hero::after { font-size: 160px; right: -10px; bottom: -20px; }
  .gx-content-block { padding: var(--gx-sp-4); border-radius: var(--gx-radius); }
  .gx-content-block h3 { font-size: 16px; }

  /* 30 维度 Tab 横滑 */
  .gx-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 calc(var(--gx-sp-4) * -1) var(--gx-sp-3);
    padding: 0 var(--gx-sp-4) var(--gx-sp-3);
  }
  .gx-tabs::-webkit-scrollbar { display: none; }
  .gx-tab { flex-shrink: 0; font-size: 13px; padding: 5px 12px; }

  /* —— 跨主题/相关 —— */
  .gx-cross-grid { grid-template-columns: repeat(2, 1fr); gap: var(--gx-sp-2); }
  .gx-cross-card { padding: var(--gx-sp-3); }
  .gx-cross-card .title { font-size: 14px; }
  .gx-related-grid {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--gx-sp-2);
    padding: 4px var(--gx-sp-4);
    margin: 0 calc(var(--gx-sp-4) * -1);
  }
  .gx-related-grid::-webkit-scrollbar { display: none; }
  .gx-related-item { flex-shrink: 0; width: 120px; padding: var(--gx-sp-3); }
  .gx-related-item .sym { font-size: 28px; }

  /* —— 工具页:全宽表单 + sticky 提交 —— */
  .gx-tool-hero { padding: var(--gx-sp-5) var(--gx-sp-4); border-radius: var(--gx-radius); }
  .gx-tool-hero h1 { font-size: 24px; letter-spacing: 4px; }
  .gx-tool-hero .sub { font-size: 13px; letter-spacing: 2px; }
  .gx-form { padding: var(--gx-sp-4); border-radius: var(--gx-radius); }
  .gx-field-row { grid-template-columns: 1fr; }
  .gx-radio-group { gap: var(--gx-sp-2); }
  .gx-result { padding: var(--gx-sp-4); border-radius: var(--gx-radius); min-height: 280px; }
  .gx-result-empty { min-height: 220px; }
  .gx-result-empty .sym { font-size: 56px; }
  .gx-bazi-col .char { font-size: 22px; }
  .gx-bazi-col { padding: var(--gx-sp-2); }

  /* —— 底栏出现 —— */
  .gx-tabbar { display: block; }

  /* —— footer 收紧成 2 列 + 折叠 —— */
  .gx-footer { padding-bottom: 88px; }
  .gx-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--gx-sp-4); }
  .gx-footer-grid .brand-block { grid-column: 1 / -1; }
  .gx-footer-bottom { flex-direction: column; gap: 6px; align-items: flex-start; }
}

@media (max-width: 480px) {
  .gx-themes { grid-template-columns: repeat(3, 1fr); }
  .gx-tools-grid { grid-template-columns: repeat(3, 1fr); }
  .gx-cross-grid { grid-template-columns: 1fr; }
  .gx-card-grid,
  .gx-card-grid.is-cols-3,
  .gx-card-grid.is-cols-5,
  .gx-card-grid.is-cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gx-card-sym { font-size: 32px; }
  .gx-pager a, .gx-pager span { min-width: 30px; height: 30px; padding: 0 8px; font-size: 12px; }
  .gx-pager span:nth-of-type(2) { display: none; }
  .gx-hero-title { letter-spacing: 2px; }
}

/* ============================================
   子分类大块组件 — 父级落地页用
   ============================================ */
.gx-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gx-sp-5);
}
.gx-cat-grid.is-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gx-cat-block {
  background: #FFF;
  border: 1px solid var(--gx-line);
  border-radius: var(--gx-radius-lg);
  padding: var(--gx-sp-5);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.gx-cat-block:hover {
  border-color: var(--gx-red);
  box-shadow: var(--gx-shadow);
}
.gx-cat-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 40px;
  background: linear-gradient(to bottom, var(--gx-red), transparent);
  opacity: 0.5;
  border-radius: var(--gx-radius-lg) 0 0 0;
}
.gx-cat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gx-sp-3);
  padding-bottom: var(--gx-sp-4);
  margin-bottom: var(--gx-sp-3);
  border-bottom: 1px solid var(--gx-line-soft);
}
.gx-cat-head .info { min-width: 0; flex: 1; }
.gx-cat-head .name {
  font-family: var(--gx-font-serif);
  font-size: 22px;
  letter-spacing: 3px;
  color: var(--gx-ink);
  line-height: 1.3;
}
.gx-cat-head .name a { color: inherit; text-decoration: none; transition: color 0.2s; }
.gx-cat-head .name a:hover { color: var(--gx-red); }
.gx-cat-head .meta {
  font-family: var(--gx-font-kai);
  font-size: 13px;
  color: var(--gx-ink-mute);
  letter-spacing: 1px;
  margin-top: 6px;
}
.gx-cat-head .count {
  font-family: var(--gx-font-mono);
  font-size: 12px;
  color: var(--gx-red);
  padding: 3px 12px;
  border: 1px solid var(--gx-red);
  border-radius: 14px;
  flex-shrink: 0;
  white-space: nowrap;
  margin-top: 2px;
}
.gx-cat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
}
.gx-cat-list li {
  padding: 8px 0;
  border-bottom: 1px dashed var(--gx-line-soft);
  font-size: 14px;
  line-height: 1.6;
}
.gx-cat-list li:last-child { border-bottom: none; }
.gx-cat-list a {
  color: var(--gx-ink);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  transition: color 0.2s;
}
.gx-cat-list a:hover { color: var(--gx-red); }
.gx-cat-list .marker {
  flex-shrink: 0;
  color: var(--gx-ink-mute);
  font-size: 12px;
  font-family: var(--gx-font-mono);
  min-width: 28px;
}
.gx-cat-list .text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gx-cat-foot {
  margin-top: var(--gx-sp-3);
  padding-top: var(--gx-sp-3);
  border-top: 1px dashed var(--gx-line-soft);
  text-align: right;
}
.gx-cat-foot a {
  font-family: var(--gx-font-kai);
  font-size: 13px;
  color: var(--gx-red);
  text-decoration: none;
  letter-spacing: 1px;
}
.gx-cat-foot a:hover { text-decoration: underline; }
@media (max-width: 900px) {
  .gx-cat-grid.is-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .gx-cat-grid,
  .gx-cat-grid.is-cols-3 { grid-template-columns: 1fr; gap: var(--gx-sp-4); }
  .gx-cat-block { padding: var(--gx-sp-4); }
  .gx-cat-head .name { font-size: 19px; letter-spacing: 2px; }
}

/* v2 inline-style responsive collapse (hero blocks + card grids) */
@media (max-width: 768px) {
  .gx-drawer { overflow: hidden; }

  /* v2 hero / fixed-left grids: any "<NNNpx> 1fr ..." → stacked */
  section[style*="grid-template-columns: 160px 1fr"],
  section[style*="grid-template-columns: 200px 1fr"],
  section[style*="grid-template-columns: 220px 1fr"],
  section[style*="grid-template-columns: 240px 1fr"],
  section[style*="grid-template-columns: 260px"],
  section[style*="grid-template-columns: 280px 1fr"],
  section[style*="grid-template-columns: 380px 1fr"],
  div[style*="grid-template-columns: 160px 1fr"],
  div[style*="grid-template-columns: 200px 1fr"],
  div[style*="grid-template-columns: 220px 1fr"],
  div[style*="grid-template-columns: 240px 1fr"],
  div[style*="grid-template-columns: 260px"],
  div[style*="grid-template-columns: 280px 1fr"],
  div[style*="grid-template-columns: 380px 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--gx-sp-3) !important;
  }
  /* Hero polish (centered title/cta) for sections only */
  section[style*="grid-template-columns: 160px 1fr"],
  section[style*="grid-template-columns: 200px 1fr"],
  section[style*="grid-template-columns: 220px 1fr"],
  section[style*="grid-template-columns: 240px 1fr"],
  section[style*="grid-template-columns: 280px 1fr"] {
    padding: var(--gx-sp-4) !important;
    text-align: center;
  }
  section[style*="grid-template-columns: 160px 1fr"] > div:first-child,
  section[style*="grid-template-columns: 200px 1fr"] > div:first-child,
  section[style*="grid-template-columns: 220px 1fr"] > div:first-child,
  section[style*="grid-template-columns: 240px 1fr"] > div:first-child,
  section[style*="grid-template-columns: 280px 1fr"] > div:first-child { justify-content: center; }
  section[style*="grid-template-columns: 160px 1fr"] h1,
  section[style*="grid-template-columns: 200px 1fr"] h1,
  section[style*="grid-template-columns: 220px 1fr"] h1,
  section[style*="grid-template-columns: 240px 1fr"] h1,
  section[style*="grid-template-columns: 280px 1fr"] h1 { font-size: 22px !important; letter-spacing: 4px !important; }
  section[style*="grid-template-columns: 160px 1fr"] > a,
  section[style*="grid-template-columns: 200px 1fr"] > a,
  section[style*="grid-template-columns: 220px 1fr"] > a,
  section[style*="grid-template-columns: 240px 1fr"] > a,
  section[style*="grid-template-columns: 280px 1fr"] > a { width: 60%; margin: 0 auto; }
  /* mobile: drop ALL hero CTA buttons (返回首页 / 返回栏目 / 在线工具) — breadcrumb + hamburger already cover nav, these red blocks only clutter the narrow hero */
  section[style*="background: var(--gx-grad-soft)"] > a { display: none !important; }

  /* v2 list/card grids: 8/6/5-col → 3, 4-col → 2, 3-col → 1, 12-col → 4 */
  div[style*="grid-template-columns: repeat(12, minmax(0, 1fr))"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  div[style*="grid-template-columns: repeat(8, minmax(0, 1fr))"],
  div[style*="grid-template-columns: repeat(6, minmax(0, 1fr))"],
  div[style*="grid-template-columns: repeat(5, minmax(0, 1fr))"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  div[style*="grid-template-columns: repeat(4, minmax(0, 1fr))"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  div[style*="grid-template-columns: repeat(3, minmax(0, 1fr))"],
  div[style*="grid-template-columns: repeat(3, 1fr)"],
  div[style*="grid-template-columns: repeat(2, minmax(0, 1fr))"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* v2 detail page 1fr + fixed-right side column → stacked */
  div[style*="grid-template-columns: 1fr 220px"],
  div[style*="grid-template-columns: 1fr 280px"],
  div[style*="grid-template-columns: 1fr 300px"],
  div[style*="grid-template-columns: 1fr 320px"],
  div[style*="grid-template-columns: 1fr 360px"],
  section[style*="grid-template-columns: 1fr 220px"],
  section[style*="grid-template-columns: 1fr 280px"],
  section[style*="grid-template-columns: 1fr 300px"],
  section[style*="grid-template-columns: 1fr 320px"],
  section[style*="grid-template-columns: 1fr 360px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* v2 special: 110px 30px 1fr (yijing 卦爻表) → keep but compact */
  div[style*="grid-template-columns: 110px 30px 1fr"] {
    grid-template-columns: 80px 22px 1fr !important;
    gap: var(--gx-sp-2) !important;
  }
}

/* v2 small-phone tighter collapse for tight 2-col card rows
   (home page card layout has 56px seal + serif text that cramps under ~480px) */
@media (max-width: 480px) {
  section[style*="background: var(--gx-grad-soft)"] div[style*="grid-template-columns: repeat(2, minmax(0, 1fr))"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* 页面更新时间标签(详情页 / 工具结果页) */
.gx-update-meta {
  text-align: center;
  font-family: var(--gx-font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--gx-ink-mute);
  margin-bottom: 12px;
}
.gx-update-meta time { color: var(--gx-ink-soft); }

/* 页脚导航 + 官方声明 */
.gx-footer-links {
  text-align: center;
  margin: 14px 0;
  font-family: var(--gx-font-kai);
  font-size: 14px;
  letter-spacing: 1px;
}
.gx-footer-links a {
  color: var(--gx-ink-soft);
  text-decoration: none;
  transition: color .2s;
}
.gx-footer-links a:hover { color: var(--gx-red); }
.gx-footer-links .sep { color: var(--gx-line); margin: 0 8px; }
.gx-official {
  max-width: 880px;
  margin: 16px auto 0;
  padding-top: 14px;
  border-top: 1px solid var(--gx-line-soft);
  font-size: 12px;
  line-height: 1.9;
  color: var(--gx-ink-mute);
  text-align: justify;
}
.gx-official strong { color: var(--gx-ink-soft); }