/* ============================================================
   易简 PC 门户 · 方向 A「星象深空」
   令牌沿用抖音小程序品牌 DNA：墨 / 金 / 朱砂 / 六爻线稿
   ============================================================ */

:root {
  /* ── 语义令牌 ───────────────────────────────────────────────────
     三套外观的色值只在下面三段里各写一次；此处只做默认指向。
     换肤 = 换一组变量，组件样式一行不动。 */
  --bg:      var(--n-bg);
  --surface: var(--n-surface);
  --fg:      var(--n-fg);
  --muted:   var(--n-muted);
  --border:  var(--n-border);
  --accent:  var(--n-accent);

  --accent-soft: color-mix(in oklch, var(--accent) 14%, transparent);
  --fg-soft:     color-mix(in oklch, var(--fg) 6%, transparent);
  --gold-line:   var(--n-gold-line);
  --gold-deep:   var(--n-gold-deep);
  /* 六爻线稿：形状表阴阳（实条 / 断段），亮度表点亮状态 */
  --hex-line:    var(--n-hex-line);    /* 阳爻 · 亮实条 */
  --hex-line-dim:var(--n-hex-line-dim);/* 阴爻 · 暗断段（断口加宽，一眼可辨） */
  --hex-unlit:   var(--n-hex-unlit);   /* 卦详情大线稿 · 未点亮的爻 */
  --hex-lit:     var(--n-hex-lit);     /* 卦详情大线稿 · 点亮的爻 */
  --seal-off:    var(--n-seal-off);    /* 卦印地图 · 未点亮的爻 */
  --gold-hi:     var(--n-gold-hi);
  --gold-mid:    var(--n-gold-mid);
  --seal:        var(--n-seal);
  --seal-on:     var(--n-seal-on);
  --glow:        var(--n-glow);
  --pure:        #ffffff;
  --device-1:    var(--n-device-1);
  --device-2:    var(--n-device-2);
  --btn-on:      var(--n-btn-on);
  --star-op:     var(--n-star-op);     /* 星尘场：只夜墨亮 */
  --star-ink:    #f2eee5;             /* 星点颜色（只在夜墨出现） */
  --hero-glow:   var(--n-hero-glow);
  --member-grad: var(--n-member-grad);
  --shadow-pop:    var(--n-shadow-pop);
  --shadow-device: var(--n-shadow-device);
  --shadow-soft:   var(--n-shadow-soft);

  /* ── 夜墨（较原稿略提亮） ─────────────────────────────────── */
  --n-bg:        #0c0c14;
  --n-surface:   #17171f;
  --n-fg:        #f2eee5;
  --n-muted:     #a49c8d;
  --n-border:    rgba(232, 206, 150, 0.20);
  --n-accent:    #e8c98a;
  --n-gold-line: #f0dcae;
  --n-gold-deep: #b8904e;
  --n-hex-line:    #eccd8c;
  --n-hex-line-dim:#bb9a58;
  --n-hex-unlit:   #a98b52;
  --n-hex-lit:     #fdefd2;
  --n-seal-off:    #97875f;
  --n-gold-hi:     #f8ecca;
  --n-gold-mid:    #dcb878;
  --n-seal:        #b85743;
  --n-seal-on:     #f9f2e8;
  --n-glow:        rgba(236, 205, 140, 0.28);
  --n-device-1:    #2c2b36;
  --n-device-2:    #17161f;
  --n-btn-on:      #191509;
  --n-star-op:     1;
  --n-hero-glow:   radial-gradient(circle at 50% 50%, rgba(236,205,140,.13), rgba(236,205,140,.04) 42%, transparent 68%);
  --n-member-grad: linear-gradient(140deg, rgba(184,87,67,.28), rgba(236,205,140,.12));
  --n-shadow-pop:    0 14px 34px rgba(0,0,0,.6);
  --n-shadow-device: 0 30px 70px rgba(0,0,0,.6);
  --n-shadow-soft:   0 6px 18px rgba(0,0,0,.45);

  /* ── 羊皮纸 ────────────────────────────────────────────────── */
  --p-bg:        #e8ddc3;
  --p-surface:   #f7f1e1;
  --p-fg:        #241f14;
  --p-muted:     #6b6249;
  --p-border:    rgba(92, 71, 38, 0.24);
  --p-accent:    #8a5f1f;
  --p-gold-line: #b08a42;
  --p-gold-deep: #6f4f1d;
  --p-hex-line:    #8a6220;
  --p-hex-line-dim:#c1a76e;
  --p-hex-unlit:   #c3b492;
  --p-hex-lit:     #66410f;
  --p-seal-off:    #b0a184;
  --p-gold-hi:     #d3ae5f;
  --p-gold-mid:    #a37c2b;
  --p-seal:        #9c3a26;
  --p-seal-on:     #fbf3e4;
  --p-glow:        rgba(138, 95, 31, 0.26);
  --p-device-1:    #3a332a;
  --p-device-2:    #201b15;
  --p-btn-on:      #fdf8ee;
  --p-star-op:     0;
  --p-hero-glow:   radial-gradient(circle at 50% 50%, rgba(138,95,31,.17), rgba(138,95,31,.06) 42%, transparent 68%);
  --p-member-grad: linear-gradient(140deg, rgba(156,58,38,.18), rgba(138,95,31,.16));
  --p-shadow-pop:    0 14px 34px rgba(74,56,26,.22);
  --p-shadow-device: 0 30px 70px rgba(74,56,26,.24);
  --p-shadow-soft:   0 6px 18px rgba(74,56,26,.24);

  /* ── 朱砂 ──────────────────────────────────────────────────── */
  --z-bg:        #f5e4de;
  --z-surface:   #fffaf7;
  --z-fg:        #2b1613;
  --z-muted:     #7d6058;
  --z-border:    rgba(193, 53, 42, 0.22);
  --z-accent:    #c1352a;
  --z-gold-line: #cf6a4a;
  --z-gold-deep: #93432c;
  --z-hex-line:    #c1352a;
  --z-hex-line-dim:#e0a691;
  --z-hex-unlit:   #e0c0b1;
  --z-hex-lit:     #86231a;
  --z-seal-off:    #cfa897;
  --z-gold-hi:     #ec9070;
  --z-gold-mid:    #c0503a;
  --z-seal:        #c1352a;
  --z-seal-on:     #fff5ef;
  --z-glow:        rgba(193, 53, 42, 0.28);
  --z-device-1:    #3a2622;
  --z-device-2:    #211512;
  --z-btn-on:      #fff7f2;
  --z-star-op:     0;
  --z-hero-glow:   radial-gradient(circle at 50% 50%, rgba(193,53,42,.15), rgba(193,53,42,.05) 42%, transparent 68%);
  --z-member-grad: linear-gradient(140deg, rgba(193,53,42,.22), rgba(212,138,108,.16));
  --z-shadow-pop:    0 14px 34px rgba(90,36,26,.20);
  --z-shadow-device: 0 30px 70px rgba(90,36,26,.22);
  --z-shadow-soft:   0 6px 18px rgba(90,36,26,.22);

  /* 纸纹噪点：叠在纯色线稿上，避免大色块显得死板 */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.45'/%3E%3C/svg%3E");

  /* 色卡预览：直接引用三套色板，不另写颜色 */
  --sw-n-1: var(--n-bg);   --sw-n-2: var(--n-surface); --sw-n-3: var(--n-accent); --sw-n-4: var(--n-seal);
  --sw-p-1: var(--p-bg);   --sw-p-2: var(--p-surface); --sw-p-3: var(--p-accent); --sw-p-4: var(--p-seal);
  --sw-z-1: var(--z-bg);   --sw-z-2: var(--z-surface); --sw-z-3: var(--z-accent); --sw-z-4: var(--z-seal);

  --font-display: 'Iowan Old Style', 'Songti SC', 'STSong', 'Noto Serif SC', Georgia, serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Noto Sans SC', 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;

  /* 字号：只放大文字，不改布局 */
  --fs-scale: 1;
  --fs-h1: calc(clamp(40px, 4.8vw, 72px) * var(--fs-scale));
  --fs-h2: calc(clamp(28px, 3.2vw, 44px) * var(--fs-scale));
  --fs-h3: calc(20px * var(--fs-scale));
  --fs-lead: calc(18px * var(--fs-scale));
  --fs-body: calc(16px * var(--fs-scale));
  --fs-meta: calc(13px * var(--fs-scale));

  --gap-xs: 8px; --gap-sm: 12px; --gap-md: 20px; --gap-lg: 32px;
  --gap-xl: 56px; --gap-2xl: 104px;
  --container: 1200px; --gutter: 40px;
  --radius: 10px; --radius-lg: 16px;
}

