/* 渡己探源 · 视觉系统
   ------------------------------------------------------------------
   主题：绢本 · 墨韵（东方雅致 × 现代克制）

   2026-10-17 二版：一版「宣纸+朱砂+坐标纸」被用户否掉（「好丑」）。
   复盘出的病根，改版时必须守住：
   1. ⚠️ 上一版 :root 里 11 个变量写成了自引用（--card: var(--card)），
      CSS 规范里这是保证无效值，卡片底/线/金/tint 全部静默失效 ——
      **改变量时绝不允许 var(x) 引用自身**，写完 grep 自查一遍；
   2. 底色发黄 + 大红块 + 生硬直角 = 老式宣传页。新版：
      纸底提亮（绢白），红只做点睛（印章/强调字），主按钮走深墨底，
      圆角恢复 10-14px，柔和阴影，去掉坐标纸方格网；
   3. mono 等宽字只用于纯数字（刻度），中文一律 sans/serif；
   4. 五行色整体提亮降饱和，柱状图回归「数据可视化」的克制。
   ------------------------------------------------------------------ */

:root {
  /* —— 纸：绢白，亮而净，不发黄 —— */
  --paper: #faf8f3;
  --paper-2: #f4f0e7;
  --card: #fffefb;
  /* —— 墨：四级，由浓到淡 —— */
  --ink: #2b2622;        /* 正文 */
  --ink-2: #5c544b;      /* 次级正文 */
  --sub: #93897c;        /* 辅助说明 */
  --ink-deep: #1a1613;   /* 深墨（暗底按钮/hero 用） */
  --line: #e7e0d3;       /* 主要分隔线 */
  --line-2: #f1ece1;     /* 淡分隔 */
  /* —— 绛：点睛色（印泥），只做小面积强调 —— */
  --zhu: #9d3b2d;
  --zhu-2: #7c2f24;
  --zhu-soft: #f7ebe6;
  /* —— 鎏金：点缀 —— */
  --gold: #a8823f;
  --gold-soft: #f3ecdb;

  /* —— 五行（矿物颜料，提亮降饱和）—— */
  --mu: #5e8c6e;         /* 木 · 黛绿 */
  --huo: #bd5a47;        /* 火 · 朱砂 */
  --tu: #a3865f;         /* 土 · 赭石 */
  --jin: #b0924a;        /* 金 · 藤黄 */
  --shui: #5e7fa0;       /* 水 · 石青 */

  --ok: #3e7d55;
  --warn: #a8823f;
  --bad: #a8432f;

  /* —— 统计语言：数值、刻度、分布 —— */
  --stat-axis: #d8d0c0;      /* 刻度线 */
  --stat-grid: rgba(160, 148, 125, .14);  /* 网格线 */
  --stat-fill: rgba(157, 59, 45, .12);  /* 分布条填充 */
  --stat-fill-2: rgba(94, 127, 160, .14); /* 次级分布条 */
  --font-mono: "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace;

  /* —— 浅色衍生（淡底块：徽标/悬浮/提示）——
     集中到这里，避免各处随手 rgba(...) 导致整体偏色不统一。 */
  --zhu-tint: #f3e3dd;
  --gold-tint: #f5eeda;
  --ok-tint: #e4efe7;
  --bad-tint: #f6e4e0;
  --neutral-tint: #f0ece4;

  --radius: 14px;            /* 主卡片圆角 */
  --radius-sm: 9px;          /* 按钮小件圆角 */
  --shadow: 0 1px 2px rgba(60, 45, 30, .04), 0 4px 14px rgba(60, 45, 30, .05);
  --shadow-lg: 0 8px 28px rgba(50, 38, 26, .10);

  /* —— 排版：宋体为本，等宽只留给数字 ——
     2026-10-17 用户点名「宋体字有传统中国风，请更改」：全站正文/标题/控件统一走衬线，
     原先 body 走的是 -apple-system/苹方（无衬线），只有标题和干支是宋体。
     ⚠️ 不要把统计数字也换成宋体 —— 宋体数字是比例宽的，占比/刻度会左右跳动，
        所以 --font-mono 保持独立（见下方 .stat-num 的 tabular-nums）。

     ⚠️⚠️ 光靠系统字体名在安卓上是**无效**的 —— 这条踩过坑，别再改回去：
        · iOS/macOS 有 Songti SC，Windows 有 SimSun，都能命中；
        · 安卓 / 鸿蒙（MIUI / ColorOS / OriginOS / HarmonyOS）**系统里根本没有衬线中文字体**，
          只有 Noto Sans CJK。Songti SC / STSong / SimSun 一个都命中不了，
          最后一个 generic `serif` 在安卓上对中文**仍然回退黑体**。
        · 用户在安卓手机浏览器里看到的就是黑体，反馈「不是宋体」。
     解法：自托管分片宋体 webfont（fonts/serif.css，族名 "Duji Serif"）。
        · 族名排在系统宋体**之后**：iOS / Windows 用自己的系统宋体，零下载；
        · 安卓没有前者可命中，落到 "Duji Serif" 才下载 —— 只下页面用到的分片。
        · 族名不能叫 "Noto Serif SC"：会和系统同名字体撞名，命中的可能不是我们这份。 */
  --font-serif: "Songti SC", "STSong", "Songti TC", "SimSun", "NSimSun",
                "Noto Serif CJK SC", "Source Han Serif SC",
                "Duji Serif", serif;
}

/* 所有统计数值：等宽 + 表格数字对齐。
   东方排版里数字总是散乱的，加上这一条，同一张卡的「41%」「3」「20」
   会因为 tabular-nums 而对齐，读起来像一份数据表而不像散文。 */
.stat-num, .meta-val, .pc-num, .claim-stat, .dist-bar b {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--ink);
  font: 15px/1.7 var(--font-serif);
  background: var(--paper);
  padding-bottom: env(safe-area-inset-bottom);
  overflow-x: hidden;
  /* ⚠️ body 必须是 flex 列：`.view-trial` / `#viewReport` 是 absolute 撑满视口的，
     它们脱离文档流后 main 的内容高度塌成 0，于是紧跟其后的备案 footer 会被顶到
     y≈106 —— 正好落在校盘页副标题下面透出来，还 quarter 被模式开关遮住。
     让 main 撑满「topbar 之下、footer 之上」，footer 才永远贴在这一屏的底部。 */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 绢白底纹：顶部天光 + 极淡噪点。
   一版的 24px 坐标纸方格网被否 —— 手机上像 Excel 表格，喧宾夺主；
   「科学感」交给图表刻度与 tabular-nums 数字去表达，底子保持干净。 */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(120% 60% at 50% -10%, #fffefb 0%, rgba(255, 254, 251, 0) 60%),
    radial-gradient(80% 50% at 100% 100%, #f0ead9 0%, rgba(240, 234, 217, 0) 70%),
    var(--paper);
}

/* 宣纸纤维噪点：极淡一层，只给纸面质感，不参与构图 */
.app-noise {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .03;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--gold-soft); color: var(--ink); }

/* ---------------- 顶栏 ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 6px;
  height: 52px; padding: 0 10px;
  background: rgba(250, 248, 243, .86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(231, 224, 211, .8);
}
.topbar .title {
  flex: 1; text-align: center;
  font: 500 17px/1 var(--font-serif); letter-spacing: 4px; color: var(--ink);
}
.topbar .back {
  min-width: 44px; height: 34px; border: 0; background: none; padding: 0 6px;
  color: var(--ink-2); font-size: 14px; display: flex; align-items: center; gap: 2px;
}
.topbar .back::before {
  content: ""; width: 8px; height: 8px; border-left: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(45deg); margin-right: 4px;
}
.topbar .back[hidden] { visibility: hidden; }
.topbar-right { min-width: 52px; display: flex; justify-content: flex-end; }

/* ---------------- 独立窗口（已「添加到主屏幕」）的安全区 ----------------
   apple-mobile-web-app-status-bar-style = black-translucent，意在让页面铺到状态栏底下
   （深色顶栏与金色星穹正好连成一片）；但顶栏与欢迎页右上角的登录入口必须自己避让，
   否则会被时间、信号图标压住。env() 在普通浏览器里恒为 0，不影响正常浏览。 */
html[data-standalone] .topbar {
  height: calc(52px + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
}
html[data-standalone] .wl-user { top: calc(18px + env(safe-area-inset-top)); }
/* 聊天页高度写死 100dvh - 60px（顶栏 52 + 内边距 8），独立窗口下顶栏多出状态栏高度，
   不减掉就会把输入框顶出屏幕。chat-mode 下还要再扣掉实测的 --foot-h。 */
html[data-standalone] .chat-wrap { height: calc(100dvh - 60px - env(safe-area-inset-top)); }
html[data-standalone] body.chat-mode .chat-wrap {
  height: calc(100dvh - 60px - var(--foot-h, 0px) - env(safe-area-inset-top));
}

.user-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 4px; border: 1px solid var(--line);
  background: var(--card); border-radius: 999px; color: var(--ink);
  font-size: 12.5px; font-family: var(--font-serif); letter-spacing: .5px;
}
.user-chip .av {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(140deg, #3a332d, #241f1b); color: #ecd9ae; font-size: 11px;
}
.user-chip:active { background: var(--line-2); }

.login-btn {
  padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); color: var(--ink-2); font-size: 13px; letter-spacing: 1px;
  box-shadow: var(--shadow);
}
.login-btn:active { background: var(--paper-2); }

.user-menu {
  position: fixed; top: 56px; right: 12px; z-index: 60;
  min-width: 160px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px;
  animation: sheetUp .18s ease;
}
.user-menu a {
  display: block; padding: 9px 12px; border-radius: 8px;
  font-size: 13.5px; color: var(--ink); text-decoration: none;
}
.user-menu a:active { background: var(--line-2); }
.user-menu a.lo { color: var(--zhu); }

/* main 撑满 topbar 与备案 footer 之间（见 body 的注释）；position:relative 让
   absolute 的校盘/报告页以它为定位基准，从而自然避开 footer，不必写死 footer 高度。 */
