/* ============================================================
   心灵雅阁 · 排盘结果页视觉系统
   美学：东方国学 · 宣纸水墨 + 鎏金（luxury / scholarly / organic）
   移植自 design-preview/bazi-chart.html，套用于真实数据页面
   ============================================================ */

/* ---------- 设计令牌 (Design Tokens) ---------- */
:root {
  /* 中性 / 纸面（带暖调，非纯灰） */
  --paper:      oklch(96% 0.014 85);
  --paper-2:    oklch(92% 0.016 82);
  --surface:    oklch(99% 0.008 85);
  --surface-2:  oklch(94% 0.014 84);
  --ink:        oklch(28% 0.020 60);
  --ink-soft:   oklch(45% 0.018 62);
  --ink-faint:  oklch(58% 0.015 64);
  --line:       oklch(84% 0.020 80);
  --line-soft:  oklch(89% 0.016 82);

  /* 品牌 / 鎏金 */
  --gold:        oklch(58% 0.105 78);
  --gold-strong: oklch(47% 0.115 74);
  --gold-soft:   oklch(93% 0.040 84);

  /* 五行语义色 */
  --jin:   oklch(60% 0.105 80);
  --mu:    oklch(50% 0.095 158);
  --shui:  oklch(53% 0.105 232);
  --huo:   oklch(55% 0.165 32);
  --tu:    oklch(61% 0.072 70);

  /* 字体 */
  --font-display: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-body:    "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-num:     "Fraunces", "Noto Serif SC", serif;

  /* 字号 */
  --t-xs: 0.75rem; --t-sm: 0.875rem; --t-base: 1rem; --t-lg: 1.125rem;
  --t-xl: 1.375rem; --t-2xl: 1.875rem; --t-3xl: 2.5rem;

  /* 间距（4px 基数） */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.25rem; --s-6: 1.5rem; --s-8: 2rem; --s-10: 2.5rem; --s-12: 3rem; --s-16: 4rem;

  /* 圆角 / 阴影 / 缓动 */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px;
  --shadow:    oklch(30% 0.03 70 / 0.10);
  --shadow-lg: oklch(28% 0.04 68 / 0.16);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="dark"] {
  --paper:     oklch(17% 0.012 70);
  --paper-2:   oklch(20% 0.014 72);
  --surface:   oklch(22% 0.014 72);
  --surface-2: oklch(27% 0.016 74);
  --ink:       oklch(92% 0.012 85);
  --ink-soft:  oklch(78% 0.014 82);
  --ink-faint: oklch(64% 0.012 80);
  --line:      oklch(36% 0.015 75);
  --line-soft: oklch(30% 0.014 73);

  --gold:        oklch(75% 0.10 82);
  --gold-strong: oklch(82% 0.09 84);
  --gold-soft:   oklch(30% 0.045 78);

  --jin:   oklch(74% 0.10 82);
  --mu:    oklch(66% 0.10 158);
  --shui:  oklch(68% 0.10 232);
  --huo:   oklch(66% 0.165 32);
  --tu:    oklch(72% 0.07 70);

  --shadow:    oklch(0% 0 0 / 0.45);
  --shadow-lg: oklch(0% 0 0 / 0.6);
}

/* ---------- 页面容器与背景 ---------- */
body.paipan {
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, var(--paper-2), transparent 60%),
    var(--paper);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.paipan h1, body.paipan h2, body.paipan h3, body.paipan h4 {
  font-family: var(--font-display); font-weight: 600; line-height: 1.25; margin: 0;
}
body.paipan :focus-visible { outline: 2px solid var(--gold-strong); outline-offset: 3px; border-radius: 4px; }

.bz-page { padding: 0 !important; }
.bz-container {
  max-width: 1080px; margin: 0 auto;
  padding: var(--s-6) var(--s-5) var(--s-16);
}
@media (min-width: 768px){ .bz-container { padding: var(--s-10) var(--s-8) var(--s-16); } }