/* ── 外观切换 ───────────────────────────────────────────────────
   夜墨是 :root 的默认指向，这里只需覆盖另外两套。 */
html[data-theme="parchment"] {
  --bg: var(--p-bg);              --surface: var(--p-surface);
  --fg: var(--p-fg);              --muted:   var(--p-muted);
  --border: var(--p-border);      --accent:  var(--p-accent);
  --gold-line: var(--p-gold-line);   --gold-deep: var(--p-gold-deep);
  --hex-line: var(--p-hex-line);     --hex-line-dim: var(--p-hex-line-dim);
  --hex-unlit: var(--p-hex-unlit);   --hex-lit: var(--p-hex-lit);
  --seal-off: var(--p-seal-off);     --gold-hi: var(--p-gold-hi);
  --gold-mid: var(--p-gold-mid);     --seal: var(--p-seal);
  --seal-on: var(--p-seal-on);       --glow: var(--p-glow);
  --device-1: var(--p-device-1);     --device-2: var(--p-device-2);
  --btn-on: var(--p-btn-on);         --star-op: var(--p-star-op);
  --hero-glow: var(--p-hero-glow);   --member-grad: var(--p-member-grad);
  --shadow-pop: var(--p-shadow-pop); --shadow-device: var(--p-shadow-device);
  --shadow-soft: var(--p-shadow-soft);
}
html[data-theme="zhu"] {
  --bg: var(--z-bg);              --surface: var(--z-surface);
  --fg: var(--z-fg);              --muted:   var(--z-muted);
  --border: var(--z-border);      --accent:  var(--z-accent);
  --gold-line: var(--z-gold-line);   --gold-deep: var(--z-gold-deep);
  --hex-line: var(--z-hex-line);     --hex-line-dim: var(--z-hex-line-dim);
  --hex-unlit: var(--z-hex-unlit);   --hex-lit: var(--z-hex-lit);
  --seal-off: var(--z-seal-off);     --gold-hi: var(--z-gold-hi);
  --gold-mid: var(--z-gold-mid);     --seal: var(--z-seal);
  --seal-on: var(--z-seal-on);       --glow: var(--z-glow);
  --device-1: var(--z-device-1);     --device-2: var(--z-device-2);
  --btn-on: var(--z-btn-on);         --star-op: var(--z-star-op);
  --hero-glow: var(--z-hero-glow);   --member-grad: var(--z-member-grad);
  --shadow-pop: var(--z-shadow-pop); --shadow-device: var(--z-shadow-device);
  --shadow-soft: var(--z-shadow-soft);
}

/* ── 字号三档：与小程序一致（标准 / 大 / 特大） ───────────────── */
html[data-fs="lg"] { --fs-scale: 1.1; }
html[data-fs="xl"] { --fs-scale: 1.2; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.65;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
main, header, footer { position: relative; z-index: 1; }

/* ── layout ── */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(64px, 9vw, var(--gap-2xl)); position: relative; }
.section + .section { border-top: 1px solid var(--border); }
.stack { display: flex; flex-direction: column; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }
.grid-2-1 { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap-xl); align-items: start; }

/* ── type ── */
h1, .h1 { font-family: var(--font-display); font-size: var(--fs-h1); line-height: 1.12; letter-spacing: .01em; font-weight: 600; }
h2, .h2 { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.24; letter-spacing: .015em; font-weight: 600; }
h3, .h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.45; }
.serif { font-family: var(--font-display); }
.lead { font-size: var(--fs-lead); line-height: 1.8; color: var(--muted); max-width: 46ch; margin: 0; }
.eyebrow {
  font-family: var(--font-mono); font-size: calc(12px * var(--fs-scale)); letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 var(--gap-md);
}
.meta { font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--muted); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── chrome ── */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: color-mix(in oklch, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.topnav.stuck { border-bottom-color: var(--border); background: color-mix(in oklch, var(--bg) 92%, transparent); }
.topnav-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 16px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-logo {
  width: 36px; height: 36px; flex: none; display: block;
  border-radius: 9px; object-fit: contain;
  box-shadow: 0 0 0 1px rgba(201,169,97,.25), var(--shadow-soft);
}
.seal {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--seal); color: var(--seal-on); border-radius: 7px;
  font-family: var(--font-display); font-size: calc(19px * var(--fs-scale)); line-height: 1;
  box-shadow: 0 0 0 1px color-mix(in oklch, var(--seal) 60%, transparent), var(--shadow-soft);
}
.brand-name { font-family: var(--font-display); font-size: calc(20px * var(--fs-scale)); font-weight: 600; letter-spacing: .06em; }
.brand-sub { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale)); color: var(--muted); letter-spacing: .14em; }
.topnav nav { display: flex; gap: var(--gap-lg); }
.topnav nav a { font-size: calc(14px * var(--fs-scale)); color: var(--muted); transition: color .18s ease; }
.topnav nav a:hover, .topnav nav a[aria-current="page"] { color: var(--fg); }

.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px;
  border-radius: 999px; border: 1px solid transparent; font-size: calc(15px * var(--fs-scale)); font-weight: 500;
  white-space: nowrap;
  transition: transform .06s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--btn-on); border-color: var(--accent); box-shadow: 0 8px 30px var(--glow); }
