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

/*
╔════════════════════════════════════════════════════════════╗
║  设计系统 · 宣纸素雅 2.0                                    ║
║  Palette: 宣纸米白 · 朱砂红 · 靛青蓝 · 青碧绿 · 琥珀橙     ║
║  Concept: 宋代山水 · 水墨留白 · 朱批红印                    ║
║                                                            ║
║  Type scale (base 16px):                                   ║
║    --text-2xs  0.625rem 10px    — micro labels             ║
║    --text-xs   0.7rem   11.2px  — captions / badges        ║
║    --text-sm   0.8rem   12.8px  — nav / body small         ║
║    --text-base 0.875rem 14px    — body text                ║
║    --text-md   0.95rem  15.2px  — card titles              ║
║    --text-lg   1.1rem   17.6px  — section heads            ║
║    --text-xl   1.25rem  20px    — page titles              ║
║    --text-2xl  1.5rem   24px    — big headings             ║
║    --text-display 2.4rem 38px   — hero numbers             ║
║  Spacing scale: --space-1..8 (4px base) for layout rhythm  ║
╚════════════════════════════════════════════════════════════╝
*/

:root {
  /* ─── BACKGROUNDS ─── */
  --base:        #f8f7f3;   /* 近白·主底色（提亮，去暗沉） */
  --base-warm:   #f1efe9;   /* 略深·分区底 */
  --surface:     #ffffff;   /* 纯白·卡片/导航 */
  --bg-subtle:   #f5f3ee;   /* 极淡·hover底 */
  --bg-hover:    #efece5;   /* 淡·hover态 */
  --bg-raised:   #fdfcf9;   /* 微升·嵌套内容 */
  --bg-section:  #f2f0ea;   /* 分区色 */

  /* Legacy aliases */
  --bg-base: var(--base); --bg-surface: var(--surface);
  --bg-card: var(--surface); --bg-overlay: var(--bg-subtle);
  --bg-glass: rgba(255,255,255,0.94);
  --bg-primary: var(--bg-hover); --bg-secondary: var(--bg-subtle);

  /* ─── 青碧 — Primary accent（默认主色·青调国风；可在设置切换 红/金/青）─── */
  --accent:       #0f9488;   /* 青碧（默认主色·璇玑品牌青） */
  --accent-b:     #12a89a;   /* 深青（hover） */
  --accent-c:     #2fc4b8;   /* 亮青 */
  --accent-dark:  #0a5e56;   /* 暗青 */
  --accent-light: #5fd8cc;   /* 浅青 */
  --accent-bg:    rgba(15,148,136,0.07);
  --accent-glow:  rgba(15,148,136,0.14);
  --accent-glow2: rgba(15,148,136,0.07);
  --accent-dim:   rgba(15,148,136,0.30);

  /* ─── 五行配色（全局·与盘式 .gv-plate 一致）─── */
  --wx-mu:   #2f8f63;   /* 木·青 */
  --wx-huo:  #cf5132;   /* 火·赤 */
  --wx-tu:   #c1953a;   /* 土·黄 */
  --wx-jin:  #8a8475;   /* 金·灰金 */
  --wx-shui: #3a7ab5;   /* 水·靛 */

  /* 五行语义别名（与上面一致；供页面统一引用，避免多套色冲突） */
  --wx-wood:  var(--wx-mu);
  --wx-fire:  var(--wx-huo);
  --wx-earth: var(--wx-tu);
  --wx-metal: var(--wx-jin);
  --wx-water: var(--wx-shui);

  /* 印泥红（青调为主、朱印点睛；紫微命宫/命主等固定红色印） */
  --seal-red: #b5361e;

  /* ─── 琥珀橙 — Secondary warm ─── */
  --orange:       #b5a07a;
  --orange-b:     #c8b08a;
  --orange-light: #d8c09a;
  --orange-glow:  rgba(181,160,122,0.12);
  --orange-dim:   rgba(181,160,122,0.28);

  /* ─── 靛青蓝 — Info / links ─── */
  --cyan:         #4a6a8a;   /* 深靛青 */
  --cyan-b:       #5a7a9a;   /* 中靛青 */
  --cyan-c:       #6a8aaa;   /* 浅天蓝 */
  --cyan-glow:    rgba(74,106,138,0.12);
  --cyan-dim:     rgba(74,106,138,0.28);

  /* ─── 青碧绿 — Success / auspicious ─── */
  --jade:         #4a7a5a;
  --jade-b:       #5a8a6a;
  --jade-light:   #6a9a7a;
  --jade-glow:    rgba(74,122,90,0.12);
  --jade-dim:     rgba(74,122,90,0.28);

  /* ─── 错误/危险 ─── */
  --red:        #a85840;
  --red-light:  #b86848;
  --red-bright: #c87858;
  --red-glow:   rgba(168,88,64,0.10);
  --red-bg:     rgba(168,88,64,0.07);
  --red-dim:    rgba(168,88,64,0.30);

  /* ─── TEXT (warm-tinted for light bg) ─── */
  --text-primary:   #2a2820;   /* 深蓝黑 */   /* 墨黑 */
  --text-secondary: #58554a;   /* 深青灰 */   /* 深褐 */
  --text-muted:     #98948a;   /* 青灰 */   /* 茶褐 */
  --text-faint:     #c8c4b8;   /* 淡青灰 */   /* 淡褐 */

  /* ─── 兼容别名（修复裸名静默失效）───
     设计系统令牌为带前缀全名（--text-faint / --text-muted / --text-secondary / --red），
     但 JSX 广泛引用简写裸名（--faint / --muted / --sub / --danger），此前因无定义而静默失效：
     边框/分隔线不渲染、文字灰阶丢失、凶/忌语义红不显示。补别名映射回现有令牌，不引入新色值；
     用 var() 引用，暗色主题（196+）重定义的底层令牌会被自动继承，无需在各主题重复。 */
  --faint:  var(--text-faint);      /* 淡褐灰：边框/分隔/极淡文字 */
  --muted:  var(--text-muted);      /* 茶褐：次要文字 */
  --sub:    var(--text-secondary);  /* 深褐：次级正文/释义 */
  --danger: var(--red);             /* 砖红：错误/危险·凶忌语义红 */

  /* ─── BORDERS (warm-neutral) ─── */
  --border:        rgba(34,32,26,0.10);
  --border-hover:  rgba(34,32,26,0.18);
  --border-active: rgba(15,148,136,0.42);
  --border-card:   rgba(34,32,26,0.12);          /* v1：发丝档统一 12% */
  --border-card-hover: rgba(15,148,136,0.42);    /* v1：卡片悬停描边（不再借用 accent-dim） */
  --border-strong: rgba(34,32,26,0.16);

  /* ─── SHADOWS ─── */
  --shadow-xs:   0 1px 2px rgba(40,30,20,0.04);
  --shadow-sm:   0 1px 4px rgba(40,30,20,0.05);
  --shadow-card: 0 1px 6px rgba(40,30,20,0.04);
  --shadow-lift: 0 2px 10px rgba(40,30,20,0.06);
  --shadow-deep: 0 4px 16px rgba(40,30,20,0.08);

  /* ─── TYPE SCALE（与下方注释一致；base 16px）─── */
  --text-2xs:  0.625rem;   /* 10px   — micro captions / sub-labels */
  --text-xs:   0.7rem;     /* 11.2px — captions / badges */
  --text-sm:   0.8rem;     /* 12.8px — nav / body small */
  --text-base: 0.875rem;   /* 14px   — body text */
  --text-md:   0.95rem;    /* 15.2px — card titles */
  --text-lg:   1.1rem;     /* 17.6px — section heads */
  --text-xl:   1.25rem;    /* 20px   — page titles */
  --text-2xl:  1.5rem;     /* 24px   — big headings */
  --text-display: 2.4rem;  /* 38px   — hero numbers */

  /* ─── 择日历专用（随格子宽自适应）───
     cqw 单位相对最近的 container-type:inline-size 祖先（= 择日历卡片内容宽），
     使字号与格子尺寸同比缩放：1280 视口约 16.8px、1440 约 18.4px、1920 约 27px，
     避免宽屏下「格子被撑到 214px 而字仍 12.8px」的比例失衡。 */
  --text-cal-day:     clamp(1.05rem, 1.8cqw, 2rem);       /* 日期数字 16.8~32px */
  --text-cal-officer: clamp(0.8rem, 1.05cqw, 1.15rem);    /* 建除神字 12.8~18.4px */
  --text-cal-head:    clamp(0.8rem, 0.95cqw, 1rem);       /* 星期表头 12.8~16px */

  /* ─── SPACING SCALE（4px 基准，统一各界面留白节奏）─── */
  --space-1: 0.25rem;   /* 4px  */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-8: 3rem;      /* 48px */

  /* ─── RADIUS ─── */
  --r-xs:0; --r-sm:0; --r-md:0; --r-lg:0; --r-xl:0;
  --radius-sm:0; --radius-md:0; --radius-lg:0; --radius-xl:0;

  /* ─── TRANSITIONS ─── */
  --t-fast:110ms ease; --t-mid:210ms cubic-bezier(0.4,0,0.2,1);
  --t-slow:380ms cubic-bezier(0.4,0,0.2,1);
  /* ─── 风格规范 v1 统一动效常量（见 docs/UI_STYLE_GUIDE.md 4.3）───
     FAST：颜色/边框/底色（hover、focus、选中）
     LIFT：transform / box-shadow（卡片抬升、徽记浮沉）
     RV  ：进入视口的一次性淡入上移（600ms / 20px） */
  --t-state:150ms cubic-bezier(0.4,0,0.2,1);
  --t-lift:300ms ease;
  --rv-dur:600ms; --rv-shift:20px;

  /* ─── LAYOUT ─── */
  --topnav-h:62px; --sidebar-w:0px;

  /* ─── FONTS ─── */
  --font-display:'Noto Serif SC', serif;
  --font-title:'Noto Serif SC', serif;
  --font-serif:'Noto Serif SC', serif;
  --font-sans:'Noto Sans SC', sans-serif;
  --font-mono:'JetBrains Mono', monospace;

  /* ─── 太极水印（浅色：宣纸水墨；暗色：墨玉浮雕）─── */
  --tj-a:#0a0a0a; --tj-b:#ffffff; --tj-opacity:0.10;
}

/* ACCENT VARIANTS */

[data-accent="red"] {
  --accent:#b5361e; --accent-b:#cc4428; --accent-c:#e05535; --accent-dark:#7c1e0c;
  --accent-light:#ee7858; --accent-bg:rgba(181,54,30,0.07);
  --accent-glow:rgba(181,54,30,0.14); --accent-glow2:rgba(181,54,30,0.07); --accent-dim:rgba(181,54,30,0.30);
}

[data-accent="gold"] {
  --accent:#c2a36b; --accent-b:#d3b783; --accent-c:#e6cd9c; --accent-dark:#7a5f2d;
  --accent-light:#e9d4a4; --accent-bg:rgba(194,163,107,0.07);
  --accent-glow:rgba(194,163,107,0.14); --accent-glow2:rgba(194,163,107,0.07); --accent-dim:rgba(194,163,107,0.30);
}

[data-accent="jade"] {
  --accent:#8fb9a8; --accent-b:#a6cbbb; --accent-c:#c3ddd0; --accent-dark:#5c8576;
  --accent-light:#bfe0d3; --accent-bg:rgba(143,185,168,0.07);
  --accent-glow:rgba(143,185,168,0.14); --accent-glow2:rgba(143,185,168,0.07); --accent-dim:rgba(143,185,168,0.30);
}

/* ════════════════════════════════════════════════════════════
   DARK THEME · 墨玉秘色（原创高级主主题）
   中性墨底 × 秘色青瓷单一强调 × 远山剪影 × 暗玻璃外壳
════════════════════════════════════════════════════════════ */

