/* ============================================================
   WUXING — The Five Elements Atelier
   设计系统：暗色曜石底 + 金 + 五行色。字号流体，优雅衬线标题。
   ============================================================ */

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --bg: #0a0908;
  --bg-deep: #080706;
  --surface: #100e0c;
  --surface-2: #151210;
  --surface-3: #1b1714;

  --ink: #ece5d8;
  --ink-soft: #cfc6b6;
  --muted: #a1978a;
  --faint: #6f6759;

  --gold: #58b894;
  --gold-bright: #8fd6be;
  --gold-dim: #2e6b56;
  --hairline: rgba(88, 184, 148, 0.16);
  --hairline-strong: rgba(88, 184, 148, 0.34);

  --wood: #7ba87b;
  --fire: #c8553d;
  --earth: #b98d4f;
  --metal: #cdbd93;
  --water: #5a7f9e;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Jost', 'Segoe UI', system-ui, sans-serif;
  --han: 'Ma Shan Zheng', 'Songti SC', 'SimSun', 'Noto Serif SC', serif;

  --nav-h: 72px;
  --radius: 4px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Reset / base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(1px 1px at 18% 24%, rgba(236, 229, 216, 0.28), transparent 100%),
    radial-gradient(1px 1px at 74% 12%, rgba(236, 229, 216, 0.22), transparent 100%),
    radial-gradient(1.5px 1.5px at 42% 68%, rgba(232, 207, 151, 0.3), transparent 100%),
    radial-gradient(1px 1px at 88% 55%, rgba(236, 229, 216, 0.2), transparent 100%),
    radial-gradient(1px 1px at 9% 82%, rgba(232, 207, 151, 0.25), transparent 100%),
    radial-gradient(1px 1px at 61% 38%, rgba(236, 229, 216, 0.18), transparent 100%),
    radial-gradient(1200px 600px at 85% -10%, rgba(88, 184, 148, 0.07), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(90, 127, 158, 0.05), transparent 55%),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: rgba(88, 184, 148, 0.28); color: var(--ink); }

/* 胶片噪点质感层（固定覆盖全屏，2.5% 透明度） */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* 自定义滚动条（暗色细轨） */
::-webkit-scrollbar { width: 9px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: rgba(88, 184, 148, 0.22); border-radius: 99px; border: 2px solid var(--bg-deep); }
::-webkit-scrollbar-thumb:hover { background: rgba(88, 184, 148, 0.4); }
* { scrollbar-width: thin; scrollbar-color: rgba(88, 184, 148, 0.25) var(--bg-deep); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.12; letter-spacing: 0.01em; }

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

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

:focus-visible { outline: 1.5px solid var(--gold); outline-offset: 3px; }

/* ── 通用组件 ───────────────────────────────────────────── */
.wrap { width: min(1180px, 92vw); margin-inline: auto; }

.kicker {
  font-size: 0.72rem;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 400;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 1.02em 2.3em;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.35s var(--ease);
  background: none;
  color: var(--ink);
}
/* 哑光玄金按钮：暗底 + 金线 + 金字，悬停时才有微光（奢侈品克制感） */
.btn-gold {
  background: linear-gradient(180deg, rgba(201, 169, 106, 0.09), rgba(201, 169, 106, 0.03));
  border: 1px solid rgba(201, 169, 106, 0.45);
  color: #d8c294;
  font-weight: 400;
  box-shadow: none;
  transition: all 0.4s var(--ease);
}
.btn-gold:hover {
  background: linear-gradient(180deg, rgba(201, 169, 106, 0.2), rgba(201, 169, 106, 0.07));
  border-color: #d8c294;
  color: #eadfbd;
  box-shadow: 0 0 24px rgba(201, 169, 106, 0.18);
  transform: translateY(-1px);
}
.btn-ghost { border-color: var(--hairline-strong); color: var(--ink-soft); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); background: rgba(88, 184, 148, 0.05); }

.hairline-t { border-top: 1px solid var(--hairline); }
.hairline-b { border-bottom: 1px solid var(--hairline); }

/* 进场动画 */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* 滚动 marquee */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-track { display: inline-flex; gap: 0; animation: marquee 36s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  padding: 1.05em 2.6em;
  font-size: 0.74rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex; align-items: center; gap: 2.6em;
}
.marquee-track span::after { content: '·'; color: var(--gold); font-size: 1.2em; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 慢速旋转（元素环） */
.spin-slow { animation: spin 70s linear infinite; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 导航 ───────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: height 0.45s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  height: 60px;
  background: rgba(10, 9, 8, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--hairline);
}
.nav.scrolled .logo-mark { width: 36px; height: 36px; }
.nav.scrolled .wordmark { font-size: 1.12rem; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: baseline; gap: 0.9em; }
.brand .wordmark {
  font-family: var(--sans);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.42em;
  color: var(--ink);
}
.brand .han-mark { font-family: var(--han); font-size: 0.95rem; color: var(--gold); letter-spacing: 0.12em; }
.nav-links { display: flex; align-items: center; gap: 2.4em; }
.nav-links a:not(.btn) {
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); transition: color 0.3s; position: relative; padding: 0.4em 0;
}
.nav-links a:not(.btn):hover { color: var(--gold-bright); }
.nav-links a:not(.btn)::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: var(--gold); transition: width 0.35s var(--ease);
}
.nav-links a:not(.btn):hover::after { width: 100%; }
.nav .btn { padding: 0.72em 1.7em; }

/* 移动端汉堡菜单 */
.nav-burger {
  display: none; background: none; border: none; cursor: pointer;
  flex-direction: column; gap: 5px; padding: 8px 4px; z-index: 95;
}
.nav-burger span { width: 22px; height: 1.5px; background: var(--gold); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); display: block; }
.nav-burger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.active span:nth-child(2) { opacity: 0; }
.nav-burger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
@media (max-width: 820px) {
  .nav-burger { display: flex; }
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    background: rgba(13, 12, 10, 0.97);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--hairline);
    flex-direction: column; align-items: stretch;
    gap: 0; padding: 0.8rem 6vw 1.4rem;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a:not(.btn) { display: block; padding: 0.85rem 0; font-size: 0.8rem; border-bottom: 1px solid var(--hairline); }
  .nav-links a:not(.btn)::after { display: none; }
  .nav-links .btn { margin-top: 1rem; justify-content: center; }
}

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 4vh) 0 8vh;
  position: relative;
}
.hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 4vw; align-items: center; }
.hero h1 {
  font-size: clamp(3.1rem, 7vw, 6.2rem);
  line-height: 1.03;
  letter-spacing: -0.01em;
  margin: 1.3rem 0 1.6rem;
  color: var(--ink);
  font-weight: 500;
}
.hero h1 em { font-style: italic; color: var(--gold-bright); }
.hero .sub {
  font-size: 1.06rem; color: var(--muted);
  max-width: 32em; margin-bottom: 2.8rem; font-weight: 300;
  letter-spacing: 0.01em;
}
.hero .cta-row { display: flex; gap: 1.1em; flex-wrap: wrap; }
.hero-visual { position: relative; display: grid; place-items: center; }
.hero-visual .ring-frame {
  width: min(430px, 80vw); aspect-ratio: 1;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  position: relative;
  display: grid; place-items: center;
}
.hero-visual .ring-frame::before {
  content: ''; position: absolute; inset: 4.5%;
  border: 1px dashed rgba(88, 184, 148, 0.18);
  border-radius: 50%;
  animation: spin 90s linear infinite reverse;
}
.hero-visual .bracelet-holder { width: 66%; }
.hero-visual .flow-holder { width: 88%; }
.flow-svg { width: 100%; }
.flow-caption {
  margin-top: 1.4rem; text-align: center;
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint);
  font-family: var(--serif); font-style: italic;
}
.flow-ctrl { animation: ctrlPulse 4.5s ease-in-out infinite; }
@keyframes ctrlPulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.7; } }
/* 静奢动效：五字依次呼吸（8s 周期，错峰），中心书法字慢呼吸 */
.flow-node { animation: nodeBreathe 8s ease-in-out infinite; }
@keyframes nodeBreathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.flow-core-text { animation: coreText 8s ease-in-out infinite; }
@keyframes coreText { 0%, 100% { opacity: 0.62; } 50% { opacity: 1; } }
/* 五个元素点：预计算正五边形坐标（半径 50%），整体慢速旋转 */
.hero-visual .element-ring { position: absolute; inset: 0; pointer-events: none; }
.element-ring .dot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}
.element-ring .dot:nth-child(1) { color: var(--wood); left: calc(50% - 4.5px); top: -4.5px; }
.element-ring .dot:nth-child(2) { color: var(--fire); left: calc(97.55% - 4.5px); top: calc(34.55% - 4.5px); }
.element-ring .dot:nth-child(3) { color: var(--earth); left: calc(79.39% - 4.5px); top: calc(90.45% - 4.5px); }
.element-ring .dot:nth-child(4) { color: var(--metal); left: calc(20.61% - 4.5px); top: calc(90.45% - 4.5px); }
.element-ring .dot:nth-child(5) { color: var(--water); left: calc(2.45% - 4.5px); top: calc(34.55% - 4.5px); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* 移动端首屏：品牌标题 → 价值句 → CTA 先行，五行视觉收小放后 */
  .hero { min-height: auto; padding-top: calc(var(--nav-h) + 2.2rem); }
  .hero .kicker { font-size: 0.62rem; }
  .hero h1 { font-size: clamp(2.2rem, 9.5vw, 3.2rem); margin: 0.8rem 0 1rem; }
  .hero .sub { font-size: 0.95rem; margin-bottom: 1.6rem; }
  .hero .hook-line { font-size: 0.9rem; margin-top: 1.1rem; }
  .hero-visual { order: 2; margin-top: 2rem; }
  .hero-visual .ring-frame { width: min(300px, 78vw); }
  .hero .cta-row .btn { padding: 0.9em 1.5em; font-size: 0.72rem; }
}