.btn-primary:hover { background: color-mix(in oklch, var(--accent) 88%, var(--pure)); box-shadow: 0 10px 40px var(--glow); }
.btn-ghost { background: transparent; color: var(--muted); border-color: var(--border); }
.btn-ghost:hover { color: var(--fg); border-color: color-mix(in oklch, var(--accent) 55%, transparent); background: var(--accent-soft); }
.btn-arrow::after { content: '→'; transition: transform .2s ease; }
.btn-arrow:hover::after { transform: translateX(3px); }
:where(a, button, input, select, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ── hero ── */
.stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: var(--star-op); transition: opacity .45s ease; }
.hero {
  min-height: 100svh; display: flex; align-items: center;
  padding-top: 124px; padding-bottom: 76px; position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; z-index: 0; left: 50%; top: 42%;
  width: min(900px, 92vw); aspect-ratio: 1; transform: translate(-50%, -50%);
  background: var(--hero-glow);
  pointer-events: none;
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.hero h1 { margin-bottom: var(--gap-md); }
.hero .lead { margin-bottom: var(--gap-lg); }
.hero-cta { display: inline-flex; gap: var(--gap-sm); flex-wrap: wrap; align-items: center; }
.hero-facts { display: flex; gap: var(--gap-lg); margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--border); }
.hero-facts div, .hero-facts a { display: flex; flex-direction: column; gap: 4px; }
.hero-facts a { transition: color .2s ease; }
.hero-facts a:hover span { color: var(--accent); }
.hero-facts b { font-family: var(--font-display); font-size: calc(28px * var(--fs-scale)); font-weight: 600; letter-spacing: -.01em; }
.hero-facts span { font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale)); letter-spacing: .16em; color: var(--muted); text-transform: uppercase; }
.scroll-hint { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale)); letter-spacing: .24em; color: var(--muted); text-transform: uppercase; }

/* ── 六爻线稿 ── */
.hex-stage { position: relative; display: grid; place-items: center; }
.hex-stage svg { width: min(420px, 78%); height: auto; overflow: visible; }
.hex-row { transform: scaleX(0); transform-origin: center; animation: line-in .95s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes line-in { to { transform: scaleX(1); } }
/* SVG 线稿统一挂纸纹颗粒（滤镜由 site.js 注入一次，全站复用）*/
.hex-stage svg, .mini-hex, .gm-cell .mini { filter: url(#yj-grain); }

/* 六爻线稿的填充由 site.js 生成时写在 rect 的 fill 属性上（指向同 svg 内的渐变），
   这里只负责光晕，避免 CSS 里写死 id 造成引用失效、线稿回退成黑块 */
.hex-row.yang rect { filter: drop-shadow(0 0 10px var(--glow)); }
.hex-ring { position: absolute; width: 108%; aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--border); pointer-events: none; }
.hex-ring.r2 { width: 128%; border-style: dashed; opacity: .5; animation: spin 46s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hex-caption { margin-top: 26px; text-align: center; }
.hex-caption .name { font-family: var(--font-display); font-size: calc(26px * var(--fs-scale)); letter-spacing: .06em; }
.hex-caption .quote { margin-top: 8px; font-family: var(--font-display); font-size: calc(16px * var(--fs-scale)); color: var(--muted); letter-spacing: .04em; }
.char { display: inline-block; opacity: 0; transform: translateY(26px); animation: char-in .9s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes char-in { to { opacity: 1; transform: none; } }

/* ── 卦列表行 ── */
.gua-row {
  display: grid; grid-template-columns: 64px 116px 1fr 96px; gap: var(--gap-lg);
  align-items: center; padding: 22px 0; border-top: 1px solid var(--border);
  transition: background .25s ease;
}
.gua-row:hover { background: var(--fg-soft); }
.gua-row .idx { font-family: var(--font-mono); font-size: calc(12px * var(--fs-scale)); color: var(--muted); }
.gua-row .gname { font-family: var(--font-display); font-size: calc(21px * var(--fs-scale)); letter-spacing: .04em; }
.gua-row .jtext { display: block; font-family: var(--font-display); font-size: calc(17px * var(--fs-scale)); color: var(--muted); letter-spacing: .02em; }
.gua-row .guaci { display: block; font-size: calc(14px * var(--fs-scale)); color: var(--muted); margin-top: 4px; }
.mini-hex { width: 78px; height: 42px; justify-self: end; }
.mini-hex rect { fill: var(--hex-line); transition: fill .25s ease; }
.mini-hex .off { fill: var(--hex-line-dim); }
.gua-row:hover .mini-hex rect, .gua-row:hover .mini-hex .off { fill: var(--accent); }
.gua-row:hover .mini-hex .off { fill: color-mix(in oklch, var(--accent) 30%, transparent); }

/* ── 卦象矩阵 ── */
.gm-cell .mini rect { fill: var(--hex-line); }
.gm-cell .mini .off { fill: var(--hex-line-dim); }
.gm-cell:hover .mini rect, .gm-cell:hover .mini .off { fill: var(--accent); }
.gm-cell:hover .mini .off { fill: color-mix(in oklch, var(--accent) 32%, transparent); }

/* ── 三步 ── */
.step { border-top: 1px solid var(--border); padding-top: 22px; }
.step .n { font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale)); letter-spacing: .2em; color: var(--muted); }
.step h3 { margin: 12px 0 10px; font-family: var(--font-display); font-size: calc(22px * var(--fs-scale)); letter-spacing: .04em; }
.step p { margin: 0 0 16px; color: var(--muted); font-size: calc(15px * var(--fs-scale)); }
.step .sample {
  border-left: 1px solid var(--border); padding-left: 16px;
  font-family: var(--font-display); font-size: calc(15px * var(--fs-scale)); color: var(--fg); line-height: 1.9;
}
.step .sample em { font-style: normal; color: var(--accent); }

/* ── 检索工具栏 ── */
.page-head { padding-top: 150px; padding-bottom: 8px; }
.search-box { position: relative; display: flex; align-items: center; margin-top: 8px; }
.search-box input {
  width: 100%; padding: 16px 18px 16px 48px; font: inherit; font-size: calc(17px * var(--fs-scale));
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: 999px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.search-box input::placeholder { color: var(--muted); }
.search-box input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search-box .ico { position: absolute; left: 18px; color: var(--muted); pointer-events: none; }
.search-box kbd {
  font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale)); line-height: 1.6; padding: 1px 6px;
  border: 1px solid var(--border); border-radius: 4px; color: var(--fg); background: var(--surface);
}
.filters { display: flex; flex-direction: column; gap: 18px; padding: 28px 0 24px; border-bottom: 1px solid var(--border); }
.filter-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.filter-row .k { font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale)); letter-spacing: .18em; color: var(--muted); text-transform: uppercase; min-width: 84px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--muted); font-size: calc(13px * var(--fs-scale)); font-family: var(--font-display);
  letter-spacing: .08em; transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.chip:hover { color: var(--fg); border-color: color-mix(in oklch, var(--accent) 50%, transparent); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--btn-on); }
.result-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-md); padding: 22px 0 6px; flex-wrap: wrap; }
.result-bar .count { font-family: var(--font-mono); font-size: calc(13px * var(--fs-scale)); color: var(--muted); }
.result-bar .count b { color: var(--fg); font-weight: 500; }
select {
  font: inherit; font-size: calc(13px * var(--fs-scale)); padding: 8px 34px 8px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--fg);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.empty { padding: 80px 0; text-align: center; color: var(--muted); }
.empty h3 { font-family: var(--font-display); font-size: calc(24px * var(--fs-scale)); color: var(--fg); margin-bottom: 10px; }
mark { background: color-mix(in oklch, var(--accent) 26%, transparent); color: var(--fg); border-radius: 2px; padding: 0 2px; }

/* ── 卦详情 ── */
.gua-stage { padding-top: 150px; padding-bottom: 40px; }
.breadcrumb { font-family: var(--font-mono); font-size: calc(12px * var(--fs-scale)); letter-spacing: .14em; color: var(--muted); margin-bottom: 30px; }
.breadcrumb a { color: var(--muted); transition: color .2s ease; }
.breadcrumb a:hover { color: var(--fg); }