html[data-theme="dark"] {
  color-scheme:dark;

  /* 墨玉底色系（中性墨底，不偏绿不偏蓝） */
  --base:#0f1115; --base-warm:#0b0d10; --surface:#171b20;
  --bg-subtle:#13161b; --bg-hover:#1c2127; --bg-raised:#1a1f25;
  --bg-section:#0e1014; --bg-card:rgba(23,27,32,0.96);
  --bg-overlay:#20262e; --bg-glass:rgba(15,17,21,0.92);
  --bg-primary:#1a1f25; --bg-secondary:#13161b;

  /* 暖象牙文字 */
  --text-primary:#ece7da; --text-secondary:#a7ada4;
  --text-muted:#6e756e; --text-faint:#3f4642;

  /* 秘色青瓷描边 */
  --border:rgba(143,185,168,0.13); --border-hover:rgba(143,185,168,0.28);
  --border-active:rgba(143,185,168,0.50); --border-card:rgba(143,185,168,0.14);
  --border-card-hover:rgba(143,185,168,0.40);
  --border-strong:rgba(143,185,168,0.22);

  /* 深黑阴影 */
  --shadow-xs:0 1px 2px rgba(0,0,0,0.40);
  --shadow-sm:0 2px 6px rgba(0,0,0,0.45);
  --shadow-card:0 6px 22px rgba(0,0,0,0.50);
  --shadow-lift:0 10px 34px rgba(0,0,0,0.60);
  --shadow-deep:0 16px 48px rgba(0,0,0,0.70);

  /* 玄夜默认主色：秘色青瓷 */
  --accent:#8fb9a8; --accent-b:#a6cbbb; --accent-c:#c3ddd0; --accent-dark:#5c8576;
  --accent-light:#bfe0d3; --accent-bg:rgba(143,185,168,0.08);
  --accent-glow:rgba(143,185,168,0.16); --accent-glow2:rgba(143,185,168,0.08);
  --accent-dim:rgba(143,185,168,0.35);

  /* 辅助色暗底适配 */
  --orange:#c9a86a; --orange-b:#d8ba80; --orange-light:#e6cc98;
  --orange-glow:rgba(201,168,106,0.12); --orange-dim:rgba(201,168,106,0.30);
  --cyan:#7a95b5; --cyan-b:#8aa5c5; --cyan-c:#9ab5d5;
  --jade:#6aa585; --jade-b:#7ab595; --jade-light:#8ac5a5;
  --red:#c87a5a; --red-light:#d88a6a; --red-bright:#e89a7a;
  --seal-red:#d0442a;

  /* 五行色暗底明度适配（秘色青瓷底上更通透） */
  --wx-mu:#4fae7d; --wx-huo:#e07a5c; --wx-tu:#d9b25c; --wx-jin:#b9b09a; --wx-shui:#6aa6d6;

  /* 太极水印：墨底上改为若隐若现的玉色浮雕 */
  --tj-a:#151a20; --tj-b:#252d36; --tj-opacity:0.55;
}

/* 玄夜强调色变体（覆盖亮色变体定义） */

html[data-theme="dark"][data-accent="gold"] {
  --accent:#c2a36b; --accent-b:#d3b783; --accent-c:#e6cd9c; --accent-dark:#7a5f2d;
  --accent-light:#e9d4a4; --accent-bg:rgba(194,163,107,0.08);
  --accent-glow:rgba(194,163,107,0.16); --accent-glow2:rgba(194,163,107,0.08);
  --accent-dim:rgba(194,163,107,0.35);
  --border-card-hover:rgba(194,163,107,0.40);
}

html[data-theme="dark"][data-accent="jade"] {
  --accent:#8fb9a8; --accent-b:#a6cbbb; --accent-c:#c3ddd0; --accent-dark:#5c8576;
  --accent-light:#bfe0d3; --accent-bg:rgba(143,185,168,0.08);
  --accent-glow:rgba(143,185,168,0.16); --accent-glow2:rgba(143,185,168,0.08);
  --accent-dim:rgba(143,185,168,0.35);
  --border-card-hover:rgba(143,185,168,0.40);
}

html[data-theme="dark"][data-accent="red"] {
  --accent:#d4553a; --accent-b:#e26a4e; --accent-c:#f08468; --accent-dark:#8a2c14;
  --accent-light:#f8a084; --accent-bg:rgba(212,85,58,0.09);
  --accent-glow:rgba(212,85,58,0.16); --accent-glow2:rgba(212,85,58,0.08);
  --accent-dim:rgba(212,85,58,0.35);
  --border-card-hover:rgba(212,85,58,0.42);
}

/* ════════════════════════════════════════════════════════════
   鎏金星璇（原创主题 · 不参考任何竞品）
   概念：鎏金星云旋臂 + 中央鎏金太极。暖黑底（真墨是暖黑，非数码冷灰）
        × 鎏金单一强调；背景交由 GalaxyBg（程序化渲染 WebP）承载，
        星核置于 Hero 之后作「品牌徽记」。
   与墨玉秘色(中性墨+青瓷绿)、玄夜古金(墨+古金无背景)形成区分。
   value 仍为 'qing'（沿用历史值，避免用户已有偏好失效）。
════════════════════════════════════════════════════════════ */

html[data-theme="dark"][data-accent="qing"] {
  /* 暖黑底（衬托鎏金星璇） */
  --base:#0b0906; --base-warm:#080705; --surface:#16120c;
  --bg-subtle:#12100a; --bg-hover:#1e1810; --bg-raised:#18140d;
  --bg-section:#090806; --bg-card:rgba(22,18,12,0.92);
  --bg-overlay:#1d1710; --bg-glass:rgba(11,9,6,0.88);
  --bg-primary:#18140d; --bg-secondary:#12100a;

  /* 暖象牙文字 */
  --text-primary:#f0eade; --text-secondary:#b3a894;
  --text-muted:#7a7060; --text-faint:#473f33;

  /* 暖金描边 */
  --border:rgba(214,180,110,0.14); --border-hover:rgba(214,180,110,0.30);
  --border-active:rgba(214,180,110,0.52); --border-card:rgba(214,180,110,0.14);
  --border-card-hover:rgba(214,180,110,0.40);
  --border-strong:rgba(214,180,110,0.24);

  /* 鎏金强调（比玄夜古金的 #c2a36b 更亮更暖，呼应星璇高光） */
  --accent:#d9ac5e; --accent-b:#e6bd75; --accent-c:#f2cf95; --accent-dark:#9a7530;
  --accent-light:#f7ddaa; --accent-bg:rgba(217,172,94,0.09);
  --accent-glow:rgba(217,172,94,0.18); --accent-glow2:rgba(217,172,94,0.09);
  --accent-dim:rgba(217,172,94,0.36);

  /* 辅助色（暖底适配） */
  --orange:#d9a05a; --orange-b:#e5ae6c; --orange-light:#f0c48e;
  --orange-glow:rgba(217,160,90,0.12); --orange-dim:rgba(217,160,90,0.30);
  --cyan:#8fa8bd; --cyan-b:#a5bccf; --cyan-c:#bcd0e0;
  --jade:#7f9b86; --jade-b:#8fab96; --jade-light:#9fbba6;
  --red:#d4653c; --red-light:#e27a52; --red-bright:#f08c62;
  --seal-red:#cf3b2c;

  /* 五行色（暖底微调，水蓝提亮以在暖黑上可辨） */
  --wx-mu:#6cb98a; --wx-huo:#e07a5c; --wx-tu:#d9b25c; --wx-jin:#cbb894; --wx-shui:#6f9dc4;

  /* 太极水印（本主题由 GalaxyBg 承载，保留以防回退） */
  --tj-a:#0b0906; --tj-b:#1a150d; --tj-opacity:0.50;
}

/* 鎏金星璇：背景交由 GalaxyBg 星璇层承载 */

html[data-theme="dark"][data-accent="qing"] body { background-image:none; }

html[data-theme="dark"][data-accent="qing"] body::before { background:none; }

html[data-theme="dark"][data-accent="qing"] body::after { display:none; }

/* ── 鎏金星璇背景（本主题专属，纯装饰层）──────────────────────────
   采用「程序化渲染 + 出图即资源」：粒子星臂需数千次采样与辉光叠加，
   CSS·SVG 无法在可接受体积内还原，故由设计端以 Python 渲染为 WebP
   （原生 2560×1440 / 1242×2688 → 真高清、天生无水印、仅约 260KB），
   前端只做 cover 铺陈，保证线上与设计稿 100% 一致、零运行时开销。
   构图：星核（太极）置于 Hero 之后作品牌徽记，避开内容密集区。 */

.qj-galaxy{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;display:none;}

html[data-theme="dark"][data-accent="qing"] .qj-galaxy{display:block;}

/* v6 架构：正方形星璇图（太极居中 = 旋转中心）+ CSS 匀速旋转。
   130vmax 见方 ≥ 任意常见视口的对角线（16:9→1.147vmax / 平板 3:4→1.25vmax），
   旋转全程无露角；240s/圈与 TaijiBg 的 taiji-spin 完全同速。
   CSS 旋转 = 连续变换，数学上完美无缝、任意慢速、零视频体积。 */

.qj-galaxy-breathe{position:absolute;inset:0;overflow:hidden;
  animation:qj-galaxy-breathe 130s ease-in-out infinite;}

.qj-galaxy-rot{position:absolute;left:50%;top:50%;width:130vmax;height:130vmax;
  margin:-65vmax 0 0 -65vmax;
  background:url('/galaxy-square.webp') center / 100% 100% no-repeat;
  animation:qj-galaxy-spin 240s linear infinite;}

@keyframes qj-galaxy-spin{to{transform:rotate(360deg);}}

/* 内容压暗罩：星核居中后改为中央椭圆压暗 + 上下渐变，
   让 Hero 标题与下方卡片"浮起来"，同时保留旋臂的亮度。 */

.qj-galaxy-scrim{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 46% at 50% 50%,
      rgba(4,4,4,0.52) 0%, rgba(4,4,4,0.26) 52%, transparent 82%),
    linear-gradient(180deg,
      rgba(6,5,4,0.38) 0%, rgba(6,5,4,0.20) 30%, rgba(6,5,4,0.14) 52%,
      rgba(6,5,4,0.34) 78%, rgba(5,4,3,0.52) 100%);}

/* 极缓呼吸：仅 1.4% 缩放，静中有动且不扰阅读 */

@keyframes qj-galaxy-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.014)}}

/* 动效关闭（设置项）与系统减弱动效：停转停呼吸，只留静态星璇图 */

html[data-motion="off"] .qj-galaxy *{animation:none !important;}

@media (prefers-reduced-motion: reduce){
  .qj-galaxy *{animation:none !important;}
}

/* 星璇主题：Hero 文字阴影 —— 压在星核上时仍清晰（与软压暗罩双保险） */

html[data-theme="dark"][data-accent="qing"] .qj-hero{
  text-shadow:0 1px 3px rgba(5,4,3,0.88), 0 0 16px rgba(5,4,3,0.72);
}

html[data-theme="dark"][data-accent="qing"] .qj-hero .qj-gold-text,
html[data-theme="dark"][data-accent="qing"] .qj-gold-text{
  text-shadow:0 0 20px rgba(5,4,3,0.95), 0 2px 5px rgba(5,4,3,0.90), 0 0 48px rgba(5,4,3,0.65);
}

/* 墨玉氛围背景：青瓷微光 + 墨晕 */