main {
  max-width: 560px; margin: 0 auto; padding: 14px 14px 40px;
  flex: 1 1 auto; width: 100%; position: relative;
}

/* ---------------- 首屏 ---------------- */
.hero {
  position: relative; overflow: hidden;
  border-radius: 20px; padding: 26px 18px 20px; margin-bottom: 14px;
  text-align: center; color: #ede3cf;
  background: linear-gradient(155deg, #2e2925 0%, #3a2c26 55%, #4a2f26 100%);
  box-shadow: 0 12px 30px rgba(50, 38, 26, .22);
}
.hero::before,
.hero::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.hero::before {
  width: 260px; height: 260px; right: -110px; top: -130px;
  border: 1px solid rgba(226, 190, 130, .22);
  box-shadow: inset 0 0 0 28px rgba(226, 190, 130, .06);
}
.hero::after {
  width: 150px; height: 150px; left: -70px; bottom: -80px;
  background: radial-gradient(circle, rgba(226, 190, 130, .16) 0%, rgba(226, 190, 130, 0) 70%);
}
.hero .taiji {
  width: 54px; height: 54px; display: block; margin: 0 auto 12px;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .3));
}
.hero-title {
  margin: 0; font: 400 27px/1.2 var(--font-serif);
  letter-spacing: 8px; text-indent: 8px;
}
.hero-rule {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 12px auto 8px; max-width: 260px;
  font-size: 11px; letter-spacing: 2px; color: rgba(217, 185, 125, .82);
}
.hero-rule i { flex: 1; height: 1px; background: rgba(217, 185, 125, .3); }
.hero-sub {
  margin: 0; font-size: 12.5px; letter-spacing: 1.5px; color: rgba(217, 185, 125, .68);
}

/* ---------------- 欢迎页（落地页：深墨星穹 · 描金） ---------------- */
body.welcome-mode .topbar { display: none; }
body.welcome-mode main { padding-top: 0; }

/* 欢迎页右上角登录入口（复用全局登录弹层 / 用户菜单） */
.wl-user { position: absolute; top: 18px; right: 16px; z-index: 5; }
.wl-login {
  appearance: none; cursor: pointer; background: transparent;
  border: 1px solid rgba(226, 190, 130, .35); border-radius: 999px;
  color: rgba(230, 197, 131, .78);
  font: 400 12.5px/1 var(--font-serif); letter-spacing: 2px;
  padding: 8px 16px; transition: background .2s ease, border-color .2s ease;
}
.wl-login:active { background: rgba(226, 190, 130, .12); border-color: rgba(226, 190, 130, .6); }
.wl-chip {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(226, 190, 130, .08);
  border: 1px solid rgba(226, 190, 130, .3); border-radius: 999px;
  color: #e6c583; font-size: 12.5px; padding: 6px 12px;
  transition: background .2s ease;
}
.wl-chip:active { background: rgba(226, 190, 130, .16); }
.wl-chip .av { font-size: 13px; }

/* ---------------- 欢迎页（深墨 · 鎏金）----------------
   这是全站唯一的**暗底**场景，用的是一套独立配色，不复用 :root 的浅色系 ——
   浅色系的 --ink（正文墨色）在暗底上会深到看不见，金字 --gold 也偏暗。
   改 :root 时**不要**顺手把这几个值一起改掉。 */
.view-welcome { --w-ink: #14120f; --w-gold: #e6c583; --w-gold-dim: rgba(230, 197, 131, .55); }

.view-welcome {
  position: relative; overflow: hidden;
  width: 100vw; margin-left: calc(50% - 50vw); margin-top: -14px;
  min-height: calc(100vh - 88px);
  display: flex; align-items: center; justify-content: center;
  color: var(--w-gold);
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, #241d15 0%, rgba(36, 29, 21, 0) 60%),
    radial-gradient(ellipse 90% 55% at 50% 110%, #241d15 0%, rgba(36, 29, 21, 0) 65%),
    linear-gradient(180deg, #14120f 0%, #0b0908 100%);
}
.wl-sky { position: absolute; inset: 0; pointer-events: none; }

/* 星辰：两层微光交替闪烁 */
.wl-stars, .wl-stars-2 {
  position: absolute; top: 0; left: 0; width: 2px; height: 2px; border-radius: 50%;
  background: transparent;
}
.wl-stars {
  box-shadow:
    7vw 14vh 0 0 rgba(230, 197, 131, .5), 18vw 7vh 0 0 rgba(230, 197, 131, .35),
    30vw 21vh 0 0 rgba(230, 197, 131, .4), 44vw 9vh 0 0 rgba(230, 197, 131, .5),
    57vw 16vh 0 0 rgba(230, 197, 131, .3), 68vw 6vh 0 0 rgba(230, 197, 131, .45),
    80vw 19vh 0 0 rgba(230, 197, 131, .4), 91vw 11vh 0 0 rgba(230, 197, 131, .5),
    12vw 32vh 0 0 rgba(230, 197, 131, .3), 26vw 44vh 0 0 rgba(230, 197, 131, .35),
    74vw 38vh 0 0 rgba(230, 197, 131, .35), 88vw 47vh 0 0 rgba(230, 197, 131, .3),
    6vw 58vh 0 0 rgba(230, 197, 131, .35), 94vw 66vh 0 0 rgba(230, 197, 131, .35),
    16vw 78vh 0 0 rgba(230, 197, 131, .3), 84vw 82vh 0 0 rgba(230, 197, 131, .3),
    36vw 86vh 0 0 rgba(230, 197, 131, .28), 64vw 90vh 0 0 rgba(230, 197, 131, .3);
  animation: wlTwinkle 4.2s ease-in-out infinite;
}
.wl-stars-2 {
  box-shadow:
    10vw 24vh 0 0 rgba(230, 197, 131, .4), 23vw 13vh 0 0 rgba(230, 197, 131, .3),
    37vw 5vh 0 0 rgba(230, 197, 131, .45), 51vw 25vh 0 0 rgba(230, 197, 131, .35),
    63vw 12vh 0 0 rgba(230, 197, 131, .4), 76vw 27vh 0 0 rgba(230, 197, 131, .3),
    87vw 33vh 0 0 rgba(230, 197, 131, .45), 21vw 63vh 0 0 rgba(230, 197, 131, .3),
    79vw 56vh 0 0 rgba(230, 197, 131, .35), 47vw 78vh 0 0 rgba(230, 197, 131, .28),
    9vw 90vh 0 0 rgba(230, 197, 131, .3), 90vw 92vh 0 0 rgba(230, 197, 131, .28);
  animation: wlTwinkle 5.6s ease-in-out 1.3s infinite;
}
@keyframes wlTwinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* 缓转的星轨环 */
.wl-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; }
.wl-ring.r1 {
  width: 340px; height: 340px; margin: -170px 0 0 -170px;
  border: 1px dashed rgba(226, 190, 130, .12);
  animation: wlSpin 90s linear infinite;
}
.wl-ring.r2 {
  width: 480px; height: 480px; margin: -240px 0 0 -240px;
  border: 1px solid rgba(226, 190, 130, .07);
  animation: wlSpin 150s linear infinite reverse;
}
@media (max-height: 640px) { .wl-ring.r2 { display: none; } }
@keyframes wlSpin { to { transform: rotate(360deg); } }

.wl-core { position: relative; text-align: center; padding: 46px 22px 40px; max-width: 440px; }

.wl-taiji {
  width: 92px; height: 92px; display: block; margin: 0 auto 20px;
  filter: drop-shadow(0 0 20px rgba(230, 197, 131, .35));
  animation: wlFade 1.4s ease forwards, wlSpin 60s linear infinite;
  opacity: 0;
}
@keyframes wlFade { to { opacity: 1; } }

.wl-seal {
  font-size: 10.5px; letter-spacing: 6px; text-indent: 6px;
  color: rgba(230, 197, 131, .48); margin-bottom: 14px;
  animation: wlIn .9s ease .25s forwards; opacity: 0;
}
.wl-title {
  margin: 0;
  font: 400 44px/1.25 var(--font-serif);
  letter-spacing: 14px; text-indent: 14px;
  background: linear-gradient(180deg, #f6e3b4 0%, #ddbC7e 55%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 14px rgba(230, 197, 131, .25));
  animation: wlIn 1s ease .4s forwards; opacity: 0;
}
.wl-rule {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 18px auto 12px; max-width: 240px;
  font-size: 11.5px; letter-spacing: 3px; color: rgba(230, 197, 131, .72);
  animation: wlIn 1s ease .55s forwards; opacity: 0;
}
.wl-rule i {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226, 190, 130, .45), transparent);
}
.wl-sub {
  margin: 0 0 36px; font-size: 13px; line-height: 2.1; letter-spacing: 1.5px;
  color: rgba(230, 197, 131, .55);
  animation: wlIn 1s ease .7s forwards; opacity: 0;
}
.wl-cta {
  appearance: none; cursor: pointer;
  border: 1px solid rgba(226, 190, 130, .65); border-radius: 999px;
  color: #f0d9a8;
  background: linear-gradient(180deg, rgba(226, 190, 130, .14), rgba(226, 190, 130, .05));
  font: 500 16px/1 var(--font-serif); letter-spacing: 6px; text-indent: 6px;
  padding: 15px 46px;
  transition: transform .2s ease, background .2s ease;
  animation: wlIn 1s ease .9s forwards, wlGlow 3.2s ease-in-out 1.9s infinite;
  opacity: 0;
}
.wl-cta:active { transform: scale(.96); background: rgba(226, 190, 130, .2); }
@keyframes wlGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 190, 130, 0), inset 0 0 12px rgba(226, 190, 130, .06); }
  50% { box-shadow: 0 0 26px 2px rgba(226, 190, 130, .22), inset 0 0 14px rgba(226, 190, 130, .1); }
}
.wl-hint {
  margin-top: 24px; font-size: 10.5px; letter-spacing: 4px; text-indent: 4px;
  color: rgba(230, 197, 131, .35);
  animation: wlIn 1s ease 1.1s forwards; opacity: 0;
}
@keyframes wlIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* wl-title 用 wlIn 但自身有 background-clip，transform 动画结束后清 transform 防渲染毛边 */
.wl-title, .wl-cta { will-change: opacity; }