.gua-head { text-align: center; margin-bottom: 46px; }
.gua-head .gname { font-family: var(--font-display); font-size: calc(clamp(42px, 5.2vw, 80px) * var(--fs-scale)); line-height: 1.08; letter-spacing: .12em; font-weight: 600; }
.gua-head .gsub { font-family: var(--font-mono); font-size: calc(12px * var(--fs-scale)); letter-spacing: .24em; color: var(--muted); margin-top: 16px; }
.gua-head .gjinju { font-family: var(--font-display); font-size: calc(20px * var(--fs-scale)); color: var(--accent); margin-top: 18px; line-height: 1.7; }

.hex-block { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.hex-block.all { grid-template-columns: 520px minmax(0, 1fr); }
.hex-block.all .annot { display: none; }
.hex-rows { display: flex; flex-direction: column; }
.hexrow {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 20px;
  height: var(--row-h, 86px); padding-inline: 6px; border-radius: 8px; cursor: pointer;
  transition: background .25s ease;
  opacity: 0; animation: row-in .85s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes row-in { from { opacity: 0; transform: translateY(18px) scaleX(.94); } to { opacity: 1; transform: none; } }
.hexrow .hn { font-family: var(--font-mono); font-size: calc(12px * var(--fs-scale)); letter-spacing: .14em; color: var(--muted); text-align: right; transition: color .25s ease; }
.hexrow .hb { display: flex; gap: 18px; height: 14px; width: 100%; }
.hexrow .hb i {
  display: block; height: 14px; border-radius: 3px; flex: 1;
  background-image: var(--grain), linear-gradient(90deg, var(--gold-deep), var(--gold-line) 38%, var(--gold-hi) 62%, var(--gold-mid));
  background-blend-mode: overlay, normal;
  transition: box-shadow .25s ease, filter .25s ease;
}
.hexrow:hover, .hexrow.lit { background: var(--accent-soft); }
.hexrow:hover .hn, .hexrow.lit .hn { color: var(--fg); }
.hexrow:hover .hb i, .hexrow.lit .hb i { box-shadow: 0 0 18px var(--glow); filter: brightness(1.12); }

.annot { border-left: 1px solid var(--border); padding-left: 32px; min-height: 320px; }
.annot .a-label { font-family: var(--fontono, monospace); }
.annot .a-label { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale)); letter-spacing: .22em; color: var(--muted); text-transform: uppercase; }
.annot .a-name { font-family: var(--font-mono); font-size: calc(13px * var(--fs-scale)); letter-spacing: .18em; color: var(--accent); margin-top: 14px; }
.annot .a-ci { font-family: var(--font-display); font-size: calc(21px * var(--fs-scale)); line-height: 1.75; margin: 12px 0 0; letter-spacing: .02em; }
.annot .a-g { font-family: var(--font-display); font-size: calc(16px * var(--fs-scale)); color: var(--accent); margin: 16px 0 0; line-height: 1.8; }
.annot .a-s { font-size: calc(13.5px * var(--fs-scale)); color: var(--muted); margin: 12px 0 0; padding-left: 14px; border-left: 1px solid var(--border); line-height: 1.85; }
.annot .a-hint { font-family: var(--font-display); font-size: calc(15px * var(--fs-scale)); color: var(--muted); margin-top: 14px; line-height: 1.9; }
.annot .a-back { font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale)); letter-spacing: .12em; color: var(--muted); background: none; border: 0; padding: 0; margin-bottom: 16px; }
.annot .a-back:hover { color: var(--fg); }

.yao-text { display: flex; flex-direction: column; }
.yao-text .trow {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 20px; align-items: center;
  height: var(--row-h, 86px); border-top: 1px solid var(--border); padding-inline: 6px;
  transition: background .25s ease;
}
.yao-text .trow .tn { font-family: var(--font-mono); font-size: calc(12px * var(--fs-scale)); letter-spacing: .14em; color: var(--muted); text-align: right; }
.yao-text .trow .tc { font-family: var(--font-display); font-size: calc(18px * var(--fs-scale)); line-height: 1.5; margin: 0; letter-spacing: .02em; }
.yao-text .trow .tg { font-family: var(--font-display); font-size: calc(14px * var(--fs-scale)); color: var(--accent); margin: 5px 0 0; }
.yao-text .trow.lit { background: var(--accent-soft); }

.gua-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; margin-top: 58px; }
.gua-notes .note { border-top: 1px solid var(--border); padding-top: 18px; }
.gua-notes .nl { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale)); letter-spacing: .22em; color: var(--muted); text-transform: uppercase; }
.gua-notes .nt { font-family: var(--font-display); font-size: calc(15.5px * var(--fs-scale)); line-height: 1.95; margin: 12px 0 0; color: var(--muted); }

/* ── 卦详情入场序列：卦名 → 卦辞 → 彖 → 象，六爻自下而上点亮 ── */
.gua-stage [data-seq] { opacity: 0; animation: seq-in .9s cubic-bezier(.16,1,.3,1) forwards; }
.gua-stage [data-seq="1"] { animation-delay: .1s; }
.gua-stage [data-seq="2"] { animation-delay: .45s; }
.gua-stage [data-seq="3"] { animation-delay: .75s; }
.gua-stage [data-seq="4"] { animation-delay: .95s; }
@keyframes seq-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.stage-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--border); }
.dnav { display: flex; gap: 12px; flex-wrap: wrap; }
.picker { margin-top: 32px; }
.picker label { display: block; font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale)); letter-spacing: .18em; color: var(--muted); text-transform: uppercase; margin-bottom: 10px; }
.blk { border-top: 1px solid var(--border); padding: 24px 0; }
.blk-label { font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale)); letter-spacing: .22em; color: var(--muted); text-transform: uppercase; display: block; margin-bottom: 12px; }
.blk-src { font-family: var(--font-display); font-size: calc(20px * var(--fs-scale)); line-height: 1.95; letter-spacing: .02em; }
.blk-src.small { font-size: calc(17px * var(--fs-scale)); color: var(--muted); }
.blk-gloss { font-family: var(--font-display); font-size: calc(16px * var(--fs-scale)); color: var(--muted); margin-top: 14px; line-height: 1.9; }
.deep { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-lg); padding: 30px; margin-top: 8px; }
.deep .dt { font-family: var(--font-display); font-size: calc(24px * var(--fs-scale)); letter-spacing: .06em; }
.deep .dc { font-family: var(--font-display); font-size: calc(16px * var(--fs-scale)); line-height: 2; color: var(--muted); margin-top: 18px; white-space: pre-wrap; }
.deep .dpending { font-family: var(--font-display); font-size: calc(16px * var(--fs-scale)); color: var(--muted); margin-top: 14px; }