html[data-theme="dark"] body {
  background-color:var(--base);
  background-image:
    radial-gradient(ellipse 68% 42% at 50% -8%,  rgba(143,185,168,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 90% 60% at 100% 18%, rgba(20,28,32,0.55) 0%, transparent 65%),
    radial-gradient(ellipse 80% 70% at 0% 92%,   rgba(16,22,26,0.60) 0%, transparent 60%);
  background-attachment:fixed;
}

/* 暗纹光晕（青瓷底微光） */

html[data-theme="dark"] body::before {
  background:
    radial-gradient(ellipse 60% 40% at 50% 112%, rgba(143,185,168,0.04) 0%, transparent 60%);
}

/* 远山剪影（墨底青瓷暗调，内嵌 SVG，无外部资源） */

html[data-theme="dark"] body::after {
  content:'';position:fixed;left:0;right:0;bottom:0;height:32vh;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='xMidYMax slice'%3E%3Cpath d='M0 210 L170 120 L330 195 L510 85 L690 185 L880 105 L1060 205 L1240 135 L1440 225 L1440 320 L0 320 Z' fill='%23101412'/%3E%3Cpath d='M0 255 L200 180 L400 248 L620 150 L840 238 L1080 168 L1300 248 L1440 200 L1440 320 L0 320 Z' fill='%23161c1a'/%3E%3Cpath d='M0 292 L260 236 L520 286 L780 228 L1040 282 L1300 240 L1440 280 L1440 320 L0 320 Z' fill='%231b2220'/%3E%3C/svg%3E") bottom/cover no-repeat;
  pointer-events:none;z-index:0;opacity:0.8;
}

/* 墨玉组件适配 */

html[data-theme="dark"] .topnav {
  background:rgba(15,17,21,0.82);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}

html[data-theme="dark"] .btn {
  background:rgba(255,255,255,0.025);color:var(--text-secondary);
}

html[data-theme="dark"] .btn:hover {
  background:var(--accent-bg);color:var(--accent-c);
}

html[data-theme="dark"] .btn-primary {
  color:#0c100e;border-color:var(--accent-dim);
  background:linear-gradient(180deg, var(--accent-c) 0%, var(--accent) 62%, var(--accent-dark) 100%);
  text-shadow:none;
}

html[data-theme="dark"] .btn-primary:hover {
  background:linear-gradient(180deg, var(--accent-light) 0%, var(--accent-b) 62%, var(--accent) 100%);
  box-shadow:0 4px 18px var(--accent-glow);color:#0c100e;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background:rgba(0,0,0,0.26); }

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus { background:rgba(0,0,0,0.34); }

html[data-theme="dark"] ::-webkit-scrollbar-track{background:rgba(255,255,255,0.03);}

html[data-theme="dark"] ::-webkit-scrollbar-thumb{background:var(--accent-dim);}

html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:var(--accent);}

html[data-theme="dark"] .toggle-slider{background:rgba(0,0,0,0.32);}

html[data-theme="dark"] .toggle input:checked + .toggle-slider::after{
  box-shadow:0 1px 4px var(--accent-glow);
}

html[data-theme="dark"] .toast{background:var(--bg-glass);backdrop-filter:blur(8px);}

/* ── 秘色主视觉（Hero / 分隔线 / 模块卡，跟随强调色，青瓷默认·古金备选）── */

html[data-theme="dark"] .qj-gold-text {
  background:linear-gradient(180deg, var(--accent-c) 0%, var(--accent) 48%, var(--accent-dark) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

html[data-theme="dark"] .qj-gold-divider {
  width:76px;height:1px;margin:24px auto 0;position:relative;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}

html[data-theme="dark"] .qj-gold-divider::after {
  content:'·';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:8px;color:var(--accent);background:var(--base);padding:0 7px;line-height:1;
}

/* 素笺青璧（浅色）九宫卡：补白卡底色+描边（线上此前仅深色前缀有规则，浅色下全透明导致边界糊）
   透白 rgba(255,255,255,0.62) + 18% 墨发丝描边 + 极淡投影 + blur，背景隐约可辨、边界清晰 */

.qj-module-card {
  background:rgba(255,255,255,0.62);
  border:1px solid rgba(34,32,26,0.18);
  border-radius:18px;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  box-shadow:0 1px 3px rgba(34,32,26,0.06);
  transition:border-color var(--t-state), box-shadow var(--t-lift), transform var(--t-lift),
             opacity var(--rv-dur) cubic-bezier(0.4,0,0.2,1) var(--rv-delay,0ms);
}

.qj-module-card:hover {
  border-color:var(--border-card-hover);
  box-shadow:0 6px 20px rgba(34,32,26,0.10);
  transform:translateY(-3px);
}

html[data-theme="dark"] .qj-module-card {
  background:linear-gradient(180deg, var(--accent-glow) 0%, transparent 100%), var(--surface);
  border:1px solid var(--border-card);
  border-radius:18px;
  /* v1：状态变化 150ms（FAST）+ 位移/阴影 300ms（LIFT）+ 入场透明度按 --rv-delay 错开 */
  transition:border-color var(--t-state), box-shadow var(--t-lift), transform var(--t-lift),
             opacity var(--rv-dur) cubic-bezier(0.4,0,0.2,1) var(--rv-delay,0ms);
}

html[data-theme="dark"] .qj-module-card:hover {
  border-color:var(--border-card-hover);
  box-shadow:0 10px 30px rgba(0,0,0,0.55), 0 0 22px var(--accent-glow);
  transform:translateY(-3px);
}

/* 首页模块矩阵（方案三：桌面固定 3×3 居中，窄屏 2 列） */

.qj-mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:760px;margin:0 auto;}

@media(max-width:640px){
  .qj-mod-grid{grid-template-columns:repeat(2,1fr);gap:10px;max-width:none;}
  .qj-mod-grid .qj-module-card{padding:16px 8px 14px;}
  .qj-mod-grid .qj-module-card > div:first-child{width:40px !important;height:40px !important;margin:0 auto 9px !important;}
  .qj-mod-grid .qj-module-card > div:first-child svg{width:20px !important;height:20px !important;}
}

/* ─── 顶部导航 · 圆徽横排（PC 方案一）+ 抽屉式（手机），与首页 3×3 徽记同语言 ─── */

.qj-nav-emblems{display:flex;gap:2px;flex:1;justify-content:center;align-items:center;min-width:0;}

.qj-nav-emblem{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 7px;border-radius:10px;cursor:pointer;flex-shrink:0;transition:background var(--t-state);}

.qj-nav-emblem:hover{background:rgba(194,163,107,0.07);}

.qj-nav-emblem-ring{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--border-card);transition:border-color var(--t-state), box-shadow var(--t-state), background var(--t-state);}

.qj-nav-emblem-ring svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.5;transition:opacity var(--t-state);}

.qj-nav-emblem:hover .qj-nav-emblem-ring{border-color:var(--border-card-hover);}

.qj-nav-emblem:hover .qj-nav-emblem-ring svg{opacity:.85;}

.qj-nav-emblem.qj-em-active .qj-nav-emblem-ring svg{opacity:1;}

.qj-nav-emblem-name{font-size:11px;font-family:var(--font-serif);letter-spacing:1px;color:var(--text-muted);line-height:1;white-space:nowrap;transition:color var(--t-state);}

.qj-nav-emblem:hover .qj-nav-emblem-name{color:var(--text-primary);}

/* 手机端抽屉（PC 隐藏） */

.qj-nav-drawer{display:none;flex:1;justify-content:center;min-width:0;position:relative;}

.qj-nav-drawer-btn{display:flex;align-items:center;gap:7px;padding:6px 14px 6px 9px;border-radius:999px;cursor:pointer;
  border:1px solid var(--border-card);background:rgba(194,163,107,0.07);font-family:var(--font-serif);}

.qj-nav-drawer-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}

.qj-nav-drawer-cur{font-size:13px;letter-spacing:2px;font-family:var(--font-serif);color:var(--gold-bright, var(--accent));white-space:nowrap;}

.qj-nav-drawer-btn i{font-size:10px;color:var(--text-faint);font-style:normal;letter-spacing:1px;white-space:nowrap;}

.qj-nav-drawer-grid{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:min(330px,calc(100vw - 24px));
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px;z-index:80;
  background:rgba(14,11,8,0.97);border:1px solid var(--border-card);border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);animation:fadeIn .18s ease;}

.qj-nav-drawer-grid .qj-nav-emblem{border:1px solid var(--border-card);background:rgba(255,255,255,0.02);width:100%;padding:8px 4px;}

@media(max-width:640px){
  .qj-nav-emblems{display:none;}
  .qj-nav-drawer{display:flex;}
  /* 手机端压缩品牌区，给抽屉胶囊让出宽度（覆盖内联样式） */
  .qj-nav-brand{margin-right:6px !important;padding-right:10px !important;gap:8px !important;}
  .qj-nav-brand svg,.qj-nav-brand img{width:28px !important;height:28px !important;}
  .qj-nav-brand-sub{display:none;}
  .qj-nav-brand-name{font-size:14px !important;letter-spacing:2px !important;}
  .qj-nav-right-group{padding-left:10px !important;gap:4px !important;}
}

/* ════════════════════ RESET ════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html{min-height:100%;font-size:16px;}

body {
  min-height:100%;
  background-color:var(--base);
  /* Warm paper atmospheric tint */
  background-image:
    radial-gradient(ellipse 80% 60% at 88% 0%,  rgba(15,148,136,0.030) 0%, transparent 62%),
    radial-gradient(ellipse 60% 80% at 10% 100%, rgba(26,122,82,0.022) 0%, transparent 62%);
  color:var(--text-primary);
  font-family:var(--font-sans);
  font-size:var(--text-base);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Faint paper texture */

body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 120% 70% at 100% -5%, rgba(15,148,136,0.022) 0%, transparent 60%),
    radial-gradient(ellipse 80% 100% at -5%  100%, rgba(26,122,82,0.018) 0%, transparent 60%);
}

#root{min-height:100%;display:flex;flex-direction:column;position:relative;z-index:1;}

/* ════════════════════ TYPOGRAPHY ════════════════════ */

h1,h2{font-family:var(--font-serif);font-weight:700;letter-spacing:0.04em;color:var(--text-primary);line-height:1.2;}

h3{font-family:var(--font-serif);font-weight:700;letter-spacing:0.04em;color:var(--text-primary);line-height:1.25;}

h1{font-size:var(--text-2xl);}

h2{font-size:var(--text-xl);}

h3{font-size:var(--text-lg);}

p{color:var(--text-secondary);line-height:1.82;font-size:var(--text-base);font-family:var(--font-sans);}

/* ════════════════════ SCROLLBAR ════════════════════ */

::-webkit-scrollbar{width:6px;height:6px;}

::-webkit-scrollbar-track{background:rgba(120,110,95,0.05);border-radius:0;}

::-webkit-scrollbar-thumb{background:rgba(120,110,95,0.22);border-radius:0;}

::-webkit-scrollbar-thumb:hover{background:rgba(120,110,95,0.38);}

/* ════════════════════ CARD ════════════════════ */

.card {
  background:var(--surface);
  border:none;
  border-left:2px solid var(--border);
  border-bottom:1px solid var(--border);
  border-radius:0;
  padding:1rem 1.25rem;
  box-shadow:var(--shadow-xs);
  position:relative;
  transition:border-color var(--t-mid), box-shadow var(--t-mid), transform var(--t-mid);
}

.card:hover {
  border-left-color:var(--accent);
  box-shadow:var(--shadow-lift);
  transform:translateY(-1px);
}

/* Refined top-accent line */

.card::before {
  content:'';position:absolute;top:-1px;left:-3px;
  width:5px;height:5px;background:var(--border);
  transform:rotate(45deg);
}

.card-title {
  font-family:var(--font-serif);font-weight:600;
  font-size:var(--text-sm);
  color:var(--text-secondary);margin-bottom:0.75rem;padding-bottom:0.45rem;
  border-bottom:1px solid var(--border);letter-spacing:0.04em;
  display:flex;align-items:center;gap:0.4rem;
}

.card-title::before{content:'';display:none;}

.card-glow {
  border-left-color:var(--accent);
  box-shadow:none;
}

.card-danger{border-color:var(--red-dim);background:var(--red-bg);}

.card-cyan  {border-color:var(--cyan-dim);  background:rgba(74,106,138,0.025);}

.card-jade  {border-color:var(--jade-dim);  background:rgba(74,122,90,0.025);}

/* ════════════════════ BUTTONS ════════════════════ */

.btn {
  display:inline-flex;align-items:center;justify-content:center;gap:0.4rem;
  padding:0.55rem 1.2rem;border-radius:0;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-muted);font-family:var(--font-sans);font-size:var(--text-sm);
  cursor:pointer;transition:all var(--t-fast);white-space:nowrap;
  user-select:none;letter-spacing:0.02em;font-weight:500;
  box-shadow:none;
}

.btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);
  box-shadow:none;}

.btn:active{transform:scale(0.985);box-shadow:var(--shadow-xs);}

/* Primary — 朱砂红印 */

.btn-primary {
  background:var(--accent);
  border:1px solid var(--accent-dark);color:#fff;font-weight:600;letter-spacing:0.03em;
  box-shadow:none;
  text-shadow:none;
}

.btn-primary:hover{
  background:var(--accent-b);
  box-shadow:0 4px 14px var(--accent-glow);color:#fff;transform:translateY(-1px);
}

.btn-primary:active{transform:translateY(0);box-shadow:0 1px 4px var(--accent-glow);}

.btn-cyan {
  background:linear-gradient(160deg, var(--cyan-b) 0%, var(--cyan) 100%);
  border:1px solid var(--cyan-dim);color:#fff;font-weight:600;
  box-shadow:0 2px 10px rgba(74,106,138,0.25);
}

.btn-cyan:hover{background:linear-gradient(160deg,var(--cyan-c),var(--cyan-b));color:#fff;}

.btn-jade {
  background:linear-gradient(160deg, var(--jade-b) 0%, var(--jade) 100%);
  border:1px solid var(--jade-dim);color:#fff;font-weight:600;
  box-shadow:0 2px 10px rgba(74,122,90,0.25);
}

.btn-jade:hover{background:linear-gradient(160deg,var(--jade-light),var(--jade-b));color:#fff;}

.btn-ghost{border-color:transparent;background:transparent;box-shadow:none;}

.btn-ghost:hover{background:var(--bg-hover);border-color:transparent;box-shadow:none;}

.btn-danger{border-color:var(--red-dim);color:var(--red);}

.btn-danger:hover{background:var(--red-bg);border-color:var(--red-dim);}

.btn-sm  {padding:0.30rem 0.72rem;font-size:var(--text-xs);}

.btn-lg  {padding:0.78rem 1.8rem;font-size:var(--text-base);font-weight:600;letter-spacing:0.03em;}

.btn-full{width:100%;}

.btn-icon{padding:0.5rem;aspect-ratio:1;min-width:0;}

.btn:disabled{opacity:0.42;cursor:not-allowed;pointer-events:none;}

/* ════════════════════ FORMS ════════════════════ */

.form-group{display:flex;flex-direction:column;gap:0.3rem;}

label{font-size:var(--text-xs);color:var(--text-muted);letter-spacing:0.06em;
  text-transform:uppercase;font-weight:600;}

input,select,textarea {
  background:var(--bg-raised);border:1px solid var(--border);
  border-radius:0;color:var(--text-primary);
  font-family:var(--font-sans);font-size:var(--text-sm);
  padding:0.45rem 0.75rem;width:100%;outline:none;
  transition:all var(--t-fast);box-shadow:none;
}

input:focus,select:focus,textarea:focus{
  border-color:var(--accent-dim);
  box-shadow:none;
  background:var(--surface);
}

select{cursor:pointer;}

textarea{resize:vertical;min-height:78px;}

select.select-empty{color:var(--text-muted);}

.form-row  {display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0.65rem;}

.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:0.65rem;}

.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.65rem;}