/* ── 区块通用（VL 评审后：留白 +25%，标题成视觉锚点） ── */
.section { padding: 11rem 0; }
.section-head { max-width: 46em; margin-bottom: 5rem; }
.section-head h2 { font-size: clamp(2.3rem, 4.2vw, 3.6rem); margin-top: 1.1rem; letter-spacing: -0.008em; font-weight: 600; }
.section-head p { color: var(--muted); margin-top: 1.2rem; max-width: 38em; line-height: 1.8; }

/* ── 哲学区 ─────────────────────────────────────────────── */
.philosophy-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 5vw; align-items: center; }
.philosophy-grid .copy p { color: var(--ink-soft); margin-bottom: 1.4rem; }
.philosophy-grid .copy p:first-of-type { font-size: 1.12rem; }
.cycle-holder {
  border: 1px solid var(--hairline);
  background: radial-gradient(300px 300px at 50% 50%, rgba(88, 184, 148, 0.05), transparent 70%), var(--surface);
  padding: 2.4rem;
  display: grid; place-items: center;
}
.cycle-holder figcaption {
  text-align: center; color: var(--faint); font-size: 0.74rem;
  letter-spacing: 0.22em; text-transform: uppercase; margin-top: 1rem;
}
@media (max-width: 900px) { .philosophy-grid { grid-template-columns: 1fr; } }

/* ── 五行卡 ─────────────────────────────────────────────── */
.elements-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 1.6rem; }
.element-card {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 42%),
    linear-gradient(180deg, var(--surface), var(--bg-deep));
  padding: 2.4rem 1.8rem 2.1rem;
  position: relative; overflow: hidden;
  transition: border-color 0.45s var(--ease), transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.element-card::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ec), transparent);
  opacity: 0.5;
}
.element-card::after {
  content: ''; position: absolute; right: -2.2rem; top: 1.2rem;
  font-family: var(--han); font-size: 6.4rem; line-height: 1;
  color: var(--ec); opacity: 0.055;
  pointer-events: none;
}
.element-card:hover {
  border-color: var(--hairline);
  transform: translateY(-6px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}
/* 每个元素卡右上角水印字 */
.ec-wood::after { content: '木'; }
.ec-fire::after { content: '火'; }
.ec-earth::after { content: '土'; }
.ec-metal::after { content: '金'; }
.ec-water::after { content: '水'; }
.element-card .han { font-family: var(--han); font-size: 3.1rem; color: var(--ec); line-height: 1; margin-bottom: 0.9rem; }
.element-card h3 {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 400;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink); margin-bottom: 0.4rem;
}
.element-card .pinyin { color: var(--faint); font-size: 0.8rem; font-style: italic; margin-bottom: 1.1rem; }
.element-card p { color: var(--muted); font-size: 0.9rem; }
.element-card .virtues { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.2rem; }
.element-card .virtues span {
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); border: 1px solid var(--hairline);
  padding: 0.32em 0.85em; border-radius: 99px;
}
.ec-wood { --ec: var(--wood); } .ec-fire { --ec: var(--fire); } .ec-earth { --ec: var(--earth); }
.ec-metal { --ec: var(--metal); } .ec-water { --ec: var(--water); }

/* 实拍图（assets/products/{id}.jpg 存在时自动覆盖示意视觉） */
.product-card .visual, .rec-card .visual, .m-visual { position: relative; }
.real-shot {
  position: relative; z-index: 2;
  max-width: 88%; max-height: 230px;
  margin: 0 auto;
  border-radius: 6px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(201, 169, 106, 0.4);
  object-fit: cover;
}
.m-visual .real-shot.big { max-width: 92%; max-height: 340px; }
.real-shot[src*="assets/products"] { display: block; }

/* 饰品/摆件石材质徽章 */
.stone-medallion {
  width: 150px; height: 150px; position: relative; display: grid; place-items: center;
}
.stone-medallion img {
  width: 124px; height: 124px; border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(201, 169, 106, 0.5);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.35);
  position: relative; z-index: 1;
}
.stone-medallion .sm-ring {
  position: absolute; inset: 8px;
  border: 1px solid rgba(201, 169, 106, 0.22);
  border-radius: 50%;
}
.stone-medallion::after {
  content: ''; position: absolute; inset: 14px; border-radius: 50%;
  background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.16), transparent 46%);
  z-index: 2; pointer-events: none;
}

/* ── 产品区（编辑化排版：无框悬挂 + 编号 + 顶部受光） ── */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 3.2rem 1.8rem; }
.product-card {
  border: none;
  background: transparent;
  cursor: pointer;
  transition: transform 0.45s var(--ease);
  position: relative;
  display: flex; flex-direction: column;
}
.product-card .visual {
  background:
    radial-gradient(260px 260px at 50% 44%, var(--glow, rgba(88,184,148,0.08)), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 55%);
  transition: background 0.45s var(--ease);
}
.product-card:hover { transform: translateY(-7px); }
.product-card:hover .visual { background: radial-gradient(280px 280px at 50% 44%, var(--glow, rgba(88,184,148,0.14)), transparent 74%); }
.product-card .idx {
  position: absolute; top: 1rem; left: 1.1rem;
  font-family: var(--serif); font-style: italic; font-size: 0.9rem;
  color: var(--faint); letter-spacing: 0.08em;
}
.product-card .idx::after { content: ''; display: inline-block; width: 26px; height: 1px; background: var(--hairline-strong); vertical-align: middle; margin-left: 0.7em; }
.product-card .visual {
  padding: 2.2rem 2rem 1.2rem;
  display: grid; place-items: center;
  background: radial-gradient(240px 240px at 50% 42%, var(--glow, rgba(88,184,148,0.07)), transparent 72%);
}
.product-card .visual .bracelet-svg { width: 82%; transition: transform 0.5s var(--ease); }
.product-card:hover .visual .bracelet-svg { transform: scale(1.05); }
.product-card .info { padding: 0 1.7rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.product-card .tags { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.chip {
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted);
  padding: 0.3em 0;
  display: inline-flex; align-items: center; gap: 0.55em;
}
.chip::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: 0.75; box-shadow: 0 0 8px var(--gold); }
.product-card h3 { font-size: 1.45rem; font-weight: 500; margin-bottom: 0.15rem; }
.product-card .stone { color: var(--muted); font-size: 0.85rem; margin-bottom: 0.8rem; }
.product-card .tagline { color: var(--ink-soft); font-size: 0.92rem; font-style: italic; flex: 1; }
.product-card .foot { display: flex; align-items: baseline; justify-content: space-between; margin-top: 1.3rem; }
.product-card .price { font-family: var(--serif); font-size: 1.5rem; color: var(--gold-bright); }
.product-card .price small { font-size: 0.72em; color: var(--faint); }

/* ── 仪式（三步） ───────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem; counter-reset: step; }
.step { border-top: 1px solid var(--hairline-strong); padding-top: 1.8rem; position: relative; }
.step .num {
  font-family: var(--serif); font-size: 1.05rem; color: var(--gold);
  letter-spacing: 0.1em; margin-bottom: 1rem; display: block;
}
.step h3 { font-size: 1.5rem; margin-bottom: 0.7rem; }
.step p { color: var(--muted); font-size: 0.95rem; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

/* ── 警句带 ─────────────────────────────────────────────── */
.aphorism { text-align: center; padding: 7rem 0; }
.aphorism .han-big {
  font-family: var(--han); font-size: clamp(4rem, 9vw, 7.2rem);
  color: var(--gold); opacity: 0.88; line-height: 1.3;
  margin-bottom: 1.8rem;
  text-shadow: 0 0 60px rgba(88, 184, 148, 0.25);
}
.aphorism p { font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 2.2vw, 1.7rem); color: var(--ink-soft); max-width: 24em; margin-inline: auto; }

/* ── 页脚 ───────────────────────────────────────────────── */
.footer { padding: 5rem 0 3rem; background: var(--bg-deep); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid var(--hairline); }
.footer h4 { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); font-weight: 400; margin-bottom: 1.2rem; }
.footer p, .footer a { color: var(--muted); font-size: 0.9rem; }
.footer a:hover { color: var(--gold-bright); }
.footer ul { list-style: none; }
.footer ul li { margin-bottom: 0.55rem; }
.newsletter { display: flex; gap: 0.6rem; margin-top: 0.4rem; }
.newsletter input {
  flex: 1; background: var(--surface); border: 1px solid var(--hairline);
  color: var(--ink); padding: 0.85em 1.1em; border-radius: var(--radius);
  font-family: var(--sans); font-size: 0.88rem;
}
.newsletter input:focus { outline: none; border-color: var(--gold); }
.newsletter .btn { padding: 0.85em 1.5em; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-top: 1.6rem; color: var(--faint); font-size: 0.78rem;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr; } }