/* ── 数据 / 引文 / 截图 ── */
.stat-num { font-family: var(--font-display); font-size: calc(clamp(52px, 6vw, 82px) * var(--fs-scale)); line-height: 1; letter-spacing: -.03em; color: var(--accent); font-weight: 600; }
.stat-label { color: var(--muted); font-size: calc(14px * var(--fs-scale)); margin-top: 10px; max-width: 22ch; }
.quote { font-family: var(--font-display); font-size: calc(clamp(24px, 2.4vw, 32px) * var(--fs-scale)); line-height: 1.5; max-width: 26ch; letter-spacing: .01em; }
.quote-mark { font-family: var(--font-display); font-size: calc(120px * var(--fs-scale)); line-height: .7; color: var(--accent); opacity: .2; margin-bottom: -24px; }
.quote-author { color: var(--muted); font-size: calc(14px * var(--fs-scale)); margin-top: var(--gap-md); }
.device-row { display: flex; gap: var(--gap-lg); flex-wrap: wrap; }
.device { width: 244px; margin: 0; border-radius: 26px; overflow: hidden; padding: 8px; background: linear-gradient(160deg, var(--device-1), var(--device-2)); border: 1px solid var(--border); box-shadow: var(--shadow-device); transition: transform .5s cubic-bezier(.16,1,.3,1); }
.device:hover { transform: translateY(-8px); }
.device img { width: 100%; height: auto; border-radius: 20px; }
.device figcaption { font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale)); letter-spacing: .14em; color: var(--muted); text-align: center; padding: 12px 0 6px; text-transform: uppercase; }

/* ── footer ── */
.pagefoot { padding-block: var(--gap-xl); color: var(--muted); font-size: calc(13px * var(--fs-scale)); border-top: 1px solid var(--border); }
.pagefoot .row-between { flex-wrap: wrap; gap: var(--gap-md); }
.pagefoot a { color: var(--muted); transition: color .2s ease; }
.pagefoot a:hover { color: var(--fg); }

/* ── reveal ── */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
[data-reveal].in { opacity: 1; transform: none; }

/* ── 卦象矩阵视图（卦库检索） ── */
.view-switch { display: flex; gap: 8px; }
.gm-wrap { overflow-x: auto; padding-bottom: 14px; }
.gm {
  display: grid;
  grid-template-columns: 46px repeat(8, minmax(94px, 1fr));
  gap: 6px; min-width: 880px;
}
.gm-corner { }
.gm-col, .gm-row {
  display: grid; place-items: center; padding: 6px 0;
  background: transparent; border: 0;
  font-family: var(--font-display); font-size: calc(15px * var(--fs-scale)); letter-spacing: .12em;
  color: var(--muted); cursor: pointer; border-radius: 6px;
  transition: color .2s ease, background .2s ease;
}
.gm-col:hover, .gm-row:hover { color: var(--fg); background: var(--fg-soft); }
.gm-col.on, .gm-row.on { color: var(--btn-on); background: var(--accent); }
.gm-cell {
  border: 1px solid var(--border); background: var(--surface); border-radius: 8px;
  padding: 10px 8px 9px; display: flex; flex-direction: column; align-items: center; gap: 5px;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, opacity .25s ease;
}
.gm-cell:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.gm-cell .cn { font-family: var(--font-display); font-size: calc(14px * var(--fs-scale)); letter-spacing: .04em; text-align: center; }
.gm-cell .ci { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale)); color: var(--muted); }
.gm-cell .mini { width: 100%; height: 26px; }
.gm-cell:hover .mini rect, .gm-cell:hover .mini .off { fill: var(--accent); }
.gm-cell.dim { opacity: .22; pointer-events: none; }
.gm-cell.focus { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); }
.gm-cell.blank { border-style: dashed; opacity: .12; pointer-events: none; }
.resume {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px;
  padding: 7px 16px; border: 1px solid var(--border); border-radius: 999px;
  font-family: var(--font-mono); font-size: calc(12px * var(--fs-scale)); letter-spacing: .1em; color: var(--muted);
}
.resume[hidden] { display: none; }
.resume a { color: var(--accent); transition: opacity .2s ease; }
.resume a:hover { opacity: .75; }
.gm-tip {
  position: fixed; z-index: 70; pointer-events: none; opacity: 0;
  max-width: 250px; padding: 11px 14px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--accent);
  box-shadow: var(--shadow-pop);
  transition: opacity .16s ease;
}
.gm-tip.on { opacity: 1; }
.gm-tip .tn { font-family: var(--font-display); font-size: calc(15px * var(--fs-scale)); letter-spacing: .04em; }
.gm-tip .tj { font-family: var(--font-display); font-size: calc(13px * var(--fs-scale)); color: var(--muted); margin-top: 5px; line-height: 1.7; }
.gm-tip .tc { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale)); color: var(--muted); margin-top: 7px; letter-spacing: .14em; }

/* ── 沉浸阅读（卦详情六爻） ── */
.imm {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: color-mix(in oklch, var(--bg) 94%, transparent);
  backdrop-filter: blur(22px) saturate(1.2);
}
.imm.on { display: block; }
.imm-inner { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
.imm-top {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 18px 32px; border-bottom: 1px solid var(--border);
}
.imm-top .t { font-family: var(--font-display); font-size: calc(18px * var(--fs-scale)); letter-spacing: .1em; }
.imm-top .c { font-family: var(--font-mono); font-size: calc(12px * var(--fs-scale)); letter-spacing: .2em; color: var(--muted); }
.imm-stage { display: grid; place-items: center; padding: 28px 24px; overflow: hidden; }
.imm-card { max-width: 720px; text-align: center; }
.imm-card.anim-next { animation: imm-in-next .42s cubic-bezier(.16,1,.3,1); }
.imm-card.anim-prev { animation: imm-in-prev .42s cubic-bezier(.16,1,.3,1); }
@keyframes imm-in-next { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
@keyframes imm-in-prev { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: none; } }
.imm-glyph { display: flex; gap: 16px; justify-content: center; margin-bottom: 30px; }
.imm-glyph .g {
  height: 10px; width: 172px; border-radius: 2px;
  background-image: var(--grain), linear-gradient(90deg, var(--gold-deep), var(--gold-line) 38%, var(--gold-hi) 62%, var(--gold-mid));
  background-blend-mode: overlay, normal;
}
.imm-glyph.broken .g { width: 78px; }
.imm-yname { font-family: var(--font-mono); font-size: calc(12px * var(--fs-scale)); letter-spacing: .26em; color: var(--muted); }
.imm-ci { font-family: var(--font-display); font-size: calc(clamp(22px, 2.5vw, 33px) * var(--fs-scale)); line-height: 1.8; margin: 16px 0 0; letter-spacing: .02em; }
.imm-x { font-size: calc(14px * var(--fs-scale)); color: var(--muted); margin-top: 14px; }
.imm-g { font-family: var(--font-display); font-size: calc(18px * var(--fs-scale)); color: var(--accent); margin-top: 18px; }
.imm-s { font-size: calc(14px * var(--fs-scale)); color: var(--muted); margin-top: 12px; line-height: 1.9; }
.imm-bottom {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 16px 32px 24px; border-top: 1px solid var(--border);
}
.imm-arrow {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--fg); display: grid; place-items: center; font-size: calc(18px * var(--fs-scale));
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.imm-arrow:hover:not([disabled]) { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.imm-arrow[disabled] { opacity: .3; cursor: not-allowed; }
.imm-dots { display: flex; gap: 4px; }
.imm-dot {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid transparent;
  background: transparent; display: grid; place-items: center; padding: 0;
  transition: border-color .2s ease;
}
.imm-dot:hover { border-color: var(--border); }
.imm-dot i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-deep); transition: background .2s ease, transform .2s ease; }
.imm-dot[aria-current="true"] i { background: var(--accent); transform: scale(1.6); }