/* ════════════════════ TOGGLE ════════════════════ */

.toggle{position:relative;display:inline-flex;align-items:center;width:44px;height:24px;cursor:pointer;}

.toggle input{opacity:0;width:0;height:0;}

.toggle-slider{position:absolute;inset:0;background:var(--bg-hover);border:1.5px solid var(--border);border-radius:0;transition:all var(--t-mid);}

.toggle-slider::after{content:'';position:absolute;width:16px;height:16px;background:var(--text-faint);border-radius:50%;top:3px;left:3px;transition:all var(--t-mid);box-shadow:0 1px 3px rgba(0,0,0,0.18);}

.toggle input:checked + .toggle-slider{background:var(--accent-bg);border-color:var(--accent-dim);}

.toggle input:checked + .toggle-slider::after{transform:translateX(20px);background:var(--accent);box-shadow:0 1px 3px var(--accent-glow);}

/* ════════════════════ BADGES ════════════════════ */

.badge{display:inline-flex;align-items:center;padding:0.18rem 0.52rem;border-radius:0;
  font-size:var(--text-xs);font-weight:600;border:1px solid;letter-spacing:0.03em;white-space:nowrap;}

.badge-gold  {color:var(--orange);    border-color:var(--orange-dim); background:var(--orange-glow);}

.badge-red   {color:var(--red);        border-color:var(--red-dim);    background:var(--red-bg);}

.badge-jade  {color:var(--jade);      border-color:var(--jade-dim);   background:var(--jade-glow);}

.badge-cyan  {color:var(--cyan-b);    border-color:var(--cyan-dim);   background:var(--cyan-glow);}

.badge-muted {color:var(--text-muted);border-color:var(--border);     background:var(--bg-subtle);}

.badge-glow  {color:var(--accent-b);  border-color:var(--accent);     background:var(--accent-bg);
  box-shadow:0 0 0 2px var(--accent-glow);}

/* ════════════════════ LOADING ════════════════════ */

.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.1rem;min-height:220px;color:var(--text-muted);}

.spinner{position:relative;width:42px;height:42px;}

.spinner::before,.spinner::after{content:'';position:absolute;border-radius:50%;}

.spinner::before{inset:0;border:2px solid var(--border);border-top-color:var(--accent-b);animation:spin 0.8s linear infinite;}

.spinner::after {inset:8px;border:1.5px solid transparent;border-bottom-color:var(--cyan-dim);animation:spin 1.3s linear infinite reverse;}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ════════════════════ ERROR ════════════════════ */

.error-box{background:var(--red-bg);border:1px solid var(--red-dim);border-radius:0;
  padding:0.9rem 1.1rem;color:var(--red);font-size:var(--text-sm);
  display:flex;align-items:flex-start;gap:0.5rem;}

/* ════════════════════ PAGE SHELL ════════════════════ */

.page{flex:1;display:flex;flex-direction:column;min-width:0;}

/* Page header — clean white with red ink underline */

.page-header {
  padding:0.5rem 1.5rem;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
  background:transparent;
  box-shadow:none;
  position:relative;
}

.page-header::after {
  content:'';position:absolute;bottom:0;left:0;right:0;height:1px;
  background:var(--border);
  opacity:0.5;
}

.page-title {
  font-family:var(--font-serif);font-size:var(--text-md);font-weight:600;
  color:var(--text-secondary);letter-spacing:0.04em;line-height:1.2;
}

.page-subtitle{font-size:var(--text-xs);color:var(--text-muted);margin-top:0.28rem;
  font-family:var(--font-mono);letter-spacing:0.05em;}

.page-body{flex:1;padding:1rem 1.5rem;}

.page-cols  {display:grid;grid-template-columns:280px 1fr;gap:1.25rem;align-items:start;}

.page-cols-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.3rem;}

/* ════════════════════ 模块页「居中先行」舞台 (form-center v1) ════════════════════ */

/* 初始态：表单居中（默认 B 窄卡 520；html[data-form-plan="a"] 可切宽卡 760）；推算后收拢为左栏 280 + 右侧结果 */

.qj-stage{display:flex;gap:1.25rem;align-items:flex-start;width:100%}

.qj-stage__form{width:100%;max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:1rem;
  transition:max-width .58s cubic-bezier(.4,0,.2,1),margin .58s cubic-bezier(.4,0,.2,1)}

html[data-form-plan="a"] .qj-stage__form{max-width:760px}

.qj-stage[data-view="cols"] .qj-stage__form{max-width:280px;margin:0}

.qj-stage__result{flex:1;min-width:0;display:none}

.qj-stage[data-view="cols"] .qj-stage__result{display:block;animation:qjResultIn .55s .12s both}

@keyframes qjResultIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* 居中态可选 hero（页面按需渲染，cols 态自动隐藏） */

.qj-form-hero{text-align:center;padding:.5rem 0 1rem;border-bottom:1px dashed var(--border);margin-bottom:.2rem}

.qj-stage[data-view="cols"] .qj-form-hero{display:none}

/* ════════════════════ 模块页卡片对齐 demo（9/27 反馈）════════════════════ */

/* demo 卡片 = 发丝满边框 + 圆角 14px（产品 .card 原为「左 2px + 底 1px + 直角」的平面化语言）。
   仅作用于 .qj-stage（6 个排盘模块页：表单卡 + 结果卡），其余页面卡片维持现状。 */

.qj-stage .card{
  border-width:1px;
  border-style:solid;
  border-color:var(--border-card);
  border-radius:14px;
  box-shadow:none;
}

.qj-stage .card:hover{border-color:var(--border-card-hover);box-shadow:none;transform:none;}

/* 直角时代左上角的小菱形装饰 → 圆角卡片下移除 */

.qj-stage .card::before{display:none;}

/* 保留语义变体（否则会被上面的 border-color 抹掉语义色） */

.qj-stage .card.card-glow{border-left-color:var(--accent);}

.qj-stage .card.card-danger{border-color:var(--red-dim);}

.qj-stage .card.card-cyan{border-color:var(--cyan-dim);}

.qj-stage .card.card-jade{border-color:var(--jade-dim);}

/* ════════════════════ 模块页控件对齐 demo（9/28 反馈）════════════════════ */

/* 根因：圆角令牌 --r-* 全为 0（直角时代），而上轮卡片已改 14px →
   同框出现「直角按钮 + 圆角卡片」的风格打架。此处只 scope 到 .qj-stage
   （6 个排盘模块页），【不动全站令牌】——0 是首页/工作台/弹窗等处的既定语言。 */

.qj-stage .btn{border-radius:9px}

.qj-stage .btn-lg{border-radius:11px}

/* 顺序必须在 .btn 之后（同特异性，靠源码序） */

.qj-stage input,.qj-stage select,.qj-stage textarea{border-radius:8px}

/* ── 命盘档案条两颗按钮（9/28 用户反馈）──────────────────────────
   主「一键填入出生信息」= accent 描边 + accent 淡底 + 700：从档案读到表单
   次「把当前信息更新进档案」= 中性描边 + surface 薄底 + 600：把当前表单存回档案
   次按钮原为 11px / 字重 400 / 透明底 / --border 发丝线 —— 在浅色宣纸底上几乎
   "消失"成一段文字，用户看不出它是按钮。升为中性次级按钮后可见，但**刻意不用
   accent 色**：保住 formbtn-v1「同屏只一颗 accent，实底位让给开始推算」的层级。
   两钮数据流方向相反、非重复功能（下方提示行已说明）。
   注意：选择器必须写 `button.xxx`（元素+类，特异性 0,1,1）而不能只写 `.xxx`（0,1,0）：
   上一轮 radius-sweep 的扫描规则 `.qj-stage :where(div,span,button,…)` 特异性同为 0,1,0
   且**写在文件更后面** ⇒ 靠源码序取胜，会把这里的 border-radius 覆盖成 `var(--r-sm)`
   （.qj-stage 内 --r-sm 已被覆盖为 9px）。实测症状：按钮圆角变成 9px 而非 8px。
   加 `button` 前缀后不依赖文件顺序，永久免疫。 */

button.qj-fillbar-btn{
  padding:6px 14px; font-size:12.5px; font-weight:700; letter-spacing:1px;
  font-family:var(--font-serif); border:1px solid var(--accent); border-radius:8px;
  background:var(--accent-bg); color:var(--accent); cursor:pointer;
  transition:all var(--t-fast);
}

button.qj-fillbar-btn:hover{background:var(--accent-glow);}

button.qj-archive-btn{
  padding:6px 14px; font-size:12.5px; font-weight:600; letter-spacing:1px;
  font-family:var(--font-serif); border:1px solid var(--border-card); border-radius:8px;
  background:var(--surface); color:var(--text-secondary); cursor:pointer;
  transition:all var(--t-fast);
}

button.qj-archive-btn:hover{border-color:var(--accent-dim); color:var(--accent);}

/* 居中态主 CTA：按 demo 收到 420px 居中（不再通栏）+ 常态淡光晕 + 字距放大 */

.qj-stage[data-view="center"] .qj-form-inner > .btn.btn-lg{
  max-width:420px;width:100%;margin:.15rem auto 0;
  box-shadow:0 3px 14px var(--accent-glow);letter-spacing:.12em;
}

/* ── 分析类型：居中态 3×3 网格 / 推算后窄栏竖列（按 data-view 切换）──
   竖列 9 行实测 387px，把「居中先行」首屏吃掉一半；3×3 网格 170px 且全宽度免断点。 */

.qj-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}

.qj-stage[data-view="cols"] .qj-tabs{grid-template-columns:1fr;gap:2px}

.qj-tab{padding:.44rem .5rem;border-radius:9px;border:1px solid transparent;background:var(--bg-subtle);
  color:var(--text-secondary);font-size:12.5px;font-family:inherit;cursor:pointer;
  transition:all var(--t-fast);text-align:center;white-space:nowrap}

.qj-tab:hover{border-color:var(--accent-dim);color:var(--text-primary)}

.qj-tab.on{background:var(--accent-bg);border-color:var(--accent-dim);color:var(--accent);font-weight:600}

.qj-stage[data-view="cols"] .qj-tab{padding:.5rem .65rem;text-align:left}

/* ════════════════════ 模块页圆角全量收口（9/28 二次反馈）════════════════════
   诉求：模块页里凡还不是圆角的元素，一并统一成与卡片一致的圆角语言。
   审计依据：scripts/audit_square_corners.cjs（6 模块页 × 初始态/结果态，逐元素量 computed border-radius）
   三层根因：
     ① 内联 var(--r-*) 被「全站令牌 = 0」吞掉 ····················· 175 处
     ② CSS 类里硬编码 border-radius:0（.badge / .error-box …）····· 若干
     ③ 内联压根没写 border-radius（默认 0）· 结果面板说明块/小标签 · 276 处
   对策：① 作用域覆盖令牌（两套令牌一起覆盖）② 逐条显式覆盖类规则 ③ 低特异性扫描规则兜底。
   全部 scope 到 .qj-stage（6 个排盘模块页），【全站令牌仍是 0，一行不动】。 */

.qj-stage{
  --r-xs:6px;--r-sm:9px;--r-md:11px;--r-lg:13px;--r-xl:14px;
  /* 遗留第二套令牌（--radius-*），BaziPage 等处以 var(--radius-sm) 引用，一并覆盖 */
  --radius-sm:9px;--radius-md:11px;--radius-lg:13px;--radius-xl:14px;
}

/* ③ 扫描规则：模块页内所有盒元素套「小控件档」圆角。
   :where() 特异性为 0 ⇒ .card / .btn / .qj-tab / .qj-seal-i 等既有具体规则一律优先、不受影响；
   只有「本来没写圆角」的元素才由本规则接管，且无底色无边框的元素圆角不可见 ⇒ 零副作用。 */

.qj-stage :where(div,span,button,label,summary,li,section,article,aside,details,p,a,table,th,td){
  border-radius:var(--r-sm);
}

/* ② 类里硬编码 0、特异性同级 → 必须显式覆盖 */

.qj-stage .badge{border-radius:6px}

.qj-stage .error-box{border-radius:9px}

/* ── 例外：紧贴平铺网格（gap 0~1px，靠共享边构成连续网格面）——圆角会在接缝处开豁口 ── */

.qj-stage .gv-jg-grid,
.qj-stage .gv-jg-grid .gv-jg-cell,      /* 奇门九宫（gap:1px + hair 底色） */
.qj-stage .palace-grid,
.qj-stage .palace-cell,                 /* 遗留九宫格类（gap:0 + 共享 1px 边） */
.qj-stage .pillar-row > *{border-radius:0}

/* 四柱列（gap:0 紧贴） */