/* ── 产品弹窗 ───────────────────────────────────────────── */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(8, 7, 6, 0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 4vh 4vw;
  opacity: 0; pointer-events: none; transition: opacity 0.35s var(--ease);
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }
.modal {
  width: min(880px, 100%);
  background: var(--surface-2);
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  max-height: 86vh; overflow: auto;
  transform: translateY(18px) scale(0.98);
  transition: transform 0.4s var(--ease);
}
.modal-backdrop.open .modal { transform: none; }
.modal .m-visual {
  display: grid; place-items: center; padding: 2.6rem;
  background: radial-gradient(280px 280px at 50% 45%, var(--glow, rgba(88,184,148,0.08)), transparent 75%);
}
.modal .m-visual .bracelet-svg { width: min(320px, 90%); }
.modal .m-info { padding: 3rem 2.6rem; display: flex; flex-direction: column; }
.modal .m-info .kicker { margin-bottom: 0.8rem; }
.modal .m-info h2 { font-size: 2.1rem; margin-bottom: 0.3rem; }
.modal .m-info .stone { color: var(--muted); font-size: 0.92rem; margin-bottom: 1.2rem; }
.modal .m-info .blurb { color: var(--ink-soft); margin-bottom: 1.6rem; }
.modal .m-price { font-family: var(--serif); font-size: 2rem; color: var(--gold-bright); margin-bottom: 1.8rem; }
.modal .m-close {
  position: absolute; top: 1.1rem; right: 1.3rem;
  background: none; border: none; color: var(--muted);
  font-size: 1.5rem; cursor: pointer; line-height: 1;
}
.modal .m-close:hover { color: var(--gold-bright); }
.modal { position: relative; }
@media (max-width: 760px) { .modal { grid-template-columns: 1fr; } .modal .m-visual { padding: 1.6rem; } .modal .m-visual .bracelet-svg { width: 220px; } }

/* Real author queue */
.queue-dock{position:fixed;right:22px;bottom:22px;z-index:88;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:174px;padding:13px 16px;border:1px solid rgba(199,166,99,.55);background:rgba(7,12,11,.9);backdrop-filter:blur(16px);color:var(--ink);box-shadow:0 16px 45px rgba(0,0,0,.28);cursor:pointer;text-align:left}.queue-dock span{font-size:.52rem;letter-spacing:.2em;color:var(--gold)}.queue-dock b{font:400 .86rem var(--serif);letter-spacing:.04em}.queue-dock:hover{border-color:var(--gold);transform:translateY(-2px)}
.queue-modal{width:min(690px,calc(100vw - 28px));max-height:min(90vh,860px);overflow:auto;grid-template-columns:1fr;background:linear-gradient(145deg,#101816,#080c0b)}.queue-modal .m-info{padding:2.5rem}.queue-modal h2{font-size:2.2rem;margin:.4rem 0}.queue-truth{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;margin:1.3rem 0;padding:1rem 1.1rem;border-block:1px solid var(--hairline);color:var(--muted)}.queue-truth span{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}.queue-truth b{font:400 1.8rem var(--serif);color:var(--gold);margin-right:6px}.queue-truth p{font-size:.75rem;margin:0}.queue-form{display:grid;gap:1rem}.queue-form label{display:grid;gap:.42rem;color:var(--muted);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase}.queue-form input,.queue-form select,.queue-form textarea{width:100%;border:1px solid var(--hairline-strong);background:#090e0d;color:var(--ink);padding:.78rem .85rem;font:300 .85rem var(--sans);letter-spacing:0;text-transform:none}.queue-form textarea{min-height:100px;resize:vertical}.queue-two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.queue-consent{display:flex!important;align-items:flex-start;gap:.65rem!important;line-height:1.55;text-transform:none!important;letter-spacing:0!important}.queue-consent input{width:15px;height:15px;margin-top:2px}.queue-hp{position:absolute!important;left:-9999px}.queue-submit{justify-content:center}.queue-success{text-align:center;padding:2rem 0}.queue-success>strong{display:block;font:400 2.6rem var(--serif);color:var(--gold);margin:.8rem}.queue-success h3{font-size:1.5rem}.queue-success p{color:var(--muted)}.queue-fair{border-top:1px solid var(--hairline);padding-top:1rem}.queue-fallback{margin-top:1rem;padding:1rem;border:1px solid rgba(196,125,108,.4);color:var(--muted)}.queue-error{color:#c47d6c}.contact-context{margin:0 0 1rem;padding:.75rem .9rem;border-left:2px solid var(--gold);background:rgba(199,166,99,.05);color:var(--muted);font-size:.75rem}
@media(max-width:640px){.queue-dock{left:12px;right:12px;bottom:10px;min-width:0;padding:9px 14px;display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center}.queue-dock span{font-size:.48rem}.queue-dock b{font-size:.76rem;text-align:right}.queue-modal .m-info{padding:2rem 1.25rem}.queue-two{grid-template-columns:1fr}.queue-truth{grid-template-columns:1fr}.queue-modal h2{font-size:1.8rem}}

/* ── Toast ──────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 2.2rem; transform: translate(-50%, 16px);
  background: var(--surface-3); border: 1px solid var(--hairline-strong);
  color: var(--ink); padding: 0.95em 1.6em; border-radius: var(--radius);
  font-size: 0.86rem; letter-spacing: 0.06em;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  z-index: 120; max-width: 90vw; text-align: center;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   计算器页
   ============================================================ */
.calc-page { min-height: 100vh; display: flex; flex-direction: column; }
.calc-main { flex: 1; padding: calc(var(--nav-h) + 1.8rem) 0 4rem; }

.calc-head { text-align: center; margin-bottom: 1.8rem; }
.calc-head h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); margin: 0.65rem 0 0.65rem; }
.calc-head p { color: var(--muted); max-width: 34em; margin-inline: auto; }

/* 表单 */
.form-card {
  width: min(560px, 100%); margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 2.15rem 2.35rem;
}
.form-card .fld { margin-bottom: 1.15rem; }
.form-card label {
  display: block; font-size: 0.68rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem;
}
.form-card input, .form-card select {
  width: 100%;
  background: var(--bg-deep);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.98rem;
  padding: 0.95em 1.05em;
  transition: border-color 0.3s;
}
.form-card input:focus, .form-card select:focus { outline: none; border-color: var(--gold); }
.form-card input[type="date"], .form-card input[type="time"] { color-scheme: dark; }
.form-card .fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-card .hint { font-size: 0.8rem; color: var(--faint); margin-top: 0.5rem; }
.form-card .unknown-time {
  display: flex; align-items: center; gap: 0.6rem; margin-top: 0.7rem;
  font-size: 0.86rem; color: var(--muted); cursor: pointer;
}
.form-card .unknown-time input { width: auto; accent-color: var(--gold); }
.form-card .btn { width: 100%; justify-content: center; margin-top: 0.6rem; padding: 1.15em 2em; }
.form-note { text-align: center; color: var(--faint); font-size: 0.78rem; margin-top: 1rem; }

/* Tool-first layout: keep the complete birth ritual inside the first desktop viewport. */
.compact-form {
  width: min(880px, 100%);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.35rem;
  align-items: start;
}
.compact-form > .fld:nth-of-type(5),
.compact-form > .btn,
.compact-form > .form-note { grid-column: 1 / -1; }
.compact-form > .fld:nth-of-type(5) { margin-bottom: .75rem; }
.compact-form > .form-note { max-width: 66em; margin-inline: auto; }

@media (max-width: 640px) {
  .calc-main { padding-top: calc(var(--nav-h) + 1rem); padding-bottom: 5rem; }
  .calc-head { margin-bottom: 1.35rem; }
  .calc-head h1 { font-size: clamp(2rem, 10vw, 2.65rem); }
  .calc-head p { font-size: .92rem; line-height: 1.65; }
  .form-card { padding: 1.5rem 1.15rem; }
  .form-card .fld { margin-bottom: 1rem; }
  .form-card .fld-row { grid-template-columns: 1fr; gap: .75rem; }
  .form-card input, .form-card select { padding: .8em .9em; }
  .compact-form { display: block; }
}

/* 结果区 */
.results { width: min(980px, 94vw); margin-inline: auto; display: none; }
.results.visible { display: block; animation: resultsIn 0.9s var(--ease); }
@keyframes resultsIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.r-head { text-align: center; margin-bottom: 1.65rem; }
.r-head h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 0.5rem; }
.r-head .r-sub { color: var(--muted); font-size: 0.95rem; }
.r-head .r-chips { display: flex; gap: 0.6rem; justify-content: center; margin-top: 1.2rem; flex-wrap: wrap; }

/* 四柱 */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2.2rem; }
.pillars-title { margin-top: 1rem; }
.pillars-visible { margin-top: 1.5rem; padding: 1.2rem; border: 1px solid var(--hairline); background: linear-gradient(180deg, rgba(88,184,148,.035), transparent); }
.pillar {
  border: 1px solid transparent;
  border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 40%), linear-gradient(180deg, var(--surface), var(--bg-deep));
  padding: 1.45rem 1.1rem 1.25rem;
  text-align: center;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
  position: relative;
}
.pillar:hover { transform: translateY(-4px); }
.pillar.is-day {
  border: 1px solid var(--gold);
  border-top-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold) inset, 0 14px 44px rgba(88, 184, 148, 0.14);
}
.pillar .p-label {
  font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 1.2rem;
}
.pillar .p-label .day-tag {
  display: inline-block; color: #221a0c; background: var(--gold);
  padding: 0.1em 0.7em; border-radius: 99px; margin-left: 0.5em;
  letter-spacing: 0.14em; font-size: 0.58rem; font-weight: 500;
}
.pillar .chars { display: flex; gap: 0.55rem; justify-content: center; margin-bottom: 0.4rem; }
.pillar .char-box {
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--ec-soft, var(--hairline-strong));
  background: radial-gradient(circle at 34% 28%, var(--surface-3), var(--bg-deep));
  position: relative;
}
.pillar .char-box .cn { font-family: var(--han); font-size: 1.9rem; color: var(--ec, var(--ink)); line-height: 1; }
.pillar .char-box .py { position: absolute; bottom: -0.55rem; font-size: 0.6rem; color: var(--faint); background: var(--bg-deep); padding: 0 0.35em; border-radius: 3px; }
.pillar .el-name { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.9rem; }
.pillar .mini { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.75; }
.pillar .mini .tgod { color: var(--gold); }
.pillar .mini .hidden-stems { color: var(--faint); font-size: 0.72rem; }
.pillar .mini .nayin { color: var(--faint); font-size: 0.7rem; font-style: italic; }
@media (max-width: 760px) { .pillars { grid-template-columns: repeat(2, 1fr); } }