/* ── 权益对比表 ── */
.cmp-table { width: 100%; border-collapse: collapse; margin-top: clamp(10px, 1.6vh, 16px); }
.cmp-table th, .cmp-table td { padding: clamp(5px, 0.9vh, 8px) 10px; text-align: left; border-bottom: 1px solid var(--border); font-size: calc(14px * var(--fs-scale)); }
.cmp-table thead th { font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale)); letter-spacing: .16em; color: var(--muted); text-transform: uppercase; font-weight: 500; }
.cmp-table thead th.pick { color: var(--accent); }
.cmp-table tbody th { font-weight: 500; color: var(--fg); }
.cmp-table td { color: var(--muted); text-align: center; width: 26%; }
.cmp-table td.pick { color: var(--accent); }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-table .yes { color: var(--accent); font-size: calc(15px * var(--fs-scale)); }
.cmp-table .dash { color: var(--muted); opacity: .5; }

/* ── 会员页 ── */
.member-wrap { display: flex; flex-direction: column; justify-content: center; }
.member-head h1 { font-size: calc(clamp(28px, 3.2vw, 42px) * var(--fs-scale)); line-height: 1.15; }
.member-head .lead { margin-top: 10px; }
.member-state { margin-top: clamp(16px, 2.4vh, 28px); }
.member-grid { margin-top: clamp(18px, 2.8vh, 32px); gap: clamp(32px, 4vw, 56px); align-items: start; }
.member-grid .plans { margin-top: clamp(10px, 1.8vh, 18px); }
.member-grid .plan { padding: clamp(15px, 2.2vh, 22px); }
.member-grid .plan .p-price { margin-top: clamp(10px, 1.8vh, 16px); font-size: calc(clamp(26px, 2.6vw, 32px) * var(--fs-scale)); }
.member-grid .pay-label { margin-top: clamp(16px, 2.4vh, 26px); }
.member-grid .pay-methods { margin-top: clamp(10px, 1.6vh, 16px); }
.member-grid .pay-method { padding: clamp(8px, 1.3vh, 12px) 18px; }
.member-grid #pay-btn { margin-top: clamp(14px, 2.2vh, 22px); }
.member-grid .pay-note { margin-top: clamp(9px, 1.5vh, 15px); }
.member-list { margin-top: clamp(10px, 1.6vh, 16px); }
.member-list .me-row { padding: clamp(11px, 1.7vh, 16px) 0; }
.member-state .me-card { padding: clamp(16px, 2.4vh, 24px); }
.member-state .member-card { padding: clamp(18px, 2.6vh, 26px); }

/* ── 整屏页：登录 / 注册 / 会员 / 我的 共用 ─────────────────────────
   整页不滚动：外层 section 去掉自身内边距，容器撑满一屏，
   纵向内边距随视口高度收缩。 */
.fit-screen { padding-block: 0; }
.fit-screen .fit-inner {
  min-height: 100svh;
  padding-block: clamp(84px, 10vh, 112px) clamp(18px, 2.6vh, 30px);
}
.fit-screen.auth-layout .fit-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 88px); align-items: center;
}
.fit-screen.stack-layout .fit-inner { display: flex; flex-direction: column; justify-content: center; }


/* ── 我的页：两栏装下一屏 ── */
.me-head h1 { font-family: var(--font-display); font-size: calc(clamp(28px, 3.2vw, 42px) * var(--fs-scale)); letter-spacing: .1em; margin-top: 8px; }
.me-cols { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(26px, 3.6vw, 52px); align-items: start; margin-top: clamp(14px, 2.2vh, 24px); }
.me-cols .me-card { padding: clamp(16px, 2.4vh, 26px); }
.me-cols .member-card { padding: clamp(16px, 2.4vh, 26px); }
.fit-screen .me-row { padding: clamp(9px, 1.4vh, 14px) 0; }
.me-cols .me-list { margin-top: 0; }
.me-cols .me-list .me-row .mr-t { font-size: calc(15px * var(--fs-scale)); }
.me-orders { margin-top: clamp(12px, 2vh, 20px); }
.me-orders .me-row { padding: clamp(8px, 1.3vh, 12px) 0; }

/* ── 账户 · 登录 · 支付 · 我的 ─────────────────────────────────── */
.acct-link {
  font-family: var(--font-mono); font-size: calc(12px * var(--fs-scale)); letter-spacing: .12em; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: 7px 15px; white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.acct-link:hover { color: var(--fg); border-color: var(--accent); }
.acct-link.on { color: var(--accent); border-color: color-mix(in oklch, var(--accent) 55%, transparent); background: var(--accent-soft); }

/* 登录 */
/* 登录页：整屏装下，纵向节奏随视口高度收缩 */
.auth-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 88px); align-items: center; }
.auth-h1 { font-family: var(--font-display); font-size: calc(clamp(28px, 3.2vw, 42px) * var(--fs-scale)); line-height: 1.2; letter-spacing: .03em; }
.auth-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(20px, 3.4vh, 36px); }
.auth-benefits .b { border-top: 1px solid var(--border); padding-top: 14px; }
.auth-benefits .bn { font-family: var(--font-display); font-size: calc(28px * var(--fs-scale)); color: var(--accent); line-height: 1; }
.auth-benefits .bn.text { font-size: calc(21px * var(--fs-scale)); letter-spacing: .06em; }
.auth-benefits .bl { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale)); letter-spacing: .16em; color: var(--muted); margin-top: 8px; }
.auth-form {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(20px, 3vh, 30px); background: var(--surface);
}
.auth-field { margin-top: clamp(10px, 1.8vh, 18px); }
.auth-field label { display: block; font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale)); letter-spacing: .18em; color: var(--muted); text-transform: uppercase; margin-bottom: 7px; }
.auth-field input {
  width: 100%; padding: clamp(10px, 1.6vh, 13px) 14px; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: var(--radius); font: inherit; font-size: calc(15px * var(--fs-scale));
  transition: border-color .2s ease, box-shadow .2s ease;
}
.auth-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.auth-code { display: flex; gap: 10px; margin-top: 10px; }
.auth-code input { flex: 1; }
.auth-code button { white-space: nowrap; }
.auth-divider { display: flex; align-items: center; gap: 14px; margin: clamp(14px, 2.4vh, 22px) 0 clamp(12px, 1.8vh, 16px); color: var(--muted); font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale)); letter-spacing: .2em; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-agree { display: flex; gap: 10px; align-items: flex-start; margin-top: clamp(10px, 1.6vh, 16px); color: var(--muted); font-size: calc(13px * var(--fs-scale)); line-height: 1.7; }
.auth-agree .box { width: 17px; height: 17px; border: 1px solid var(--border); border-radius: 4px; display: grid; place-items: center; flex: none; margin-top: 3px; background: var(--bg); cursor: pointer; }
.auth-agree .box.on { background: var(--accent); border-color: var(--accent); color: var(--btn-on); }
.auth-agree a { color: var(--fg); border-bottom: 1px solid var(--border); }
.auth-note { font-size: calc(12.5px * var(--fs-scale)); color: var(--muted); margin-top: clamp(8px, 1.4vh, 14px); line-height: 1.7; }
.auth-msg { font-family: var(--font-mono); font-size: calc(12px * var(--fs-scale)); color: var(--accent); margin-top: clamp(8px, 1.4vh, 14px); min-height: 15px; }