/* ---------- 进场动画 ---------- */
.bz-reveal { opacity: 0; transform: translateY(14px); animation: bzRise 640ms var(--ease) forwards; }
@keyframes bzRise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){
  .bz-reveal { opacity: 1; transform: none; animation: none; }
}

/* ---------- 区块标题 ---------- */
.bz-chart-head {
  display: flex; align-items: baseline; gap: var(--s-3);
  margin: var(--s-10) 0 var(--s-5);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--line-soft);
}
.bz-chart-head h2 { font-size: var(--t-xl); letter-spacing: 0.03em; }
.bz-kicker {
  font-family: var(--font-num); font-size: var(--t-sm); letter-spacing: 0.1em;
  color: var(--gold-strong); text-transform: uppercase;
}
.bz-hint { margin-left: auto; font-size: var(--t-xs); color: var(--ink-faint); }
.bz-chart-head .bz-icon-btn { margin-left: auto; }
.bz-chart-head .bz-hint + .bz-icon-btn { margin-left: var(--s-3); }

/* ---------- 主题切换按钮 ---------- */
.bz-icon-btn {
  width: 44px; height: 44px; padding: 0; justify-content: center; cursor: pointer;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-soft);
  display: inline-grid; place-items: center;
  transition: border-color 200ms, color 200ms, transform 200ms;
}
.bz-icon-btn:hover { border-color: var(--gold); color: var(--gold-strong); transform: translateY(-1px); }

/* ---------- 五行语义色工具类 ---------- */
.el-金 { --el: var(--jin); }  .el-木 { --el: var(--mu); }
.el-水 { --el: var(--shui); } .el-火 { --el: var(--huo); }
.el-土 { --el: var(--tu); }

/* ---------- 四柱命盘（视觉门面） ---------- */
.bz-pillars {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 720px){ .bz-pillars { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } }

.bz-pillar {
  position: relative;
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface), var(--paper-2));
  padding: var(--s-4) var(--s-3) var(--s-3);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  transition: transform var(--ease) 240ms, box-shadow var(--ease) 240ms, border-color 240ms;
}
.bz-pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--gold); }
.bz-pillar.is-day { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset, var(--shadow); }
.bz-pillar.is-day::after {
  content: "日主"; position: absolute; top: -10px; right: 10px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.1em;
  color: var(--paper); background: var(--gold-strong);
  padding: 2px 8px; border-radius: 999px;
}
.bz-pillar__name { font-size: var(--t-sm); letter-spacing: 0.25em; color: var(--ink-soft); padding-left: 0.25em; }
.bz-ganzhi { font-family: var(--font-display); font-weight: 600; line-height: 1; color: var(--el, var(--ink)); }
.bz-ganzhi--stem  { font-size: clamp(2.6rem, 9vw, 3.4rem); }
.bz-ganzhi--branch { font-size: clamp(2.2rem, 7.5vw, 2.9rem); }
.bz-divider { width: 56%; height: 1px; background: var(--line); margin: var(--s-1) 0; }
.bz-tengod {
  font-size: var(--t-xs); color: var(--ink-soft); letter-spacing: 0.06em;
  background: var(--paper-2); border-radius: 999px; padding: 2px 10px;
}
.bz-canggan { font-family: var(--font-display); font-size: var(--t-sm); letter-spacing: 0.12em; color: var(--ink-soft); }
.bz-nayin { font-size: var(--t-xs); color: var(--ink-faint); letter-spacing: 0.04em; margin-top: auto; }

/* ---------- 命主总览条 ---------- */
.bz-overview {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--shadow);
  display: grid; gap: var(--s-4); grid-template-columns: 1fr;
}
@media (min-width: 720px){ .bz-overview { grid-template-columns: auto 1fr; align-items: center; } }
.bz-overview .rz-name { font-family: var(--font-display); font-size: var(--t-2xl); color: var(--ink); }
.bz-overview .rz-sub { color: var(--ink-soft); margin-top: 2px; }
.bz-overview .rz-bazi { color: var(--gold-strong); }
.bz-overview .rz-meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); }
.bz-overview .rz-meta span { font-size: var(--t-sm); color: var(--ink-soft); }
.bz-overview .rz-meta b { color: var(--ink); }
.bz-overview .rz-zodiac { text-align: right; }
.bz-overview .rz-qiinfo { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); color: var(--ink-soft); font-size: var(--t-sm); }

