/* ==========================================================================
   XUANJI · 玄机 —— 设计令牌（Design Tokens）
   --------------------------------------------------------------------------
   视觉母版：新中式极简科技风
   目标市场：北美 / 欧洲（专业、克制、可信、无廉价算命感）

   核心色：
     米灰白 Rice White        #F8F6F2   —— 页面底色（温润纸质）
     纸白   Paper White       #FFFEFB   —— 卡片
     深黛青 Dark Teal Ink     #1A2E3D   —— 主文字（非纯黑）
     低饱和朱砂 Cinnabar      #B83227   —— 唯一强调色 / 主 CTA
     浅灰   Hairline Gray     #E5E2DB   —— 分割线 / 边框

   五行辅助色（仅用于模块区分与图标点缀，不做大面积填充）：
     木 Wood  #7BA17E    火 Fire  #E2A67A    土 Earth #C2A689
     金 Metal #B8B8B8    水 Water #8AA2B2

   设计原则：
   1. 浅色为默认。米灰白纸面 + 深黛青文字，替代纯白 + 纯黑。
   2. 朱砂只用于「主 CTA / 核心重点 / 激活态」，禁止大面积填充。
   3. 分割线低对比（#E5E2DB），保持页面干净、留白充足。
   4. 卡片式设计：统一圆角、统一阴影，阴影为纸面柔影而非黑重影。
   5. 标题走宋体（传统底蕴），正文走黑体（屏显可读），数字走等宽。
   ========================================================================== */

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

:root {
  /* ---------- 基底：米灰白 / 纸白 ---------- */
  --bg:          #F8F6F2;   /* 页面底（米灰白） */
  --bg-2:        #F1EEE7;   /* 次级底 / 页脚 */
  --surface:     #FFFEFB;   /* 卡片（纸白） */
  --surface-2:   #F8F6F2;   /* 卡片内嵌 */
  --surface-3:   #EDEAE2;   /* 输入框 / hover */
  --glass:       rgba(255, 254, 251, .82);  /* 玻璃拟态底 */
  --glass-2:     rgba(255, 254, 251, .94);

  /* ---------- 描边：浅灰主导（低对比） ---------- */
  --border:      #E5E2DB;                    /* 常驻描边 / 分割线 */
  --border-2:    #D2CCC0;                    /* 强调描边 */
  --border-soft: rgba(26, 46, 61, .08);      /* 中性分隔 */
  --hairline:    rgba(184, 50, 39, .22);     /* 朱砂细线（罗盘 / 装饰） */

  /* ---------- 文字：深黛青阶 ---------- */
  --text:        #1A2E3D;
  --text-2:      #4C5E69;
  /* #7A8B94 在 --bg 上仅 3.44:1，低于 WCAG AA 正文所需的 4.5:1。
     加深到 #66747C（4.55:1），次要文字可读性达标。 */
  --text-3:      #66747C;
  --text-4:      #A9B4B9;

  /* ---------- 强调色 ---------- */
  --accent:      #B83227;   /* 低饱和朱砂 —— 主 CTA / 核心重点 */
  --accent-2:    #C9432F;   /* 朱砂 hover（加深约 5%） */
  --accent-soft: rgba(184, 50, 39, .07);
  --accent-line: rgba(184, 50, 39, .26);

  /* ---------- 点睛金：降饱和，只做极淡点缀 ---------- */
  --gold:        #A98A4B;
  --gold-2:      #C2A868;
  --gold-soft:   rgba(169, 138, 75, .10);

  --teal:        #3D6B62;   /* 玄青 —— 次要强调 */
  --teal-2:      #4E857A;
  --teal-soft:   rgba(61, 107, 98, .10);

  /* ---------- 语义色（吉凶）----------
     注意：中国习惯「涨/吉 = 红」。这里 --good 用青绿（吉、宜、生），
     --high 用朱砂系（凶、忌、煞）。与西方红绿相反，但符合东方语境。 */
  --good:        #3F8F6B;
  --good-2:      #4E9E7A;
  --good-soft:   rgba(63, 143, 107, .09);
  --med:         #B3892F;
  --med-soft:    rgba(179, 137, 47, .10);
  --high:        #C0453A;
  --high-soft:   rgba(192, 69, 58, .09);
  --info:        #4478AE;
  --info-soft:   rgba(68, 120, 174, .09);

  /* ---------- 五行色（模块区分 / 图标点缀，不做大面积填充）---------- */
  --el-wood:  #7BA17E;   /* 木 浅松绿 */
  --el-fire:  #E2A67A;   /* 火 浅暖橙 */
  --el-earth: #C2A689;   /* 土 浅棕褐 */
  --el-metal: #B8B8B8;   /* 金 浅灰金 */
  --el-water: #8AA2B2;   /* 水 浅灰蓝 */

  /* ---------- 形状 ---------- */
  --radius:    16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --radius-lg: 22px;

  /* ---------- 阴影：纸面柔影（浅色下靠投影 + 细边，而非发光） ---------- */
  --shadow:    0 1px 2px rgba(26,46,61,.05), 0 8px 24px rgba(26,46,61,.07);
  --shadow-lg: 0 2px 4px rgba(26,46,61,.06), 0 18px 48px rgba(26,46,61,.10);
  --glow-red:  0 0 0 1px rgba(184,50,39,.20);
  --glow-gold: 0 0 0 1px rgba(169,138,75,.22);

  /* ---------- 字体 ----------
     标题：思源宋体 / 系统宋体 —— 传统底蕴
     正文：思源黑体 / 系统无衬线 —— 屏显可读
     数字英文：等宽 —— 强化「代码引擎、确定性推算」的技术属性 */
  --font: "Noto Sans SC", "Source Han Sans SC", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong",
          "SimSun", ui-serif, Georgia, serif;
  --font-cjk-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong",
          "SimSun", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  /* 兼容别名：早期代码引用过 --font-sans */
  --font-sans: var(--font);

  /* ---------- 排版节奏 ---------- */
  --tracking-wide: .12em;    /* 导航 / 标签小字 */
  --tracking-tight: -.022em; /* 大标题 */

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .3s;

  /* ---------- 布局（响应式）----------
     单一主断点 768px：以下为手机单列，以上为 PC 多栏。
     容器宽度与页面留白全部走流体变量，页面里不再出现硬编码宽度。 */
  --maxw: 1200px;                                       /* PC 内容容器最大宽度 */
  --maxw-narrow: 780px;                                 /* 长文 / 表单页容器 */
  --pad-x: clamp(16px, 4vw, 32px);                      /* 容器左右留白（流体） */
  --gap: clamp(14px, 2.2vw, 24px);                      /* 栅格间距（流体） */
  --cols: 1;                                            /* 栅格列数：手机单列 */
  --header-h: 62px;
}