/* 套餐与支付 */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 26px; }
.plan {
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px;
  background: var(--surface); cursor: pointer; text-align: left; color: inherit; font: inherit;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.plan:hover { border-color: color-mix(in oklch, var(--accent) 60%, transparent); transform: translateY(-2px); }
.plan[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.plan .p-name { font-family: var(--font-display); font-size: calc(21px * var(--fs-scale)); letter-spacing: .04em; }
.plan .p-desc { font-size: calc(13px * var(--fs-scale)); color: var(--muted); margin-top: 6px; }
.plan .p-price { font-family: var(--font-display); font-size: calc(32px * var(--fs-scale)); color: var(--accent); margin-top: 18px; line-height: 1; }
.plan .p-price small { font-size: calc(13px * var(--fs-scale)); color: var(--muted); margin-left: 6px; }
.plan .p-tag { font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale)); letter-spacing: .18em; color: var(--accent); }
.pay-methods { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
.pay-method {
  display: flex; align-items: center; gap: 10px; padding: 12px 20px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  color: inherit; font: inherit; font-size: calc(15px * var(--fs-scale)); transition: border-color .2s ease, background .2s ease;
}
.pay-method:hover { border-color: color-mix(in oklch, var(--accent) 55%, transparent); }
.pay-method[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.pay-method svg { width: 22px; height: 22px; }
.pay-note { font-size: calc(12.5px * var(--fs-scale)); color: var(--muted); line-height: 1.9; margin-top: 20px; }
.member-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px;
  background: var(--member-grad);
  position: relative; overflow: hidden;
}
.member-card .mc-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.member-card .mc-name { font-family: var(--font-display); font-size: calc(26px * var(--fs-scale)); letter-spacing: .12em; }
.member-card .mc-no { font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale)); letter-spacing: .2em; color: var(--muted); }
.member-card .mc-desc { font-size: calc(13.5px * var(--fs-scale)); color: var(--muted); margin-top: 12px; }
.member-card .mc-until { font-family: var(--font-mono); font-size: calc(12px * var(--fs-scale)); color: var(--accent); margin-top: 10px; }

/* 我的 */
.me-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px; background: var(--surface); }
.me-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.me-who { display: flex; gap: 16px; align-items: center; }
.me-avatar { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); border: 1px solid var(--border); font-family: var(--font-display); font-size: calc(22px * var(--fs-scale)); }
.me-name { font-family: var(--font-display); font-size: calc(21px * var(--fs-scale)); letter-spacing: .04em; }
.me-sub { font-size: calc(13px * var(--fs-scale)); color: var(--muted); margin-top: 5px; }
.me-streak { font-family: var(--font-mono); font-size: calc(12px * var(--fs-scale)); color: var(--muted); }
.me-num { display: flex; align-items: baseline; gap: 8px; margin-top: 26px; }
.me-big { font-family: var(--font-display); font-size: calc(46px * var(--fs-scale)); line-height: 1; }
.me-unit { font-family: var(--font-mono); font-size: calc(13px * var(--fs-scale)); color: var(--muted); }
.me-gua { font-family: var(--font-mono); font-size: calc(12px * var(--fs-scale)); color: var(--muted); margin-left: auto; }
.me-bar { height: 4px; background: var(--fg-soft); border-radius: 999px; margin-top: 14px; overflow: hidden; }
.me-fill { height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--accent)); }
.me-list { border-top: 1px solid var(--border); margin-top: 36px; }
.me-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 0; border-bottom: 1px solid var(--border); color: inherit; }
.me-row .mr-t { font-size: calc(16px * var(--fs-scale)); transition: color .2s ease; }
.me-row .mr-s { font-size: calc(12.5px * var(--fs-scale)); color: var(--muted); margin-top: 4px; }
.me-row .mr-go { font-family: var(--font-mono); font-size: calc(12px * var(--fs-scale)); color: var(--muted); }
.me-row:hover .mr-t { color: var(--accent); }

/* 付费墙 */
.locked { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 36px; text-align: center; margin-top: 8px; }
.locked .lk-lock { width: 42px; height: 42px; margin: 0 auto 18px; color: var(--accent); opacity: .85; }
.locked .lk-t { font-family: var(--font-display); font-size: calc(23px * var(--fs-scale)); letter-spacing: .06em; }
.locked .lk-d { font-size: calc(13.5px * var(--fs-scale)); color: var(--muted); margin-top: 10px; }
.locked .lk-cta { margin-top: 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 1080px) {
  .fit-screen.auth-layout .fit-inner, .auth-wrap { grid-template-columns: 1fr; gap: 40px; }
  .fit-screen.auth-layout .fit-inner { align-items: start; }
  .me-cols { grid-template-columns: 1fr; gap: 26px; }
  .plans { grid-template-columns: 1fr; }
  .hex-block, .hex-block.all { grid-template-columns: minmax(0, 1fr); }
  .annot { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; padding-top: 26px; min-height: 0; }
  .gua-notes { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .grid-2, .grid-3, .grid-4, .grid-2-1 { grid-template-columns: 1fr; }
  .gua-row { grid-template-columns: 48px 1fr; gap: 8px 16px; }
  .gua-row .jtext, .gua-row .guaci { grid-column: 2; }
  .gua-row .mini-hex { grid-column: 2; justify-self: start; }
  .detail-grid { grid-template-columns: 1fr; }
  .topnav nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ============================================================
   进境 · 卦印地图（我的进境）
   ============================================================ */
.jin-top { display: grid; grid-template-columns: 1fr auto; gap: clamp(24px, 3vw, 48px); align-items: end; }
.jin-h1 { font-family: var(--font-display); font-size: calc(clamp(30px, 3.6vw, 50px) * var(--fs-scale)); line-height: 1.15; letter-spacing: .02em; }
.jin-h1 .num { color: var(--accent); }
.jin-sub { font-family: var(--font-mono); font-size: calc(13px * var(--fs-scale)); color: var(--muted); margin-top: 12px; letter-spacing: .04em; }
.jin-bar { height: 4px; background: var(--fg-soft); border-radius: 999px; margin-top: 18px; overflow: hidden; max-width: 520px; }
.jin-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-deep), var(--accent)); transition: width .6s ease; }
.jin-streak { display: flex; align-items: center; gap: 8px; }
.jin-streak i {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border);
  display: grid; place-items: center; font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale));
  color: var(--muted); font-style: normal;
}
.jin-streak i.on { background: var(--accent-soft); border-color: color-mix(in oklch, var(--accent) 45%, transparent); color: var(--accent); }
.jin-streak i.today { border-color: var(--accent); color: var(--accent); }
.jin-streak .js-note { font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale)); color: var(--muted); margin-left: 8px; white-space: nowrap; }

.jin-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-top: clamp(34px, 5vh, 58px); flex-wrap: wrap; }
.jin-legend { display: flex; align-items: center; gap: 18px; font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale)); color: var(--muted); }
.jin-legend span { display: inline-flex; align-items: center; gap: 7px; }
.jin-legend i { width: 16px; height: 4px; border-radius: 1px; background: var(--seal-off); display: inline-block; }
.jin-legend i.on { background: var(--hex-line); }