/* ---------- 通用卡片容器（覆盖旧 .rz-card） ---------- */
.rz-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--shadow);
  margin-top: var(--s-8);
}
.rz-sec {
  font-family: var(--font-display); font-size: var(--t-xl); color: var(--ink);
  letter-spacing: 0.03em; margin: 0 0 var(--s-5);
  display: flex; align-items: baseline; gap: var(--s-3);
}
.rz-sec-tip { font-family: var(--font-body); font-size: var(--t-xs); color: var(--ink-faint); font-weight: 400; letter-spacing: 0; }

/* ---------- 命盘表（卡片化 + 五行色） ---------- */
.rz-chart-scroll { overflow-x: auto; }
.rz-chart-table { width: 100%; border-collapse: separate; border-spacing: 8px; min-width: 640px; }
.rz-chart-table th, .rz-chart-table td {
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface), var(--paper-2));
  padding: var(--s-3); vertical-align: middle;
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.rz-chart-table .rz-ct-rowlabel {
  background: transparent; border: none; text-align: right;
  font-family: var(--font-display); color: var(--ink-soft); font-size: var(--t-sm); white-space: nowrap;
}
.rz-chart-table tr:hover td { box-shadow: var(--shadow); border-color: var(--gold); }
.rz-ct-day { box-shadow: 0 0 0 1px var(--gold) inset !important; border-color: var(--gold) !important; }
.rz-big { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; line-height: 1; color: var(--el, var(--ink)); }
.rz-wx-tag { display: inline-block; margin-left: 4px; font-size: var(--t-xs); color: var(--ink-faint); }
.rz-big[data-wx="金"], .rz-wx-tag[data-wx="金"] { color: var(--jin); }
.rz-big[data-wx="木"], .rz-wx-tag[data-wx="木"] { color: var(--mu); }
.rz-big[data-wx="水"], .rz-wx-tag[data-wx="水"] { color: var(--shui); }
.rz-big[data-wx="火"], .rz-wx-tag[data-wx="火"] { color: var(--huo); }
.rz-big[data-wx="土"], .rz-wx-tag[data-wx="土"] { color: var(--tu); }
.rz-god { font-size: var(--t-xs); color: var(--ink-soft); background: var(--paper-2); border-radius: 999px; padding: 2px 10px; }
.rz-god-day { background: var(--gold-soft); color: var(--gold-strong); }
.rz-hs i { font-family: var(--font-display); font-style: normal; font-size: 1.05rem; color: var(--el, var(--ink)); }
.rz-hs em { font-style: normal; font-size: var(--t-xs); color: var(--ink-faint); margin-left: 3px; }
.rz-stage { font-family: var(--font-display); color: var(--ink); }
.rz-ct-void { display: inline-block; margin-left: 6px; font-size: var(--t-xs); color: var(--danger, oklch(56% 0.17 28)); }
.rz-ct-nayin { display: block; font-size: var(--t-xs); color: var(--ink-faint); margin-top: 3px; }
.rz-ss-tag {
  display: inline-block; margin: 2px; padding: 4px 12px; cursor: pointer;
  font-family: var(--font-display); font-size: var(--t-sm);
  background: var(--gold-soft); color: var(--gold-strong);
  border: 1px solid color-mix(in oklch, var(--gold) 28%, transparent);
  border-radius: 999px; transition: transform 180ms, box-shadow 180ms;
}
.rz-ss-tag:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.rz-ss-tag small { color: var(--ink-faint); margin-left: 3px; }