/* 五行平衡（去框化：顶部受光代替边框） */
.balance-panel {
  border: 1px solid transparent;
  border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 34%), var(--surface);
  padding: 2rem 2.35rem;
  margin-bottom: 2.2rem;
}
.balance-panel h3 { font-size: 1.5rem; margin-bottom: 1.3rem; }
.bars { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.5rem; }
.bar-row { display: grid; grid-template-columns: 110px 1fr 64px; align-items: center; gap: 1rem; }
.bar-row .b-label { font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.bar-row .b-label b { color: var(--ink); display: block; font-weight: 400; }
.bar-track { height: 10px; background: var(--bg-deep); border-radius: 99px; overflow: hidden; border: 1px solid var(--hairline); }
.bar-fill {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--bc), color-mix(in srgb, var(--bc) 60%, white));
  transition: width 1.2s var(--ease);
  width: 0;
}
.bar-row .b-val { font-size: 0.86rem; color: var(--ink-soft); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .balance-panel { padding: 1.8rem 1.3rem; } .bar-row { grid-template-columns: 84px 1fr 44px; gap: 0.7rem; } }

.verdict {
  border-top: 1px solid var(--hairline);
  padding-top: 1.9rem;
  display: grid; grid-template-columns: auto 1fr; gap: 1.8rem; align-items: start;
}
.verdict .v-badge {
  font-family: var(--serif); font-size: 1.3rem; font-style: italic;
  border: 1px solid var(--gold); color: var(--gold-bright);
  padding: 0.55em 1.3em; border-radius: 99px; white-space: nowrap;
}
.verdict .v-copy { color: var(--ink-soft); font-size: 0.95rem; }
.verdict .v-copy .favorable { display: flex; gap: 0.55rem; margin: 1rem 0 0.5rem; flex-wrap: wrap; }
.verdict .v-copy .favorable .chip { border-color: var(--gold); }
.verdict .v-copy .avoid-chip { border-color: var(--hairline); color: var(--muted); }
.verdict .v-copy .note { color: var(--faint); font-size: 0.82rem; margin-top: 0.9rem; font-style: italic; }
@media (max-width: 640px) { .verdict { grid-template-columns: 1fr; } }

/* 推荐 */
.r-section-title { text-align: center; margin-bottom: 1.25rem; }
.r-section-title h3 { font-size: 1.8rem; }
.r-section-title p { color: var(--muted); margin-top: 0.5rem; font-size: 0.92rem; }
.rec-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem; margin-bottom: 2.5rem; }
.rec-card { border: 1px solid var(--hairline); background: var(--surface); text-align: center; padding: 1.8rem 1.5rem 1.7rem; transition: border-color 0.4s var(--ease), transform 0.4s var(--ease); display: flex; flex-direction: column; }
.rec-card:hover { border-color: var(--gold); transform: translateY(-5px); }
.rec-card .visual { width: 190px; margin: 0 auto 0.6rem; }
.rec-card h4 { font-size: 1.3rem; margin-bottom: 0.2rem; }
.rec-card .stone { color: var(--muted); font-size: 0.8rem; margin-bottom: 0.7rem; }
.rec-card .why { color: var(--ink-soft); font-size: 0.85rem; flex: 1; }
.rec-card .why b { color: var(--gold-bright); font-weight: 400; }
.rec-card .price { font-family: var(--serif); font-size: 1.4rem; color: var(--gold-bright); margin: 0.9rem 0; }
.rec-card .btn { padding: 0.78em 1.6em; font-size: 0.7rem; justify-content: center; }

/* 报告面板 */
.report-panel {
  width: min(720px, 100%); margin: 0 auto 2.5rem;
  border: 1px solid transparent;
  border-top: 1px solid var(--hairline-strong);
  background:
    radial-gradient(420px 200px at 82% 0%, var(--glow, rgba(88, 184, 148, 0.06)), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--bg-deep));
  padding: 2.25rem 2.5rem;
}
.report-panel .rp-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.8rem; flex-wrap: wrap; }
.report-panel .rp-head h3 { font-size: 1.6rem; }
.report-panel .engine-badge {
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--hairline-strong);
  padding: 0.4em 1em; border-radius: 99px;
}
.report-panel .report-body { color: var(--ink-soft); font-size: 0.98rem; }
.report-panel .report-body h3 { font-size: 1.28rem; color: var(--ink); margin: 2rem 0 0.7rem; }
.report-panel .report-body h3:first-child { margin-top: 0; }
.report-panel .report-body p { margin-bottom: 1rem; }
.report-panel .report-body ul { list-style: none; margin-bottom: 1rem; }
.report-panel .report-body li { padding-left: 1.4em; position: relative; margin-bottom: 0.5rem; }
.report-panel .report-body li::before { content: '—'; position: absolute; left: 0; color: var(--gold); }
.report-panel .report-body strong { color: var(--ink); font-weight: 500; }
.report-panel .report-body em { color: var(--muted); }
.report-cta { text-align: center; margin-top: 2.2rem; }
.report-cta .email-row { display: flex; gap: 0.6rem; max-width: 460px; margin: 1.2rem auto 0; }
.report-cta input {
  flex: 1; background: var(--bg-deep); border: 1px solid var(--hairline);
  color: var(--ink); padding: 0.9em 1.1em; border-radius: var(--radius);
  font-family: var(--sans); font-size: 0.9rem;
}
.report-cta input:focus { outline: none; border-color: var(--gold); }
.report-loading { text-align: center; color: var(--muted); padding: 1.6rem 0; letter-spacing: 0.14em; font-size: 0.82rem; text-transform: uppercase; }
@media (max-width: 640px) { .report-panel { padding: 2rem 1.4rem; } }

/* 重算按钮 */
.again-row { text-align: center; margin-bottom: 1.8rem; }

/* 免责声明 */
.disclaimer {
  width: min(720px, 94vw); margin: 0 auto;
  color: var(--faint); font-size: 0.74rem; text-align: center; line-height: 1.8;
}

/* ── 排盘过渡遮罩 ───────────────────────────────────────── */
.cast-overlay {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(10, 9, 8, 0.94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease);
}
.cast-overlay.open { opacity: 1; pointer-events: auto; }
.cast-inner { text-align: center; }
.cast-ring { width: 110px; height: 110px; margin: 0 auto 2rem; position: relative; }
.cast-ring::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--hairline-strong);
  border-top-color: var(--gold);
  animation: spin 1.1s linear infinite;
}
.cast-ring .han { font-family: var(--han); font-size: 2rem; color: var(--gold); position: absolute; inset: 0; display: grid; place-items: center; }
.cast-text { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase; min-height: 2.4em; transition: opacity 0.4s; }
.cast-text.fade { opacity: 0.3; }

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   玄幻装饰层：星尘、水印字、角落纹饰、印章、祥云分割、Logo
   ============================================================ */

/* 品牌 Logo */
.logo-mark { width: 44px; height: 44px; flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 0.85em; }
.brand .brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand .wordmark {
  font-family: var(--sans); font-size: 1.28rem; font-weight: 400;
  letter-spacing: 0.4em; color: var(--ink);
}
.brand .han-mark { font-family: var(--han); font-size: 0.82rem; color: var(--gold); letter-spacing: 0.3em; }

/* 星尘粒子（hero 内漂浮） */
.particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.particle {
  position: absolute; bottom: -3vh;
  width: 3px; height: 3px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 207, 151, 0.9), rgba(232, 207, 151, 0));
  animation: rise linear infinite;
  opacity: 0;
}
.particle:nth-child(3n) { width: 2px; height: 2px; background: radial-gradient(circle, rgba(236, 229, 216, 0.8), transparent 70%); }
@keyframes rise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: 0.85; }
  88% { opacity: 0.5; }
  100% { transform: translateY(-96vh) translateX(var(--drift, 30px)); opacity: 0; }
}

