/* ============================================================
   五气朝元 · 设计系统 v7「罗盘」
   漆器底 · 金朱青玄黄五色 · 罗盘即导航 · 零滚动单屏
   ============================================================ */

:root {
  /* 漆底与表面 → 改为宣纸浅色主题（明亮） */
  --lacquer: #F4EEE0;
  --lacquer-2: #ECE4D2;
  --surface: rgba(255,252,244,.86);
  --surface-2: #FBF6EA;
  /* 五色 */
  --gold: #B07A2E;
  --gold-bright: #C98E36;
  --vermillion: #C4362A;
  --vermillion-deep: #8B2A1A;
  --jade: #2F7A4A;
  --jade-bright: #3E9460;
  --indigo: #34558A;
  --indigo-bright: #4A6FA8;
  --earth: #A9842F;
  /* 纸与墨 */
  --cream: #2C2418;
  --cream-dim: #5C5240;
  --ink: #1A1A2E;
  /* 线与辉 */
  --line: rgba(120,90,50,.18);
  --line-strong: rgba(120,90,50,.34);
  --glow-gold: 0 0 18px rgba(176,122,46,.22);
  --glow-red: 0 0 18px rgba(196,54,42,.2);
  --glow-jade: 0 0 18px rgba(47,122,74,.2);
  /* 兼容旧别名（工具页） */
  --void: var(--lacquer); --void-2: var(--surface);
  --cyan: var(--gold); --cyan-dim: var(--indigo);
  --amber: var(--earth); --amber-dim: #8A6A3A;
  --red: var(--vermillion); --red-dim: var(--vermillion-deep);
  --text: var(--cream); --text-dim: var(--cream-dim);
  --text-faint: #8A7E68;
  --paper: var(--lacquer); --paper-2: var(--surface);
  --card: var(--surface); --ink-soft: var(--cream-dim);
  --ink-faint: var(--text-faint); --cinnabar: var(--vermillion);
  --cinnabar-deep: var(--vermillion-deep); --qing: var(--indigo);
  --jade: var(--jade); --blue: var(--indigo); --green: var(--jade);
  --yellow: var(--earth); --zhe: #8A6A3A;
  --lift-shadow: 0 2px 0 rgba(120,90,50,.10);
  --lift-shadow-strong: 0 3px 0 rgba(120,90,50,.16);
  --w-mu: #2F7A4A; --w-huo: #C4362A; --w-tu: #A9842F;
  --w-jin: #B07A2E; --w-shui: #34558A;
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 240ms;
  --focus-ring: var(--gold);
  --sp1: 4px; --sp2: 8px; --sp3: 12px; --sp4: 16px;
  --sp5: 24px; --sp6: 32px; --sp7: 48px; --sp8: 64px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: "Noto Serif SC", "Noto Sans SC", serif;
  background: var(--lacquer);
  color: var(--cream);
  line-height: 1.8;
  letter-spacing: .02em;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ============================================================
   罗盘首页
   ============================================================ */
.luopan-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: url('assets/bg-shanshui.jpg') center/cover no-repeat;
}
.luopan-bg::before {
  content: ""; position: absolute; inset: 0;
  background:
  radial-gradient(circle at 50% 50%, rgba(42,26,13,.3) 0%, rgba(42,26,13,.55) 70%),
  linear-gradient(180deg, rgba(20,12,6,.2) 0%, rgba(20,12,6,.5) 100%);
  z-index: -1;
}
.luopan-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 50%, transparent 20%, rgba(20,12,6,.3) 80%);
  z-index: -1;
}

.luopan-stage {
  position: fixed; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: grab;
}
.luopan-stage:active { cursor: grabbing; }
.luopan-stage svg {
  width: min(95vmin, 720px); height: min(95vmin, 720px);
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.4)) drop-shadow(0 0 40px rgba(184,148,74,.25));
}
/* 每一圈独立旋转：原点取 SVG 坐标 (0,0) = 罗盘正中心 */
.luopan-stage .lp-ring { transform-origin: 0 0; transition: transform .08s linear; cursor: grab; }
.luopan-stage.dragging .lp-ring { transition: none; }
.luopan-stage .lp-core { cursor: pointer; }

/* 指针 */
.luopan-pointer { filter: drop-shadow(0 0 6px rgba(196,54,42,.6)); }

/* 品牌 */
.luopan-brand {
  position: fixed; top: calc(.8rem + env(safe-area-inset-top, 0px)); left: 50%;
  transform: translateX(-50%); z-index: 10; text-align: center;
  pointer-events: none;
}
.luopan-brand .lb-name {
  font-family: "Noto Serif SC", serif; font-weight: 700;
  font-size: 1.1rem; letter-spacing: .28em; color: var(--gold);
  text-shadow: 0 0 12px rgba(212,160,96,.4);
}
.luopan-brand .lb-sub {
  display: block; font-size: .58rem; color: var(--text-faint);
  letter-spacing: .36em; margin-top: .15rem;
}
.luopan-brand .lb-jing {
  display: inline-block; margin-top: .5rem; padding: .22rem .7rem;
  font-size: .62rem; letter-spacing: .18em; color: var(--gold);
  text-decoration: none; border: 1px solid var(--gold); border-radius: 20px;
  pointer-events: auto; transition: all var(--dur) var(--ease);
  box-shadow: 0 0 10px rgba(212,160,96,.18);
}
.luopan-brand .lb-jing:hover { background: var(--gold); color: #1a140a; box-shadow: var(--glow-gold); }

/* 提示 */
.luopan-hint {
  position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); left: 50%;
  transform: translateX(-50%); z-index: 10;
  font-size: .72rem; color: var(--text-faint); letter-spacing: .16em;
  pointer-events: none; animation: hintFade 4s ease-in-out infinite;
}
@keyframes hintFade { 0%,100% { opacity: .4; } 50% { opacity: .8; } }

/* ============================================================
   内容面板（点击罗盘段位后滑入）
   ============================================================ */
.luopan-panel {
  position: fixed; top: 0; right: -420px; bottom: 0; width: 400px; max-width: 90vw;
  z-index: 50; background: rgba(18,22,48,.95); backdrop-filter: blur(20px);
  border-left: 1px solid var(--line-strong);
  box-shadow: -10px 0 40px rgba(0,0,0,.4);
  transition: right .4s var(--ease); overflow-y: auto;
}
.luopan-panel.open { right: 0; }
.luopan-panel .lp-close {
  position: absolute; top: 1rem; right: 1rem; font-size: 1.8rem; color: var(--cream-dim);
  cursor: pointer; line-height: 1; z-index: 2; transition: color var(--dur) var(--ease);
}
.luopan-panel .lp-close:hover { color: var(--vermillion); }
.luopan-panel .lp-content { padding: 2.5rem 2rem 2rem; }