/* 手机端 ≤600px 推算后：表单收成可折叠「修改输入」条，结果先露脸（修复表单把结果推太深的问题） */

/* 注意：此处不可写 margin，否则会覆盖 .qj-stage__form 的 margin:0 auto 导致居中失效 */

.qj-form-details{min-width:0}

.qj-form-details > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;
  padding:.6rem .2rem;font-family:var(--font-serif);font-size:13px;font-weight:600;color:var(--accent);user-select:none}

.qj-form-details > summary::-webkit-details-marker{display:none}

.qj-form-details > summary::before{content:'▾';display:inline-block;transition:transform .2s;font-size:11px}

.qj-form-details:not([open]) > summary::before{transform:rotate(-90deg)}

.qj-form-details > .qj-form-inner{display:flex;flex-direction:column;gap:1rem;padding-top:.2rem}

@media(min-width:601px){ .qj-form-details > summary{display:none} }

/* 响应式：≤900px 单列堆叠（表单全宽在上、结果在下） */

@media(max-width:900px){
  .qj-stage{flex-direction:column}
  .qj-stage__form{max-width:100%!important;margin:0!important}
  .qj-stage[data-view="cols"] .qj-stage__form{max-width:100%!important}
}

/* ════════════════════ RESULTS ════════════════════ */

.result-section{display:flex;flex-direction:column;gap:1.1rem;animation:fadeUp 0.26s ease;}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.kv-grid{display:grid;grid-template-columns:auto 1fr;gap:0.42rem 1.1rem;font-size:var(--text-sm);}

.kv-label{color:var(--text-muted);font-size:var(--text-xs);letter-spacing:0.04em;padding-top:0.12em;font-weight:600;}

.kv-value{color:var(--text-primary);font-family:var(--font-serif);}

.kv-value.accent{color:var(--accent);}

.kv-value.cyan  {color:var(--cyan);}

/* ════════════════════ GAN-ZHI PILLARS ════════════════════ */

.gz-pill{display:inline-flex;flex-direction:column;align-items:center;
  padding:0.65rem 0.9rem 0.55rem;
  background:transparent;
  border:none;border-left:1px solid var(--border);border-radius:0;
  gap:0.06rem;min-width:62px;position:relative;transition:all var(--t-mid);
  box-shadow:none;}

.gz-pill:hover{background:var(--accent-bg);transform:translateY(-2px);box-shadow:var(--shadow-sm);}

.gz-pill::before{display:none;}

.gz-label{font-size:var(--text-xs);color:var(--text-muted);letter-spacing:0.08em;margin-bottom:0.22rem;
  text-transform:uppercase;font-weight:600;}

.gz-gan  {font-family:var(--font-serif);font-size:1.2rem;font-weight:600;color:var(--accent);line-height:1;}

.gz-zhi  {font-family:var(--font-serif);font-size:1.2rem;font-weight:600;color:var(--text-primary);line-height:1;}

.gz-nayin{font-size:var(--text-xs);color:var(--orange-dim);margin-top:0.14rem;}

.pillar-row{display:flex;gap:0;justify-content:center;flex-wrap:wrap;border-right:1px solid var(--border);}

/* ════════════════════ TAB BAR ════════════════════ */

.tab-bar{display:flex;gap:0;border-bottom:1px solid var(--border);
  margin-bottom:1rem;overflow-x:auto;background:transparent;}

.tab-bar::-webkit-scrollbar{height:2px;}

.tab{padding:0.4rem 0.85rem;border:none;border-bottom:2px solid transparent;
  background:transparent;color:var(--text-muted);font-size:var(--text-xs);font-weight:500;
  cursor:pointer;transition:all var(--t-fast);font-family:var(--font-sans);
  white-space:nowrap;letter-spacing:0.03em;margin-bottom:-1px;}

.tab:hover{color:var(--text-primary);}

.tab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600;}

/* ════════════════════ PALACE GRID ════════════════════ */

.palace-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);
  gap:0;aspect-ratio:1;max-width:380px;margin:0 auto;border:1px solid var(--border);}

.palace-cell{background:transparent;border-right:1px solid var(--border);border-bottom:1px solid var(--border);border-radius:0;
  padding:0.4rem 0.35rem;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:0.15rem;font-size:var(--text-xs);transition:all var(--t-mid);
  text-align:center;cursor:pointer;box-shadow:none;}

.palace-cell:hover{background:var(--accent-bg);box-shadow:inset 0 0 0 1px var(--accent-dim);z-index:1;}

.palace-cell.auspicious{border-color:var(--jade-dim);background:rgba(74,122,90,0.05);}

.palace-name{font-family:var(--font-serif);font-weight:600;font-size:var(--text-sm);color:var(--accent);}

.palace-star,.palace-door,.palace-deity{color:var(--text-secondary);font-size:var(--text-xs);}

/* ════════════════════ CALENDAR ════════════════════ */

.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}

.cal-day{aspect-ratio:0.9;display:flex;flex-direction:column;align-items:center;
  justify-content:center;border:1px solid transparent;
  font-size:var(--text-xs);cursor:pointer;transition:all var(--t-fast);
  padding:0.2rem;background:transparent;}

.cal-day:hover{border-color:var(--border);background:var(--bg-subtle);}

.cal-day.auspicious{border-color:var(--jade-dim);background:rgba(74,122,90,0.07);}

.cal-day.inauspicious{opacity:0.36;}

.cal-day.best{border-color:var(--accent-dim);background:var(--accent-bg);
  box-shadow:0 0 0 2px var(--accent-glow);}

.cal-date{font-size:var(--text-sm);color:var(--text-primary);font-weight:600;}

.cal-gz  {font-size:var(--text-xs);color:var(--text-muted);}

/* ════════════════════ TOASTS ════════════════════ */

.notifications{position:fixed;top:1.2rem;right:1.4rem;z-index:9999;
  display:flex;flex-direction:column;gap:0.5rem;pointer-events:none;}

.toast{background:var(--surface);border:1px solid var(--border);border-radius:0;
  padding:0.78rem 1.15rem;font-size:var(--text-sm);max-width:310px;
  animation:slideIn 0.2s ease,fadeOut 0.28s ease 3.7s forwards;
  box-shadow:var(--shadow-lift);}

.toast.success{border-color:var(--jade-dim);color:var(--jade);}

.toast.error  {border-color:var(--accent-dim);color:var(--accent-b);}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(22px); }
  to { opacity: 1; transform: none; }
}

@keyframes fadeOut {
  to { opacity: 0; transform: translateX(12px); }
}

/* ════════════════════ UTILITIES ════════════════════ */

.ornament-divider{display:flex;align-items:center;gap:0.65rem;color:var(--text-faint);
  font-size:var(--text-xs);letter-spacing:0.10em;}

.ornament-divider::before,.ornament-divider::after{content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--border));}

.ornament-divider::after{background:linear-gradient(90deg,var(--border),transparent);}

.section-tag{display:inline-flex;align-items:center;gap:0.3rem;font-size:var(--text-xs);
  color:var(--text-muted);letter-spacing:0.09em;text-transform:uppercase;
  margin-bottom:0.55rem;font-weight:600;}

.section-tag::before{content:'';display:inline-block;width:14px;height:2px;
  background:var(--accent-dim);border-radius:0;}

.info-row{display:flex;gap:0.55rem;align-items:flex-start;padding:0.52rem 0;
  font-size:var(--text-sm);color:var(--text-secondary);border-bottom:1px solid var(--border);}

.info-row:last-child{border-bottom:none;}

.info-row-icon{color:var(--accent);flex-shrink:0;font-size:var(--text-xs);padding-top:0.44em;}

.stat-pill{display:flex;flex-direction:column;align-items:center;padding:0.75rem 1.1rem;
  background:var(--bg-subtle);border:1px solid var(--border);border-radius:0;
  min-width:76px;transition:all var(--t-mid);gap:0.09rem;box-shadow:var(--shadow-xs);}

.stat-pill:hover{border-color:var(--border-hover);box-shadow:var(--shadow-sm);}

.stat-pill-label{font-size:var(--text-xs);color:var(--text-muted);letter-spacing:0.06em;
  text-transform:uppercase;font-weight:600;}

.stat-pill-value{font-family:var(--font-serif);font-size:1.1rem;font-weight:700;line-height:1;color:var(--accent);}

.stat-pill-sub  {font-size:var(--text-xs);color:var(--text-muted);}

.progress-bar{background:var(--bg-hover);border-radius:0;height:6px;overflow:hidden;
  border:1px solid var(--border);}

.progress-fill{height:100%;border-radius:0;
  background:linear-gradient(90deg, var(--accent-dark), var(--accent-b));
  transition:width 0.52s cubic-bezier(0.4,0,0.2,1);}

.hexagram-symbol{font-size:4.5rem;line-height:1;color:var(--accent);}

/* ════════════════════ RESPONSIVE ════════════════════ */

@media(max-width:1024px){
  .page-cols{grid-template-columns:280px 1fr;}
  .page-body{padding:1.4rem 1.5rem;}
}

@media(max-width:900px){
  .page-cols{grid-template-columns:1fr;}
  .page-cols-3{grid-template-columns:1fr 1fr;}
  .page-body{padding:1.1rem 1.2rem;}
  .page-header{padding:0.9rem 1.2rem;}
}

@media(max-width:640px){
  .page-cols-3{grid-template-columns:1fr;}
  .page-body{padding:1rem;}
}

/* ════════════════════ TAIJI ANIMATION ════════════════════ */

@keyframes taiji-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Agent page ── */

.agent-page{display:flex;gap:0;flex:1;min-height:0;}

.agent-sidebar{width:260px;flex-shrink:0;padding:10px 12px;overflow-y:auto;border-right:1px solid var(--border);font-size:var(--text-xs);}

.agent-sidebar-section{margin-bottom:12px;}

.agent-sidebar-label{font-size:var(--text-xs);font-weight:700;color:var(--text-secondary);font-family:var(--font-serif);margin-bottom:6px;letter-spacing:1px;}

.agent-sidebar-section p{font-size:var(--text-xs);margin:0;line-height:1.7;}

.agent-quick-prompts{display:flex;flex-wrap:wrap;gap:4px;}

.agent-quick-btn{font-size:var(--text-xs);padding:3px 8px;border:1px solid var(--border);background:var(--bg-subtle);cursor:pointer;font-family:var(--font-serif);color:var(--text-secondary);transition:border-color .15s;}

.agent-quick-btn:hover{border-color:var(--accent);}

.agent-main{flex:1;display:flex;flex-direction:column;min-width:0;}

.agent-messages{flex:1;overflow-y:auto;padding:16px;}

.agent-empty{text-align:center;padding:60px 20px;color:var(--text-muted);}

.agent-empty-icon{font-size:32px;margin-bottom:8px;}

.agent-empty-title{font-size:var(--text-sm);font-weight:700;font-family:var(--font-serif);}

.agent-empty-hint{font-size:var(--text-xs);margin-top:4px;}

/* ═══════════════ 工具类（重构：消除高频内联样式） ═══════════════ */

.serif    { font-family: var(--font-serif); }

.prose    { font-family: var(--font-serif); line-height: 1.8; }

.prose-lg { font-family: var(--font-serif); line-height: 1.85; font-size: var(--text-base); }

.t-xs     { font-size: var(--text-xs); }

.t-sm     { font-size: var(--text-sm); }

.muted    { color: var(--text-muted); }

.faint    { color: var(--text-faint); }

.secondary{ color: var(--text-secondary); }

.accent-c { color: var(--accent); }

.fw7      { font-weight: 700; }

.fw6      { font-weight: 600; }

/* 通用断语卡 / 网格 / 标签（共享组件配套） */

.verdict-card { padding: 0.85rem 1rem; border-radius: var(--r-sm, 6px); }

.verdict-banner { padding: 0.7rem 0.95rem; border-radius: var(--r-sm, 6px);
  font-family: var(--font-serif); line-height: 1.9; }

.role-grid { display: grid; gap: 0.4rem; }

.role-cell { text-align: center; padding: 0.45rem 0.3rem; border-radius: var(--r-sm, 6px);
  background: var(--surface); border: 1px solid var(--border); }

.chip { display: inline-block; padding: 1px 7px; border-radius: 4px;
  font-size: 0.62rem; font-family: var(--font-serif); line-height: 1.5; }

.sel-cell { cursor: pointer; transition: border-color var(--t-fast, .15s); }

.detail-box { padding: 0.6rem 0.85rem; border-radius: var(--r-sm, 6px);
  background: var(--bg-raised); border: 1px solid var(--border); }

.reason-row { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem;
  align-items: start; font-family: var(--font-serif); line-height: 1.7; }

/* ════════════════════ 璇玑·青调国风样板（深化版式，可整体删） ════════════════════ */

.qj-hero {
  text-align:center; padding:1.4rem 1rem 1.1rem;
  background:linear-gradient(180deg, var(--accent-glow) 0%, transparent 100%);
  border-bottom:1px solid var(--border); position:relative;
}