/* 巨型水墨字水印 */
.wm { position: relative; }
.wm::before {
  content: attr(data-char);
  position: absolute; top: 50%; right: -2%;
  transform: translateY(-50%);
  font-family: var(--han);
  font-size: clamp(14rem, 26vw, 26rem);
  line-height: 1;
  color: rgba(88, 184, 148, 0.045);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.wm-left::before { right: auto; left: -2%; }
.wm > * { position: relative; z-index: 1; }

/* 角落纹饰（hairline L 形） */
.corner { position: relative; }
.corner::before, .corner::after {
  content: ''; position: absolute; width: 20px; height: 20px; pointer-events: none;
  transition: all 0.5s var(--ease);
}
.corner::before { top: 9px; left: 9px; border-top: 1px solid var(--hairline-strong); border-left: 1px solid var(--hairline-strong); }
.corner::after { bottom: 9px; right: 9px; border-bottom: 1px solid var(--hairline-strong); border-right: 1px solid var(--hairline-strong); }
.corner:hover::before, .corner:hover::after { border-color: var(--gold); width: 30px; height: 30px; }

/* 印章（朱砂印面，金框） */
.seal {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px;
  border: 1px solid rgba(88, 184, 148, 0.5);
  background: linear-gradient(150deg, rgba(170, 52, 34, 0.18), rgba(170, 52, 34, 0.05));
  font-family: var(--han); color: #d4775f;
  font-size: 0.92rem; letter-spacing: 0.08em; line-height: 1.2;
  padding: 0.35em;
  transform: rotate(-4deg);
}

/* 祥云纹分割（线 + 菱 + 云卷） */
.ornament-divider {
  display: flex; align-items: center; gap: 1.4rem;
  justify-content: center; margin: 2.2rem 0;
  color: var(--gold);
}
.ornament-divider::before, .ornament-divider::after {
  content: ''; height: 1px; flex: 0 0 min(220px, 22vw);
  background: linear-gradient(90deg, transparent, var(--hairline-strong));
}
.ornament-divider::after { background: linear-gradient(90deg, var(--hairline-strong), transparent); }
.ornament-divider .diamond {
  width: 8px; height: 8px; transform: rotate(45deg);
  border: 1px solid var(--gold); background: rgba(88, 184, 148, 0.08);
}

/* 五行元素图标 */
.element-icon { width: 40px; height: 40px; color: var(--ec, var(--gold)); }
.element-card .icon-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }

/* 钩子行（CTA 下方斜体小字） */
.hook-line {
  margin-top: 1.5rem;
  font-family: var(--serif); font-style: italic;
  font-size: 1.02rem; color: var(--muted);
}
.hook-line b { color: var(--gold-bright); font-weight: 500; }

/* 微证词带（引号卡） */
.trust-strip { display: flex; gap: 2.6rem; justify-content: center; flex-wrap: wrap; }
.trust-strip .t-item { color: var(--faint); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.8em; }
.trust-strip .t-item::before { content: '✦'; color: var(--gold); font-size: 0.8em; }

/* ============================================================
   科普页（天干地支）
   ============================================================ */
.stems-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.4rem; }
.stem-card {
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--surface), var(--bg-deep));
  padding: 2rem 1.7rem 1.8rem;
  position: relative; overflow: hidden;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}
.stem-card:hover { border-color: var(--ec, var(--hairline-strong)); transform: translateY(-5px); }
/* 意象图标底纹（半透明，统一右上角，随悬停渐显） */
.stem-card.has-icon { position: relative; }
.stem-card .icon-bg {
  position: absolute; right: -0.7rem; top: -0.7rem;
  width: 108px; height: 108px;
  color: var(--ec, var(--gold));
  opacity: 0.08;
  pointer-events: none;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.stem-card:hover .icon-bg { opacity: 0.2; transform: scale(1.06); }
.stem-card .icon-bg svg { width: 100%; height: 100%; }
.stem-card > *:not(.icon-bg) { position: relative; z-index: 1; }
.stem-card .big-char {
  font-family: var(--han); font-size: 4rem; line-height: 1;
  color: var(--ec, var(--gold)); margin-bottom: 0.8rem;
  text-shadow: 0 0 40px var(--ec-soft, transparent);
}
.stem-card h3 { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; margin-bottom: 0.5rem; }
.stem-card .tag-chip {
  display: inline-block; font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); border: 1px solid var(--hairline-strong);
  padding: 0.3em 0.9em; border-radius: 99px; margin-bottom: 1rem;
}
.stem-card .archetype { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--ink-soft); margin-bottom: 0.7rem; }
.stem-card .line { color: var(--muted); font-size: 0.9rem; }

/* ============================================================
   卦签页
   ============================================================ */
.oracle-stage {
  width: min(560px, 100%); margin: 0 auto 3rem;
  background: var(--surface);
  padding: 3rem 2.6rem 2.4rem;
}
.hex-display { min-height: 330px; display: grid; place-items: center; }
.hex-placeholder { text-align: center; }
.hex-row {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin: 0.55rem 0;
  opacity: 0; transform: translateX(-14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.hex-row.revealed { opacity: 1; transform: none; }
.hex-row.pending { opacity: 0; }
/* 六爻：铜质立体长条（阳）+ 竹简刻痕（阴），动爻玉色覆盖 */
.hex-bar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 150px; height: 12px; border-radius: 2px;
  background: linear-gradient(180deg, #6d5a35 0%, #c9a96a 45%, #8a7348 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 244, 214, 0.35);
}
.hex-bar.yin { background: none; gap: 15px; }
.hex-bar.yin i {
  flex: 1; height: 12px; border-radius: 2px;
  background: linear-gradient(180deg, #6d5a35 0%, #c9a96a 45%, #8a7348 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 244, 214, 0.35);
}
.hex-mark { width: 20px; text-align: center; color: #d8c294; font-size: 0.95rem; text-shadow: 0 0 10px rgba(201, 169, 106, 0.6); }
.hex-mark.empty { color: transparent; }
.hex-lines-mini .hex-row { opacity: 1; transform: none; margin: 0.5rem 0; }
.hex-lines-mini { padding: 1.2rem 0 0.8rem; }
.trigrams { text-align: center; color: var(--muted); font-size: 0.85rem; letter-spacing: 0.08em; margin-top: 0.4rem; }
.oracle-cta { text-align: center; margin-top: 1.6rem; }
.oracle-cta .btn { min-width: 240px; justify-content: center; }
.oracle-result { animation: resultsIn 0.8s var(--ease); }

/* ============================================================
   珠子定制工坊
   ============================================================ */
.atelier-grid { display: grid; grid-template-columns: 1.05fr 0.95fr 0.9fr; gap: 1.6rem; align-items: start; }
@media (max-width: 1080px) { .atelier-grid { grid-template-columns: 1fr; } }

.atelier-panel {
  border: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--surface), var(--bg-deep));
  padding: 1.8rem 1.6rem;
}
.atelier-panel h3 { font-size: 1.25rem; margin-bottom: 1.1rem; display: flex; align-items: center; justify-content: space-between; }
.atelier-panel .step-num {
  font-family: var(--serif); font-style: italic; color: var(--gold);
  font-size: 0.95rem; font-weight: 400;
}

/* 元素选择 */
.el-picker { display: flex; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.el-pick {
  border: 1px solid var(--hairline-strong); border-radius: 99px;
  padding: 0.5em 1.15em; cursor: pointer;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); background: none; font-family: var(--sans);
  transition: all 0.3s var(--ease);
  display: inline-flex; align-items: center; gap: 0.5em;
}
.el-pick .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.el-pick:hover { color: var(--ink); border-color: var(--gold); }
.el-pick.active { color: #14120e; background: var(--gold); border-color: var(--gold); font-weight: 500; }
.el-pick.active .dot { color: #14120e; box-shadow: none; }

/* 珠子托盘 */
.bead-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1rem; }
.bead-item {
  border: 1px solid var(--hairline);
  background: var(--bg-deep);
  padding: 0.9rem 0.8rem 1rem;
  text-align: center; cursor: pointer;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
  display: flex; flex-direction: column; gap: 0.5rem; align-items: center;
}
.bead-item:hover { border-color: var(--gold); transform: translateY(-3px); }
.bead-item.selected { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.bead-item .thumb {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; border: 1px solid rgba(201, 169, 106, 0.35);
  background: radial-gradient(circle at 34% 28%, var(--surface-3), var(--bg-deep));
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.3);
  position: relative;
}
.bead-item .thumb::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.28), transparent 42%);
  pointer-events: none;
}
.bead-item .b-name { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.3; min-height: 2.1em; }
.bead-item .b-el { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--b-color, var(--gold)); }
.bead-item .b-price { font-size: 0.78rem; color: var(--gold-bright); }

/* 尺寸选择 */
.size-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.size-pick {
  border: 1px solid var(--hairline-strong); border-radius: var(--radius);
  background: none; color: var(--muted); cursor: pointer;
  padding: 0.55em 1.1em; font-family: var(--sans); font-size: 0.8rem;
  transition: all 0.3s var(--ease);
}
.size-pick.active { color: #14120e; background: var(--gold); border-color: var(--gold); font-weight: 500; }

/* 手串预览 */
.wire-box { display: grid; place-items: center; padding: 0.6rem 0; }
.wire-box svg { width: min(280px, 90%); }
.wire-stats { display: flex; justify-content: center; gap: 1.8rem; margin-top: 0.8rem; flex-wrap: wrap; }
.wire-stats .stat { text-align: center; }
.wire-stats .stat b { display: block; font-family: var(--serif); font-size: 1.35rem; color: var(--gold-bright); font-weight: 500; }
.wire-stats .stat span { font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); }

/* 结算 */
.summary-line { display: flex; justify-content: space-between; font-size: 0.9rem; color: var(--muted); padding: 0.45rem 0; border-bottom: 1px dashed var(--hairline); }
.summary-line.total { border-bottom: none; font-size: 1.05rem; color: var(--ink); margin-top: 0.4rem; }
.summary-line.total b { font-family: var(--serif); font-size: 1.7rem; color: var(--gold-bright); font-weight: 500; }
.fit-note { font-size: 0.82rem; color: var(--muted); margin: 0.9rem 0 1.2rem; line-height: 1.6; }
.fit-note b { color: var(--gold-bright); font-weight: 400; }
.actions-row { display: flex; gap: 0.8rem; flex-wrap: wrap; }