.lp-content .lp-glyph {
  font-family: "Ma Shan Zheng", serif; font-size: 3rem; line-height: 1;
  margin-bottom: .5rem; text-shadow: 0 0 16px currentColor;
}
.lp-content .lp-title {
  font-family: "Noto Serif SC", serif; font-weight: 700; font-size: 1.4rem;
  letter-spacing: .14em; color: var(--cream); margin-bottom: .3rem;
}
.lp-content .lp-sub { font-size: .78rem; color: var(--gold); letter-spacing: .16em; margin-bottom: 1rem; }
.lp-content .lp-desc { color: var(--cream-dim); font-size: .88rem; line-height: 1.9; margin-bottom: 1.2rem; }
.lp-content .lp-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.lp-content .lp-tags span {
  font-size: .72rem; color: var(--cream); background: var(--surface);
  border: 1px solid var(--line); padding: .18rem .65rem; letter-spacing: .06em;
}
.lp-content .lp-btn {
  display: inline-block; padding: .65rem 2rem; font-family: "Noto Serif SC", serif;
  font-size: .92rem; letter-spacing: .2em; color: var(--lacquer);
  background: var(--gold); border-radius: 1px; text-decoration: none;
  box-shadow: var(--glow-gold); transition: all var(--dur) var(--ease);
}
.lp-content .lp-btn:hover { background: var(--gold-bright); transform: translateY(-2px); }

/* ============================================================
   工具页样式（兼容旧 class，漆器主题）
   ============================================================ */
.scroll-progress { position: fixed; top: 0; left: 0; height: 1px; width: 0; z-index: 9999; background: var(--gold); transition: width .08s linear; }
.outline { color: var(--cream-dim); }
.outline-red { color: var(--vermillion); }
.outline-blue { color: var(--indigo); }
.outline-green { color: var(--jade); }
.seal { display: inline-block; font-family: "Noto Serif SC", serif; color: var(--cream); background: var(--vermillion); padding: .16em .55em; font-size: .78rem; letter-spacing: .14em; border-radius: 1px; box-shadow: var(--glow-red); }

/* HUD 状态栏 */
.hud-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: .5rem 1.6rem; padding-top: calc(.5rem + env(safe-area-inset-top, 0px)); font-size: .72rem; letter-spacing: .12em; color: var(--cream-dim); background: rgba(10,14,30,.7); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.hud-bar .hud-left, .hud-bar .hud-right { display: flex; gap: 1.2rem; align-items: center; }
.hud-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: var(--glow-gold); animation: pulse 2s ease-in-out infinite; }
.hud-bar .hud-sep { color: var(--text-faint); }
@keyframes pulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }

/* 顶栏 */
.site-header { border-bottom: 1px solid var(--line); background: rgba(10,14,30,.6); backdrop-filter: blur(12px); position: sticky; top: 0; z-index: 20; }
.header-inner { max-width: 1200px; margin: 0 auto; padding: .7rem 1.6rem; display: flex; align-items: center; justify-content: space-between; gap: var(--sp4); }
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--cream); }
.brand .taiji { width: 32px; height: 32px; flex: none; color: var(--gold); filter: drop-shadow(0 0 6px rgba(212,160,96,.4)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text .site-name { font-family: "Noto Serif SC", serif; font-weight: 700; font-size: 1.15rem; letter-spacing: .24em; }
.brand-text .site-sub { font-size: .58rem; color: var(--text-faint); letter-spacing: .36em; }
.nav { display: flex; gap: .15rem; align-items: center; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--cream-dim); font-size: .82rem; letter-spacing: .14em; padding: .3rem .6rem; position: relative; white-space: nowrap; transition: color var(--dur) var(--ease); }
.nav a:hover { color: var(--gold); }
.nav a.active { color: var(--gold); text-shadow: var(--glow-gold); }
.nav a.active::after { content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .05rem; height: 1px; background: var(--gold); box-shadow: var(--glow-gold); }
.subnav-bar { border-top: 1px solid var(--line); background: rgba(10,14,30,.4); }
.subnav-bar .subnav { max-width: 1200px; margin: 0 auto; padding: .35rem 1.6rem; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.subnav a { text-decoration: none; color: var(--text-faint); font-size: .76rem; letter-spacing: .12em; padding: .1rem .55rem; white-space: nowrap; transition: color var(--dur) var(--ease); }
.subnav a:hover { color: var(--gold); }
.subnav a.active { color: var(--gold); }

main { flex: 1; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 3rem 1.6rem 5rem; }
.wrap--wide { max-width: 1400px; }

/* 页面题头 */
.page-head { position: relative; margin: 0 0 var(--sp6); padding: var(--sp4) var(--sp6) var(--sp5) 0; border-bottom: 1px solid var(--line-strong); }
.page-head .ph-seal { display: inline-block; font-family: "Noto Serif SC", serif; font-size: .78rem; letter-spacing: .28em; color: var(--vermillion); margin-bottom: .5rem; }
.page-head h1 { font-family: "Noto Serif SC", serif; font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.6rem); letter-spacing: .18em; line-height: 1.1; margin: .4rem 0 .3rem; display: inline; color: var(--cream); }
.page-head .ph-rule { display: flex; align-items: center; gap: var(--sp4); margin: var(--sp4) 0 0; }
.page-head .ph-rule::before { content: ""; width: 22px; height: 1px; background: var(--vermillion); flex: none; }
.page-head .ph-rule::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.page-head .ph-sub { color: var(--cream-dim); font-size: .85rem; letter-spacing: .14em; margin-top: var(--sp3); }
.page-head .ph-intro { color: var(--cream-dim); font-size: .9rem; max-width: 760px; margin-top: var(--sp4); line-height: 1.9; }
.page-head .ph-intro b, .page-head .ph-intro span.on { color: var(--vermillion); }
.side-label { font-family: "Noto Serif SC", serif; writing-mode: vertical-rl; letter-spacing: .34em; font-size: .72rem; color: var(--text-faint); }

.section-title { font-family: "Noto Serif SC", serif; font-weight: 700; font-size: clamp(1.5rem, 4vw, 2.2rem); letter-spacing: .14em; margin: 0 0 var(--sp5); padding-left: 14px; position: relative; color: var(--cream); }
.section-title::before { content: ""; position: absolute; left: 0; top: .3em; bottom: .3em; width: 2px; background: var(--vermillion); }
.section-title small { font-size: .68rem; color: var(--text-faint); letter-spacing: .3em; font-weight: 400; margin-right: .4em; }

.storyboard { position: relative; margin: 0 0 var(--sp6); }
.storyboard .sb-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-family: "Noto Serif SC", serif; font-size: .74rem; letter-spacing: .28em; color: var(--vermillion); }
.storyboard .sb-eyebrow::before { content: ""; width: 5px; height: 5px; background: var(--vermillion); border-radius: 50%; }
.storyboard .sb-title { font-family: "Noto Serif SC", serif; font-weight: 700; font-size: clamp(1.8rem, 4.5vw, 2.8rem); letter-spacing: .14em; line-height: 1.15; margin: .6rem 0 .4rem; color: var(--cream); }
.storyboard .sb-rule { display: flex; align-items: center; gap: var(--sp4); margin: var(--sp4) 0; }
.storyboard .sb-rule::before, .storyboard .sb-rule::after { content: ""; height: 1px; flex: 1; background: var(--line-strong); }
.storyboard .sb-rule::after { flex: 0 0 46%; }
.storyboard .sb-rule .sb-diamond { width: 6px; height: 6px; background: var(--vermillion); transform: rotate(45deg); flex: none; }
.storyboard .sb-sub { color: var(--cream-dim); letter-spacing: .2em; font-size: .9rem; }
.storyboard .intro { max-width: 760px; color: var(--cream-dim); font-size: .9rem; margin-top: var(--sp4); }