/* PC / 平板横屏：断点 768px，跨过即进入多栏大屏布局 */
@media (min-width: 768px) {
  :root { --cols: 2; }
}
@media (min-width: 1024px) {
  :root { --cols: 3; }
}

/* ==========================================================================
   阅读模式（法务长文 / 报告）
   浅色下长文用「暖米白」进一步降低刺激，并保留足够行高
   ========================================================================== */

body.reading {
  --bg:        #FAF8F4;
  --surface:   #FFFEFB;
  --surface-2: #F6F3EC;
  --surface-3: #EDEAE2;
  --text:      #1A2E3D;
  --text-2:    #55676F;
  /* 与 :root 对齐：长文页的次要文字同样需达到 AA 4.5:1 */
  --text-3:    #66747C;
}

/* 打印 / PDF 导出走纯净白 */
@media print {
  :root {
    --bg: #fff; --surface: #fff; --surface-2: #fff; --surface-3: #fff;
    --text: #111; --text-2: #444; --text-3: #666;
    --border: #ddd; --border-soft: #eee; --hairline: #ccc;
    --glass: #fff; --glass-2: #fff;
  }
  body { background: #fff !important; color: #111 !important; }
  body::before { display: none !important; }
}

/* ==========================================================================
   基础重置（移动端优先）
   --------------------------------------------------------------------------
   1. 全局 border-box：任何 padding / border 都不再撑破容器宽度。
   2. 媒体元素一律 max-width:100%：图片、视频、画布、SVG 永不溢出父容器。
   3. 长单词 / 长链接强制换行，中文按字断行，避免把 1fr 栅格顶宽。
   4. html 上锁 -webkit-text-size-adjust，防止 iOS 横屏字号被自动放大。
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  width: 100%;
  overflow-x: hidden;
}

body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.65;
  scroll-behavior: smooth;
}

img, picture, video, canvas, iframe, embed, object {
  max-width: 100%;
  height: auto;
}

/* 表格默认可能比容器宽 —— 交由其父级 .table-scroll 横向滚动，而不是撑破页面 */
table { max-width: 100%; border-collapse: collapse; }
.table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

p, li, h1, h2, h3, h4, h5, h6, dd, dt {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 页面底色：极淡的纸质纹理 + 角落罗盘暗纹（纯 CSS，不依赖图片） */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle at 82% 8%, rgba(169,138,75,.05), transparent 40%),
    radial-gradient(circle at 8% 88%, rgba(184,50,39,.035), transparent 42%),
    radial-gradient(circle at 50% 45%, rgba(138,162,178,.03), transparent 58%);
}