/* ============================================================
   每日黄历（首页）
   ============================================================ */
.almanac-panel {
  border: 1px solid var(--hairline-strong);
  background:
    radial-gradient(340px 220px at 82% 8%, rgba(88, 184, 148, 0.08), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--bg-deep));
  padding: 1.9rem 2.2rem;
  display: grid; grid-template-columns: 250px minmax(0, 1fr) minmax(200px, 250px); gap: 1.8rem; align-items: center;
}
.almanac-panel .day-ganzhi { text-align: center; }
.almanac-panel .day-ganzhi .sub { line-height: 1.9; letter-spacing: 0.14em; font-size: 0.6rem; }
.almanac-panel .day-ganzhi .sub .color-chip { vertical-align: middle; margin-left: 0.4em; }
.almanac-panel .day-ganzhi .big {
  font-family: var(--han); font-size: 2.1rem; color: var(--gold);
  line-height: 1.2; text-shadow: 0 0 24px rgba(88, 184, 148, 0.25);
  display: inline-flex; align-items: baseline; gap: 0.35em;
  white-space: nowrap;
}
.almanac-panel .day-ganzhi .sub { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); margin-top: 0.35rem; }
.almanac-panel .day-body h3 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.almanac-panel .day-yiji { gap: 0.5rem; }
.almanac-panel .lichun-count { margin-top: 0.6rem; padding-top: 0.6rem; font-size: 0.7rem; }
.almanac-panel .day-body p { color: var(--muted); font-size: 0.92rem; max-width: 36em; }
.almanac-panel .day-yiji { display: flex; flex-direction: column; gap: 0.8rem; }
.almanac-panel .yiji-box { min-width: 200px; }
.almanac-panel .yiji-box h4 { font-family: var(--sans); font-weight: 400; font-size: 0.66rem; letter-spacing: 0.26em; text-transform: uppercase; margin-bottom: 0.5rem; }
.almanac-panel .yiji-box.reco h4 { color: #8fae8f; }
.almanac-panel .yiji-box.avoid h4 { color: #b06a5a; }
.almanac-panel .yiji-box .items { font-size: 0.84rem; color: var(--ink-soft); line-height: 1.9; }
.almanac-panel .clash-line { color: var(--faint); font-size: 0.78rem; font-style: italic; margin-top: 0.8rem; }
.almanac-panel .term-chip {
  display: inline-block; border: 1px solid; border-radius: 99px;
  padding: 0.35em 1.1em; font-size: 0.72rem; letter-spacing: 0.12em;
}
.almanac-panel .color-chip {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-size: 0.78rem; color: var(--muted); text-transform: capitalize;
}
.almanac-panel .color-chip .swatch {
  width: 14px; height: 14px; border-radius: 50%;
  box-shadow: 0 0 12px currentColor;
  display: inline-block;
}
.almanac-panel .lichun-count {
  margin-top: 0.9rem; padding-top: 0.8rem;
  border-top: 1px dashed var(--hairline);
  font-size: 0.76rem; color: var(--gold);
  letter-spacing: 0.08em;
}
@media (max-width: 900px) { .almanac-panel { grid-template-columns: 1fr; text-align: center; } .almanac-panel .day-body p { margin-inline: auto; } }

/* 四柱含义展开（details） */
.pillar-meaning { margin-top: 0.9rem; border-top: 1px solid var(--hairline); padding-top: 0.7rem; text-align: left; }
.pillar-meaning summary {
  cursor: pointer; list-style: none;
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); padding: 0.3em 0;
}
.pillar-meaning summary::-webkit-details-marker { display: none; }
.pillar-meaning summary::before { content: '✦ '; }
.pillar-meaning[open] summary::before { content: '✧ '; }
.pillar-meaning .m-body { padding: 0.6em 0 0.2em; }
.pillar-meaning .m-body p { font-size: 0.8rem; color: var(--muted); line-height: 1.7; margin-bottom: 0.55rem; }
.pillar-meaning .m-body b { color: var(--ink-soft); font-weight: 400; display: block; font-family: var(--serif); font-style: italic; font-size: 0.95rem; margin-bottom: 0.15rem; }

/* ============================================================
   计算器页新增：性别选择、神煞、大运
   ============================================================ */
.gender-row { display: flex; gap: 0.5rem; }
.gender-pick {
  flex: 1; border: 1px solid var(--hairline-strong); border-radius: var(--radius);
  background: none; color: var(--muted); cursor: pointer;
  padding: 0.75em 0.4em; font-family: var(--sans); font-size: 0.86rem;
  transition: all 0.3s var(--ease); text-align: center;
}
.gender-pick.active { color: #14120e; background: var(--gold); border-color: var(--gold); font-weight: 500; }

.gods-panel {
  margin-bottom: 2.2rem; border: 1px solid transparent; border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 34%), var(--surface);
  padding: 1.85rem 2.2rem;
}
.gods-panel h3 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.gods-panel .gods-sub { color: var(--faint); font-size: 0.8rem; margin-bottom: 1.6rem; }
.gods-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.gods-col h4 { font-family: var(--sans); font-weight: 400; font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.7rem; }
.gods-col .god-chip {
  display: inline-block; font-size: 0.76rem; color: var(--ink-soft);
  border: 1px solid var(--hairline); border-radius: 99px;
  padding: 0.28em 0.85em; margin: 0 0.35rem 0.5rem 0;
}
.gods-col .god-chip .cn { color: var(--faint); font-size: 0.7em; margin-left: 0.35em; }
.gods-missing { color: var(--faint); font-size: 0.84rem; font-style: italic; }
@media (max-width: 820px) { .gods-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 640px) {
  .r-head { margin-bottom: 1.25rem; }
  .pillars { gap: .65rem; margin-bottom: 1.45rem; }
  .pillars-visible { margin-top: .85rem; padding: .65rem; }
  .pillar { padding: 1.1rem .65rem .95rem; }
  .pillar .p-label { margin-bottom: .8rem; }
  .pillar .char-box { width: 52px; height: 52px; }
  .pillar .char-box .cn { font-size: 1.55rem; }
  .gods-panel { margin-bottom: 1.45rem; padding: 1.35rem 1.05rem; }
  .balance-panel { margin-bottom: 1.45rem; padding: 1.35rem 1.05rem; }
  .r-section-title { margin-bottom: .9rem; }
  .rec-cards { margin-bottom: 1.65rem; }
  .report-panel { margin-bottom: 1.65rem; padding: 1.5rem 1.15rem; }
}

.decades-panel {
  margin-bottom: 4rem; border: 1px solid transparent; border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 34%), var(--surface);
  padding: 2.4rem 2.6rem; overflow-x: auto;
}
.decades-panel h3 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.decades-panel .gods-sub { margin-bottom: 1.4rem; }
.decades-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.decades-table th {
  font-family: var(--sans); font-weight: 400; font-size: 0.62rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--faint); text-align: left;
  padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--hairline-strong);
}
.decades-table td { padding: 0.72rem 0.8rem; font-size: 0.9rem; color: var(--ink-soft); border-bottom: 1px solid var(--hairline); }
.decades-table tr.current td { color: var(--gold-bright); background: rgba(88, 184, 148, 0.07); }
.decades-table tr.current td:first-child { border-left: 2px solid var(--gold); }
.decades-table .gz { font-family: var(--han); font-size: 1.05rem; color: var(--ink); }
.decades-table tr.current .gz { color: var(--gold-bright); }

/* 神煞释义标注 */
.gods-gloss { margin-top: 1.8rem; border-top: 1px solid var(--hairline); padding-top: 1.4rem; }
.gods-gloss h4 { font-family: var(--sans); font-weight: 400; font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; }
.gloss-item { font-size: 0.86rem; color: var(--muted); margin-bottom: 0.7rem; line-height: 1.65; }
.gloss-item b { color: var(--ink-soft); font-weight: 400; }
.gloss-item .cn { color: var(--faint); margin: 0 0.2em; }