.asym { display: grid; gap: var(--sp6); align-items: start; }
.asym--73 { grid-template-columns: 7fr 3fr; } .asym--37 { grid-template-columns: 3fr 7fr; }
.asym--64 { grid-template-columns: 6fr 4fr; } .asym--46 { grid-template-columns: 4fr 6fr; }
.asym--55 { grid-template-columns: 1fr 1fr; } .asym-side { position: sticky; top: 5rem; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 1px; padding: 1.9rem 1.5rem 1.6rem; text-decoration: none; color: var(--cream); position: relative; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--glow-gold); }
.card .glyph { font-family: "Ma Shan Zheng", serif; font-size: 2.2rem; color: var(--vermillion); margin-bottom: .4rem; text-shadow: 0 0 8px rgba(196,54,42,.3); }
.card h3 { font-family: "Noto Serif SC", serif; font-weight: 700; font-size: 1.2rem; letter-spacing: .14em; margin-bottom: .4rem; }
.card p { color: var(--cream-dim); font-size: .88rem; }
.card .tag { display: inline-block; margin-top: .8rem; font-size: .68rem; color: var(--gold); background: var(--surface-2); border: 1px solid var(--line); border-radius: 1px; padding: .12rem .6rem; letter-spacing: .12em; }
.card--blue { border-color: var(--indigo); border-left: 2px solid var(--indigo-bright); }
.card--yellow { border-color: var(--earth); border-left: 2px solid var(--earth); }
.card--red { border-color: var(--vermillion); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--sp4); margin-top: var(--sp4); }

.pillars { margin-top: var(--sp4); }
.pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp5); }
.pillar { position: relative; display: flex; flex-direction: column; gap: .6rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1px; padding: 2rem 1.5rem 1.6rem; text-decoration: none; color: var(--cream); overflow: hidden; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.pillar:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.pillar-glyph { font-family: "Ma Shan Zheng", serif; font-size: 2.4rem; color: var(--pillar-accent, var(--vermillion)); line-height: 1; margin-bottom: .2rem; }
.p-dao { --pillar-accent: var(--vermillion); } .p-yi { --pillar-accent: var(--jade); } .p-wen { --pillar-accent: var(--indigo-bright); }
.pillar h3 { font-family: "Noto Serif SC", serif; font-weight: 700; font-size: 1.4rem; letter-spacing: .18em; }
.pillar p { color: var(--cream-dim); font-size: .88rem; line-height: 1.8; }
.pillar-links { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .5rem; }
.pillar-links span { font-size: .7rem; color: var(--cream-dim); background: var(--surface-2); border: 1px solid var(--line); border-radius: 1px; padding: .18rem .65rem; }

.famen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp3); }
.famen { display: flex; flex-direction: column; align-items: center; gap: .2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 1px; padding: 1.2rem .8rem 1rem; text-decoration: none; color: var(--cream); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.famen:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.fm-glyph { font-family: "Ma Shan Zheng", serif; font-size: 2rem; line-height: 1; color: var(--fm-color, var(--vermillion)); margin-bottom: .4rem; }
.famen:nth-child(3n+1) .fm-glyph { --fm-color: var(--vermillion); }
.famen:nth-child(3n+2) .fm-glyph { --fm-color: var(--gold); }
.famen:nth-child(3n+3) .fm-glyph { --fm-color: var(--jade); }
.famen h4 { font-family: "Noto Serif SC", serif; font-weight: 700; font-size: 1rem; letter-spacing: .1em; }
.famen p { font-size: .7rem; color: var(--text-faint); text-align: center; }

.guide { margin-bottom: var(--sp6); }
.guide-head { margin-bottom: var(--sp4); }
.guide-eyebrow { display: inline-block; font-size: .68rem; letter-spacing: .28em; color: var(--jade); margin-bottom: .2rem; }
.guide-title { font-family: "Noto Serif SC", serif; font-weight: 700; font-size: 1.6rem; letter-spacing: .14em; color: var(--cream); }
.guide-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp4); }
.guide-step { display: flex; flex-direction: column; gap: .3rem; background: transparent; border-top: 1px solid var(--line-strong); padding: 1.2rem 0; text-decoration: none; color: var(--cream); transition: border-color var(--dur) var(--ease); }
.guide-step:hover { border-top-color: var(--vermillion); }
.guide-num { font-family: "Noto Serif SC", serif; font-size: 1.6rem; color: var(--text-faint); }
.guide-step h3 { font-family: "Noto Serif SC", serif; font-weight: 700; font-size: 1.15rem; letter-spacing: .16em; }
.guide-step p { color: var(--cream-dim); font-size: .82rem; }

.article { max-width: 860px; }
.article h2 { font-family: "Noto Serif SC", serif; font-weight: 700; font-size: 1.4rem; letter-spacing: .12em; color: var(--cream); margin: 2.4rem 0 1rem; padding-left: .9rem; border-left: 2px solid var(--vermillion); }
.article h3 { font-family: "Noto Serif SC", serif; font-weight: 700; font-size: 1.1rem; margin: 1.6rem 0 .6rem; }
.article p { margin: .6rem 0; color: var(--cream); }
.article .note { background: var(--surface); border: 1px solid var(--line); border-left: 2px solid var(--earth); border-radius: 1px; padding: .9rem 1.1rem; margin: 1.2rem 0; font-size: .88rem; color: var(--cream-dim); }