/* ---------- 大运时间轴 ---------- */
.rz-dt-scroll { overflow-x: auto; }
.rz-dt-table { width: 100%; border-collapse: separate; border-spacing: 6px; min-width: 640px; }
.rz-dt-table th, .rz-dt-table td {
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface), var(--paper-2));
  padding: var(--s-3); text-align: center; transition: border-color 200ms, transform 200ms;
}
.rz-dt-table tbody tr:hover td { border-color: var(--gold); transform: translateY(-2px); }
.rz-dt-gz, .rz-dt-gan, .rz-dt-zhi { font-family: var(--font-display); font-weight: 600; }
.rz-dt-gan[data-wx="金"], .rz-dt-zhi[data-wx="金"] { color: var(--jin); }
.rz-dt-gan[data-wx="木"], .rz-dt-zhi[data-wx="木"] { color: var(--mu); }
.rz-dt-gan[data-wx="水"], .rz-dt-zhi[data-wx="水"] { color: var(--shui); }
.rz-dt-gan[data-wx="火"], .rz-dt-zhi[data-wx="火"] { color: var(--huo); }
.rz-dt-gan[data-wx="土"], .rz-dt-zhi[data-wx="土"] { color: var(--tu); }
.rz-dt-agerange { display: block; font-size: var(--t-xs); color: var(--ink-faint); }

/* ---------- 流期选择器 ---------- */
.rz-period-block { margin-top: var(--s-4); }
.rz-period-title { font-family: var(--font-display); color: var(--gold-strong); font-size: var(--t-base); margin-bottom: var(--s-2); }
.rz-period-grid { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.rz-period-grid > button, .rz-period-grid > .rz-pg-item {
  min-width: 52px; padding: 8px 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); font-family: var(--font-display);
  transition: border-color 180ms, background 180ms, transform 180ms;
}
.rz-period-grid > button:hover, .rz-period-grid > .rz-pg-item:hover { border-color: var(--gold); transform: translateY(-1px); }
.rz-period-grid > button.active, .rz-period-grid > .rz-pg-item.active {
  border-color: var(--gold); background: var(--gold-soft); color: var(--gold-strong); font-weight: 600;
}

/* ---------- 五行雷达 / 旺衰 ---------- */
.rz-radar-wrap { display: flex; flex-wrap: wrap; gap: var(--s-6); align-items: center; }
.rz-radar { width: 240px; height: 240px; max-width: 100%; }
.rz-radar-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.rz-wxs-bar { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.rz-wxs-item {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 14px;
  border: 1px solid var(--line-soft); border-radius: 999px; background: var(--surface);
  font-family: var(--font-display);
}
.rz-wxs-el { font-size: var(--t-base); }
.rz-wxs-el[data-el="金"], .rz-wxs-item.is-旺 [data-el] { color: var(--jin); }
.rz-wxs-st { font-size: var(--t-xs); color: var(--ink-soft); }
.rz-wxs-item.is-旺 { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-strong); }
.rz-wxs-dominant { margin-left: auto; font-size: var(--t-sm); color: var(--ink-soft); }
.rz-wxs-dominant b { color: var(--gold-strong); font-family: var(--font-display); }
.rz-tip { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.7; margin-top: var(--s-4); }

/* ---------- 十二长生 / 空亡 ---------- */
.rz-chang { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px){ .rz-chang { grid-template-columns: repeat(4, 1fr); } }
.rz-chang-item {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); background: var(--surface);
}
.rz-c-label { font-family: var(--font-display); color: var(--ink-soft); font-size: var(--t-sm); }
.rz-c-zhi { font-family: var(--font-display); font-size: 1.2rem; }
.rz-c-stage { margin-left: auto; font-size: var(--t-sm); color: var(--gold-strong); }
.rz-void { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.8; }
.rz-void b { color: var(--ink); }

/* ---------- 神煞分组 ---------- */
.rz-ss-groups { display: grid; gap: var(--s-5); }
.rz-ss-group-title { font-family: var(--font-display); color: var(--ink); font-size: var(--t-base); margin-bottom: var(--s-3); }
.rz-ss-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 6px;
  font-size: var(--t-xs); color: var(--gold-strong); background: var(--gold-soft);
  border-radius: 999px; padding: 0 6px;
}