/* 九件事自检 */
.nine-list { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.2rem; }
.nine-item {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 1rem; align-items: center;
  border-top: 1px solid var(--hairline);
  padding: 0.85rem 0.2rem;
  transition: background 0.3s var(--ease);
}
.nine-item .nine-num { font-family: var(--serif); font-style: italic; color: var(--faint); font-size: 1.1rem; }
.nine-item p { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.6; }
.nine-actions { display: flex; gap: 0.45rem; }
.nine-btn {
  background: none; border: 1px solid var(--hairline-strong); border-radius: 99px;
  color: var(--muted); font-size: 0.7rem; letter-spacing: 0.08em;
  padding: 0.35em 1em; cursor: pointer; transition: all 0.3s var(--ease);
  white-space: nowrap;
}
.nine-btn:hover { border-color: var(--gold); color: var(--ink); }
.nine-btn.picked { border-color: var(--gold); color: #0a0908; background: var(--gold); font-weight: 500; }
.nine-item.answered p { color: var(--muted); }
.nine-score {
  margin-top: 1.4rem; border-top: 1px solid var(--hairline-strong); padding-top: 1.1rem;
  text-align: center; font-size: 0.95rem; color: var(--ink-soft);
}
.nine-score #nine-count { font-family: var(--serif); font-size: 1.6rem; color: var(--gold-bright); }
.nine-aggregate { margin-top: 0.8rem; font-size: 0.8rem; color: var(--faint); font-style: italic; }
@media (max-width: 640px) {
  .nine-item { grid-template-columns: 30px 1fr; }
  .nine-actions { grid-column: 2; }
}

/* 学院 */
.academy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.6rem; }
.academy-card {
  border: 1px solid transparent; border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 44%), var(--surface);
  padding: 2rem 1.8rem;
}
.academy-card .a-num { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 1.2rem; }
.academy-card h3 { font-size: 1.5rem; margin: 0.5rem 0 0.9rem; }
.academy-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.75; margin-bottom: 0.8rem; }
.casebook { display: flex; flex-direction: column; gap: 2rem; }
.case-card {
  border: 1px solid transparent; border-top: 1px solid var(--hairline-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%), var(--surface);
  padding: 2.2rem 2.4rem;
}
.case-head h3 { font-size: 1.7rem; margin-bottom: 0.4rem; }
.case-head p { color: var(--muted); font-size: 0.92rem; max-width: 46em; line-height: 1.7; }
.case-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.6rem 0; }
.case-pillar { border-top: 1px solid var(--hairline); padding: 0.9rem 0.4rem; text-align: center; }
.case-pillar .c-label { display: block; font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.5rem; }
.case-pillar .c-chars { display: block; font-family: var(--han); font-size: 1.6rem; margin-bottom: 0.35rem; }
.case-pillar .c-god { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 640px) { .case-pillars { grid-template-columns: repeat(2, 1fr); } }
.case-readings { display: flex; flex-direction: column; gap: 0.9rem; }
.case-reading { border-left: 2px solid var(--hairline-strong); padding: 0.3rem 0 0.3rem 1.1rem; }
.case-reading h4 { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; color: var(--ink-soft); margin-bottom: 0.3rem; }
.case-reading p { color: var(--muted); font-size: 0.86rem; line-height: 1.7; }
.case-meta { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--hairline); font-size: 0.8rem; color: var(--faint); line-height: 1.8; }

/* 合盘双人命盘 */
.cp-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; max-width: 900px; margin: 0 auto 2.6rem; }
@media (max-width: 820px) { .cp-charts { grid-template-columns: 1fr; } }
.cp-chart {
  border: 1px solid transparent; border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%), var(--surface);
  padding: 1.5rem 1.6rem 1.3rem;
}
.cp-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cp-chart-head h4 { font-size: 1.3rem; }
.cp-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }
.cp-pillar { border-top: 1px solid var(--hairline); padding: 0.7rem 0.2rem; text-align: center; }
.cp-plabel { display: block; font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); margin-bottom: 0.4rem; }
.cp-pchars { display: block; font-family: var(--han); font-size: 1.35rem; }
.cp-pgod { font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.cp-chart-meta { margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--hairline); font-size: 0.78rem; color: var(--faint); }

/* 合盘 */
.compat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; max-width: 1000px; margin-inline: auto; }
@media (max-width: 860px) { .compat-grid { grid-template-columns: 1fr; } }
.compat-form { width: 100%; }
.compat-score-ring {
  width: 130px; height: 130px; margin: 1.6rem auto 0;
  border: 1px solid var(--hairline-strong); border-radius: 50%;
  display: grid; place-items: center; align-content: center;
  box-shadow: 0 0 44px rgba(88, 184, 148, 0.12) inset;
}
.compat-score-ring .ring-num { font-family: var(--serif); font-size: 3rem; line-height: 1; color: var(--gold-bright); }
.compat-score-ring .ring-label { font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint); margin-top: 0.3rem; }
.compat-parts { max-width: 640px; margin: 2.4rem auto 0; display: flex; flex-direction: column; gap: 1.2rem; }
.cp-part { border-top: 1px solid var(--hairline); padding-top: 1rem; }
.cp-part-head { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
.cp-label { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.cp-points { font-family: var(--serif); font-size: 1.1rem; }
.cp-points.pos { color: var(--gold-bright); }
.cp-points.neg { color: #b0604c; }
.cp-part .bar-fill.pos { background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright)); }
.cp-part .bar-fill.neg { background: linear-gradient(90deg, #7a3524, #b0604c); }
.cp-part p { font-size: 0.86rem; color: var(--muted); margin-top: 0.5rem; line-height: 1.7; }

/* 报告分层定价墙 */
.report-tiers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  margin-top: 2rem; border-top: 1px solid var(--hairline); padding-top: 1.8rem;
}
@media (max-width: 760px) { .report-tiers { grid-template-columns: 1fr; } }
.tier-card {
  border: 1px solid transparent; border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 40%), var(--bg-deep);
  padding: 1.5rem 1.4rem 1.4rem;
  text-align: left;
  display: flex; flex-direction: column;
}
.tier-card.featured {
  border: 1px solid rgba(201, 169, 106, 0.4);
  background: linear-gradient(180deg, rgba(201, 169, 106, 0.07), transparent 55%), var(--bg-deep);
}
.tier-name { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.4rem; }
.tier-price { font-family: var(--serif); font-size: 2rem; color: var(--gold-bright); margin-bottom: 0.6rem; }
.tier-price .per { font-size: 0.9rem; color: var(--faint); }
.tier-card p { font-size: 0.82rem; color: var(--muted); line-height: 1.65; flex: 1; margin-bottom: 1rem; }
.tier-card .btn { font-size: 0.66rem; padding: 0.7em 1.1em; justify-content: center; }

/* 实力背书卡 */
.credential-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.6rem; }
.credential-card {
  border: 1px solid transparent; border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 44%), var(--surface);
  padding: 2.1rem 1.8rem;
  display: flex; flex-direction: column; gap: 0.8rem;
}
.cred-num { font-family: var(--serif); font-style: italic; color: var(--gold); font-size: 1.2rem; }
.credential-card h3 { font-size: 1.35rem; font-weight: 500; }
.credential-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.75; flex: 1; }
.credential-card .btn { align-self: flex-start; }

/* 咨询大面板 */
.consult-panel {
  border: 1px solid rgba(201, 169, 106, 0.3);
  background:
    radial-gradient(420px 220px at 78% 10%, rgba(201, 169, 106, 0.07), transparent 70%),
    linear-gradient(180deg, var(--surface-2), var(--bg-deep));
  padding: 3.4rem 3.6rem;
  text-align: center;
}
@media (max-width: 640px) { .consult-panel { padding: 2.4rem 1.6rem; } }

/* 咨询上下文与流程说明 */
.contact-context {
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--gold);
  background: var(--bg-deep);
  padding: 0.7rem 1rem;
  font-size: 0.82rem; color: var(--ink-soft);
  margin-bottom: 1rem;
}
.contact-process {
  margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1px dashed var(--hairline);
}
.contact-process p { font-size: 0.78rem; color: var(--faint); line-height: 1.8; }

/* 私域咨询行 */
.contact-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--hairline);
  padding: 0.9rem 0;
}
.contact-row .c-label { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.contact-row .c-value { font-size: 0.95rem; color: var(--ink); display: flex; align-items: center; gap: 0.6rem; }
.c-copy {
  background: none; border: 1px solid var(--hairline-strong); border-radius: 99px;
  color: var(--muted); font-size: 0.66rem; padding: 0.25em 0.9em; cursor: pointer;
  transition: all 0.3s var(--ease);
}
.c-copy:hover { border-color: var(--gold); color: var(--gold-bright); }

/* 作品画廊（分页） */
.collection-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2rem 1.6rem;
}
.collection-card {
  cursor: pointer;
  transition: transform 0.4s var(--ease);
}
.collection-card:hover { transform: translateY(-6px); }
.collection-card .c-visual {
  padding: 0.4rem;
  display: grid; place-items: center;
}
.collection-card .c-visual img {
  width: 100%; border-radius: 8px;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.collection-card:hover .c-visual img {
  transform: scale(1.025);
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
}
.collection-card .c-info { padding: 0 1.2rem 1.2rem; text-align: center; }
.collection-card .c-info h3 { font-size: 1.25rem; font-weight: 500; margin: 0.4rem 0 0.3rem; }
.collection-card .c-tagline { font-size: 0.85rem; color: var(--muted); font-style: italic; }

.collection-pager {
  display: flex; justify-content: center; gap: 0.5rem;
  margin-top: 3rem; flex-wrap: wrap;
}
.page-btn {
  min-width: 42px; height: 42px;
  background: none; border: 1px solid var(--hairline-strong); border-radius: var(--radius);
  color: var(--muted); font-family: var(--sans); font-size: 0.85rem;
  cursor: pointer; transition: all 0.3s var(--ease);
}
.page-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-bright); }
.page-btn.active { background: var(--gold); border-color: var(--gold); color: #0a0908; font-weight: 500; }
.page-btn:disabled { opacity: 0.3; cursor: default; }

/* 专业排盘折叠 */
.pro-details {
  margin: 4rem auto 0; max-width: 980px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--surface);
}
.pro-details summary {
  cursor: pointer; list-style: none;
  padding: 1.4rem 1.8rem;
  font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--gold);
}
.pro-details summary::-webkit-details-marker { display: none; }
.pro-details summary::before { content: '✦ '; }
.pro-details[open] summary::before { content: '✧ '; }
.pro-details-body { padding: 0 1.4rem 2rem; }