.qj-hero-title {
  font-family:var(--font-serif); font-weight:700; font-size:var(--text-2xl);
  color:var(--text-primary); letter-spacing:0.16em;
}

.qj-hero-sub {
  font-size:var(--text-xs); color:var(--text-muted); margin-top:0.35rem;
  letter-spacing:0.2em; font-family:var(--font-serif);
}

.qj-seal-hint {
  font-size:var(--text-2xs); color:var(--text-muted); letter-spacing:0.18em;
  text-align:center; margin:0.7rem 0 0.45rem;
}

.qj-seal-board {
  display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:center;
  padding:0.9rem 0.6rem; max-width:660px; margin:0 auto;
  background:var(--bg-raised); border:1px solid var(--border); box-shadow:var(--shadow-xs);
}

/* 工作台三盘卡片（仅 DashboardPage 两处使用：命理三盘 + 合参卡）。
   9/28：由直角改圆角 14px，与模块页卡片（.qj-stage .card，同为 14px）统一卡片语言。
   注意：只圆「卡片」这一层；卡片内部是 gap:0 + 1px 分隔线的紧贴井字网格
   （四柱 / 身强弱三格 / 十二宫 / 大运 / 流年），**刻意保持直角** ——
   密排网格圆角会在相邻格之间开豁口、把连续的盘面碎成独立方块（判据：格子之间有缝才圆）。
   顶部 2px accent 色条会随圆角成弧，这是预期效果（保留模块色标识）。 */

.qj-panel {
  position:relative; background:var(--surface);
  border:1px solid var(--border-card);
  border-top:2px solid var(--accent);
  border-radius:14px;
  box-shadow:var(--shadow-card);
  padding:1rem 1.1rem;
  transition:box-shadow var(--t-mid), transform var(--t-mid);
}

.qj-panel:hover { box-shadow:var(--shadow-lift); transform:translateY(-1px); }

.qj-glyph-wm {
  position:absolute; top:8px; right:10px; font-size:34px; font-weight:900;
  font-family:var(--font-serif); color:var(--accent-glow); line-height:1; pointer-events:none;
}

/* ═══ 模块徽记动效 v3（醒目档 · 悬停触发）═══
   纪律：idle 完全静止，只有鼠标悬停首页卡片时，该徽记才播放醒目档动效。
   导航栏/抽屉用 <symbol>+<use>，不在 .qj-emblem 作用域内，永远静态、互不影响。 */

.qj-emblem { overflow:visible; }

.qj-emblem [class^="a-"] { transform-box:view-box; }

/* 卡片圆环：idle 只有发丝描边（描边已由 --border-card 提供）；hover 提亮 + 金环呼吸光
   注：圆环内联了 boxShadow，会覆盖外部 box-shadow，故这里用 filter:drop-shadow */

.qj-module-card > div:first-child { transition:border-color var(--t-state), filter var(--t-state); }

.qj-module-card:hover > div:first-child { border-color:var(--accent-dim); animation:ringGlow 1.6s ease-in-out infinite; }

@keyframes ringGlow{0%,100%{filter:drop-shadow(0 0 8px var(--accent-glow))}50%{filter:drop-shadow(0 0 18px var(--accent-glow))}}

/* —— 醒目档关键帧（仅在 .qj-module-card:hover 下播放）——
   1 守护·日晷：日轮呼吸(缩1.22) + 晷针±28°    2 问答·鼎：浮沉-4px+缩放1.08 + 双足点光
   3 八字·四柱：立起(暗→亮+上移4px+缩放)       4 紫微·星盘：外环8s巡行 + 中核呼吸1.22
   5 运程·潮线：起伏±5px + 星点明灭(含缩放)     6 奇门·九宫：宫线依次点亮
   7 六爻·装卦：初→中→上 依次亮                 8 飞星·山向：山形浮沉-5px + 峰星明灭
   9 典籍·书册：书页开合±3px + 明暗 */

.qj-module-card:hover .qj-emblem .a-sun { animation:sunBreath 3s ease-in-out infinite; transform-origin:12px 10px }

@keyframes sunBreath{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.22)}}

.qj-module-card:hover .qj-emblem .a-needle { transform-origin:12px 10px; animation:needle 2.6s ease-in-out infinite }

@keyframes needle{0%,100%{transform:rotate(-28deg)}50%{transform:rotate(28deg)}}

.qj-module-card:hover .qj-emblem .a-body { animation:emDing 3s ease-in-out infinite; transform-origin:12px 16px }

.qj-module-card:hover .qj-emblem .a-footL { animation:emFoot 3s ease-in-out infinite }

.qj-module-card:hover .qj-emblem .a-footR { animation:emFoot 3s ease-in-out 1.5s infinite }

@keyframes emDing{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.08)}}

@keyframes emFoot{0%,100%{opacity:.15;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}

.qj-module-card:hover .qj-emblem .a-p1,
.qj-module-card:hover .qj-emblem .a-p2,
.qj-module-card:hover .qj-emblem .a-p3,
.qj-module-card:hover .qj-emblem .a-g1,
.qj-module-card:hover .qj-emblem .a-g2,
.qj-module-card:hover .qj-emblem .a-g3,
.qj-module-card:hover .qj-emblem .a-g4 { animation:emPillar 3s ease-in-out infinite }

.qj-module-card:hover .qj-emblem .a-p2 { animation-delay:.55s }

.qj-module-card:hover .qj-emblem .a-p3 { animation-delay:1.1s }

.qj-module-card:hover .qj-emblem .a-g2 { animation-delay:.45s }

.qj-module-card:hover .qj-emblem .a-g3 { animation-delay:.9s }

.qj-module-card:hover .qj-emblem .a-g4 { animation-delay:1.35s }

@keyframes emPillar{0%,100%{opacity:.08;transform:translateY(4px) scale(.96)}45%,55%{opacity:1;transform:translateY(0) scale(1)}}

.qj-module-card:hover .qj-emblem .a-ring { stroke-dasharray:47 6.5; transform-origin:12px 12px; animation:emOrbit 8s linear infinite }

.qj-module-card:hover .qj-emblem .a-core { animation:sunBreath 3s ease-in-out infinite; transform-origin:12px 12px }

@keyframes emOrbit{to{transform:rotate(360deg)}}

.qj-module-card:hover .qj-emblem .a-wave { animation:emTide 3s ease-in-out infinite }

.qj-module-card:hover .qj-emblem .a-star { animation:emTwinkle 2.2s ease-in-out infinite; transform-origin:18px 7px }

@keyframes emTide{0%,100%{transform:translateY(2px)}50%{transform:translateY(-5px)}}

@keyframes emTwinkle{0%,100%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1.3)}}

.qj-module-card:hover .qj-emblem .a-y1 { animation:emYao 3.2s ease-in-out infinite }

.qj-module-card:hover .qj-emblem .a-y2a,
.qj-module-card:hover .qj-emblem .a-y2b { animation:emYao 3.2s ease-in-out .5s infinite }

.qj-module-card:hover .qj-emblem .a-y3 { animation:emYao 3.2s ease-in-out 1s infinite }

@keyframes emYao{0%,100%{opacity:.08;transform:translateY(3px) scale(.97)}28%,62%{opacity:1;transform:translateY(0) scale(1)}}

.qj-module-card:hover .qj-emblem .a-mtn { transform-origin:12px 21px; animation:emDing 3.4s ease-in-out infinite }

.qj-module-card:hover .qj-emblem .a-peakstar { animation:emTwinkle 2.4s ease-in-out infinite; transform-origin:12px 8px }

.qj-module-card:hover .qj-emblem .a-pageL { animation:emPageL 3.2s ease-in-out infinite }

.qj-module-card:hover .qj-emblem .a-pageR { animation:emPageR 3.2s ease-in-out infinite }

@keyframes emPageL{0%,100%{opacity:.15;transform:translateX(0)}50%{opacity:1;transform:translateX(-3px)}}

@keyframes emPageR{0%,100%{opacity:.15;transform:translateX(0)}50%{opacity:1;transform:translateX(3px)}}

/* 无障碍 / 应用内动效开关：全部静默（含金环呼吸光） */

@media (prefers-reduced-motion:reduce){
  .qj-emblem [class^="a-"],
  .qj-module-card > div:first-child{animation:none !important}
}

html[data-motion="off"] .qj-emblem [class^="a-"],
html[data-motion="off"] .qj-module-card > div:first-child{animation:none !important}

/* ═══ 风格规范 v1 · 滚动入场（ENTER：淡入 + 上移 20px，一次性）═══
   用法：给区块加 .qj-reveal-up，给需要错开的卡片加 .qj-reveal + 内联 --rv-delay
   JS 进入视口后加 .qj-rv-in（hooks/useReveal.js）。纯 CSS 过渡，不引库。 */

.qj-reveal{opacity:0;
  transition:opacity var(--rv-dur) cubic-bezier(0.4,0,0.2,1) var(--rv-delay,0ms);}

.qj-reveal-up{opacity:0;transform:translateY(var(--rv-shift));
  transition:opacity var(--rv-dur) cubic-bezier(0.4,0,0.2,1) var(--rv-delay,0ms),
             transform var(--rv-dur) cubic-bezier(0.4,0,0.2,1) var(--rv-delay,0ms);}

.qj-reveal.qj-rv-in,.qj-reveal-up.qj-rv-in{opacity:1;transform:none;}

/* 双降级：系统减少动效 / 应用内动效开关关闭 → 直接显示终态 */

@media (prefers-reduced-motion:reduce){
  .qj-reveal,.qj-reveal-up{opacity:1 !important;transform:none !important;transition:none !important}
}

html[data-motion="off"] .qj-reveal,
html[data-motion="off"] .qj-reveal-up{opacity:1 !important;transform:none !important;transition:none !important}

/* ════════════════════ 首页 V5（去旋转太极 + hero 全屏自适应：满屏高·100vw 全宽·vmin 随视口缩放）════════════════════ */

/* —— Hero 宇宙观背景（星轨环 + 银河 + 繁星 + 北斗七星 + 流星） —— */

.qj-hero-bleed{width:100%;position:relative;}

.qj-hero-sky{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}

.qj-sky-glow{position:absolute;top:-28%;left:50%;transform:translateX(-50%);width:min(1400px,96vw);height:min(1400px,96vw);border-radius:50%;
  background:radial-gradient(circle at center, var(--accent-glow), transparent 62%);}

.qj-sky-orbit{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:1px solid var(--border);border-radius:50%;}

.qj-sky-orbit::after{content:'';position:absolute;top:-3px;left:50%;width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);}

/* 轨道用 vmin：宽屏/方屏/窄屏都等比铺满，不再固定 px 显小 */

.qj-o1{width:64vmin;height:64vmin;}

.qj-o2{width:96vmin;height:96vmin;}

.qj-o3{width:132vmin;height:132vmin;}

.qj-ring{animation:qj-spin 60s linear infinite;}

.qj-ring.qj-rev{animation:qj-spin 90s linear infinite reverse;}

@keyframes qj-spin{to{transform:translate(-50%,-50%) rotate(360deg);}}

.qj-sky-galaxy{position:absolute;top:18%;left:-20%;width:140%;height:min(260px,24vmin);transform:rotate(-16deg);
  background:linear-gradient(90deg,transparent,var(--accent-glow) 40%,rgba(143,185,168,.16) 55%,transparent);
  filter:blur(30px);opacity:.6;}

.qj-sky-galaxy.qj-sky-g2{top:auto;bottom:6%;left:auto;right:-25%;width:120%;transform:rotate(12deg);opacity:.4;}

.qj-sky-star{position:absolute;border-radius:50%;background:var(--accent);opacity:.7;animation:qj-tw 3.4s ease-in-out infinite;}

@keyframes qj-tw{0%,100%{opacity:.18}50%{opacity:.95}}

.qj-sky-beidou{position:absolute;top:7%;left:50%;transform:translateX(-50%);width:min(430px,50vmin);opacity:.55;animation:qj-floaty 16s ease-in-out infinite;}

@keyframes qj-floaty{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-14px)}}

.qj-bd-star{fill:var(--accent);filter:drop-shadow(0 0 5px var(--accent));}

.qj-bd-star.qj-bd-lit{fill:#c2a36b;filter:drop-shadow(0 0 8px #c2a36b);}

.qj-bd-line{stroke:var(--border);stroke-width:1;fill:none;}

.qj-bd-name{font-family:var(--font-serif);font-size:12px;fill:#c2a36b;}

.qj-sky-shoot{position:absolute;width:150px;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.9),transparent);transform:rotate(34deg);opacity:0;}

.qj-sky-shoot.qj-s1{top:12%;left:14%;animation:qj-shoot 7s ease-in infinite;}

.qj-sky-shoot.qj-s2{top:30%;left:62%;animation:qj-shoot 9s ease-in 4.5s infinite;}

.qj-sky-shoot.qj-s3{top:52%;left:38%;animation:qj-shoot 11s ease-in 8s infinite;}