.seal-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: clamp(6px, .7vw, 12px); margin-top: 18px; }
.seal-cell {
  position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 8px 11px; display: grid; justify-items: center; gap: 7px;
  cursor: pointer; font: inherit; color: inherit; text-align: center;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.seal-cell:hover { border-color: color-mix(in oklch, var(--accent) 55%, transparent); background: var(--accent-soft); transform: translateY(-2px); }
.seal-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.seal-cell .sc-no { position: absolute; top: 7px; left: 9px; font-family: var(--font-mono); font-size: calc(10px * var(--fs-scale)); color: var(--muted); }
.seal-cell .sc-n { font-family: var(--font-display); font-size: calc(14px * var(--fs-scale)); letter-spacing: .06em; color: var(--fg); }
.seal-cell .mini-hex { width: 100%; height: auto; max-width: 76px; }
.seal-cell .mini-hex rect { fill: var(--seal-off); }
.seal-cell .mini-hex rect.off { fill: var(--seal-off); }
.seal-cell .mini-hex rect.on { fill: var(--hex-line); }
.seal-cell.read { border-color: color-mix(in oklch, var(--accent) 34%, transparent); }
.seal-cell.read .sc-no { color: var(--accent); }

.jin-next {
  display: flex; align-items: center; gap: 20px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); padding: 18px 24px; margin-top: clamp(18px, 2.6vh, 28px);
  transition: border-color .2s ease, background .2s ease;
}
.jin-next:hover { border-color: color-mix(in oklch, var(--accent) 55%, transparent); background: var(--accent-soft); }
.jin-next .mini-hex { width: 62px; height: auto; flex: none; }
.jin-next .jn-t { font-family: var(--font-display); font-size: calc(19px * var(--fs-scale)); letter-spacing: .05em; }
.jin-next .jn-s { font-size: calc(13px * var(--fs-scale)); color: var(--muted); margin-top: 5px; }
.jin-next .jn-go { margin-left: auto; font-family: var(--font-mono); font-size: calc(12px * var(--fs-scale)); color: var(--muted); white-space: nowrap; }
.jin-next:hover .jn-go { color: var(--accent); }

/* 我的页里的紧凑进境卡 */
.jin-mini {
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  padding: clamp(14px, 2vh, 20px) clamp(16px, 2.4vh, 26px); margin-top: clamp(10px, 1.6vh, 16px);
}
.jin-mini .jm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.jin-mini .jm-t { font-family: var(--font-display); font-size: calc(17px * var(--fs-scale)); letter-spacing: .1em; }
.jin-mini .jm-go { font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale)); color: var(--muted); letter-spacing: .06em; }
.jin-mini .jm-go:hover { color: var(--accent); }
.jin-mini .jm-dots { display: grid; grid-template-columns: repeat(16, 1fr); gap: 5px; margin-top: 13px; }
.jin-mini .jm-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--seal-off); justify-self: center; }
.jin-mini .jm-dots i.on { background: var(--accent); }
.jin-mini .jm-meta { font-family: var(--font-mono); font-size: calc(11.5px * var(--fs-scale)); color: var(--muted); margin-top: 12px; letter-spacing: .02em; }

/* 年费折算表 */
.cmp-year { margin-top: clamp(10px, 1.4vh, 16px); }
.cmp-table.cmp2 { margin-top: clamp(4px, 0.8vh, 8px); }
.cmp-table.cmp2 th, .cmp-table.cmp2 td { padding: clamp(4px, 0.7vh, 6px) 10px; }
.cmp-table.cmp2 tbody th { font-size: calc(13.5px * var(--fs-scale)); }
.cmp-table.cmp2 td { font-size: calc(13.5px * var(--fs-scale)); }
.cmp-table.cmp2 td.pick { color: var(--accent); font-weight: 600; }

/* 注册页：已有账号入口 */
.auth-alt { font-size: calc(13px * var(--fs-scale)); color: var(--muted); text-align: center; margin-top: clamp(10px, 1.6vh, 16px); }
.auth-alt a { color: var(--fg); border-bottom: 1px solid var(--border); }
.auth-alt a:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ── 窄屏：进境与表格的单栏版式 ─────────────────────────────── */
@media (max-width: 1080px) {
  .jin-top { grid-template-columns: 1fr; align-items: start; gap: 24px; }
}
@media (max-width: 920px) {
  .seal-grid { grid-template-columns: repeat(4, 1fr); }
  .jin-mini .jm-dots { grid-template-columns: repeat(8, 1fr); }
  .jin-next { flex-wrap: wrap; }
  .jin-next .jn-go { margin-left: 0; width: 100%; }
}
@media (max-width: 560px) {
  .seal-grid { grid-template-columns: repeat(2, 1fr); }
  .cmp-table th, .cmp-table td { padding: 8px 6px; font-size: calc(13px * var(--fs-scale)); }
  .jin-streak .js-note { display: none; }
}

/* ============================================================
   外观页：主题配色 + 字号档位
   换的是纸与墨；字号只放大文字，不改布局。
   ============================================================ */
.ap-head { max-width: 760px; }
.ap-head h1 { font-family: var(--font-display); font-size: calc(clamp(30px, 3.6vw, 50px) * var(--fs-scale)); line-height: 1.15; letter-spacing: .04em; }
.ap-sub { font-family: var(--font-mono); font-size: calc(13px * var(--fs-scale)); color: var(--muted); margin-top: 12px; }

.ap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.ap-opt {
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface);
  padding: 18px; cursor: pointer; text-align: left; color: inherit; font: inherit;
  display: flex; flex-direction: column; gap: 14px;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ap-opt:hover { transform: translateY(-2px); border-color: color-mix(in oklch, var(--accent) 55%, transparent); }
.ap-opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.ap-sw { display: flex; height: 64px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.ap-sw i { flex: 1; }
.ap-n { font-family: var(--font-display); font-size: calc(21px * var(--fs-scale)); letter-spacing: .08em; }
.ap-d { font-size: calc(13px * var(--fs-scale)); color: var(--muted); margin-top: 6px; line-height: 1.75; }
.ap-state { font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale)); letter-spacing: .18em; color: var(--accent); }

/* 字号分段控件 */
.ap-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: start; margin-top: clamp(30px, 5vh, 56px); }
.ap-row .ap-k { font-family: var(--font-mono); font-size: calc(11px * var(--fs-scale)); letter-spacing: .22em; color: var(--muted); text-transform: uppercase; padding-top: 10px; }
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--fg-soft); }
.seg-i {
  padding: 8px 22px; border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font-family: inherit; font-size: calc(14px * var(--fs-scale)); color: var(--muted);
  transition: background .2s ease, color .2s ease;
}
.seg-i:hover { color: var(--fg); }
.seg-i[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 4px var(--shadow-soft); }

.fs-preview { margin-top: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 26px 28px; }
.fs-preview .fp-t { font-family: var(--font-display); letter-spacing: .06em; }
.fs-preview .fp-l { font-family: var(--font-display); color: var(--muted); margin-top: 10px; line-height: 1.95; }
.fs-preview .fp-m { font-family: var(--font-mono); font-size: calc(13px * var(--fs-scale)); color: var(--muted); margin-top: 14px; letter-spacing: .04em; }
.fs-preview .fp-hex { margin-top: 18px; width: min(300px, 100%); }
.fs-preview .fp-hex svg { width: 100%; height: auto; display: block; }

.ap-note { display: block; margin-top: clamp(28px, 5vh, 48px); font-size: calc(13px * var(--fs-scale)); color: var(--muted); line-height: 1.9; max-width: 62ch; }

@media (max-width: 920px) {
  .ap-grid { grid-template-columns: 1fr; }
  .ap-row { grid-template-columns: 1fr; gap: 14px; }
  .ap-row .ap-k { padding-top: 0; }
}