/* ---------- 纳音意象 ---------- */
.rz-nayin { display: grid; gap: var(--s-2); }
.rz-ny-item {
  display: grid; grid-template-columns: 4rem 1fr; gap: var(--s-3); align-items: baseline;
  padding: var(--s-3) var(--s-4); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); background: var(--surface);
}
.rz-ny-pillar { font-family: var(--font-display); color: var(--ink-soft); }
.rz-ny-name { font-family: var(--font-display); font-size: var(--t-lg); }
.rz-ny-name[data-wx="金"] { color: var(--jin); } .rz-ny-name[data-wx="木"] { color: var(--mu); }
.rz-ny-name[data-wx="水"] { color: var(--shui); } .rz-ny-name[data-wx="火"] { color: var(--huo); }
.rz-ny-name[data-wx="土"] { color: var(--tu); }
.rz-ny-yx { grid-column: 2; font-size: var(--t-sm); color: var(--ink-soft); }

/* ---------- 称骨算命 ---------- */
.rz-chenggu { display: grid; gap: var(--s-3); }
.rz-cg-total {
  font-family: var(--font-display); font-size: var(--t-3xl); color: var(--gold-strong);
  text-align: center; letter-spacing: 0.05em;
}
.rz-cg-parts { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2) var(--s-5); font-size: var(--t-sm); color: var(--ink-soft); }
.rz-cg-song { font-family: var(--font-display); text-align: center; color: var(--ink); font-size: var(--t-lg); }
.rz-cg-baihua { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.8; text-align: center; }

/* ---------- 神煞详解模态框（古风卷轴） ---------- */
.rz-modal-mask {
  position: fixed; inset: 0; background: oklch(20% 0.02 70 / 0.45);
  backdrop-filter: blur(2px); opacity: 0; visibility: hidden;
  transition: opacity 260ms var(--ease), visibility 260ms; z-index: 40;
}
.rz-modal-mask.show { opacity: 1; visibility: visible; }
.rz-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -46%);
  width: min(440px, 92vw); opacity: 0; visibility: hidden; z-index: 50;
  transition: opacity 300ms var(--ease), transform 300ms var(--ease), visibility 300ms;
}
.rz-modal.show { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
.rz-modal-paper {
  position: relative; background:
    radial-gradient(120% 80% at 50% -10%, var(--paper-2), transparent 60%), var(--paper);
  border: 1px solid var(--gold); border-radius: var(--r-lg);
  padding: var(--s-8) var(--s-6) var(--s-6); box-shadow: var(--shadow-lg);
}
.rz-modal-close {
  position: absolute; top: 12px; right: 14px; width: 32px; height: 32px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface);
  color: var(--ink-soft); font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.rz-modal-close:hover { border-color: var(--gold); color: var(--gold-strong); }
.rz-modal-seal {
  width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto var(--s-3);
  border-radius: 12px; background: var(--gold-soft); border: 1.5px solid var(--gold);
  color: var(--gold-strong); font-family: var(--font-display); font-size: 1.4rem;
}
.rz-modal-title { text-align: center; font-family: var(--font-display); font-size: var(--t-2xl); color: var(--ink); }
.rz-modal-luck { text-align: center; font-size: var(--t-sm); color: var(--gold-strong); margin: 2px 0 var(--s-4); }
.rz-modal-block { display: grid; gap: 4px; padding: var(--s-3) 0; border-top: 1px solid var(--line-soft); }
.rz-modal-block .rz-modal-key { font-size: var(--t-xs); color: var(--ink-faint); letter-spacing: 0.05em; }
.rz-modal-block p { margin: 0; font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.7; }

/* ---------- 页脚声明 ---------- */
.bz-foot {
  margin-top: var(--s-12); padding-top: var(--s-6);
  border-top: 1px solid var(--line-soft); text-align: center;
  color: var(--ink-faint); font-size: var(--t-xs); line-height: 1.8;
}

/* ================= 格局 / 断事 / 大事提醒 ================= */
.bz-secrets { margin-top: var(--s-8); }
.bz-secret-block {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-6); margin-top: var(--s-5);
  box-shadow: var(--shadow);
}
.bz-secret-block.bz-free { background: linear-gradient(180deg, var(--surface), var(--paper-2)); }
.bz-secret-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.bz-secret-head h3 { font-family: var(--font-display); font-size: var(--t-lg); color: var(--ink); letter-spacing: 0.03em; }
.bz-secret-tag {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: 0.08em;
  padding: 3px 12px; border-radius: 999px; white-space: nowrap;
  background: var(--paper-2); color: var(--ink-soft);
}
.bz-secret-tag.bz-tag--gold { background: var(--gold-soft); color: var(--gold-strong); }
.bz-secret-tag.bz-tag--diamond { background: oklch(32% 0.02 80); color: var(--gold); }
.bz-secret-lead { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.8; margin: 0 0 var(--s-3); }
.bz-secret-lead b { color: var(--gold-strong); font-weight: 600; }