@keyframes qj-shoot{0%{opacity:0;transform:translate(0,0) rotate(34deg)}5%{opacity:1}13%{opacity:0;transform:translate(440px,300px) rotate(34deg)}100%{opacity:0}}

/* 底部渐隐：星空融入页面底色，内容区不生硬截断 */

.qj-sky-fade{position:absolute;left:0;right:0;bottom:0;height:140px;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--bg));}

/* 动效降级：尊重系统 / 应用内 reduced-motion（星轨环、北斗、流星全部停帧） */

@media (prefers-reduced-motion:reduce){ .qj-hero-sky *{animation:none !important;} }

html[data-motion="off"] .qj-hero-sky *{animation:none !important;}

/* —— 卷藏一览条（古籍卷首「藏书记」式，替代青囊数字网格；只借排版语法） —— */

.qj-ledger{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:22px 0;margin-top:8px;}

.qj-ledger-line{display:flex;align-items:baseline;justify-content:center;gap:18px;flex-wrap:wrap;}

.qj-li{font-family:var(--font-serif);font-size:14.5px;color:var(--text-secondary);letter-spacing:2px;transition:color var(--t-state);}

.qj-li:hover{color:var(--text-primary);}

.qj-li b{font-family:var(--font-serif);font-size:22px;font-weight:700;color:var(--accent);margin-right:4px;}

.qj-dia{font-size:7px;color:var(--text-faint);transform:translateY(-3px);}

/* —— 区块眉题（统一格式 ·） —— */

.qj-sec-eyebrow{font-family:var(--font-serif);font-size:11px;letter-spacing:5px;color:var(--accent);margin-bottom:14px;}

.qj-sec-eyebrow::before{content:"· ";font-size:8px;}

.qj-sec-title{font-family:var(--font-serif);font-size:26px;font-weight:700;letter-spacing:6px;color:var(--text-primary);}

.qj-sec-desc{font-family:var(--font-sans);font-size:13px;color:var(--text-muted);margin-top:10px;letter-spacing:1px;}

/* —— 合参旗舰卡（信度分级可视化） —— */

.qj-flagcard{margin:34px auto 0;max-width:920px;text-align:left;display:flex;align-items:center;gap:22px;
  background:var(--accent-bg);border:1px solid var(--accent-dim);border-radius:16px;padding:24px 30px;
  transition:transform var(--t-mid),box-shadow var(--t-mid);cursor:pointer;}

.qj-flagcard:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,0.18);}

.qj-flag-ic{width:64px;height:64px;border-radius:14px;flex-shrink:0;background:linear-gradient(135deg,#15a394,#0a5f57);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-size:30px;box-shadow:0 4px 16px rgba(15,148,136,0.35);}

.qj-flag-b{flex:1;min-width:0;}

.qj-flag-title{font-family:var(--font-serif);font-size:20px;font-weight:700;letter-spacing:3px;color:var(--text-primary);}

.qj-levels{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}

.qj-lv{font-family:var(--font-serif);font-size:11.5px;padding:3px 12px;border-radius:999px;border:1px solid var(--accent-dim);display:flex;align-items:center;gap:6px;color:var(--text-secondary);}

.qj-lv .qj-dot{width:7px;height:7px;border-radius:50%;}

.qj-lv.qj-s .qj-dot{background:var(--accent);}

.qj-lv.qj-s{color:var(--accent);border-color:var(--accent-dim);}

.qj-lv.qj-m .qj-dot{background:#c2a36b;}

.qj-lv.qj-m{color:#c2a36b;border-color:rgba(194,163,107,0.5);}

.qj-lv.qj-w .qj-dot{background:var(--text-muted);}

.qj-lv.qj-w{color:var(--text-muted);}

.qj-lv.qj-c .qj-dot{background:var(--red-light);}

.qj-lv.qj-c{color:var(--red-light);border-color:rgba(181,54,30,0.5);}

.qj-flag-desc{font-family:var(--font-sans);font-size:13px;color:var(--text-secondary);margin-top:12px;line-height:1.85;}

.qj-flag-meta{font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);margin-top:8px;}

.qj-flag-go{font-family:var(--font-sans);font-size:12.5px;color:var(--accent);border:1px solid var(--accent-dim);border-radius:999px;padding:7px 18px;flex-shrink:0;white-space:nowrap;transition:all var(--t-state);}

.qj-flagcard:hover .qj-flag-go{background:var(--accent);color:#fff;}

/* —— 合参旗舰卡 · 手机端（≤640px）改纵向堆叠 ——
   桌面是 flex 横排：卡片 320px 内被 玉印 64 + 两个 22px 间距 + CTA 103 占去 211px，
   中间 flex:1;min-width:0 的 .qj-flag-b 只剩 47px ⇒ 中文无单词边界只能逐字折行
   （正文 87 字排 30 行）呈"竖排"观感、卡高 1283px。
   改法：纵向叙事（图标置顶 → 标题 → 信度标签 → 正文 → 右下 CTA），
   与青囊三术合参卡的节奏一致，但保留璇玑自己的玉印方章。
   注意：仅断点内生效，桌面端零影响；不改 JSX 结构。 */

@media(max-width:640px){
  .qj-flagcard{flex-direction:column;align-items:stretch;gap:0;padding:22px 20px 20px;}
  .qj-flag-ic{width:52px;height:52px;font-size:24px;border-radius:12px;margin-bottom:14px;}
  .qj-flag-b{width:100%;}
  .qj-flag-title{font-size:18px;letter-spacing:2px;}
  .qj-flag-go{align-self:flex-end;margin-top:18px;}
}

/* —— 九印列阵（首页模块矩阵，V4 字印风格：守/问/柱/星/运/门/卦/宅/典） —— */

.qj-seal-sec{text-align:center;margin-top:56px;}

.qj-seal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:780px;margin:34px auto 0;}

.qj-seal{aspect-ratio:1;border-radius:18px;border:1px solid var(--border-card);background:var(--surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;cursor:pointer;
  transition:transform var(--t-state),border-color var(--t-state),box-shadow var(--t-state);position:relative;}

.qj-seal:hover{transform:translateY(-4px);border-color:var(--accent-dim);box-shadow:0 8px 32px rgba(0,0,0,0.12);}

.qj-seal-glyph{width:56px;height:56px;border-radius:14px;border:1.5px solid var(--border-card);background:var(--bg-subtle);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-size:27px;color:var(--text-primary);transition:all var(--t-state);}

.qj-seal:hover .qj-seal-glyph{background:var(--accent);color:#fff;border-color:var(--accent);}

.qj-seal-nm{font-family:var(--font-serif);font-size:15px;font-weight:600;letter-spacing:2px;color:var(--text-primary);}

.qj-seal-dd{font-family:var(--font-sans);font-size:10.5px;color:var(--text-muted);margin-top:-4px;}

.qj-seal-go{position:absolute;top:14px;right:14px;font-size:11px;color:var(--text-faint);}

.qj-seal:hover .qj-seal-go{color:var(--accent);}

@media(max-width:560px){.qj-seal-grid{grid-template-columns:repeat(2,1fr);max-width:none;} .qj-seal-glyph{width:46px;height:46px;font-size:22px;}}

/* —— 理念收尾区 —— */

.qj-phil{margin-top:72px;background:var(--bg-subtle);border-top:1px solid var(--border);padding:64px 0 56px;text-align:center;border-radius:18px;}

.qj-phil-cards{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap;}

.qj-pcard{width:280px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px 20px;text-align:left;}

.qj-pcard-t{font-family:var(--font-serif);font-size:14px;font-weight:700;letter-spacing:2px;color:var(--accent);}

.qj-pcard-d{font-family:var(--font-sans);font-size:12px;color:var(--text-secondary);margin-top:9px;line-height:1.85;}

.qj-phil-bar{font-family:var(--font-sans);margin:26px auto 0;max-width:860px;background:var(--accent-bg);border:1px solid var(--accent-dim);
  border-radius:14px;padding:18px 24px;font-size:12.5px;color:var(--text-secondary);line-height:1.9;text-align:left;}

.qj-phil-bar b{color:var(--accent);}

/* —— 导航 mega 菜单（首页中央，V4 主方案：术数推演▾ · 守护 · 问答 · 典籍） —— */

.qj-mega{display:flex;align-items:center;gap:4px;flex:1;justify-content:center;}

.qj-mega-item{position:relative;}

.qj-mega-item > a{display:block;padding:8px 14px;font-family:var(--font-sans);font-size:14.5px;letter-spacing:2px;color:var(--text-secondary);border-radius:8px;transition:all var(--t-state);cursor:pointer;}

.qj-mega-item > a:hover{color:var(--accent);background:var(--accent-bg);}

.qj-mega-caret{font-size:10px;margin-left:3px;}

.qj-mega-panel{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(-4px);width:520px;max-width:calc(100vw - 32px);
  border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 12px 40px rgba(0,0,0,0.22);padding:18px;z-index:60;
  visibility:hidden;opacity:0;transition:opacity 150ms ease,transform 150ms ease,visibility 0s linear 150ms;}

/* 展开由 JS 状态驱动（data-open）——不再用 :hover/:focus-within：
   根因：子项经 clickable() 注入 tabIndex=0，点击后焦点滞留 → :focus-within 恒真 → 面板点击后不收回。
   现改由 onMouseEnter/Leave + onFocus/Blur 控制，点击子项即 setMegaOpen(false) 立即收起。 */

.qj-mega-item[data-open="1"] .qj-mega-panel{visibility:visible;opacity:1;transform:translateX(-50%) translateY(0);transition-delay:0s;}

.qj-mega-glabel{font-family:var(--font-serif);font-size:11px;color:var(--accent);letter-spacing:3px;margin:4px 0 10px;}

.qj-mega-glabel::before{content:"· ";font-size:8px;}

.qj-mega-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}

.qj-mega-gitem{display:flex;gap:9px;align-items:center;padding:9px 10px;border-radius:10px;transition:background var(--t-state);cursor:pointer;}

.qj-mega-gitem:hover{background:var(--accent-bg);}

.qj-mega-gic{width:32px;height:32px;border-radius:8px;background:var(--accent-bg);border:1px solid var(--accent-dim);display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-size:15px;color:var(--accent);flex-shrink:0;}

.qj-mega-gitem .qj-t{font-family:var(--font-serif);font-size:13.5px;color:var(--text-primary);}

.qj-mega-gitem .qj-d{font-size:10.5px;color:var(--text-muted);margin-top:1px;}

.qj-mega-hrow{display:flex;gap:8px;}

.qj-mega-hitem{flex:1;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:10px;border:1px solid transparent;transition:all var(--t-state);cursor:pointer;}

.qj-mega-hitem:hover{border-color:var(--accent-dim);background:var(--accent-bg);}

.qj-mega-hitem .qj-t{font-family:var(--font-serif);font-size:13.5px;color:var(--text-primary);}

.qj-mega-hitem .qj-d{font-size:10.5px;color:var(--text-muted);margin-top:1px;}

@media(max-width:768px){ .qj-mega{display:none;} }

/* —— 登录按钮实体化（导航统一，V4 反馈：做得更实） —— */

.qj-nav-login{font-family:var(--font-sans);font-size:13px;padding:8px 20px;border-radius:10px;cursor:pointer;
  background:var(--accent);color:#fff;border:1px solid var(--accent);box-shadow:0 2px 10px rgba(15,148,136,0.3);transition:transform var(--t-state),box-shadow var(--t-state);}

.qj-nav-login:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(15,148,136,0.4);}

/* ═════════════════════ V7 全站星空背景 CosmicBg（模块页替换旋转太极：北斗为尊 + 四象点题）════════════════════ */

/* 容器：fixed 全页背景（同 TaijiBg 挂载方式），内容在其上滚动 */

.qj-cosmos{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;}

/* 北斗为主角：放大提亮（覆盖 .qj-hero-sky 内的默认尺寸） */

.qj-cosmos .qj-sky-beidou{width:min(480px,54vmin);opacity:.78;}

/* 四象代表星官（配角）：虚线链 + 压暗，不喧宾夺主 */

.qj-xiu{position:absolute;inset:0;width:100%;height:100%;opacity:.34;}

.qj-xiu-line{stroke:var(--border);stroke-width:1;fill:none;stroke-dasharray:3 3;}

.qj-xiu-star{fill:var(--accent);opacity:.45;}

.qj-xiu-star.qj-key{opacity:.85;filter:drop-shadow(0 0 6px var(--accent));}

.qj-xiu-star.qj-hot{fill:#c25b4a;opacity:.95;filter:drop-shadow(0 0 7px rgba(194,91,74,.8));}

.qj-xiu-quad{font-family:var(--font-serif);font-size:10px;letter-spacing:3px;fill:var(--text-faint);}

.qj-xiu-name{font-family:var(--font-serif);font-size:9px;fill:var(--text-faint);opacity:.8;}

/* 轻幕：统一压暗星空，保证模块页内容可读 */

.qj-cosmos-scrim{position:absolute;inset:0;background:var(--bg);opacity:.22;}

/* ═════════════════════ mega 菜单 hover 桥修复（9/27，V7b 加固）════════════════════ */

/* 根因：面板 top=calc(100%+10px) 与触发器间有空隙，鼠标快速/斜向移向面板时 :hover 丢失、面板闪关。
   双保险：① 常开加宽透明桥（左右各外扩 30px、高 24px，跨越空隙直达面板顶部）；
   ② 面板改 visibility+opacity 过渡并带 150ms 关闭延迟（visibility 0s linear 150ms），
      hover 短暂丢失时面板仍可见 150ms，鼠标来得及回到面板上。 */

.qj-mega-item::after{content:'';position:absolute;top:100%;left:-30px;right:-30px;height:24px;pointer-events:auto;}

/* V7b：模块头字印（与首页九印列阵 qj-seal-glyph 同语言的小号版） */

.qj-modseal{width:36px;height:36px;border-radius:10px;border:1.5px solid var(--border-card);background:var(--bg-subtle);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-size:19px;font-weight:900;
  color:var(--text-primary);flex-shrink:0;transition:all var(--t-state);}

.qj-modseal:hover{background:var(--accent);color:#fff;border-color:var(--accent);}

/* V7b：mega 菜单当前模块高亮（模块页） */

.qj-mega-cur{background:var(--accent-bg);}

.qj-mega-cur .qj-t{color:var(--accent);font-weight:600;}

/* ═════════════════════ 图标体系 V1 · 方案A「玉印字标」qj-seal-i（9/27）════════════════════ */

/* 用途：占问事项 / 占问类型 / 择日理论精要 / 四盘体系 —— 替换彩色 emoji，统一印章语言。
   形制 = 双线方印（外发丝框 + 内细线，内线用 currentColor 随字色），选中 = 实底青印。
   尺寸：默认 30px（网格按钮内）／.sm 26px（列表行内）。 */

.qj-seal-i{width:30px;height:30px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;border:1px solid var(--border-card);background:var(--bg-overlay);
  font-family:var(--font-serif);font-size:15px;font-weight:700;line-height:1;color:var(--text-secondary);
  position:relative;transition:all var(--t-state);}

.qj-seal-i::after{content:'';position:absolute;inset:2.5px;border:1px solid currentColor;border-radius:5px;
  opacity:.26;transition:all var(--t-state);}

.qj-seal-i.sm{width:26px;height:26px;font-size:13px;border-radius:7px;}

.qj-seal-i.sm::after{inset:2px;border-radius:4px;}

/* 超小档：按钮内联 / 密集网格（V3 新增，沿用同形制） */

.qj-seal-i.xs{width:22px;height:22px;font-size:11.5px;border-radius:6px;}

.qj-seal-i.xs::after{inset:1.5px;border-radius:4px;}

/* 选中态：实底青印，内线转白 */

.qj-seal-i.qj-seal-on{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 2px 8px var(--accent-glow);}

.qj-seal-i.qj-seal-on::after{border-color:rgba(255,255,255,0.55);opacity:1;}

/* 悬停：父级按钮 hover 时描边提亮 */

.pb:hover .qj-seal-i,button:hover > .qj-seal-i{border-color:var(--accent-dim);color:var(--text-primary);}
/* ═══════════════════════════════════════════════════════════
   App.css — 从原 Layout.css 精简而来。
   仅保留 App.jsx 实际使用的布局类；原 Layout.jsx 移动抽屉导航
   已废弃（组件未被渲染、类名无人引用），相关死 CSS 一并移除。
═══════════════════════════════════════════════════════════ */
.app-shell{display:flex;flex-direction:column;min-height:100vh;width:100%;}

/* Top nav（App.jsx 首页 header 复用此类，sticky 吸顶） */
.topnav {
  height:62px;flex-shrink:0;display:flex;align-items:center;
  gap:0;padding:0 2rem;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  box-shadow:none;
  position:sticky;top:0;z-index:100;
}
/* 底部青调渐变细线 */
.topnav::after {
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, transparent 0%, var(--accent-dim) 18%, var(--accent) 50%, var(--accent-dim) 82%, transparent 100%);
  opacity:0.55;
}

/* Main content area */
.main-area{flex:1;display:flex;flex-direction:column;min-height:0;}

/* ═══ 窄屏适配 ═══
   每日守护页两栏布局（1fr 280px）在手机上放不下右栏 → 折叠为单列。
   !important 用于覆盖组件内联样式的 gridTemplateColumns。 */
@media (max-width: 820px) {
  .dg-two-col { grid-template-columns: 1fr !important; }
  .dg-two-col > * { min-width: 0; }
}
/* ══════════════════════════════════════════════════════════════════
   pages.css — Shared polish for all divination module pages
   Improves: section headers, result cards, pillar display, grid
══════════════════════════════════════════════════════════════════ */

/* ── Module section header (inside results) ── */
.module-section-head {
  display: flex; align-items: center; gap: 0.55rem;
  margin-bottom: 0.85rem; margin-top: 0.2rem;
}
.module-section-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
}
.module-section-title {
  font-family: var(--font-serif); font-size: var(--text-md); font-weight:700;
  color: var(--accent); letter-spacing: 0.08em; white-space: nowrap;
}
.module-section-badge {
  padding: 0.12rem 0.5rem; border-radius: 0;
  background: var(--accent-bg); border: 1px solid var(--accent-dim);
  font-size: 10px; font-weight: 700; color: var(--accent);
  font-family: var(--font-mono); letter-spacing: 0.05em;
}

/* ── Verdict banner (main judgment) ── */
.verdict-banner {
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, var(--accent-bg) 0%, var(--bg-subtle) 100%);
  border:none; border-left:2px solid var(--accent); border-bottom:1px solid var(--border);
  font-family: var(--font-serif); font-size: var(--text-base);
  color: var(--text-primary); line-height: 1.9;
}
.verdict-banner strong { color: var(--accent); }

/* ── Classical quote block ── */
.classical-quote {
  padding: 0.65rem 0.85rem;
  background: var(--bg-subtle); border-left: 3px solid var(--accent-dim);
  font-family: var(--font-serif); font-size: var(--text-sm);
  color: var(--text-secondary); line-height: 1.82; font-style: italic;
}
.classical-quote cite {
  display: block; margin-top: 0.4rem;
  font-size: var(--text-xs); color: var(--text-faint);
  font-style: normal; font-family: var(--font-mono);
}

/* ── Info bullet list ── */
.info-list { display: flex; flex-direction: column; gap: 0.3rem; }
.info-list-item {
  display: flex; gap: 0.5rem; align-items: flex-start;
  font-size: var(--text-sm); color: var(--text-secondary);
  font-family: var(--font-serif); line-height: 1.75;
  padding: 0.3rem 0;
}
.info-list-item::before {
  content: '·'; color: var(--accent-dim); flex-shrink: 0;
  font-size: 0.6rem; margin-top: 0.45em;
}

/* ── Data row (label: value) ── */
.data-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.42rem 0; border-bottom: 1px solid var(--border);
  font-size: var(--text-sm);
}
.data-row:last-child { border-bottom: none; }
.data-row-label { color: var(--text-muted); font-family: var(--font-sans); font-size: var(--text-xs); letter-spacing: 0.04em; }
.data-row-value { color: var(--text-primary); font-family: var(--font-serif); font-weight: 500; }
.data-row-value.accent { color: var(--accent); }

/* ── Score bar ── */
.score-bar-wrap { display: flex; flex-direction: column; gap: 0.3rem; }
.score-bar-label { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--text-muted); }
.score-bar-track {
  height: 6px; border-radius: 0;
  background: var(--bg-hover); overflow: hidden; border: 1px solid var(--border);
}
.score-bar-fill {
  height: 100%; border-radius: 0;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent-b));
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.score-bar-fill.jade   { background: linear-gradient(90deg, var(--jade), var(--jade-b)); }
.score-bar-fill.cyan   { background: linear-gradient(90deg, var(--cyan), var(--cyan-b)); }
.score-bar-fill.orange { background: linear-gradient(90deg, var(--orange), var(--orange-light)); }