@media (max-width: 359px) {
  .wl-title { font-size: 34px; letter-spacing: 10px; text-indent: 10px; }
}

/* ---------------- 卡片 ----------------
   二版形态回归「安静的白纸」：柔和圆角、细边、极淡阴影。
   一版的「顶部栏线 + 印章方块 + 直角」组合像图表模板，被否 ——
   东方感交给衬线标题与留白去给，卡片本身保持素净。 */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 15px 14px; margin-bottom: 13px;
  box-shadow: var(--shadow);
}
.card-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 13px;
  font: 500 15.5px/1.3 var(--font-serif); letter-spacing: 2px; color: var(--ink);
}
/* 标题记号：一枚小的竖置印签（圆角细条），绛色只此一点 */
.card-head::before {
  content: ""; width: 3px; height: 14px; align-self: center; flex: 0 0 3px;
  border-radius: 2px; background: var(--zhu); opacity: .85;
}
/* 分隔线：细实线 + 上方留白，卡片内部用横线分区（数据表的行间线） */
.card-head::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--line-2);
  margin-left: 2px;
}
.card-head .tail {
  order: 9; margin-left: 0; flex: 0 0 auto;
  font: 400 11px/1.2 var(--font-serif); letter-spacing: 0; color: var(--sub);
}

/* ---------------- 积分卡 ---------------- */
.points-card {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(120deg, var(--card) 0%, var(--gold-soft) 100%);
  border-color: rgba(168, 130, 63, .3);
}
.pc-icon {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
  display: grid; place-items: center; font-size: 19px;
  background: radial-gradient(circle at 30% 30%, #f6e6c2, #d9b779);
  color: var(--gold); box-shadow: inset 0 -2px 6px rgba(120, 84, 30, .25);
}
.pc-left { flex: 1; min-width: 0; }
.pc-num { font: 500 22px/1.2 var(--font-serif); color: var(--ink); }
.pc-num span { font-size: 26px; color: var(--zhu); margin-right: 3px; }
.pc-tip { font-size: 12px; color: var(--sub); margin-top: 2px; }
.tip-link {
  color: var(--zhu); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(157, 59, 45, .35); font-weight: 500; padding: 2px 0;
}

/* 恢复码展示 */
.rc-box {
  text-align: center; padding: 14px 12px; margin-bottom: 14px;
  border: 1px dashed rgba(168, 130, 63, .6); border-radius: 12px;
  background: linear-gradient(160deg, var(--paper-2), #f8f0df);
}
.rc-title { font: 500 15px/1.4 var(--font-serif); color: var(--ink); letter-spacing: 1px; }
.rc-code {
  margin: 10px 0 8px; padding: 10px 6px; border-radius: 10px;
  background: var(--ink); color: #f3e4c8;
  font: 600 19px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 2px;
}
.rc-tip { font-size: 12px; color: var(--sub); line-height: 1.7; margin-bottom: 12px; }
.rc-tip b { color: var(--zhu); }
.pc-btn {
  flex: 0 0 auto; padding: 9px 18px; border-radius: 999px; border: 0;
  background: linear-gradient(180deg, #38312b 0%, #221d19 100%);
  color: #f2ead9; font-size: 13.5px; letter-spacing: 1px;
  box-shadow: 0 4px 12px rgba(40, 32, 24, .22);
}
.pc-btn:active { transform: translateY(1px); }

/* ---------------- 表单 ---------------- */
.seg {
  display: flex; gap: 3px; padding: 3px; margin-bottom: 12px;
  background: var(--line-2); border-radius: 12px; border: 1px solid var(--line);
}
.seg-btn {
  flex: 1; padding: 9px 4px; border: 0; border-radius: 9px; background: transparent;
  color: var(--ink-2); font: 400 14px/1 var(--font-serif); letter-spacing: 2px;
  transition: all .18s ease;
}
.seg-btn.on {
  background: #fff; color: var(--zhu); font-weight: 600;
  box-shadow: 0 1px 5px rgba(72, 54, 36, .12);
}
.seg-label { font-size: 12px; color: var(--sub); margin: 0 0 6px 2px; letter-spacing: 1px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.field { margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: var(--sub); margin-bottom: 5px; letter-spacing: 1px; }
.field input {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fffefb; color: var(--ink); font: 400 16px/1.3 var(--font-serif);
  transition: border-color .18s, box-shadow .18s;
}
.field input:focus {
  outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(168, 130, 63, .14);
}
.lunar-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 8px; }
.lunar-row input { text-align: center; padding: 10px 4px; }
.row { display: flex; align-items: center; gap: 7px; font-size: 14px; margin-bottom: 12px; color: var(--ink-2); }
.row input { accent-color: var(--zhu); width: 16px; height: 16px; }

.adv {
  font-size: 13px; color: var(--sub); margin-bottom: 14px;
  border-top: 1px dashed var(--line); padding-top: 10px;
}
.adv summary { cursor: pointer; padding: 2px 0; letter-spacing: 1px; }
.adv[open] summary { color: var(--ink); }
.adv .field { margin-top: 10px; }

/* ---------------- 按钮 ----------------
   主按钮走深墨底（ink-deep 渐变）白字：稳重、现代，像一块墨玉牌。
   绛红只出现在小面积强调（印签、链接、激活态），一大块红底是「宣传页感」的根源。 */
.btn {
  width: 100%; padding: 13px; border-radius: 12px; border: 0; font-size: 16px;
  font-family: var(--font-serif); transition: transform .12s, box-shadow .18s;
}
.btn.primary {
  background: linear-gradient(180deg, #38312b 0%, #221d19 100%);
  color: #f2ead9; letter-spacing: 4px; text-indent: 4px;
  box-shadow: 0 6px 16px rgba(40, 32, 24, .28);
}
.btn.primary:active { transform: translateY(1px); box-shadow: 0 3px 9px rgba(40, 32, 24, .22); }
.btn.primary[disabled] { opacity: .6; box-shadow: none; }
.btn.ghost {
  background: var(--card); color: var(--ink-2); border: 1px solid var(--line); letter-spacing: 2px;
}
.btn.ghost:active { background: var(--line-2); }
.btn.link { background: none; color: var(--sub); font-size: 13px; margin-top: 8px; }

.err { color: var(--bad); font-size: 13px; margin-top: 10px; min-height: 18px; text-align: center; }
/* 底部备案区：命理声明 + ICP 备案号 + 公安联网备案号。
   放在 main 之外 → 首页/排盘/对话所有页面底部都在，符合备案「所有页面底部显著位置」要求 */
/* 备案区：ICP + 公安备案 + 隐私政策入口，所有页面底部可见（备案合规要求）。
   flex:0 0 auto —— main 会长，不许把它压扁。 */
.site-foot { max-width: 560px; margin: 0 auto; padding: 12px 14px 26px; text-align: center; flex: 0 0 auto; }
.footer-note {
  text-align: center; color: #9a9284; font-size: 11.5px; letter-spacing: 1px; padding: 0;
}
.footer-note::before, .footer-note::after { content: "·"; margin: 0 6px; opacity: .6; }
/* tool 模式的完整免责声明（放在全局 footer 里，所有页面底部可见） */
.foot-long {
  text-align: center; color: #9a9284; font-size: 11px; line-height: 1.7;
  padding: 8px 4px 0; letter-spacing: .3px;
}
/* ICP 备案号（须链接工信部备案系统） */
.icp-note {
  font-size: 11.5px; letter-spacing: .5px; padding: 6px 0 0;
}
.icp-note a { color: #9a9284; text-decoration: none; }
.icp-note a:hover { color: var(--zhu); text-decoration: underline; text-underline-offset: 3px; }
/* 公安联网备案号（须「官方图标 + 编号」并链接公安备案查询页） */
.police-note {
  font-size: 11.5px; letter-spacing: .5px; padding: 6px 0 0;
}
.police-note a {
  color: #9a9284; text-decoration: none;
  display: inline-flex; align-items: center; gap: 4px;
}
.police-note a:hover { color: var(--zhu); text-decoration: underline; text-underline-offset: 3px; }
.police-note .police-icon { display: block; width: 20px; height: 20px; }
/* 隐私政策入口（应用商店要求 App 内可访问到隐私政策）。
   与备案号同一视觉层级 —— 都是页脚的「法规类」信息。 */
.privacy-note {
  font-size: 11.5px; letter-spacing: .5px; padding: 6px 0 0;
}
.privacy-note a { color: #9a9284; text-decoration: none; }
.privacy-note a:hover { color: var(--zhu); text-decoration: underline; text-underline-offset: 3px; }
.loading { text-align: center; color: var(--sub); padding: 48px 0; font-size: 13px; letter-spacing: 2px; }

/* ---------------- 排盘：命主信息 ---------------- */
.info-row {
  display: flex; font-size: 13px; line-height: 1.75; color: var(--ink-2);
}
.info-label {
  color: var(--sub); width: 92px; flex-shrink: 0;
}
.info-tip {
  font-size: 10.5px; color: var(--sub); padding-top: 6px;
  border-top: 1px dashed var(--line); margin-top: 6px;
}

/* ---------------- 排盘：四柱（含大运/流年对照列） ----------------
   ⚠️ 这里的字号/行高/内边距是**按「一屏装下六柱 + 岁运条」反算出来的**，不是随手定的：
   手机上可用宽度约 313px（375 屏 − main 28 − 卡片 34），要塞下 6 列 + 1 条分隔，
   每列只有 ~48px；可用高度要留给 六柱(≈230) + 岁运条(≈240) + 卡片框/标题，
   所以纵向每一档都压到了「还能看清」的下限。改大任何一处都可能让岁运条掉出首屏，
   改前先跑 `scripts/smoke-web.js` 的 P2 段（有高度预算断言）。 */
.pillar-grid { display: flex; gap: 4px; align-items: stretch; }
.pillar-divider {
  flex-shrink: 0; width: 1.5px; background: var(--gold-soft); border-radius: 2px;
}
.pillar-col {
  flex: 1; min-width: 0; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line); background: var(--card);
}
.pillar-head {
  text-align: center; font-size: 11px; line-height: 1.25; padding: 4px 0;
  color: var(--ink-2); background: var(--paper-2); letter-spacing: .5px;
}
/* 日主列：全站唯一的深底列 —— 用墨底金字标记「这是你自己」，比红底安静 */
.pillar-col.day .pillar-head { background: linear-gradient(180deg, #3a332d, #241f1b); color: #ecd9ae; }
.pillar-body {
  padding: 5px 1px 4px; display: flex; flex-direction: column; align-items: center;
}
.ss-gan { font-size: 10px; color: var(--sub); height: 15px; line-height: 15px; }
.gan-zhi { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 46px; }
.gz-char { position: relative; font: 600 20px/1.15 var(--font-serif); }

/* 五行文字配色（干支大字/藏干/五行标签共用） */
.mu-text { color: var(--mu); }
.huo-text { color: var(--huo); }
.tu-text { color: var(--tu); }
.jin-text { color: var(--gold); }
.shui-text { color: var(--shui); }

.hide-list {
  height: 41px; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hide-item { font-size: 9.5px; color: var(--sub); line-height: 13.5px; white-space: nowrap; }
.hide-item i { font-style: normal; }
.na-yin { font-size: 9.5px; color: var(--sub); height: 15px; line-height: 15px; }

.meta-list {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding-top: 3px; border-top: 1px dashed #e7ddc9; width: 100%; margin-top: 3px;
}
.meta-row { display: flex; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 14px; line-height: 14px; }
.meta-label { font-size: 8.5px; color: var(--sub); flex-shrink: 0; }
.meta-val { font-size: 9.5px; color: var(--zhu-2); font-weight: 600; white-space: nowrap; }
.meta-val.meta-long { font-size: 8.5px; font-weight: 400; }

.pillar-ss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px;
  padding-top: 4px; border-top: 1px dashed #e7ddc9; width: 100%; margin-top: 4px;
  min-height: 20px;
}
/* 药丸要够窄才可能一行放两个：六列每列只有 ~48px（加流月第 7 列后 360 屏只剩 ~40px），
   8px 字 + 4px 内边距的两字药丸正好 20px → 「两字 + 两字」勉强一行；
   宽一点就掉成一个一行，四枚神煞能吃掉 72px（实测最高的一列 303px 里神煞占了 72px，
   是纵向最大的单项）。
   ⚠️ 必须 `flex: 0 0 auto` + `nowrap`：药丸是 flex 子项，默认 flex-shrink:1 会把
      「国印贵人」挤到 38px 里**从中间断行**（360 屏实测「国印贵 / 人」两行）。
      宁可溢出被列裁掉，也不许拆词。 */
.pillar-ss-item {
  font-size: 8px; line-height: 1.6; padding: 0 2px; border-radius: 4px;
  flex: 0 0 auto; white-space: nowrap;
}
.ss-ji { color: var(--ok); background: var(--ok-tint); }
.ss-xiong { color: var(--huo); background: var(--bad-tint); }
.ss-zhong { color: var(--gold); background: var(--gold-soft); }

/* ---------------- tool 模式（应用商店 / 小程序提审版） ----------------
   定位是「传统文化工具」，只做术语与典籍展示。神煞/干支关系在传统上带吉凶褒贬，
   这里一律改为中性配色：**不做视觉上的褒贬判断**。
   模式由 body[data-mode] 决定（服务端 GET /api/v1/config 下发，默认 fortune）。 */
body[data-mode="tool"] .ss-ji,
body[data-mode="tool"] .ss-xiong,
body[data-mode="tool"] .ss-zhong { color: var(--ink-2); background: var(--neutral-tint); }
body[data-mode="tool"] .ss-t-ji,
body[data-mode="tool"] .ss-t-xiong,
body[data-mode="tool"] .ss-t-zhong { color: var(--ink-2); }
body[data-mode="tool"] .rel-tag.he,
body[data-mode="tool"] .rel-tag.chong,
body[data-mode="tool"] .rel-tag.xing,
body[data-mode="tool"] .rel-tag.hai { background: var(--neutral-tint); color: var(--ink-2); }

/* ---------------- 排盘：岁运条（大运 + 流年横滑，与六柱同卡） ----------------
   原先它是独立的「大运」卡片，2026-10-11 并入四柱卡：六柱的头两列就是当前选中的
   大运/流年，同卡才谈得上「所见即所选」，也才可能一屏装下（见 app.js luckBar）。 */
.luck-bar { margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line); }
.luck-bar-head {
  display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px;
  font: 500 12px/1 var(--font-serif); letter-spacing: 1px; color: var(--zhu-2);
}
.luck-bar-head .lb-note {
  margin-left: auto; font: 400 10.5px/1 var(--font-serif); letter-spacing: 0; color: var(--sub);
}

/* ---------------- 排盘：命局摘要 ---------------- */
.summary-row { display: flex; gap: 8px; margin-bottom: 10px; }
.summary-item {
  flex: 1; background: var(--paper-2); border-radius: 10px;
  padding: 10px 0; text-align: center;
}
.summary-label { font-size: 11px; color: var(--sub); }
.summary-val { font-size: 15px; font-weight: 600; color: var(--ink); padding-top: 3px; }
.summary-note { font-size: 12px; color: var(--sub); line-height: 1.7; }
.summary-note b { color: var(--zhu-2); font-weight: 600; }

/* ---------------- 排盘：五行分布（东方 × 现代统计） ----------------
   这是整个视觉系统的核心隐喻：柱状图（现代统计）+ 矿物色（东方矿物颜料）
   + 坐标刻度（科学）。五行生克本来就是一套「分布与制衡」的古老模型，
   用统计图的语言画出来，比画成进度条更诚实。
   ---------------------------------------------------------------- */
.wx-chart {
  position: relative;
  display: flex; align-items: flex-end; gap: 10px;
  padding-left: 22px;                 /* 给 y 轴刻度留位 */
}
/* 刻度层：三档水平线 + 数值标签。
   ⚠️ 刻度线用 inline `bottom:%` 定位（JS 按 top/mid/top 算出），
   而 `.wx-t-base` 是静态的 bottom:0 —— 两条必须走同一套定位规则，
   否则基线会压在中线或顶线上。 */
.wx-grid { position: absolute; left: 22px; right: 0; top: 0; bottom: 52px; pointer-events: none; }
.wx-tick {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 1px dashed var(--stat-axis);
}
/* 标签贴在刻度线左侧外边：left:-21px 让它落在 padding-left 的 22px 留位里 */
.wx-tick span {
  position: absolute; left: -21px; top: -.55em;
  width: 19px; text-align: right;
  font: 400 9.5px/1 var(--font-mono); color: var(--sub);
  font-variant-numeric: tabular-nums;
}
.wx-t-base { bottom: 0; border-top: 1px solid var(--stat-axis); border-top-style: solid; }
.wx-t-base::after {
  content: "0"; position: absolute; left: -21px; top: -1px;
  width: 19px; text-align: right;
  font: 400 9.5px/1 var(--font-mono); color: var(--sub);
}

.wx-bar-item { flex: 1; display: flex; flex-direction: column; align-items: center; }
.wx-bar-track {
  width: 100%; height: 110px;
  display: flex; align-items: flex-end; justify-content: center;
}
/* 柱子：顶部微圆角（2px）+ 本行五行色。一版的直角+顶粗线像 Excel 柱形图，
   统计图也可以有质感 —— 圆角只是收敛，不是气泡。 */
.wx-bar {
  width: 30px; border-radius: 3px 3px 0 0; opacity: .82;
  transition: height .5s ease;
}
/* 五行矿物色（对齐 :root 的 --mu/--huo/--tu/--jin/--shui） */
.wx-bar.mu { background: var(--mu); color: var(--mu); }
.wx-bar.huo { background: var(--huo); color: var(--huo); }
.wx-bar.tu { background: var(--tu); color: var(--tu); }
.wx-bar.jin { background: var(--jin); color: var(--jin); }
.wx-bar.shui { background: var(--shui); color: var(--shui); }
/* 最旺一行：本柱满色显示（其余 .82 透明度自然退后），再加一枚墨色基座点题 */
.wx-bar.dominant { opacity: 1; box-shadow: 0 2px 0 0 var(--ink); }
.wx-bar.bar-lacking { opacity: .22; }
.wx-label { font: 500 13px/1.9 var(--font-serif); }
.wx-score, .wx-share {
  font: 500 12px/1.7 var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* 占比（小字，弱化）—— 有分数才有比例，这是统计图的标配 */
.wx-share { font-size: 10.5px; color: var(--sub); line-height: 1.5; }
.wx-score.mu-score { color: var(--mu); }   .wx-share.mu-share { color: var(--mu); opacity: .75; }
.wx-score.huo-score { color: var(--huo); } .wx-share.huo-share { color: var(--huo); opacity: .75; }
.wx-score.tu-score { color: var(--tu); }   .wx-share.tu-share { color: var(--tu); opacity: .75; }
.wx-score.jin-score { color: var(--jin); } .wx-share.jin-share { color: var(--jin); opacity: .75; }
.wx-score.shui-score { color: var(--shui); } .wx-share.shui-share { color: var(--shui); opacity: .75; }
.wx-sum {
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--line-2);
  font-size: 12px; color: var(--ink-2); letter-spacing: .5px;
}
.wx-sum b { color: var(--zhu); font-weight: 600; }

/* ---------------- 排盘：神煞 ---------------- */
.ss-block { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.ss-title { font-size: 13px; color: var(--zhu-2); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ss-list { display: flex; flex-direction: column; gap: 6px; }
.ss-item { background: #f6f2e9; border-radius: 8px; padding: 7px 10px; }
.ss-item-line { display: flex; align-items: center; gap: 8px; }
.ss-name { font-size: 13px; font-weight: 600; }
.ss-t-ji { color: var(--ok); }
.ss-t-xiong { color: var(--huo); }
.ss-t-zhong { color: var(--gold); }
.ss-pillar { font-size: 11px; color: var(--sub); }
.ss-brief { font-size: 12px; color: var(--sub); line-height: 1.6; margin-top: 2px; }

/* ---------------- 排盘：干支关系 ---------------- */
.group-title {
  font: 400 12.5px/1 var(--font-serif); letter-spacing: 2px; color: var(--gold);
  margin: 14px 0 8px; display: flex; align-items: center; gap: 8px;
}
.group-title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.card > .group-title:first-of-type { margin-top: 2px; }
.rel-item {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  font-size: 13px; line-height: 1.5; padding: 7px 0;
  border-bottom: 1px dashed var(--line-2);
}
.rel-item:last-child { border-bottom: 0; }
.rel-item b { font: 400 14px/1 var(--font-serif); color: var(--ink); }
.rel-tag {
  padding: 1px 7px; border-radius: 5px; font-size: 11px; letter-spacing: 1px; flex: 0 0 auto;
  font-family: var(--font-serif);
}
.rel-tag.he { background: var(--ok-tint); color: var(--ok); }
.rel-tag.chong { background: var(--zhu-soft); color: var(--bad); }
.rel-tag.xing { background: var(--zhu-tint); color: var(--zhu); }
.rel-tag.hai { background: var(--gold-soft); color: var(--gold); }
.rel-tag.po { background: #f0ece6; color: var(--ink-2); }
.rel-desc { color: var(--sub); font-size: 12px; flex: 1 1 100%; padding-left: 2px; }

/* ---------------- 排盘：大运流年（横向滑动选择条） ---------------- */
.dy-scroll, .ln-scroll, .ly-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.dy-scroll::-webkit-scrollbar, .ln-scroll::-webkit-scrollbar, .ly-scroll::-webkit-scrollbar { display: none; }
.dy-track, .ln-track, .ly-track { display: inline-flex; align-items: stretch; gap: 5px; padding: 3px 2px 5px; }

/* 溢出提示：边缘渐隐（由 app.js initScrollEdges 按 scrollWidth 动态加 edge-l / edge-r）。
   卡片被硬裁切时用户感知不到「可以横滑」，渐隐是最低成本的可供性暗示 */
.dy-scroll.edge-r, .ln-scroll.edge-r, .ly-scroll.edge-r {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
}
.dy-scroll.edge-l, .ln-scroll.edge-l, .ly-scroll.edge-l {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 30px, #000 calc(100% - 30px), transparent);
}
.dy-scroll.edge-l:not(.edge-r), .ln-scroll.edge-l:not(.edge-r), .ly-scroll.edge-l:not(.edge-r) {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30px);
  mask-image: linear-gradient(to right, transparent, #000 30px);
}

.dy-card {
  position: relative; width: 46px; flex-shrink: 0; border-radius: 9px;
  background: var(--card); border: 1px solid var(--line);
  padding: 6px 2px 5px; display: flex; flex-direction: column; align-items: center;
}
/* ⚠️ 层叠顺序有讲究：.selected 必须写在 .current **之前**。
   两条规则选择器权重相同（0,2,0），后写的胜出。卡片同时带 current 与 selected
   （刚排完盘就是这样：今天 = 你正在看的）时，希望**金框暖底赢**——那才是
   「今」这个信息的主视觉；选中靠 box-shadow 的外圈 + 投影表达，两者互不遮挡。
   反过来写（.current 在前）就会让 .selected 的黑框把金框吃掉，
   于是「今」只剩角上一个字，正是 2026-10-17 用户说「流年流月没这个效果」的观感。 */
.dy-card.selected {
  border-color: var(--ink); background: #f5f1e8;
  box-shadow: 0 0 0 2px rgba(43, 38, 34, .16), 0 4px 14px rgba(50, 38, 26, .16);
}
.dy-card.current { border-color: var(--gold); background: #faf5e9; }
.dy-card.pre { opacity: .55; }
.dy-gz-v { display: flex; flex-direction: column; align-items: center; min-height: 36px; justify-content: center; }
.dy-gz-char { font: 600 16px/1.2 var(--font-serif); color: var(--zhu-2); }
.pre-gz .dy-gz-char { color: var(--sub); }
.dy-ss { font-size: 8px; color: var(--sub); line-height: 1.35; }
.dy-ss.zhi { color: var(--gold); }
.dy-nayin { font-size: 8px; color: var(--sub); line-height: 1.35; margin-top: 1px; }
.dy-age { font-size: 8.5px; color: var(--zhu-2); line-height: 1.4; margin-top: 1px; }
.dy-year { font-size: 8px; color: var(--sub); line-height: 1.35; }
.dy-dot { width: 4px; height: 4px; border-radius: 50%; margin-top: 2px; background: var(--sub); }
.dy-cur {
  position: absolute; top: -1px; right: -1px; font-size: 9px; color: #fff;
  background: var(--gold); border-radius: 0 10px 0 8px; padding: 1px 5px;
}

.ln-track { align-items: center; padding-top: 2px; }
.ln-caption {
  align-self: center; font-size: 10px; color: var(--zhu-2); font-weight: 600;
  padding: 0 4px; writing-mode: vertical-rl; letter-spacing: 2px; white-space: nowrap;
}
.ln-card {
  position: relative; width: 42px; flex-shrink: 0; border-radius: 8px; background: var(--card);
  border: 1px solid var(--line); padding: 5px 2px; display: flex;
  flex-direction: column; align-items: center;
}
/* 「今」= 今天所在的运/年/月，三条轨道**视觉一致**：金色描边 + 暖底 + 右上角今。
   与 .selected（选中靠外圈 box-shadow + 投影）是两件事：翻到 2033 年时 2033 是
   selected，今年那张仍然带今。两者可叠在同一张卡上（金框 + 暖底 + 外圈 + 今）。
   ⚠️ 2026-10-17 用户反馈的「流年/流月没有当前标记」有两层原因：①app.js 没给
   .ln-card/.ly-card 输出 current；②即使输出了，这里也只有 .dy-card.current 一条
   规则 —— .ly-cur 图章一直在、金框一直没有，于是「今」孤零零贴着卡角，
   看着就不像被标记了。三条轨道的 current / selected / -cur 必须成组维护，
   且 .selected 一律写在 .current 之前（见上方 .dy-card 处的说明）。 */
.ln-card.selected { border-color: var(--ink); background: #f5f1e8; box-shadow: 0 0 0 2px rgba(43, 38, 34, .16), 0 3px 10px rgba(50,38,26,.16); }
.ln-card.current { border-color: var(--gold); background: #faf5e9; }
/* 「今」在流年轨里**不绝对定位**，直接跟在年份后面（「2026 今」）。
   42px 的卡宽：角标压右上角会把年份压成「202_」（实测重叠 45px²），
   而给卡加 padding-top 又会撑高岁运条 —— 一屏预算是反算出来的，一格都不多给。
   放进首行既不压字、也不动高度，还省掉一次绝对定位的坐标计算。 */
.ln-year { display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.ln-cur {
  flex: 0 0 auto; font-size: 8px; line-height: 1.25; color: #fff; background: var(--gold);
  border-radius: 3px; padding: 0 2px; font-weight: 400;
}
.ln-year { font-size: 8.5px; color: var(--sub); line-height: 1.35; }
.ln-gz-v { display: flex; flex-direction: column; align-items: center; min-height: 32px; justify-content: center; }
.ln-gz-char { font: 600 14px/1.15 var(--font-serif); color: var(--zhu-2); }
.ln-ss { font-size: 8px; color: var(--sub); line-height: 1.3; }
.ln-ss.zhi { color: var(--gold); }
.ln-age { font-size: 8px; color: var(--sub); line-height: 1.3; }
.ln-gz-char.mu-text, .dy-gz-char.mu-text, .ly-gz-char.mu-text { color: var(--mu); }
.ln-gz-char.huo-text, .dy-gz-char.huo-text, .ly-gz-char.huo-text { color: var(--huo); }
.ln-gz-char.tu-text, .dy-gz-char.tu-text, .ly-gz-char.tu-text { color: var(--tu); }
.ln-gz-char.jin-text, .dy-gz-char.jin-text, .ly-gz-char.jin-text { color: var(--gold); }
.ln-gz-char.shui-text, .dy-gz-char.shui-text, .ly-gz-char.shui-text { color: var(--shui); }

/* 流月轨：与流年轨同构，只是把「年份」换成「正月…腊月」、把「虚岁」换成该月的「节」
   （流月月起于节，卡上写明节气就是月界）。干支块比流年轨收 2px（30 而非 32）：
   岁运区现在是三条轨道，多出来的高度直接从命局页一屏预算里扣。 */
.ly-track { align-items: center; padding-top: 2px; }
.ly-caption {
  align-self: center; font-size: 10px; color: var(--zhu-2); font-weight: 600;
  padding: 0 4px; writing-mode: vertical-rl; letter-spacing: 2px; white-space: nowrap;
}
.ly-card {
  position: relative; width: 42px; flex-shrink: 0; border-radius: 8px; background: var(--card);
  border: 1px solid var(--line); padding: 5px 2px; display: flex;
  flex-direction: column; align-items: center;
}
.ly-card.selected { border-color: var(--ink); background: #f5f1e8; box-shadow: 0 0 0 2px rgba(43, 38, 34, .16), 0 3px 10px rgba(50,38,26,.16); }
.ly-card.current { border-color: var(--gold); background: #faf5e9; }
.ly-month { display: flex; align-items: center; gap: 2px; font-size: 8.5px; color: var(--sub); line-height: 1.35; white-space: nowrap; }
.ly-gz-v { display: flex; flex-direction: column; align-items: center; min-height: 30px; justify-content: center; }
.ly-gz-char { font: 600 14px/1.15 var(--font-serif); color: var(--zhu-2); }
.ly-ss { font-size: 8px; color: var(--sub); line-height: 1.3; }
.ly-ss.zhi { color: var(--gold); }
.ly-jie { font-size: 8px; color: var(--sub); line-height: 1.3; }
/* 与流年轨同理：把「今」塞进月份那一行（「九月 今」），不占额外高度、不压字 */
.ly-cur {
  flex: 0 0 auto; font-size: 8px; line-height: 1.25; color: #fff; background: var(--gold);
  border-radius: 3px; padding: 0 2px; font-weight: 400;
}

/* ---------------- 底部操作条 ----------------
   ⚠️ 2026-10-11 事故：4 个按钮挤在 nowrap 的一行里，`.actionbar .btn.ghost{flex:0 0 96px}`
   把主按钮压到 ~60px 宽，于是「免费校盘 · 先验证准不准」在 60px 里**逐字换行**，
   把操作条撑成 284px 高的字塔（390 屏实测），正好盖住它上面的岁运条 ——
   「六柱和岁运一屏可见」这个需求就是被它挡住的。
   定规矩：①允许换行，且宽按钮用 .ab-row 显式分行；②按钮文案一律 nowrap，
   宁可撑宽也不许竖排；③字号 13.5px 起步，文案要短。 */
.actionbar {
  position: sticky; bottom: 10px; z-index: 12;
  display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; margin-top: 6px;
  border-radius: 16px; border: 1px solid var(--line);
  background: rgba(255, 254, 251, .92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
}
/* 一行 = 一个 .ab-row（不写 .ab-row 的平铺按钮会各自换行，校盘页就是这种）；
   行内按钮 flex:1 1 auto —— 于是「按内容宽度 + 平分余量」分配，
   长文案（完整命理报告 · 20 积分）自然拿到更宽的格子，不会被 nowrap 裁掉。 */
.actionbar .ab-row { display: flex; flex: 1 1 100%; gap: 8px; min-width: 0; }
.actionbar .btn {
  flex: 1 1 auto; min-width: 0; width: auto;
  padding: 12px 6px; white-space: nowrap; font-size: 13.5px; letter-spacing: .5px;
}
/* 矮屏（≤700px：iPhone SE 667 / 小屏安卓 640）没有余量。操作条常驻会占掉 116px，
   于是六柱+岁运只剩 499px 窗口，而这块实测 573px —— 怎么缩字号都塞不进去（再缩就要
   开始删内容了）。此时把操作条改回随页面滚动（校盘页本来就是这种布局），窗口回到
   615px，正好够。代价是这两个入口要滚到底才看得到，换来的是「打开就能看全命局 +
   岁运」—— 如果更看重 CTA 常驻，删掉这条 @media 即可，modern 机型（≥755px 视口）
   不受影响。 */
@media (max-height: 700px) {
  .actionbar { position: static; }
}

/* ---------------- 我的排盘记录 ----------------
   一条 = 「谁 + 什么时候生的 + 什么盘」：姓名与性别一行，出生信息一行，四柱一行。
   右侧固定放操作按钮，所以主体用 flex:1 + min-width:0（否则长姓名会把按钮挤出去）。 */
.hist-tip { font-size: 12px; color: var(--sub); line-height: 1.7; margin: -2px 0 6px; }
.hist-item {
  display: flex; align-items: center; gap: 10px; padding: 11px 2px;
  border-bottom: 1px dashed var(--line);
}
.hist-item:last-child { border-bottom: 0; }
.hist-main {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px;
  cursor: pointer; padding: 1px 0 1px 15px; position: relative;
}
.hist-main::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft);
}
.hist-main .t {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-serif); font-size: 15px; letter-spacing: .5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hist-main .t .tag {
  flex: 0 0 auto; font-family: var(--font-serif); font-size: 11px; letter-spacing: 0;
  color: var(--zhu); border: 1px solid var(--gold-soft); border-radius: 999px; padding: 0 6px;
}
.hist-main .d { font-size: 12px; color: var(--sub); }
.hist-main .p { font-family: var(--font-serif); font-size: 12.5px; letter-spacing: 1px; color: var(--ink-2); }
.hist-ops { flex: 0 0 auto; display: flex; gap: 6px; }
.hist-op {
  font-size: 12px; padding: 6px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2);
  font-family: var(--font-serif); letter-spacing: .5px;
}
.hist-op:active { background: var(--line-2); }
.hist-op.del { color: var(--zhu); border-color: var(--gold-soft); }
.hist-op.del:active { background: var(--zhu-soft); }

/* 编辑态提示条：明确告诉用户「这次点保存 = 改那条记录」，避免以为在新建 */
.edit-bar {
  display: flex; align-items: center; gap: 10px;
  background: var(--zhu-soft); border: 1px solid var(--gold-soft);
  border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 12px;
}
.edit-bar-t { flex: 1; font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.edit-bar-t b { color: var(--zhu-2); font-weight: 600; }
.edit-bar-x {
  flex: 0 0 auto; font-size: 12px; padding: 5px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--card); color: var(--sub);
  font-family: var(--font-serif);
}

/* ---------------- 对话 ---------------- */
.chat-wrap { display: flex; flex-direction: column; height: calc(100dvh - 60px); }
body.chat-mode { overflow: hidden; }
body.chat-mode main { padding-top: 8px; padding-bottom: 0; }
body.chat-mode .chat-wrap { height: calc(100dvh - 60px - var(--foot-h, 0px)); }

/* ---------------- 报告页 ---------------- */
.view-report { padding: 0; }
/* 报告页像对话页一样撑满 topbar 以下的视口：absolute 脱离 main 默认留白，
   居中列宽与首页保持一致（max-width: 560px），iframe 填满剩余高度。
   定位基准同 .view-trial（main 的 padding box），所以底部正好停在备案 footer 上方。 */
#viewReport {
  position: absolute;
  top: 8px; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 100vw; max-width: 560px;
}
.report-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.report-loading { position: absolute; top: 40%; left: 0; right: 0; text-align: center; }
.report-loading-tip { color: var(--sub); font-size: 13px; margin-top: 12px; }

/* ---------------- 校盘页 ---------------- */
/* 布局对齐报告页：absolute 撑满 topbar 以下、居中列宽 560px；flex 列让 #trialBody 滚动、底部 actionbar 贴底。
   颜色全部走 CSS 变量，任何未来的主题（含深色）覆盖变量即可整体生效，不在此硬编码色值。 */
.view-trial {
  position: absolute;
  /* top/bottom 是相对 **main 的 padding box**（main 已改 position:relative）：
     bottom:0 落在备案 footer 之上 —— 不必写死 footer 高度，tool 模式 footer 变高
     （多一段完整免责）也自动跟着让位。top:8px = topbar(52) + 8，与对话页起始位置对齐
     （main 的 border box 顶边正好在 topbar 下沿 52px 处）。
     ⚠️ width 必须用 100vw 而不是 100%：main 的 padding box 已内缩 28px，用 100% 会
        窄掉 28px；main 本身水平居中，所以 left:50% + translateX(-50%) 仍精确居中。 */
  top: 8px; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 100vw; max-width: 560px;
  display: flex; flex-direction: column;
}
.report-head { flex: 0 0 auto; padding: 14px 0 10px; text-align: center; }
.report-head .rh-title { font: 500 18px/1 var(--font-serif); letter-spacing: 3px; color: var(--ink); }
.report-head .rh-sub { margin-top: 6px; font-size: 12.5px; color: var(--sub); letter-spacing: .5px; }

#trialBody {
  flex: 1 1 auto; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 14px 18px;
}

/* 结论导语（2026-10-08 起校盘直接给结论，不再让用户勾选） */
.trial-lead {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px 14px; margin-bottom: 12px;
  box-shadow: var(--shadow);
}
.trial-lead .lead-title {
  font: 500 16px/1.4 var(--font-serif); color: var(--ink);
  letter-spacing: 1px;
  /* 标题前的刻度记号：像统计图里的零轴 */
  padding-left: 11px; position: relative;
}
.trial-lead .lead-title::before {
  content: ""; position: absolute; left: 0; top: .28em; bottom: .28em; width: 3px;
  background: var(--zhu);
}
.trial-lead .summary-note { margin-top: 6px; padding-left: 11px; }

/* ---------- 简洁 / 详细 模式开关（2026-10-17） ----------
   形态照抄仪表盘的分段控件（seg-btn），但更扁、更像刻度拨杆。
   放在标题与结论之间，位置显眼但不抢戏。 */
.mode-switch {
  display: flex; align-items: center; gap: 6px;
  /* ⚠️ 必须 flex: 0 0 auto：.view-trial 是 flex 列容器，不写会被压缩并压在
     下面的导语上（实测遮住「免费校盘」那行副标题）。 */
  flex: 0 0 auto;
  margin: 0 14px 12px; padding: 5px 6px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.mode-switch .ms-label {
  font-size: 11.5px; color: var(--sub); letter-spacing: 1.5px;
  flex: 0 0 auto; padding-left: 3px;
}
.mode-switch .ms-btn {
  flex: 0 0 auto; padding: 4px 14px;
  font: 500 12.5px/1.4 var(--font-serif); letter-spacing: 1.5px;
  color: var(--ink-2); background: transparent;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: color .15s, background .15s, border-color .15s;
}
.mode-switch .ms-btn.on {
  color: var(--ink); background: var(--card);
  border-color: var(--line);
  box-shadow: inset 0 -2px 0 var(--zhu);
}
.mode-switch .ms-btn:active { opacity: .7; }
/* 提示语占满剩余空间并右对齐：它是补充说明，不该挤在按钮后面换行。
   窄屏（≤400px）放不下「简洁 详细 详细模式会展开流派与典籍出处」一行，
   改为整行独占、顶对齐 —— 与其让按钮被挤扁，不如让提示语换行。 */
.mode-switch .ms-hint {
  flex: 1 1 auto; min-width: 0; text-align: right;
  font-size: 10.5px; color: var(--sub); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 400px) {
  .mode-switch { flex-wrap: wrap; row-gap: 4px; }
  .mode-switch .ms-hint {
    flex: 1 1 100%; text-align: left; order: 9;
    padding: 1px 2px 0; white-space: normal;
  }
}

/* 判断项里的提问小字 —— 改成「问号标记 + 文字」，像档案里的提问项 */
.trial-q {
  font-size: 13px; color: var(--ink-2); margin: -2px 0 11px;
  line-height: 1.6; padding-left: 18px; position: relative;
}
.trial-q::before {
  content: "问"; position: absolute; left: 0; top: .18em;
  width: 14px; height: 14px; display: grid; place-items: center;
  font-size: 10px; color: var(--gold);
  border: 1px solid var(--gold); border-radius: 50%;
  opacity: .8;
}

/* 判断条目：一句可直接核对的话（+ 详细模式下的来路）
   二版：左侧竖线改中性绢灰，底色极淡绢白 —— 结论条是页面主角，
   保持安静，让文字本身说话；绛红只留在卡片标题的印签上。 */
.claim {
  display: flex; flex-direction: column; gap: 4px;
  padding: 11px 13px; margin-bottom: 8px;
  border: 1px solid var(--line);
  border-left: 2px solid #d9cfba;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--card);
  font-size: 14.5px; line-height: 1.68; color: var(--ink);
}
/* 最后一条不加下边框线，收口干净 */
.claim:last-child { margin-bottom: 0; }
.claim-text { display: block; }
/* 来路（〔流派〕《书名》）：详细模式才出现。小号浅色 + 虚线上边线，
   读起来像脚注/出处注。⚠️ 字体不用 mono —— 中文书名号在等宽字体里
   会 fallback 成另一套字形，中西混杂很难看；mono 只留给纯数字。 */
.claim-meta {
  font: 400 11px/1.5 var(--font-serif);
  color: var(--sub); letter-spacing: .2px;
  padding-top: 4px; border-top: 1px dotted var(--line);
  margin-top: 1px;
}

/* 「规则库直出」标记：AI 生成服务不可用时的降级来源，必须显眼但不必喧宾夺主。
   用中性灰而非警告色 —— 降级结果本身是可用的，只是来路不同，不该让用户以为出错 */
.degraded-note {
  display: inline-block; margin: 0 0 8px; padding: 1px 7px;
  font-size: 11.5px; color: var(--sub); line-height: 1.6;
  border: 1px solid var(--line); border-radius: 999px;
}

/* 较好 / 较差 三年 */
.year-item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px;
  padding: 11px 0; border-bottom: 1px dashed var(--line);
}
.year-item:last-child { border-bottom: 0; }
.year-badge {
  flex: 0 0 auto; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; letter-spacing: .5px; color: #fff;
  background: var(--ink);
}
.year-badge.学业 { background: var(--jin); }
.year-badge.事业 { background: var(--huo); }
.year-badge.爱情 { background: var(--shui); }
.year-badge.财富 { background: var(--tu); }
.year-main { font-size: 14px; color: var(--ink); }
.year-main b { font: 500 15px/1 var(--font-serif); color: var(--zhu-2); }
.year-reasons { flex: 1 1 100%; margin: 4px 0 0; padding-left: 18px; }
.year-reasons li { font-size: 13px; color: var(--ink-2); line-height: 1.6; }

.chat-scroll { flex: 1; overflow-y: auto; padding: 4px 2px 12px; -webkit-overflow-scrolling: touch; }
.chat-hint {
  text-align: center; font-size: 11px; color: #9a9284; letter-spacing: 1px;
  padding: 8px 0 14px;
}
.chat-hint::before { content: "❖ "; opacity: .7; }
.msg { display: flex; gap: 9px; margin-bottom: 16px; align-items: flex-start; }
.msg .avatar {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; font-size: 14px; font-family: var(--font-serif);
}
.msg .avatar.ai {
  background: linear-gradient(140deg, #3a332d, #241f1b); color: #ecd9ae;
  box-shadow: 0 3px 8px rgba(61, 44, 32, .18);
}
.msg .avatar.me { background: var(--zhu-soft); color: var(--zhu); }
.msg .bubble {
  max-width: calc(100% - 52px); padding: 11px 14px; border-radius: 4px 14px 14px 14px;
  font-size: 14.5px; line-height: 1.85; white-space: pre-wrap; word-break: break-word;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.msg.me { flex-direction: row-reverse; }
.msg.me .bubble {
  border-radius: 14px 4px 14px 14px; border-color: transparent;
  background: linear-gradient(180deg, #38312b 0%, #241f1b 100%); color: #f2ead9;
  box-shadow: 0 4px 14px rgba(40, 32, 24, .2);
}
.bubble.typing { color: var(--sub); }
.bubble.typing i {
  display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%;
  background: var(--sub); animation: blink 1.2s infinite;
}
.bubble.typing i:nth-child(2) { animation-delay: .2s; }
.bubble.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.chat-input {
  display: flex; gap: 8px; align-items: center; padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); background: rgba(250, 248, 243, .92);
}
.chat-input input {
  flex: 1; padding: 11px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 15px; background: #fffefb; color: var(--ink);
}
.chat-input input:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(168, 130, 63, .13); }
.chat-input .send {
  flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: linear-gradient(180deg, #38312b 0%, #241f1b 100%); color: #f2ead9; font-size: 15px;
  box-shadow: 0 4px 12px rgba(40, 32, 24, .24);
}

[hidden] { display: none !important; }
/* ---------------- 「添加到主屏幕」引导条 ----------------
   深墨底 + 描金，与欢迎页同一套夜色语言；只在落地页出现（见 app.js 的 syncA2HS）。 */
.a2hs {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 70;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 10px 11px 12px;
  background: rgba(45, 37, 31, .95); color: #f6ead6;
  border-radius: 14px; box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px) saturate(130%); -webkit-backdrop-filter: blur(10px) saturate(130%);
  animation: a2hsIn .3s ease both;
}
@keyframes a2hsIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.a2hs-mark {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 11px; background: rgba(226, 190, 130, .15); color: #e6c583;
}
.a2hs-body { flex: 1; min-width: 0; }
.a2hs-title { font: 500 14px/1.3 var(--font-serif); letter-spacing: 1px; }
.a2hs-desc { margin-top: 4px; font-size: 12px; line-height: 1.5; color: rgba(230, 197, 131, .75); }
.a2hs-desc b { color: #e6c583; font-weight: 500; }
.a2hs-go {
  flex: none; appearance: none; border: 0; cursor: pointer;
  padding: 8px 15px; border-radius: 999px;
  background: #e6c583; color: var(--ink-2); font: 500 13px/1 var(--font-serif);
}
.a2hs-go:active { background: #d8b673; }
.a2hs-x {
  flex: none; appearance: none; border: 0; background: none; cursor: pointer;
  align-self: flex-start; padding: 0 2px;
  color: rgba(230, 197, 131, .5); font: 400 19px/1 var(--font-serif);
}
.a2hs-x:active { color: rgba(230, 197, 131, .9); }
@media (max-width: 350px) { .a2hs-desc { display: none; } }

.toast {
  position: fixed; left: 50%; bottom: 68px; transform: translateX(-50%);
  background: rgba(47, 40, 35, .93); color: #f6ead6; padding: 9px 18px; border-radius: 999px;
  font-size: 13px; letter-spacing: .5px; z-index: 99; box-shadow: var(--shadow-lg);
}

/* ---------------- 充值弹层（底部 sheet） ---------------- */
.pmask {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end;
  background: rgba(24, 18, 13, .72); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%);
}
/* 登录 / 注册 / 订单弹层：深色墨面 —— 遮罩加深后页面隐去，只剩这一张「夜色牌匾」，
   聚焦且带神秘感（2026-09-29 UI 改版：登录页要简洁而神秘） */
.pmodal.am {
  background: linear-gradient(172deg, var(--ink) 0%, var(--ink) 100%);
  border: 1px solid rgba(168, 130, 63, .32);
  box-shadow: 0 -14px 48px rgba(0, 0, 0, .45);
}
.pmodal.am::before { background: rgba(168, 130, 63, .45); }
.pmodal.am .ptitle { color: #f0e6d2; }
.pmodal.am .ptitle::before {
  content: "☯"; display: block; font-size: 24px; line-height: 1;
  margin-bottom: 10px; color: var(--gold); opacity: .9;
}
.pmodal.am .x { color: rgba(232, 220, 200, .45); }
.pmodal.am .x:active { color: #f0e6d2; }
.pmodal.am .field label { color: var(--sub); }
.pmodal.am .field input {
  background: rgba(255, 253, 248, .06);
  border: 1px solid rgba(168, 130, 63, .26);
  color: #f0e6d2;
}
.pmodal.am .field input::placeholder { color: rgba(232, 220, 200, .32); }
.pmodal.am .field input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(168, 130, 63, .14); }
.pmodal.am .btn.link { color: rgba(232, 220, 200, .5); }
.pmodal.am .btn.link:active { color: #f0e6d2; }
.pmodal.am .qr-hint { color: var(--gold); }
.pmodal.am .err { color: var(--huo); }
/* 深色卡内：恢复码展示块 */
.pmodal.am .rc-box {
  border-color: rgba(168, 130, 63, .5);
  background: rgba(255, 253, 248, .05);
}
.pmodal.am .rc-title { color: #f0e6d2; }
.pmodal.am .rc-code { background: rgba(243, 228, 200, .1); color: #f3e4c8; }
.pmodal.am .rc-tip { color: var(--sub); }
.pmodal.am .rc-tip b { color: var(--gold); }
/* 深色卡内：订单列表 */
.pmodal.am .o-id { color: #f0e6d2; }
.pmodal.am .o-mid { color: #e8dcc8; }
.pmodal.am .o-bot { color: var(--sub); }
.pmodal.am .o-tag.ok { background: rgba(46, 125, 67, .28); color: var(--mu); }
.pmodal.am .o-tag.wait { background: rgba(168, 130, 63, .2); color: #d9b779; }
.pmodal.am .o-tag.no { background: rgba(255, 253, 248, .08); color: var(--sub); }

.pmodal {
  position: relative; width: 100%; max-width: 560px; margin: 0 auto;
  background: var(--paper-2); border-radius: 22px 22px 0 0;
  padding: 8px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -10px 40px rgba(40, 30, 20, .28);
  animation: sheetUp .26s cubic-bezier(.2, .8, .3, 1);
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.pmodal::before {
  content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 4px; border-radius: 2px; background: var(--line);
}
.ptitle {
  font: 400 17px/1 var(--font-serif); letter-spacing: 4px; text-align: center;
  color: var(--ink); padding: 18px 0 16px;
}
/* 通用二次确认框（app.js 的 askConfirm 动态插入）
   不用 window.confirm：iOS 主屏独立窗口下原生弹窗可能被 WebView 吞掉，
   而「删除」不可逆，必须让用户真的看到并做出选择。 */
.pmodal.cfm { padding-top: 14px; }
.pmodal.am .cfm-text {
  color: #e8dcc8; font-size: 14px; line-height: 1.8;
  text-align: center; padding: 0 6px 18px; word-break: break-word;
}
.cfm-ops { display: flex; gap: 10px; }
.cfm-ops .btn { letter-spacing: 2px; text-indent: 2px; }
.cfm-ops .btn.ghost { flex: 0 0 38%; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tier {
  text-align: center; padding: 15px 6px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); transition: all .18s;
}
.tier:active { transform: scale(.97); }
.tier .t-p { font: 400 17px/1.3 var(--font-serif); color: var(--ink); }
.tier .t-m { font-size: 12.5px; color: var(--zhu); margin-top: 4px; letter-spacing: .5px; }
.tier:last-child { border-color: rgba(168, 130, 63, .5); background: linear-gradient(160deg, var(--paper-2), var(--gold-soft)); }
.pnote { font-size: 12px; color: var(--sub); text-align: center; margin: 14px 0 4px; letter-spacing: .5px; }
/* 在线支付未开通：仅在充值档位区提示，不挡着看其他页面 */
.pay-off {
  font-size: 12px; color: var(--zhu); text-align: center;
  margin: 10px 0 0; letter-spacing: .3px; line-height: 1.7;
}

.pay-amt { font-size: 13px; text-align: center; margin-bottom: 8px; color: var(--ink-2); }
.pay-amt b { font-size: 16px; color: var(--zhu); font-family: var(--font-serif); }
.order-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 4px 0 14px; font-size: 13px; color: var(--ink-2);
}
.order-row b { font-family: var(--font-serif); letter-spacing: 1.5px; color: var(--ink); }
.copy {
  padding: 3px 10px; font-size: 11.5px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink-2);
}
#payStep2 .btn.ghost { margin-top: 10px; }
#payStep2 .btn.primary { letter-spacing: 2px; }
/* 支付宝在线支付块：金额 + 一个跳转主按钮 + 一行说明 */
#payAlipay .btn.primary { margin-top: 4px; }
#payAlipay .pnote.sub { margin: 10px 0 4px; }
.pnote.sub { font-size: 11px; color: var(--sub); margin-top: 4px; line-height: 1.7; }

/* ---------------- 小屏微调 ----------------
   ≤360px（iPhone SE 一代 320）：六列每列只剩 ~38px，四柱大字与藏干行要再让一档，
   否则会被 .pillar-col 的 overflow:hidden 直接裁掉。
   ⚠️ 此前这里写的是 `.pillars` / `.pcol-gan` / `.pcol-zhi` —— 那套类名早已废弃
   （现为 .pillar-grid / .gz-char），等于这条媒体查询一直是空的。 */
@media (max-width: 360px) {
  .pillar-grid { gap: 3px; }
  .gz-char { font: 600 18px/1.15 var(--font-serif); }
  .gan-zhi { height: 42px; }
  .hide-list { height: 40px; }
  .hide-item { font-size: 8.5px; line-height: 13px; }
  .meta-label { font-size: 8px; }
  .meta-val { font-size: 9px; }
  .meta-val.meta-long { font-size: 8px; }
  .pillar-ss-item { font-size: 8px; padding: 0 2px; }
  .dy-card { width: 42px; }
  .ln-card { width: 38px; }
  .hero-title { font-size: 24px; letter-spacing: 6px; }
}
@media (min-width: 720px) {
  main { padding-top: 20px; }
  .hero { padding: 34px 18px 26px; }
}

/* ---------------- 登录 / 注册 / 订单 / 轮询 ---------------- */
.pmodal.am { padding-top: 14px; }
.pmodal .x {
  position: absolute; top: 10px; right: 12px; width: 32px; height: 32px;
  border: 0; background: none; font-size: 22px; color: var(--sub);
}
.pmodal .x:active { color: var(--ink); }
.auth-tip { font-size: 12px; color: var(--sub); text-align: center; margin: 8px 0 0; letter-spacing: .5px; }
.qr-hint { font-size: 12px; color: var(--gold); text-align: center; margin-top: 8px; letter-spacing: .5px; }
.ord-item {
  padding: 12px 4px; border-bottom: 1px dashed var(--line);
}
.ord-item:last-child { border-bottom: 0; }
.o-top { display: flex; justify-content: space-between; align-items: center; }
.o-id { font: 400 12.5px/1 var(--font-serif); color: var(--ink); letter-spacing: 1px; }
.o-tag { padding: 2px 8px; border-radius: 999px; font-size: 11.5px; }
.o-tag.ok { background: var(--ok-tint); color: var(--ok); }
.o-tag.wait { background: var(--gold-soft); color: var(--gold); }
.o-tag.no { background: var(--line-2); color: var(--sub); }
.o-mid { font-size: 13.5px; color: var(--ink); margin: 4px 0 2px; }
.o-bot { font-size: 11.5px; color: var(--sub); }
.poll-line {
  text-align: center; font-size: 12.5px; color: var(--gold);
  margin: 10px 0 6px; letter-spacing: .5px;
}

/* ---------------- 排盘表单（对齐小程序 form 页） ---------------- */
.privacy-tip {
  font-size: 11px; color: var(--sub); line-height: 1.6;
  padding-bottom: 8px; border-bottom: 1px solid #eee6d6; margin-bottom: 2px;
}
.form-row {
  display: flex; align-items: center; padding: 11px 0;
  border-bottom: 1px solid #eee6d6;
}
.form-row:last-child { border-bottom: none; }
.form-label {
  width: 72px; font-size: 14px; color: var(--zhu-2); flex-shrink: 0;
  display: flex; align-items: center;
}
.form-label.required::after { content: '*'; color: var(--huo); margin-left: 4px; }
.form-input {
  flex: 1; font-size: 15px; height: 30px; line-height: 30px;
  border: 0; background: transparent; color: var(--ink); min-width: 0;
}
.form-input::placeholder { color: var(--sub); }
.form-input:focus { outline: none; }

.gender-group { display: flex; flex: 1; gap: 26px; }
.gender-item { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); cursor: pointer; }
.gender-item input { accent-color: var(--zhu-2); width: 16px; height: 16px; margin: 0; }

.form-row .seg { flex: 1; margin-bottom: 0; }
.form-row .seg-label { display: none; }

.lunar-pickers { flex: 1; display: flex; gap: 8px; }
.lunar-picker { flex: 1; min-width: 0; }
.solar-pickers { flex: 1; display: flex; gap: 8px; }
.solar-pickers select { flex: 1; min-width: 0; }
.lunar-year-input {
  flex: 1; min-width: 0; text-align: center; height: 30px; line-height: 30px;
  background: #f4f0e7; border-radius: 8px; padding: 0 6px;
}
select.form-input {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: #f4f0e7; border-radius: 8px; padding: 0 20px 0 8px; text-align: center;
  text-align-last: center; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23b3a89a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center;
}

.leap-wrap { flex: 1; display: flex; align-items: center; }
.leap-wrap input { accent-color: var(--gold); width: 16px; height: 16px; margin: 0; }
.leap-tip { margin-left: 8px; font-size: 12px; color: var(--sub); }

.city-matches {
  margin-top: 6px; border: 1px solid #eee6d6; border-radius: 8px;
  background: #fffefb; overflow: hidden;
}
.city-match-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; border-bottom: 1px solid #f2ecdd; font-size: 14px; cursor: pointer;
}
.city-match-item:active { background: #f2ecdd; }
.city-match-item:last-child { border-bottom: none; }
.city-match-name { color: var(--ink); }
.city-match-prov { font-size: 12px; color: var(--sub); }
.city-match-more { padding: 8px 12px; font-size: 12px; color: var(--sub); text-align: center; }

.time-tip { font-size: 11px; color: var(--sub); padding: 8px 0 0; line-height: 1.6; }

/* ---------------- 我的报告 / 报告详情弹层 ---------------- */
/* 报告详情：居中大弹层（底部 sheet 的把手条与弧形顶部不适用，单独收口） */
#reportViewMask { align-items: center; padding: 16px; }
.pmodal.rv {
  width: min(94vw, 760px); height: 86vh; max-width: 760px;
  border-radius: 16px; padding: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: stretch;
}
.pmodal.rv::before { display: none; }   /* 去掉底部 sheet 的把手条 */
.pmodal.rv .ptitle { flex: 0 0 auto; padding: 16px 0 14px; border-bottom: 1px solid var(--line); }
.report-view-frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; }
.rpt-item { cursor: pointer; }
.rpt-item:active { background: rgba(168, 130, 63, .08); }