.bz-secret-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px){ .bz-secret-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px){ .bz-secret-grid { grid-template-columns: repeat(5, 1fr); } }
.bz-secret-card {
  border: 1px solid var(--line-soft); border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface), var(--paper-2));
  padding: var(--s-4); transition: border-color 200ms, transform 200ms, box-shadow 200ms;
}
.bz-secret-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--shadow); }
.bz-secret-card h4 { font-family: var(--font-display); font-size: var(--t-base); color: var(--gold-strong); margin: 0 0 var(--s-2); letter-spacing: 0.05em; }
.bz-secret-card p { font-size: var(--t-sm); color: var(--ink-soft); margin: 0 0 var(--s-2); line-height: 1.7; }
.bz-secret-card ul { margin: 0; padding-left: 1.1em; }
.bz-secret-card li { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.7; margin-bottom: 4px; }
.bz-secret-foot { font-size: var(--t-xs); color: var(--ink-faint); margin-top: var(--s-2); }
.bz-secret-foot b { color: var(--gold-strong); }

.bz-lock {
  text-align: center; padding: var(--s-6) var(--s-4);
  border: 1px dashed var(--line); border-radius: var(--r-md); background: var(--paper-2);
}
.bz-lock-tease { font-size: var(--t-sm); color: var(--ink-soft); margin: 0 0 var(--s-4); line-height: 1.7; }

.bz-chip { display: inline-block; font-size: var(--t-xs); color: var(--ink-soft); background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: 999px; padding: 3px 12px; margin: 3px 4px 0 0; }
.bz-chips { margin-top: var(--s-2); }

.bz-annual-cta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  margin-top: var(--s-5); padding: var(--s-4) var(--s-5);
  border: 1px solid var(--gold-soft); border-radius: var(--r-md);
  background: var(--gold-soft);
}
.bz-annual-cta span { font-size: var(--t-sm); color: var(--ink-soft); }
.bz-annual-cta a { font-size: var(--t-sm); font-weight: 600; color: var(--gold-strong); white-space: nowrap; text-decoration: none; }
.bz-annual-cta a:hover { text-decoration: underline; }

.bz-secret-disclaimer { font-size: var(--t-xs); color: var(--ink-faint); line-height: 1.7; margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }

/* 大事提醒 */
.bz-events { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); }
.bz-events-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.bz-events-head h4 { font-family: var(--font-display); font-size: var(--t-base); color: var(--ink); letter-spacing: 0.03em; }
.bz-events-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.bz-event {
  display: grid; gap: 4px; padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-soft); border-left-width: 3px; border-radius: var(--r-sm);
  background: var(--surface);
}
.bz-event--ji { border-left-color: var(--mu); }
.bz-event--xiong { border-left-color: var(--huo); }
.bz-event--zhong { border-left-color: var(--shui); }
.bz-event-year { font-family: var(--font-display); font-size: var(--t-sm); font-weight: 600; color: var(--ink); letter-spacing: 0.03em; }
.bz-event-title { font-size: var(--t-sm); color: var(--gold-strong); font-weight: 600; }
.bz-event-detail { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.7; }
.bz-event-months { font-size: var(--t-xs); color: var(--ink-faint); }
.bz-event-months b, .bz-event-year b { color: var(--gold-strong); }