/* ── Metric chips row ── */
.metric-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.metric-chip {
  display: flex; flex-direction: column; align-items: center;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border); background: var(--bg-subtle);
  min-width: 64px; transition: all var(--t-fast);
}
.metric-chip:hover { border-color: var(--border-hover); box-shadow: none; }
.metric-chip-val { font-family: var(--font-serif); font-size: 1.1rem; font-weight:700; color: var(--accent); line-height: 1; }
.metric-chip-label { font-size: 10px; color: var(--text-faint); margin-top: 2px; letter-spacing: 0.04em; }
.metric-chip.jade .metric-chip-val  { color: var(--jade); }
.metric-chip.cyan .metric-chip-val  { color: var(--cyan); }
.metric-chip.red  .metric-chip-val  { color: var(--accent-b); }

/* ── Two-pane grid (used in results) ── */
.result-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.result-three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.85rem; }
@media(max-width:680px) {
  .result-two-col { grid-template-columns: 1fr; }
  .result-three-col { grid-template-columns: 1fr 1fr; }
}

/* ── Empty result placeholder ── */
.result-placeholder {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 3.5rem 2rem; text-align: center;
  color: var(--text-muted);
}
.result-placeholder-icon { font-size: 3.5rem; opacity: 0.22; margin-bottom: 1rem; }
.result-placeholder-text { font-family: var(--font-serif); font-size: var(--text-base); line-height: 1.75; }

/* ── BaziPage specific: pillar row ── */
.bazi-pillar-row {
  display: flex; gap: 0.75rem; justify-content: center;
  flex-wrap: wrap; margin: 0.5rem 0;
}
.bazi-pillar {
  display: flex; flex-direction: column; align-items: center;
  padding: 0.85rem 1.2rem 0.75rem;
  background: transparent; border:none; border-left:1px solid var(--border);
  border-radius: 0; min-width: 72px; position: relative;
  box-shadow: none; transition: all var(--t-mid);
}
.bazi-pillar:hover { background:var(--accent-bg); }
.bazi-pillar::before {
  content:''; display:none; position:absolute; top:0; left:0; right:0;
  height: 2px; background: var(--accent-dim); border-radius: 0;
}
.bazi-pillar-label {
  font-size: 10px; color: var(--text-faint); letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 700; margin-bottom: 0.25rem;
}
.bazi-pillar-gan { font-family: var(--font-serif); font-size: 1.2rem; font-weight:600; color: var(--accent); line-height: 1; }
.bazi-pillar-zhi { font-family: var(--font-serif); font-size: 1.2rem; font-weight:600; color: var(--text-primary); line-height: 1; }
.bazi-pillar-sub { font-size: 10px; color: var(--text-faint); margin-top: 4px; font-family: var(--font-mono); }

/* ── QiMen palace mini-grid (in results) ── */
.qm-mini-grid {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: 3px; aspect-ratio: 1; max-width: 280px;
}
.qm-mini-cell {
  background: transparent; border:none; border-left:1px solid var(--border);
  border-radius: 0; padding: 0.35rem;
  font-size: 10px; text-align: center;
  display: flex; flex-direction: column; gap: 1px;
}

/* ── FengShui direction compass ── */
.fs-compass {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 4px;
  max-width: 360px; margin: 0 auto; aspect-ratio: 1;
}
.fs-compass-cell {
  background: transparent; border:none; border-left:1px solid var(--border);
  border-radius: 0; padding: 0.55rem 0.4rem;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: pointer; transition: all var(--t-fast); text-align: center;
  font-size: var(--text-xs);
}
.fs-compass-cell:hover { border-color: var(--border-hover); box-shadow:none; }
.fs-compass-cell.auspicious { border-color: var(--jade-dim); background: rgba(74,122,90,0.06); }
.fs-compass-cell.center { background: var(--bg-hover); }
.fs-compass-dir { font-weight: 700; color: var(--accent); font-size: var(--text-sm); }
.fs-compass-star { color: var(--text-primary); font-size: var(--text-xs); font-weight: 600; }
.fs-compass-nature { color: var(--text-muted); font-size: 10px; }

/* ── Date calendar cell ── */
.date-cal-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 4px; }
.date-cal-day {
  aspect-ratio: 0.85; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-radius: 0; border: 1.5px solid transparent;
  font-size: var(--text-xs); cursor: pointer; transition: all var(--t-fast);
  padding: 0.15rem; background: transparent;
}
.date-cal-day:hover { border-color: var(--border); background: var(--bg-subtle); }
.date-cal-day.auspicious { border-color: var(--jade-dim); background: rgba(74,122,90,0.07); }
.date-cal-day.inauspicious { opacity: 0.32; }
.date-cal-day.best { border-color: var(--accent-dim); background: var(--accent-bg); box-shadow: 0 0 0 2px var(--accent-glow); }
.date-cal-num { font-size: var(--text-sm); color: var(--text-primary); font-weight: 700; }
.date-cal-gz  { font-size: 10px; color: var(--text-muted); }