.bookshelf { margin-top: var(--sp6); }
.bs-cat { font-family: "Noto Serif SC", serif; font-weight: 700; font-size: 1.2rem; letter-spacing: .16em; color: var(--cream); margin: 2.4rem 0 1rem; padding-left: 14px; position: relative; }
.bs-cat::before { content: ""; position: absolute; left: 0; top: .25em; bottom: .25em; width: 2px; background: var(--indigo-bright); }
.bs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp4); }
.book-card { display: flex; flex-direction: column; gap: .6rem; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 1px; padding: .8rem; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.book-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.bk-spine { height: 110px; display: flex; align-items: center; justify-content: center; padding: .5rem; border-bottom: 1px solid var(--line); }
.bk-title { writing-mode: vertical-rl; font-family: "Ma Shan Zheng", serif; color: var(--cream); letter-spacing: .18em; font-size: 1.1rem; max-height: 96px; }
.bk-info { display: flex; flex-direction: column; gap: .15rem; }
.bk-name { color: var(--cream); font-size: .92rem; } .bk-author { color: var(--text-faint); font-size: .74rem; }
.bk-q { display: inline-block; align-self: flex-start; margin-top: .3rem; font-size: .62rem; padding: .02rem .45rem; border-radius: 1px; border: 1px solid var(--line); }
.bk-q.q-2 { color: var(--earth); border-color: var(--earth); } .bk-q.q-3 { color: var(--vermillion); border-color: var(--vermillion); }

.zy-search { max-width: 900px; margin: 0 auto var(--sp5); }
.zy-input { width: 100%; padding: .8rem 1.1rem; font-size: .95rem; font-family: inherit; color: var(--cream); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 1px; outline: none; }
.zy-input:focus { border-color: var(--gold); box-shadow: var(--glow-gold); }
.zy-cats { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.zy-chip { font-size: .78rem; color: var(--cream); background: var(--surface); border: 1px solid var(--line); border-radius: 1px; padding: .24rem .85rem; cursor: pointer; }
.zy-chip:hover { border-color: var(--gold); } .zy-chip.active { background: var(--gold); color: var(--lacquer); border-color: var(--gold); }
.zy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .9rem; }
.zy-card { background: var(--surface); border: 1px solid var(--line); border-radius: 1px; padding: 1rem 1.1rem; cursor: pointer; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.zy-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.zy-card .zy-name { font-family: "Ma Shan Zheng", serif; font-size: 1.3rem; color: var(--vermillion); }
.zy-card .zy-sub { font-size: .74rem; color: var(--earth); }
.zy-card .zy-gx { font-size: .82rem; color: var(--cream-dim); margin-top: .5rem; }
.zy-empty { color: var(--cream-dim); text-align: center; padding: 2rem; grid-column: 1/-1; }
.zy-detail { background: var(--surface); border: 1px solid var(--line); border-radius: 1px; padding: 1.8rem 2rem; max-width: 900px; margin: 2rem auto 0; }
.zy-detail .zd-head { text-align: center; margin-bottom: 1.4rem; }
.zy-detail .zd-name { font-family: "Ma Shan Zheng", serif; font-size: 2rem; color: var(--vermillion); }
.zy-detail .zd-sub { color: var(--cream-dim); font-size: .88rem; }
.zy-row { display: flex; gap: var(--sp4); padding: .7rem 0; border-bottom: 1px dashed var(--line-strong); }
.zy-row:last-child { border-bottom: none; }
.zy-row .zl { flex: none; width: 88px; color: var(--earth); font-family: "Noto Serif SC", serif; font-size: .85rem; }
.zy-row .zv { flex: 1; color: var(--cream); font-size: .9rem; }
.zy-row .zv .tag-pill { display: inline-block; font-size: .76rem; border: 1px solid var(--line-strong); border-radius: 1px; padding: .05rem .6rem; margin: .12rem .3rem; }
.zy-back { display: inline-block; margin-bottom: 1rem; color: var(--gold); cursor: pointer; font-size: .85rem; }

.table-wrap { overflow-x: auto; margin: 1.2rem 0; }
table.know { width: 100%; border-collapse: collapse; font-size: .86rem; background: var(--surface); }
table.know th, table.know td { border: 1px solid var(--line); padding: .5rem .6rem; text-align: center; }
table.know th { background: var(--surface-2); color: var(--gold); font-weight: 600; }
table.know tr:nth-child(even) td { background: var(--lacquer-2); }

.tool-card { background: var(--surface); border: 1px solid var(--line); border-radius: 1px; padding: 2rem; max-width: 660px; margin: 0 auto; }
.tool-card > h2, .t-sec { font-family: "Noto Serif SC", serif; font-weight: 700; color: var(--gold); margin-bottom: 1.2rem; font-size: 1.1rem; }
.form-row { margin-bottom: 1.3rem; }
.form-row label { display: block; font-family: "Noto Serif SC", serif; font-size: .85rem; margin-bottom: .4rem; color: var(--cream-dim); }
.form-row select, .form-row input { width: 100%; padding: .6rem .8rem; font-size: .95rem; font-family: inherit; color: var(--cream); background: var(--lacquer-2); border: 1px solid var(--line-strong); border-radius: 1px; outline: none; }
.form-row select:focus, .form-row input:focus { border-color: var(--gold); box-shadow: var(--glow-gold); }
.form-row .hint { font-size: .76rem; color: var(--text-faint); }
.btn { display: inline-block; width: 100%; padding: .78rem; font-family: "Noto Serif SC", serif; font-size: 1rem; letter-spacing: .28em; color: var(--lacquer); background: var(--gold); border: none; border-radius: 1px; cursor: pointer; box-shadow: var(--glow-gold); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.btn:hover { transform: translateY(-2px); background: var(--gold-bright); }
.btn:disabled { opacity: .3; } .btn--blue { background: var(--indigo-bright); color: var(--cream); }

.result { margin-top: 2rem; display: none; } .result.show { display: block; }
.result .steps { display: flex; justify-content: center; gap: var(--sp4); margin: 1.4rem 0; flex-wrap: wrap; }
.result .steps .step { background: var(--surface); border: 1px solid var(--line); padding: .7rem 1.1rem; text-align: center; min-width: 90px; }
.result .steps .step .lbl { font-size: .68rem; color: var(--text-faint); } .result .steps .step .val { font-family: "Ma Shan Zheng", serif; font-size: 1.15rem; color: var(--gold); }
.result .judge { margin-top: 1.2rem; padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--line); border-left: 2px solid var(--earth); font-size: .92rem; }
.result .judge b { color: var(--vermillion); }
.verdict { display: flex; align-items: center; justify-content: center; gap: var(--sp4); flex-wrap: wrap; padding: 1rem 1.2rem; margin-bottom: var(--sp4); border: 1px solid var(--line); }
.verdict .v-ji { font-family: "Ma Shan Zheng", serif; font-size: 1.8rem; padding: .15rem .8rem; color: var(--lacquer); box-shadow: var(--glow-gold); }
.verdict .v-txt { font-size: .98rem; color: var(--cream-dim); }
.verdict.ji { background: rgba(62,139,90,.08); } .verdict.ji .v-ji { background: var(--jade); }
.verdict.xiong { background: rgba(196,54,42,.08); } .verdict.xiong .v-ji { background: var(--vermillion); box-shadow: var(--glow-red); }
.verdict.ping { background: rgba(201,160,64,.08); } .verdict.ping .v-ji { background: var(--earth); }
.verdict.plain { background: var(--surface-2); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin: .8rem 0 1.1rem; }
.chip { font-size: .82rem; background: var(--surface); border: 1px solid var(--line); padding: .18rem .7rem; }
.chip b { color: var(--gold); }
.chip.wx-mu { border-color: var(--w-mu); color: var(--w-mu); } .chip.wx-huo { border-color: var(--w-huo); color: var(--w-huo); }
.chip.wx-tu { border-color: var(--w-tu); color: var(--w-tu); } .chip.wx-jin { border-color: var(--w-jin); color: var(--w-jin); } .chip.wx-shui { border-color: var(--w-shui); color: var(--w-shui); }
.dutopic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.dutopic { background: var(--surface); border: 1px solid var(--line); padding: .6rem .7rem; }
.dutopic .dt-label { font-size: .7rem; color: var(--gold); } .dutopic .dt-val { font-size: .88rem; color: var(--cream); }
.wx-bars { margin: .6rem 0 1.2rem; }
.wx-bar-row { display: flex; align-items: center; gap: .6rem; margin: .4rem 0; }
.wx-bar-row .wx-name { width: 1.6em; font-family: "Ma Shan Zheng", serif; } .wx-bar-row .wx-track { flex: 1; height: 14px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.wx-bar-row .wx-fill { height: 100%; } .wx-bar-row .wx-num { width: 2.2em; text-align: right; font-size: .82rem; color: var(--cream-dim); }
.flow { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.flow .node { background: var(--surface); border: 1px solid var(--line); padding: .6rem 1rem; text-align: center; }
.flow .node .fn-lbl { font-size: .68rem; color: var(--gold); } .flow .node .fn-val { font-family: "Ma Shan Zheng", serif; font-size: 1.4rem; color: var(--cream); }
.flow .arrow { align-self: center; color: var(--gold); }
.result-title { font-family: "Noto Serif SC", serif; font-size: .95rem; margin: 1.2rem 0 .3rem; padding-left: 12px; border-left: 2px solid var(--gold); }
.duan-cites { margin: 1.3rem 0; } .duan-cite { color: var(--cream-dim); font-size: .9rem; padding: .35rem .6rem; } .duan-cite-src { color: var(--text-faint); font-size: .78rem; }

.site-footer { border-top: 1px solid var(--line); text-align: center; padding: 2rem 1rem 2.4rem; color: var(--text-faint); font-size: .76rem; background: var(--lacquer-2); position: relative; }
.site-footer::before { content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%); width: 48px; height: 1px; background: var(--gold); }
.site-footer .foot-line { margin: .2rem 0; }
.site-footer .foot-poem { font-family: "Noto Serif SC", serif; color: var(--cream-dim); font-size: .82rem; margin-top: .6rem; }

.terminal { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: rgba(10,14,30,.85); backdrop-filter: blur(16px); border-top: 1px solid var(--line-strong); padding: .8rem 1.6rem; font-family: "JetBrains Mono", monospace; font-size: .88rem; display: none; }
.terminal .term-line { display: flex; align-items: center; gap: .6rem; color: var(--cream); }
.terminal .term-prompt { color: var(--gold); } .terminal .term-input { flex: 1; background: none; border: none; outline: none; color: var(--cream); font-family: inherit; font-size: inherit; }
.terminal .term-hint { font-size: .68rem; color: var(--text-faint); margin-top: .3rem; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal--left { transform: translateX(-24px); } .reveal--right { transform: translateX(24px); }
.reveal--left.in, .reveal--right.in { transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

@media (max-width: 900px) { .asym--73, .asym--37, .asym--64, .asym--46, .asym--55 { grid-template-columns: 1fr; } .asym-side { position: static; } }
@media (max-width: 760px) { .luopan-brand .lb-sub { display: none; } .luopan-panel { width: 100vw; right: -100vw; } }
@media (max-width: 640px) { .header-inner { flex-direction: column; } .nav { flex-wrap: wrap; justify-content: center; } .tool-card { padding: 1.4rem; } }
@media (hover: none) { .card:hover, .pillar:hover, .famen:hover { transform: none; } }

/* ===================== 养生膳食 · 食材配伍 ===================== */
.sl-sec { margin-top: var(--sp8); padding-top: var(--sp7); border-top: 1px solid var(--line); }
.sl-head { text-align: center; margin-bottom: var(--sp6); position: relative; }
.sl-head h2 { font-family: "Ma Shan Zheng", serif; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--gold); margin: 0 0 .4rem; font-weight: 400; letter-spacing: .04em; }
.sl-head h2 .outline { font-size: .46em; color: var(--earth); letter-spacing: .2em; vertical-align: .35em; margin-left: .5em; }
.sl-seal { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: var(--sp3);
  font-family: "Ma Shan Zheng", serif; font-size: 1.5rem; color: var(--cream);
  background: linear-gradient(150deg, var(--vermillion), var(--vermillion-deep)); border-radius: 2px; box-shadow: var(--glow-red); }

/* 食材卡片 */
.sl-card .sl-herbs { margin-top: .6rem; padding-top: .55rem; border-top: 1px dashed var(--line-strong);
  font-size: .76rem; color: var(--earth); line-height: 1.65; }
.sl-card:hover .sl-herbs { color: var(--gold-bright); }

/* 详情：可配中药 */
.sl-p-title { margin: var(--sp6) 0 var(--sp4); padding-bottom: .5rem; border-bottom: 1px solid var(--line-strong);
  font-family: "Noto Serif SC", serif; font-size: 1.05rem; color: var(--gold); letter-spacing: .06em; }
.sl-p-count { font-size: .74rem; color: var(--earth); letter-spacing: .1em; margin-left: .5em; }
.sl-p-list { display: grid; gap: .8rem; }

.sl-p { background: var(--surface-2); border: 1px solid var(--line); border-left: 2px solid var(--jade);
  border-radius: 1px; padding: .9rem 1.1rem; cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.sl-p:hover { border-color: var(--line-strong); border-left-color: var(--gold); background: var(--surface); }
.sl-p-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp3); }
.sl-p-name { font-family: "Ma Shan Zheng", serif; font-size: 1.3rem; color: var(--jade-bright); }
.sl-p:hover .sl-p-name { color: var(--gold-bright); }
.sl-p-tip { flex: none; font-size: .68rem; color: var(--text-faint); letter-spacing: .08em; }
.sl-p:hover .sl-p-tip { color: var(--earth); }
.sl-p-why { font-size: .86rem; color: var(--cream); line-height: 1.8; margin: .4rem 0 .55rem; }
.sl-p-row { display: flex; gap: .7rem; font-size: .8rem; line-height: 1.7; }
.sl-p-lbl { flex: none; width: 2.2em; color: var(--earth); }
.sl-p-val { flex: 1; color: var(--cream-dim); }

/* 展开的药材详情 */
.sl-p-herb { margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed var(--line-strong); }
.sl-h-row { display: flex; gap: var(--sp4); padding: .45rem 0; }
.sl-h-row .zl { flex: none; width: 76px; color: var(--earth); font-family: "Noto Serif SC", serif; font-size: .8rem; }
.sl-h-row .zv { flex: 1; color: var(--cream); font-size: .84rem; line-height: 1.75; }
.sl-p-loading, .sl-p-none { font-size: .8rem; color: var(--text-faint); padding: .5rem 0; }

@media (max-width: 640px) {
  .sl-p-head { flex-direction: column; gap: .15rem; }
  .sl-h-row { flex-direction: column; gap: .1rem; }
  .sl-h-row .zl { width: auto; }
}

/* ===== 膳食库来源徽标 / 分页 / 来源说明 ===== */
.sl-badge { display: inline-block; margin-left: .5rem; padding: .08rem .38rem; border-radius: 1px;
  font-family: "Noto Serif SC", serif; font-size: .6rem; font-weight: 400; letter-spacing: .1em;
  vertical-align: middle; border: 1px solid transparent; }
.sl-badge-a { color: var(--gold-bright); border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  background: color-mix(in srgb, var(--gold) 10%, transparent); }
.sl-badge-b { color: var(--jade-bright); border-color: color-mix(in srgb, var(--jade) 45%, transparent);
  background: color-mix(in srgb, var(--jade) 10%, transparent); }
.sl-badge-c { color: var(--text-faint); border-color: var(--line); background: transparent; }

.sl-more { grid-column: 1 / -1; text-align: center; padding: .95rem; cursor: pointer;
  border: 1px dashed var(--line); border-radius: 1px; color: var(--text-dim);
  font-family: "Noto Serif SC", serif; font-size: .82rem; letter-spacing: .12em;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.sl-more:hover { border-color: var(--gold); color: var(--gold-bright); border-style: solid; }

.sl-src-note { margin: var(--sp4) 0 0; padding: .6rem .85rem; border-left: 2px solid var(--line-strong);
  background: var(--surface-2); color: var(--text-faint); font-size: .74rem; line-height: 1.75; }

/* ===== 道医页：养生膳食独立页入口卡 ===== */
.sl-entry { margin: 2.6rem 0 0; }
.sl-entry-card { display: flex; align-items: center; gap: 1.1rem; text-decoration: none;
  padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-radius: 1px;
  background: var(--surface-2); color: var(--text); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.sl-entry-card:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 7%, var(--surface-2)); }
.sl-entry-seal { flex: 0 0 auto; width: 3rem; height: 3rem; display: grid; place-items: center;
  font-family: "Noto Serif SC", serif; font-size: 1.5rem; color: var(--gold-bright);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 1px; background: var(--surface); }
.sl-entry-body { display: flex; flex-direction: column; gap: .35rem; }
.sl-entry-title { font-family: "Noto Serif SC", serif; font-size: 1.18rem; letter-spacing: .04em; }
.sl-entry-desc { font-size: .82rem; color: var(--text-dim); line-height: 1.75; }

/* ===== 道医页：养生功法页 gongfa ===== */
.gf-shi-title { margin: 1.8rem 0 .9rem; font-family: "Noto Serif SC", serif; font-size: 1.1rem; letter-spacing: .04em;
  color: var(--gold-bright); border-left: 3px solid var(--gold); padding-left: .7rem; }
.gf-shi-list { display: flex; flex-direction: column; gap: .7rem; }
.gf-shi { display: flex; gap: .9rem; padding: .85rem 1rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 1px; }
.gf-shi-no { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
  font-family: "Noto Serif SC", serif; font-size: 1rem; color: var(--gold-bright);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); border-radius: 50%; background: var(--surface); }
.gf-shi-body { flex: 1; }
.gf-shi-name { font-family: "Noto Serif SC", serif; font-size: 1rem; letter-spacing: .03em; margin-bottom: .3rem; }
.gf-shi-yao { font-size: .88rem; color: var(--text-dim); line-height: 1.85; }

/* ===== 道医页：经络腧穴页 jingluo ===== */
.jl-tabs { display: flex; gap: .6rem; margin: 1.4rem 0 .4rem; flex-wrap: wrap; }
.jl-tab { padding: .55rem 1.2rem; border: 1px solid var(--line); border-radius: 1px; cursor: pointer;
  font-size: .9rem; color: var(--text-dim); background: var(--surface-2); transition: all var(--dur) var(--ease); }
.jl-tab.active { color: var(--ink); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--surface-2)); }
.jl-mai { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin-top: 1.2rem; }
.jl-mai-card { padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 1px; background: var(--surface-2); }
.jl-mai-name { font-family: "Noto Serif SC", serif; font-size: 1.06rem; color: var(--gold-bright); margin-bottom: .35rem; }
.jl-mai-sub { font-size: .8rem; color: var(--text-faint); margin-bottom: .5rem; }
.jl-mai-bn { font-size: .84rem; color: var(--text-dim); line-height: 1.75; }
.jl-xue-tip { font-size: .82rem; color: var(--text-dim); margin: .8rem 0 .2rem; }
.sl-entry-desc b { color: var(--gold-bright); font-weight: 600; }
/* ===== 智能辨证：食疗/穴位深链、方剂库跳转 ===== */
.zd-link { display: inline; color: var(--gold-bright); text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--gold) 50%, transparent); padding-bottom: 1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.zd-link:hover { color: var(--gold); border-bottom-color: var(--gold); }
.zd-sub-note { font-size: .82rem; color: var(--text-faint); margin-top: .4rem; line-height: 1.7; }