body > * { position: relative; z-index: 1; }

a { color: inherit; }

::selection { background: var(--accent); color: #FFFEFB; }

/* 滚动条（浅色） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-2); }
::-webkit-scrollbar-thumb {
  background: var(--border-2); border-radius: 6px;
  border: 2px solid var(--bg-2);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }

/* 焦点可见性（无障碍） */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ==========================================================================
   容器（唯一宽度来源）
   --------------------------------------------------------------------------
   页面内的所有内容容器都挂 .wrap / .wrap-narrow。
   宽度 = min(1200px, 100%)，左右留白走 --pad-x 流体变量，永不出横向滚动条。
   移动端单列（100% 宽），PC 端居中留白。
   ========================================================================== */

.wrap,
.wrap-narrow {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.wrap        { max-width: var(--maxw); }        /* 1200px */
.wrap-narrow { max-width: var(--maxw-narrow); } /* 780px  —— 长文 / 表单 */

/* 宽容器：报表、对比图等需要更宽的页面 */
.wrap-wide { width: 100%; margin-inline: auto; padding-inline: var(--pad-x); max-width: 1360px; }

/* ---------- 显示切换：手机 / PC 各显示一部分内容 ---------- */
.pc-only { display: none !important; }
@media (min-width: 768px) {
  .pc-only   { display: block !important; }
  .sp-only   { display: none !important; }
}
/* 反向：只在手机显示的内联元素 */
@media (min-width: 768px) {
  .sp-only.inline { display: none !important; }
}

/* ==========================================================================
   排版
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
  margin: 0 0 14px;
}

h1 { font-size: clamp(32px, 5vw, 54px); }
h2 { font-size: clamp(21px, 2.6vw, 28px); }
h3 { font-size: 18px; }
h4 { font-size: 15px; font-family: var(--font); font-weight: 650; }


p { margin: 0 0 14px; }

.small  { font-size: 13px; }
.tiny   { font-size: 11.5px; }
.muted  { color: var(--text-2); }
.dim    { color: var(--text-3); }

/* 标签字：全大写 + 宽字距 + 朱砂 —— 专业感主要来自这里 */
.label,
.eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}

/* 朱砂细分隔线 */
.rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--border-2), transparent);
  opacity: .9;
}

/* CJK 汉字走衬线，强化东方质感 */
.cjk { font-family: var(--font-cjk-serif); }

/* 数值 / 英文 / 序号走等宽，体现「确定性引擎」 */
.num,
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   工具类
   ========================================================================== */

.hidden { display: none !important; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }

.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.row   { display: flex; gap: var(--gap); flex-wrap: wrap; flex-direction: column; }
.grid  { display: grid; gap: var(--gap); }

/* ---------- 栅格：移动优先 ----------
   默认（<768px）一律单列；跨过 768px 才展开为多栏。
   用 --cols 做语义化开关，页面只需挂 .grid-auto 即可自适应。 */
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }

/* 自适应栅格：按内容最小宽度自动折行，无需媒体查询也不会溢出 */
.grid-auto   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-auto-s { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.grid-auto-l { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .row    { flex-direction: row; }
  .row > * { flex: 1 1 0; min-width: 0; }
}
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ==========================================================================
   无障碍：动效偏好
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}