/* 章节断点（免费第一章结束） */
.chapter-break {
  margin-top: 2.2rem; padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.chapter-break span { color: var(--gold); letter-spacing: 0.6em; }
.chapter-break p { font-family: var(--serif); font-style: italic; font-size: 1.1rem; color: var(--ink-soft); margin: 0.6rem 0 1rem; }
.chapter-break .btn { justify-content: center; }

/* 干支关系条 */
.relations-strip { margin-bottom: 3.4rem; text-align: center; }
.relations-strip .rel-title {
  font-family: var(--sans); font-weight: 400; font-size: 0.64rem;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.9rem;
}
.relations-strip .rel-items { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
.relations-strip .rel-chip {
  font-size: 0.8rem; color: var(--ink-soft);
  border: 1px solid var(--hairline); border-radius: 99px;
  padding: 0.4em 1.1em;
}
.relations-strip .rel-chip b { color: var(--gold-bright); font-weight: 400; margin-right: 0.4em; }

/* 可点击注解 */
.anno-link { cursor: pointer; position: relative; }
.anno-link:hover { text-shadow: 0 0 14px currentColor; }
.anno-drawer {
  margin: 1.4rem auto 0; max-width: 640px;
  border-left: 2px solid var(--gold);
  background: linear-gradient(90deg, var(--color-soft, rgba(88,184,148,0.07)), transparent 70%);
  padding: 1.2rem 1.4rem 1.2rem 1.5rem;
  text-align: left;
  position: relative;
  animation: drawerIn 0.45s var(--ease);
}
@keyframes drawerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.anno-drawer .anno-char {
  font-family: var(--han); font-size: 2.6rem; line-height: 1.1;
  margin-bottom: 0.3rem;
}
.anno-drawer h4 { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--ink); }
.anno-drawer p { font-size: 0.9rem; color: var(--muted); line-height: 1.75; }
.anno-drawer .anno-archetype { font-style: italic; font-family: var(--serif); font-size: 1rem; color: var(--ink-soft); }
.anno-drawer .anno-small { font-size: 0.78rem; color: var(--faint); margin-top: 0.5rem; }
.anno-close {
  position: absolute; top: 0.5rem; right: 0.8rem;
  background: none; border: none; color: var(--muted); font-size: 1.3rem; cursor: pointer; line-height: 1;
}
.anno-close:hover { color: var(--gold-bright); }

/* 排行洞察 */
.insights-list { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1.2rem; }
.insight-item {
  display: grid; grid-template-columns: 56px 1fr; gap: 1.1rem;
  border: 1px solid transparent; border-top: 1px solid var(--hairline);
  padding: 1.1rem 0.4rem 1.1rem 0;
  transition: background 0.35s var(--ease);
}
.insight-item .i-rank {
  font-family: var(--serif); font-style: italic; font-size: 1.5rem;
  color: var(--faint); padding-top: 0.1rem;
}
.insight-item .i-body h4 { font-family: var(--serif); font-size: 1.12rem; font-weight: 500; color: var(--ink-soft); margin-bottom: 0.35rem; }
.insight-item .i-body p { font-size: 0.88rem; color: var(--muted); line-height: 1.7; }
.insight-item.emphasized {
  border: 1px solid var(--gold);
  background: linear-gradient(90deg, rgba(88, 184, 148, 0.10), rgba(88, 184, 148, 0.02) 60%, transparent);
  padding: 1.3rem 1.1rem 1.3rem 1.2rem;
  box-shadow: 0 10px 36px rgba(88, 184, 148, 0.10);
}
.insight-item.emphasized .i-rank { color: var(--gold); }
.insight-item.emphasized .i-body h4 { color: var(--ink); font-size: 1.25rem; }
.insight-item.emphasized .i-body p { color: var(--ink-soft); }
.short-report {
  margin-top: 1.6rem; border-top: 1px solid var(--hairline); padding-top: 1.3rem;
}
.short-report h4 { font-family: var(--sans); font-weight: 400; font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.8rem; }
.short-report ul { list-style: none; }
.short-report li { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 0.55rem; padding-left: 1.5em; position: relative; line-height: 1.65; }
.short-report li::before { content: '—'; position: absolute; left: 0; color: var(--gold); }

/* 称骨 */
.bone-judgment {
  max-width: 560px; margin-top: 1.2rem;
  border-left: 2px solid var(--gold);
  padding: 0.9rem 0 0.9rem 1.2rem;
  font-family: var(--serif); font-style: italic;
  font-size: 1.05rem; color: var(--ink-soft); line-height: 1.7;
}
.bone-annotation {
  max-width: 560px; margin-top: 1.1rem;
  border: 1px solid var(--hairline);
  background: var(--bg-deep);
  padding: 1rem 1.2rem;
}
.bone-annotation h4 {
  font-family: var(--sans); font-weight: 400; font-size: 0.64rem;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem;
}
.bone-annotation p { font-size: 0.88rem; color: var(--muted); line-height: 1.75; }
.reading-focus{padding:1rem 0 1.2rem;border-bottom:1px solid rgba(200,164,104,.14);margin-bottom:1.2rem}.reading-focus>span{display:block;color:var(--muted);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:.7rem}.reading-focus>div{display:flex;flex-wrap:wrap;gap:.55rem}.focus-pick{border:1px solid rgba(200,164,104,.26);background:transparent;color:#9eaaa5;border-radius:999px;padding:.55rem .85rem;font:500 .67rem/1 Jost,sans-serif;cursor:pointer}.focus-pick:hover,.focus-pick.active{color:#dbece5;border-color:#5cbc9b;background:rgba(92,188,155,.09)}
.legal-wrap{max-width:800px}.legal-wrap .gods-panel{margin-bottom:1rem}.legal-wrap .gods-panel h3{margin-bottom:.55rem}
/* Zi Wei public chart */
.ziwei-form{max-width:720px;margin-inline:auto}.ziwei-results{max-width:1180px;margin-inline:auto}.ziwei-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(190px,auto));gap:1px;background:rgba(200,164,104,.2);border:1px solid rgba(200,164,104,.28);position:relative;margin:2rem 0 3rem;box-shadow:0 32px 80px rgba(0,0,0,.35)}.ziwei-palace{grid-row:var(--zr);grid-column:var(--zc);background:linear-gradient(145deg,rgba(18,22,20,.98),rgba(9,12,11,.98));padding:1rem;display:flex;flex-direction:column;min-width:0;position:relative}.ziwei-palace.is-life{box-shadow:inset 0 0 0 1px rgba(92,188,155,.65)}.ziwei-palace.is-body:after{content:'身';position:absolute;right:.7rem;bottom:.5rem;color:rgba(92,188,155,.16);font:3rem/1 serif}.ziwei-palace header{display:flex;justify-content:space-between;gap:.6rem;border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:.55rem}.ziwei-palace header>span{color:var(--gold);font-size:.72rem;letter-spacing:.12em}.ziwei-palace h3{font-size:1.12rem;margin:0;text-align:right}.ziwei-palace h3 small{display:block;color:var(--muted);font:500 .58rem/1.4 Jost,sans-serif;letter-spacing:.12em;text-transform:uppercase}.ziwei-stars{display:grid;gap:.5rem;padding:.8rem 0;flex:1}.ziwei-star{display:block}.ziwei-star b{display:block;color:#e5efe9;font:500 1.05rem/1.2 serif}.ziwei-star small{display:block;color:#91aaa0;font-size:.62rem;letter-spacing:.04em}.ziwei-minor{color:#7f938b;font-size:.68rem;min-height:2.1em}.ziwei-palace footer{display:flex;justify-content:space-between;color:var(--gold);font-size:.65rem}.ziwei-center{grid-area:2/2/4/4;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle,rgba(32,79,65,.22),rgba(7,10,9,.98) 68%);padding:2rem}.ziwei-center span{font:500 clamp(2rem,4vw,4.5rem)/1 serif;color:#b7d8cc;letter-spacing:.2em}.ziwei-center b{font-weight:400;color:var(--gold);margin-top:1rem}.ziwei-center small{color:var(--muted);margin-top:.5rem}.ziwei-focus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.4rem}.ziwei-focus-grid article{border:1px solid rgba(200,164,104,.18);background:rgba(255,255,255,.018);padding:1.2rem}.ziwei-focus-grid span{color:var(--gold);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}.ziwei-focus-grid h4{font-size:1.25rem;margin:.35rem 0}.ziwei-focus-grid strong{display:block;color:#a9c9bd;font-size:.75rem;min-height:3em}.ziwei-focus-grid p{color:var(--muted);font-size:.78rem;line-height:1.65}.simple-site-footer{padding:2.2rem max(1.2rem,5vw);border-top:1px solid rgba(200,164,104,.15);display:flex;justify-content:space-between;gap:1rem;color:var(--muted);font-size:.72rem}.simple-site-footer nav{display:flex;gap:1.2rem}.simple-site-footer a{color:#b8c9c2}@media(max-width:850px){.ziwei-board{grid-template-columns:repeat(2,1fr);grid-template-rows:auto;gap:.6rem;background:transparent;border:0}.ziwei-palace{grid-row:auto!important;grid-column:auto!important;border:1px solid rgba(200,164,104,.18);min-height:180px}.ziwei-center{grid-area:1/1/2/3;min-height:190px}.ziwei-focus-grid{grid-template-columns:1fr 1fr}.simple-site-footer{flex-direction:column}}@media(max-width:520px){.ziwei-focus-grid{grid-template-columns:1fr}.ziwei-center{grid-area:1/1/2/3}.ziwei-palace h3{font-size:1rem}.ziwei-board{grid-template-columns:1fr 1fr}}