/* ===== 全站检索 ===== */
.search-status { padding: 0 .2rem; }
.sr-group { margin: 1.6rem 0 0; }
.sr-cat { font-size: .95rem; font-weight: 500; letter-spacing: .12em; color: var(--gold, #c8a24a); margin: 0 0 .55rem; }
.sr-cat small { font-weight: 400; letter-spacing: 0; opacity: .6; margin-left: .6rem; font-size: .72rem; }
.sr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .5rem; }
.sr-item { display: block; padding: .5rem .7rem; border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: 6px; background: var(--surface, rgba(255,255,255,.03)); text-decoration: none;
  transition: border-color .18s ease, background .18s ease; }
.sr-item:hover { border-color: var(--gold, #c8a24a); background: rgba(200,162,74,.08); }
.sr-t { display: block; font-size: .9rem; color: var(--text, #e8e2d4); }
.sr-sub { display: block; font-size: .72rem; opacity: .6; margin-top: .15rem; line-height: 1.5; }

/* ===== 养生主题 ===== */
.zt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .8rem; margin: 1.5rem 0; }
.zt-card { display: block; padding: 1rem .9rem; border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: 10px; background: var(--surface, rgba(255,255,255,.03)); text-decoration: none;
  text-align: center; transition: border-color .18s ease, transform .18s ease; }
.zt-card:hover { border-color: var(--gold, #c8a24a); transform: translateY(-2px); }
.zt-seal { display: inline-flex; width: 2.4rem; height: 2.4rem; align-items: center; justify-content: center;
  border: 1.5px solid var(--cinnabar, #b03a2e); border-radius: 6px; color: var(--cinnabar, #b03a2e);
  font-size: 1.15rem; font-weight: 500; margin-bottom: .55rem; }
.zt-name { display: block; font-size: 1rem; font-weight: 500; color: var(--text, #e8e2d4); }
.zt-desc { display: block; font-size: .72rem; opacity: .55; margin-top: .35rem; line-height: 1.6; }
.zt-detail { padding: 1.4rem; }
.zt-loading { opacity: .6; font-size: .85rem; }
.zt-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.zt-head h3 { margin: 0 0 .3rem; font-size: 1.25rem; color: var(--text, #e8e2d4); }
.zt-intro { margin: 0; font-size: .82rem; opacity: .72; line-height: 1.7; }
.zt-note { margin-top: 1.2rem; font-size: .74rem; opacity: .6; line-height: 1.7;
  border-left: 2px solid var(--cinnabar, #b03a2e); padding-left: .7rem; }

/* ===== 待整理书目折叠 ===== */
.bk-none { opacity: .55; font-size: .8rem; margin: 0 0 1rem; }
.bk-pending { margin: 2rem 0; border: 1px dashed var(--line-strong, rgba(255,255,255,.25)); border-radius: 10px;
  background: rgba(255,255,255,.02); }
.bk-pending summary { cursor: pointer; padding: .85rem 1rem; font-size: .9rem; color: var(--text, #e8e2d4);
  user-select: none; list-style: none; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.bk-pending summary::-webkit-details-marker { display: none; }
.bk-pending summary::before { content: "▸"; transition: transform .18s ease; opacity: .6; }
.bk-pending[open] summary::before { transform: rotate(90deg); }
.bk-pend-sub { font-size: .72rem; opacity: .5; }
.bk-plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .35rem; padding: 0 1rem 1rem; }
.bk-prow { display: flex; justify-content: space-between; gap: .6rem; padding: .4rem .6rem;
  border-radius: 5px; text-decoration: none; font-size: .8rem; color: var(--text-dim, #b5ad9a);
  transition: background .15s ease, color .15s ease; }
.bk-prow:hover { background: rgba(200,162,74,.08); color: var(--gold, #c8a24a); }
.bk-pmeta { opacity: .5; font-size: .7rem; white-space: nowrap; }

/* ===== 书 ↔ 工具互链 ===== */
.xg-wrap { margin-top: 2.5rem; }
.xg-sec { border-top: 1px solid var(--line, rgba(255,255,255,.12)); padding-top: 1.2rem; }
.xg-h { font-size: .95rem; font-weight: 500; letter-spacing: .12em; color: var(--gold, #c8a24a); margin: 0 0 .6rem; }
.xg-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .5rem; }
.xg-item { display: block; padding: .55rem .7rem; border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: 6px; text-decoration: none; transition: border-color .18s ease; }
.xg-item:hover { border-color: var(--gold, #c8a24a); }
.xg-t { display: block; font-size: .85rem; color: var(--text, #e8e2d4); }
.xg-sub { display: block; font-size: .7rem; opacity: .55; margin-top: .12rem; }
.xg-note { font-size: .72rem; opacity: .5; margin-top: .7rem; }
.reader-xg { max-width: 760px; margin: 2rem auto 0; padding: 0 1rem 2rem; }

/* ===== 智能辨证：经典出处 / 病机鉴别调护 / 学派徽标 ===== */
.zd-pai { display: inline-block; margin-left: .6rem; padding: .12rem .5rem; border-radius: 4px;
  font-size: .68rem; letter-spacing: .1em; vertical-align: middle; }
.zd-pai-jing { border: 1px solid var(--gold, #c8a24a); color: var(--gold, #c8a24a); background: rgba(200,162,74,.08); }
.zd-pai-hou { border: 1px solid var(--line, rgba(255,255,255,.2)); color: var(--text-dim, #b5ad9a); }
.zd-yuan { margin: .9rem 0 .2rem; padding: .7rem .85rem; border-left: 2px solid var(--gold, #c8a24a);
  background: rgba(200,162,74,.05); }
.zd-yuan-lbl { display: block; font-size: .68rem; letter-spacing: .16em; color: var(--gold, #c8a24a); margin-bottom: .3rem; }
.zd-yuan-txt { display: block; font-size: .8rem; line-height: 1.8; opacity: .85; }
.zd-deep { margin: 1rem 0 .2rem; }
.zd-deep-item { display: flex; gap: .7rem; padding: .35rem 0; font-size: .8rem; line-height: 1.8; }
.zd-deep-lbl { flex: 0 0 2.6rem; color: var(--gold, #c8a24a); letter-spacing: .1em; font-size: .74rem; }
.zd-deep-txt { flex: 1; opacity: .8; }

/* ===== 古籍正文 · 跨模块深链 ===== */
.gl { color: var(--gold, #c8a24a); text-decoration: none; cursor: pointer;
  border-bottom: 1px dotted color-mix(in srgb, var(--gold, #c8a24a) 55%, transparent);
  padding: 0 1px; transition: background .15s ease, color .15s ease; }
.gl:hover { background: rgba(200,162,74,.16); border-bottom-style: solid; }
.gl-fang { color: #d8b45c; }

/* ===================== 八字排盘 · 专业版 ===================== */
.bz-grid {
  display: grid;
  grid-template-columns: 3.4rem repeat(4, 1fr);
  gap: 2px;
  margin: .4rem 0 1rem;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.bz-grid > div {
  background: var(--surface);
  padding: .5rem .25rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .12rem;
  min-height: 2.1rem;
}
.bz-grid > div.bz-rowlbl { background: var(--surface-2) !important; color: var(--gold);
  font-family: "Noto Serif SC", serif; font-size: .74rem; justify-content: center; }
.bz-grid > div.bz-head { background: var(--surface-2) !important;
  font-family: "Ma Shan Zheng", serif; font-size: 1.1rem; color: var(--cream); }
.bz-grid > div.bz-col-day { background: color-mix(in srgb, var(--vermillion) 16%, var(--surface)); }
.bz-grid > div.bz-head.bz-col-day { color: var(--vermillion); }
.bz-char { font-family: KaiTi, "Noto Serif SC", serif; font-size: 1.95rem; line-height: 1; font-weight: 700; }
.bz-char.sm { font-size: 1.25rem; }
.bz-ss { font-size: .72rem; color: var(--cream-dim); letter-spacing: .02em; }
.bz-zang { font-family: KaiTi, serif; font-size: 1.05rem; letter-spacing: 1px; display: flex; gap: .12rem; }
.bz-zang .ben { font-weight: 700; font-size: 1.2rem; }
.bz-zang .bz-dot { color: var(--text-faint); }
.bz-cs { font-size: .82rem; color: var(--earth); }
.bz-ny { font-size: .74rem; color: var(--cream-dim); }
/* 五行文字色（天干/地支/藏干按五行着色） */
.wx-word.mu { color: var(--w-mu); } .wx-word.huo { color: var(--w-huo); }
.wx-word.tu { color: var(--w-tu); } .wx-word.jin { color: var(--w-jin); } .wx-word.shui { color: var(--w-shui); }
/* 五行填充条补色 */
.wx-fill.mu { background: var(--w-mu); } .wx-fill.huo { background: var(--w-huo); }
.wx-fill.tu { background: var(--w-tu); } .wx-fill.jin { background: var(--w-jin); } .wx-fill.shui { background: var(--w-shui); }
/* 神煞 / 空亡 卡片 */
.shensha { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: .5rem; margin-top: .5rem; }
.ss-card { background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: .5rem .65rem; text-align: center; }
.ss-card .ss-name { font-size: .76rem; color: var(--gold); letter-spacing: .04em; }
.ss-card .ss-val { font-family: KaiTi, serif; font-size: 1.3rem; color: var(--cream); margin: .15rem 0; line-height: 1.2; }
.ss-card .ss-note { font-size: .66rem; color: var(--text-faint); }
.ss-card.hit { border-color: var(--vermillion); box-shadow: var(--glow-red); }
.ss-card.hit .ss-val { color: var(--vermillion); }
.ss-card.hit .ss-note { color: var(--vermillion); }
.gl-xue { color: #7fb0c9; border-bottom-color: rgba(127,176,201,.6); }
.gl-zheng { color: #c98f9f; border-bottom-color: rgba(201,143,159,.6); }
.gl-shi { color: #8fb56b; border-bottom-color: rgba(143,181,107,.6); }
.gl-yao { color: #b9a6d4; border-bottom-color: rgba(185,166,212,.55); }
.gl-tip { font-size: .74rem; opacity: .62; line-height: 1.7; margin: 0 0 1rem;
  padding: .55rem .75rem; border-left: 2px solid var(--line-strong, rgba(255,255,255,.25));
  background: rgba(255,255,255,.03); }

/* ===== 八字专业版 · 三垣 / 用神 / 流年 ===== */
.sanyuan { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .4rem 0 .2rem; }
.sy-title { font-weight: 700; color: var(--ink-soft); letter-spacing: .15em; margin-right: .3rem; }
.sy-cell { display: inline-flex; align-items: baseline; gap: .35rem; padding: .3rem .7rem; border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: 999px; background: rgba(255,255,255,.03); }
.sy-lbl { font-size: .8rem; opacity: .7; }
.sy-gz b { font-family: var(--kai, KaiTi, "STKaiti", serif); font-size: 1.15rem; margin: 0 .1rem; }

.yongshen { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ys-tag { font-weight: 700; padding: .25rem .7rem; border-radius: 999px; border: 1px solid var(--line-strong, rgba(255,255,255,.25)); }
.ys-tag.strong { color: var(--vermillion); border-color: var(--vermillion); }
.ys-tag.weak { color: var(--brass-light, #d9b878); border-color: var(--brass-light, #d9b878); }
.ys-row { display: inline-flex; align-items: center; gap: .35rem; }
.ys-k { font-size: .82rem; opacity: .65; }
.ys-pill { padding: .15rem .6rem; border-radius: 999px; font-weight: 700; border: 1px solid currentColor; }
.ys-pill.yong { color: var(--vermillion); }
.ys-pill.xi { color: var(--brass-light, #d9b878); }
.ys-pill.ji { color: #7fa9c9; opacity: .85; }

.ln-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }
.ln-row input { width: auto; flex: 1 1 7rem; }
.btn.sm { padding: .45rem .9rem; font-size: .85rem; }
.ln-item { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .4rem 0; border-bottom: 1px dashed var(--line, rgba(255,255,255,.12)); }
.ln-lbl { font-weight: 700; color: var(--ink-soft); min-width: 2.5rem; }
.ln-ss { font-size: .8rem; opacity: .8; }

/* ===== 八字合婚 ===== */
.hh-cols { display: flex; flex-wrap: wrap; gap: 1rem; }
.hh-side { flex: 1 1 16rem; border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: 10px; padding: .8rem 1rem; background: rgba(255,255,255,.02); }
.hh-side-title { font-weight: 700; color: var(--ink-soft); margin-bottom: .5rem; }
.hh-panels { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; }
.hh-pan { flex: 1 1 14rem; border: 1px solid var(--line, rgba(255,255,255,.14)); border-radius: 10px; padding: .8rem 1rem; }
.hh-pan-a { border-left: 3px solid var(--brass-light, #d9b878); }
.hh-pan-b { border-left: 3px solid var(--vermillion); }
.hh-pan-h { font-weight: 700; margin-bottom: .5rem; }
.hh-zhu { display: flex; align-items: center; gap: .35rem; padding: .2rem 0; }
.hh-zhu-lbl { width: 1.4rem; opacity: .7; }
.hh-zhu-ss { font-size: .78rem; opacity: .8; margin-left: .3rem; }
.hh-nayin { font-size: .8rem; opacity: .8; margin-top: .4rem; }
.hh-block { margin: .4rem 0 1rem; }
.hh-line { padding: .25rem 0; }
.hh-tag { display: inline-block; padding: .2rem .7rem; border-radius: 999px; margin: .2rem .3rem 0 0; font-weight: 700; border: 1px solid currentColor; }
.hh-tag.good { color: #8fb56b; }
.hh-tag.bad { color: var(--vermillion); }
.hh-tag.warn { color: #d9b878; }
.hh-note { font-size: .82rem; opacity: .8; margin-top: .4rem; }
.hh-sum { font-size: .9rem; line-height: 1.8; opacity: .9; }
.wx-fill2 { position: relative; top: -4px; opacity: .55; }

/* ===== 六爻 旺衰色 ===== */
.ws-ji { color: #3f7d4f; font-weight: 700; }
.ws-xiong { color: var(--cinnabar); font-weight: 700; }
.ws-ping { color: var(--ink-soft); }
.ly-fushen { padding: .4rem .6rem; border: 1px dashed var(--line); border-radius: 6px; background: rgba(255,255,255,.02); }

.hx-cz { text-align:center; margin-top:.6rem; font-size:.85rem; color:var(--ink-soft); font-family:"KaiTi","STKaiti",serif; }

/* ===== 断语·排盘原理折叠面板（各法门共用） ===== */
.duan-algo { margin-top: 1rem; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.03); overflow: hidden; }
.duan-algo > summary { cursor: pointer; padding: .55rem .8rem; font-family: "KaiTi","STKaiti",serif; letter-spacing: .06em; color: var(--cinnabar-deep); font-weight: 700; user-select: none; }
.duan-algo > summary::before { content: "▸ "; }
.duan-algo[open] > summary::before { content: "▾ "; }
.duan-algo .algo-body { padding: 0 .8rem .7rem; }
.duan-algo .algo-item { padding: .4rem 0; border-top: 1px dashed var(--line); }
.duan-algo .algo-item:first-child { border-top: none; }
.duan-algo .algo-h { font-weight: 700; color: var(--ink); margin-bottom: .2rem; }
.duan-algo .algo-p { font-size: .85rem; line-height: 1.7; color: var(--ink-soft); }

/* ===== 紫微 大限/流年 面板 ===== */
.zw-daxian h3, .zw-liu-panel h3 { font-family: "KaiTi","STKaiti",serif; color: var(--cinnabar-deep); letter-spacing: .08em; font-size: 1.05rem; margin-bottom: .6rem; border-left: 3px solid var(--cinnabar); padding-left: .5rem; }
.dx-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.dx-item { border: 1px solid var(--line); border-radius: 5px; padding: .3rem .55rem; font-size: .8rem; background: var(--card); }
.dx-item .dx-age { color: var(--cinnabar); font-weight: 700; }
.dx-item.is-ming { background: #fbf3e8; border-color: var(--cinnabar); }

/* ===== 导航登录入口 ===== */
.nav a.auth-link { color: var(--gold); border: 1px solid var(--line-strong); border-radius: 1px; padding: .22rem .62rem; }
.nav a.auth-link:hover { background: rgba(176,122,46,.12); }