/* ============================================================
导航栏全局搜索（12.docx 规范）
藏青底 + 细鎏金描边 + 左侧放大镜；输入即联想，结果浮层
============================================================ */
.nav-search { position: relative; flex: 0 1 300px; min-width: 150px; margin: 0 14px; }
.nav-search .ns-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
font-size: 16px; color: rgba(var(--gold-rgb),.55); pointer-events: none; line-height: 1; }
.nav-search input { width: 100%; height: 34px; padding: 0 12px 0 34px; border-radius: 10px;
background: rgba(255,255,255,.035); border: 1px solid rgba(var(--gold-rgb),.26);
color: var(--text); font-size: 13.5px; letter-spacing: .3px; outline: none;
transition: border-color .22s var(--ease-out), background .22s var(--ease-out),
box-shadow .22s var(--ease-out); }
.nav-search input::placeholder { color: rgba(154,148,136,.62); }
.nav-search input:hover { border-color: rgba(var(--gold-rgb),.42); }
.nav-search input:focus { border-color: rgba(var(--gold-rgb),.72); background: rgba(255,255,255,.06);
box-shadow: 0 0 0 3px rgba(var(--gold-rgb),.1); }
/* 结果浮层：从输入框下沿滑出 */
.ns-list { position: absolute; top: calc(100% + 7px); left: 0; right: 0; z-index: var(--z-dropdown);
max-height: 320px; overflow-y: auto; padding: 6px; border-radius: 12px;
background: linear-gradient(180deg, rgba(18,35,54,.99), rgba(12,24,38,.99));
border: 1px solid rgba(var(--gold-rgb),.3);
box-shadow: var(--shadow-card-deep);
opacity: 0; transform: translateY(-7px) scale(.985); transform-origin: top center;
pointer-events: none; transition: opacity .17s var(--ease-out), transform .2s var(--ease-out); }
.nav-search.open .ns-list { opacity: 1; transform: none; pointer-events: auto; }
.ns-cap { font-size: 11.5px; color: rgba(154,148,136,.7); letter-spacing: 2px; padding: 6px 10px 5px; }
.ns-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 9px 11px; border-radius: 8px; cursor: pointer; font-size: 14.5px; color: var(--text);
transition: background .16s ease, color .16s ease; }
.ns-item .ns-go { font-size: 12px; color: rgba(var(--gold-rgb),.5); opacity: 0; transition: opacity .16s ease; }
.ns-item .ns-tag { font-size: 11.5px; color: rgba(154,148,136,.72);
border: 1px solid rgba(154,148,136,.28); border-radius: 6px; padding: 1px 6px; }
.ns-item:hover, .ns-item.sel { background: rgba(var(--gold-rgb),.13); color: var(--gold-bright); }
.ns-item:hover .ns-go, .ns-item.sel .ns-go { opacity: 1; }
.ns-item.soon { color: var(--text-dim); }
.ns-empty { padding: 14px 12px; font-size: 13.5px; color: var(--text-dim); line-height: 1.8; }
/* 窄屏：搜索框收成图标宽度 */
@media (max-width: 1240px) { .nav-search { flex: 0 1 170px; } }
@media (max-width: 1040px) { .nav-search { display: none; } }
/* ============================================================
排版收尾（redesign-skill 清单）
· 孤立词：标题/短句最后一行只掉一个字
→ 标题用 text-wrap: balance（多行均衡），正文用 pretty（避免孤字）
· 中文标点挤压：行尾不留半个标点
============================================================ */
h1, h2, h3, h4, .gua-name-big, .es-title, .dt-pop-title, .legal-head,
.stage-title, .tune-gtitle, .credit-group-title {
text-wrap: balance;
}
p, li, .hint, .gua-ci, .gua-sub, .es-text, .credit-note, .legal-body p {
text-wrap: pretty;
}
/* 中文正文统一：行尾避头点、字距微调（不引外部字体特性，纯原生） */
p, li, .gua-ci, .gua-sub, .es-text, .legal-body p {
line-break: strict;
overflow-wrap: anywhere;
}
/* 数字与单位之间不断行（如「第 3 爻」「12 岁」） */
.nb { white-space: nowrap; }
/* ============================================================
空状态（redesign-skill：空面板不该只写"暂无数据"）
给一个"这是什么 / 怎么开始 / 下一步做什么"的起始视图
============================================================ */
.empty-state { text-align: center; padding: 34px 18px 30px; }
.es-icon { width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 16px;
display: flex; align-items: center; justify-content: center;
font-family: var(--serif); font-size: 30px; font-weight: 700; color: var(--gold-bright);
background: linear-gradient(180deg, rgba(var(--gold-rgb),.16), rgba(var(--gold-rgb),.05));
border: 1px solid rgba(var(--gold-rgb),.32);
box-shadow: 0 10px 26px rgba(10,23,39,0.483), inset 0 1px 0 rgba(255,255,255,.08); }
.es-title { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: 3px;
color: var(--gold-bright); margin-bottom: 10px; }
.es-text { max-width: 30em; margin: 0 auto 20px; font-size: 14.5px; line-height: 1.95;
color: var(--text-dim); text-align: left; }
.es-steps { display: flex; flex-direction: column; gap: 7px; max-width: 24em; margin: 0 auto 24px; }
.es-steps span { font-size: 14px; color: var(--text-dim); text-align: left; letter-spacing: .5px; }
.es-go { padding: 12px 34px; border-radius: 10px; border: none; cursor: pointer;
font-family: var(--serif); font-size: 15px; font-weight: 600; letter-spacing: 3px;
color: var(--text); background: linear-gradient(180deg, var(--gold-bright), var(--gold) 62%, #A5873F);
box-shadow: 0 6px 18px rgba(10,23,39,0.517), inset 0 1px 0 rgba(255,255,255,.5);
transition: transform .2s var(--ease-out), filter .2s var(--ease-out); }
.es-go:hover { transform: translateY(-2px); filter: brightness(1.06); }
.es-go:active { transform: translateY(1px); }
/* ============================================================
底部法律链接（免责声明 / 隐私说明）
原来是纯文字，现在可点开阅读；保持底部一行不占视觉重量
============================================================ */
.footer { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.footer .legal-link { font-size: 12.5px; color: rgba(154,148,136,.78); cursor: pointer;
border-bottom: 1px dotted rgba(154,148,136,.4);
transition: color .2s var(--ease), border-color .2s var(--ease); }
.footer .legal-link:hover { color: var(--gold-bright); border-color: rgba(var(--gold-rgb),.6); }
.footer .legal-sep { color: rgba(154,148,136,.34); font-size: 12px; }
/* 2026-11-03 D2-57/58：底部法律入口改为独立页直链，去掉 默认下划线，其余沿用 .legal-link */
.footer a.legal-link { text-decoration: none; }
/* ============================================================
数字等宽：全站默认开启
为什么：命理页面到处是 4 位数年份、时刻、评分、爻位，
比例字宽会让同一列数字左右跳动；等宽后整列对齐。
（汉字不受影响，等宽只作用于数字字形）
============================================================ */
html, body { font-variant-numeric: tabular-nums; }
/* 明确覆盖带 !important 的字体声明与表单控件 */
input, select, textarea, button, output, table, td, th, code, kbd, samp, time, .num {
font-variant-numeric: tabular-nums;
}
/* 大字标题（卦名、日期大号显示）保持默认，避免等宽让字体显得松散 */
.gua-name-big, .dt-value, .stage-title { font-variant-numeric: normal; }
/* ============================================================
全站设计系统收口（按 taste-skill / redesign-skill 审计清单）
修三类问题：
① z-index 散乱（原来 9999/10000/10001/10050/10051 直接写死）
→ 建立统一层级表，语义命名
② 数字用比例字宽，数据表格对不齐
→ 统一开启 tabular-nums
③ :focus 可见样式不足（键盘可用性）
→ 全局 :focus-visible 焦点环
============================================================ */
/* ---------- ① z-index 层级表 ---------- */
:root {
--z-base: 0;
--z-raise: 10; /* 卡片抬起 */
--z-nav: 50; /* 顶部导航 */
--z-drawer: 900; /* 侧边抽屉 */
--z-tune: 940; /* 右下角本页设置 */
--z-overlay: 960; /* 遮罩层 */
--z-result: 980; /* 卦辞 / 结果面板 */
--z-float-x: 990; /* 面板外的关闭叉号 */
--z-modal: 1000; /* 弹窗（时间选择器、支付） */
--z-dropdown: 1010; /* 下拉菜单（必须在弹窗之上） */
--z-toast: 1030; /* 右上角提示（最高） */
}
/* ---------- ② 数字等宽（表格、时间、排行、统计） ---------- */
.dt-item, .dt-value, .hist-time, .hist-item, .tune-row output,
.pill, .badge, .stat, .score, .num, table, .gua-meta, .cfg-inp[type="number"] {
font-variant-numeric: tabular-nums;
}
/* 时间选择器与卦例里的数字是主体内容，统一等宽更整齐 */
.dt-wheel, .hist-drawer, .result-slide-in .meta { font-variant-numeric: tabular-nums; }
/* ---------- ③ 键盘焦点环（可访问性，视觉低调但不缺失） ---------- */
:focus { outline: none; }
:focus-visible {
outline: 2px solid rgba(var(--gold-rgb), .72);
outline-offset: 2px;
border-radius: 6px;
}
button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
outline: 2px solid rgba(var(--gold-rgb), .72);
outline-offset: 2px;
}
/* 输入类控件聚焦时用更贴合的样式（描边而不是外框） */
.cfg-inp:focus-visible, .q-input input:focus-visible, input[type="text"]:focus-visible {
outline: none;
border-color: rgba(var(--gold-rgb), .62);
box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .12);
}
/* ---------- 跳转到主内容（键盘用户） ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: var(--z-toast);
padding: 10px 18px; background: #12233a; color: var(--gold-bright);
border: 1px solid rgba(var(--gold-rgb),.5); border-radius: 0 0 10px 0; font-size: 14px; }
.skip-link:focus { left: 0; }
/* ============================================================
易算阁 · 藏青鎏金哑光 · 三维分层悬浮 · 新中式高端命理
主背景 深墨青 var(--bg)→var(--bg-2) ｜ 主色 哑光鎏金 var(--gold)
辅助 暗金 var(--gold-dim) ｜ 文字 米灰 var(--text)
标题 思源宋体加粗 ｜ 正文 思源黑体 ｜ 一屏适配 无全局滚动
============================================================ */
:root {
--bg: #0B1A28;
--bg-2: #0F1E2D;
--bg-3: #081420;
--gold: #C8A962;
--gold-bright: #E6C888;
--gold-dim: #8A7548;
--text: #E2DDD2;
--text-dim: #9a9488;
--line: rgba(var(--gold-rgb), 0.16);
--line-strong: rgba(var(--gold-rgb), 0.38);
--gold-rgb: 200,169,98;
--gold-bright-rgb: 230,200,136;
--shadow-rgb: 2,7,13;
--bg-rgb: 11,24,38;
--serif: "Noto Serif SC", "Source Han Serif SC", "思源宋体", "Songti SC", "SimSun", serif;
--sans: "Noto Sans SC", "Source Han Sans SC", "思源黑体", "PingFang SC", "Microsoft YaHei", sans-serif;
--ease: cubic-bezier(.25, .8, .25, 1);
--ease-out: cubic-bezier(.16, 1, .3, 1);
/* 2026-10-27 A8 卡片 token 化：原为多处硬编码同值，提取后改一处即全站生效（视觉零变化） */
--shadow-card-soft: 0 6px 18px rgba(60,48,28,.14), inset 0 1px 0 var(--sf-glass-hi);
--shadow-card-deep: 0 18px 44px rgba(10,23,39,0.69), inset 0 1px 0 rgba(255,255,255,.06);
--shadow-inset-highlight: inset 0 1px 0 rgba(255,255,255,.05);
--shadow-inset-highlight-faint: inset 0 1px 0 rgba(255,255,255,.04);
--shadow-ring-gold: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 3px rgba(var(--gold-rgb),.1);
--shadow-card-lifted: 0 18px 50px rgba(30, 22, 10, .3);
/* 悬浮卡片：哑光金属 + 宣纸肌理 + 柔投影 + 微内发光 */
--float-bg: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012)),
linear-gradient(160deg, #14273B 0%, #0E1F31 55%, #0A1828 100%);
/* 2026-10-11 用户："像这种有黑底的都给我去了……框外面有黑色的"（第八批）——
旧值带 34px / 60px 两档大模糊的黑色投影（rgba(var(--shadow-rgb),.55/.35)），
深色底上根本看不出"影子"，只看到卡片四周/两框之间糊了一圈黑。
现在只留贴边的浅投影（≤14px 模糊、低不透明度），保留层次、不留黑圈。
⚠ 所有卡片/按钮都引用这一个变量，改这里就是全站统一改（用户说的"同一个代码"）。 */
--float-shadow: inset 0 1px 0 rgba(255,255,255,0.055),
inset 0 0 22px rgba(var(--gold-rgb),0.028),
0 1px 3px rgba(var(--shadow-rgb),0.28),
0 5px 12px rgba(var(--shadow-rgb),0.20);
}
/* ============================================================
双主题 · 主题层（2026-10-25）
------------------------------------------------------------
背景：本文件第 3098 行起已有「朱批纸本」全站主题层（2026-10-13 定稿），
所以**默认态就是浅米纸底**，不是第 180 行那套深蓝（那套已被后面覆盖）。
本节只做两件事：
① 提供「夜读·墨蓝」深色模式（把深蓝那套在朱批版之上复活）；
② 提供「疗愈·晨雾」更浅更暖的变体。
原则：**只覆盖 token 的值，不新建变量名**；需要压过朱批版硬编码表面
（body 背景 / 导航 / 抽屉 / 浮层）时用同前缀 `body[data-theme=...]` 提高优先级。
对比度实测（WCAG 2.1，STD-WCAG-143 要求正文 ≥4.5:1）：
夜读 正文 #E2DDD2 / #0B1A28 = 13.60 ✓
夜读 次要 #9A9488 / #0B1A28 = 6.02 ✓
夜读 金 #C8A962 / #0B1A28 = 7.90 ✓
晨雾 正文 #333230 / #FDFBF7 = 12.39 ✓
晨雾 次要 #6B6660 / #FDFBF7 = 5.50 ✓
晨雾 金 #8A6335 / #FDFBF7 = 5.19 ✓
⚠ 晨雾的 --gold-bright 仅 2.9，**只能做 ≥18px 大字或纯装饰**。
切换：document.body.dataset.theme = ""（朱批纸本，默认）| "night" | "heal"。
============================================================ */
/* ---------- 夜读 · 墨蓝（深色） ---------- */
body[data-theme="night"] {
--bg: #0B1A28; --bg-rgb: 11,24,38;
--bg-2: #0F1E2D; --bg-3: #081420;
--text: #E2DDD2; --text-dim: #9A9488;
--gold: #C8A962; --gold-rgb: 200,169,98;
--gold-bright: #E6C888; --gold-bright-rgb: 230,200,136;
--gold-dim: #8A7548;
--shadow-rgb: 2,7,13;
--line: rgba(var(--gold-rgb), 0.16);
--line-strong: rgba(var(--gold-rgb), 0.38);
--cinnabar: #C4483A;
--cinnabar-dark: #9A3126;
/* 导航未激活链接/更多按钮/下拉标题：跟随夜读的次要字色。
关键：--nav-idle 原在 :root 用 var(--text-dim) 声明，而夜读只在 body 上重定义
--text-dim，导致根级 --nav-idle 永远解析成纸版 #5C564E（实测导航 2.3:1）。
这里用 !important 压过 :root 的 !important，让导航在夜读变浅。 */
--nav-idle: var(--text-dim) !important;
--float-bg: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012)),
linear-gradient(160deg, #14273B 0%, #0E1F31 55%, #0A1828 100%);
--float-shadow: inset 0 1px 0 rgba(255,255,255,0.055),
inset 0 0 22px rgba(var(--gold-rgb),0.028),
0 1px 3px rgba(var(--shadow-rgb),0.28),
0 5px 12px rgba(var(--shadow-rgb),0.20);
}
/* 朱批版的浅色表面覆盖要逐项还原（这些是硬编码色，不跟 token 走） */
body[data-theme="night"] {
background:
radial-gradient(1200px 700px at 70% -10%, rgba(200,169,98,0.05), transparent 60%),
radial-gradient(900px 600px at 12% 108%, rgba(11,24,38,0.35), transparent 60%),
linear-gradient(155deg, #0B1A28 0%, #0D1C2B 52%, #081420 100%);
}
body[data-theme="night"] .ink,
body[data-theme="night"] .starfield { display: block; }
body[data-theme="night"] .grain { opacity: 0.12; mix-blend-mode: normal; }
body[data-theme="night"] .nav {
background: linear-gradient(180deg, rgba(11,26,40,0.94), rgba(11,26,40,0.86));
box-shadow: 0 8px 24px rgba(2,7,13,0.45), inset 0 -1px 0 rgba(200,169,98,0.10);
}
body[data-theme="night"] .logo-name { color: var(--text); text-shadow: 0 0 18px rgba(200,169,98,.25); }
body[data-theme="night"] .logo-seal { filter: drop-shadow(0 2px 6px rgba(2,7,13,0.55)); }
body[data-theme="night"] .skip-link { background: #0F1E2D; color: var(--text); border-color: var(--line-strong); }
body[data-theme="night"] .drawer { background: linear-gradient(180deg, #0F1E2D, #0B1A28); }
body[data-theme="night"] .drawer-mask { background: rgba(2,7,13,0.62); }
body[data-theme="night"] .safety-box,
body[data-theme="night"] .evo-box,
body[data-theme="night"] .legal-box,
body[data-theme="night"] .acct-menu { background: linear-gradient(180deg, #14273B, #0F1E2D); }
body[data-theme="night"] .nav-more-list {
background: linear-gradient(180deg, #14273B, #0F1E2D) !important;
border-color: var(--line-strong) !important;
box-shadow: 0 10px 28px rgba(2,7,13,.55) !important;
}
body[data-theme="night"] .nav-more-list::before { background: none !important; box-shadow: none !important; }
body[data-theme="night"] .nav-more-list .nm-gname { color: #C8A962 !important; }
body[data-theme="night"] .nav-more-list .nm-title { color: var(--text) !important; }
body[data-theme="night"] .nav-more-list .nm-sub { color: var(--text-dim) !important; }
body[data-theme="night"] .nav-more-list a:hover,
body[data-theme="night"] .nav-more-list a.active { background: rgba(200,169,98,.08) !important; }
body[data-theme="night"] .nav-more-list a:hover .nm-title,
body[data-theme="night"] .nav-more-list a.active .nm-title { color: var(--gold-bright) !important; }
body[data-theme="night"] .nav-more-list a:hover .nm-sub,
body[data-theme="night"] .nav-more-list a.active .nm-sub { color: rgba(230,200,136,.72) !important; }
body[data-theme="night"] .btn-input select option { background: #0F1E2D; color: var(--text); }
body[data-theme="night"] .tune-btn { background: linear-gradient(180deg, #14273B, #0F1E2D); color: var(--text); }
body[data-theme="night"] .footer {
background: linear-gradient(180deg, transparent, rgba(8,20,32,0.94));
color: rgba(154,148,136,0.85);
}
body[data-theme="night"] .footer .legal-link { color: rgba(154,148,136,0.85); }
body[data-theme="night"] .footer .legal-link:hover { color: var(--gold-bright); border-color: rgba(200,169,98,0.5); }
body[data-theme="night"] .nav-links a.active { color: var(--gold-bright); background: rgba(200,169,98,0.08); }
body[data-theme="night"] .nav-links a.active::after { background: var(--gold-bright); }
body[data-theme="night"] .nav-links > a.active { color: var(--gold-bright) !important; border-color: rgba(200,169,98,0.35) !important; }
body[data-theme="night"] .nav-more.active .nav-more-btn,
body[data-theme="night"] .nav-more.open .nav-more-btn { color: var(--gold-bright) !important; }
body[data-theme="night"] .nav-more-list a.active .nm-title { color: var(--gold-bright) !important; }
body[data-theme="night"] .seg-btn.active {
background: linear-gradient(180deg, #C4483A, #B23A2E 60%, #9A3126);
color: #FFFDF8;
}
/* ---------- 疗愈 · 晨雾（更浅更暖） ---------- */
body[data-theme="heal"] {
--bg: #FDFBF7; --bg-rgb: 253,251,247;
--bg-2: #F7F3EC; --bg-3: #F1ECE3;
--text: #333230; --text-dim: #6B6660;
--gold: #8A6335; --gold-rgb: 138,99,53;
--gold-bright: #A87C46; /* 仅 ≥18px 或装饰 */
--gold-dim: #C0A882;
--shadow-rgb: 130,120,105;
--line: rgba(130,120,105,0.14);
--line-strong: rgba(130,120,105,0.32);
--float-bg: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.28)),
linear-gradient(160deg, #FFFEFB 0%, #FDFAF3 55%, #F8F4EB 100%);
--float-shadow: inset 0 1px 0 rgba(255,255,255,.9),
0 1px 3px rgba(130,120,105,.09),
0 6px 16px rgba(130,120,105,.07);
}
body[data-theme="heal"] {
background:
radial-gradient(1200px 700px at 70% -10%, rgba(168,137,78,0.04), transparent 60%),
radial-gradient(900px 600px at 12% 108%, rgba(178,58,46,0.02), transparent 60%),
linear-gradient(155deg, #FEFCF8 0%, #FDFAF4 52%, #FAF6EE 100%);
}
body[data-theme="heal"] .nav {
background: linear-gradient(180deg, rgba(253,251,247,0.94), rgba(253,251,247,0.86));
}
body[data-theme="heal"] .drawer { background: linear-gradient(180deg, #FFFEFB, #FAF6EE); }
body[data-theme="heal"] .safety-box,
body[data-theme="heal"] .evo-box,
body[data-theme="heal"] .legal-box,
body[data-theme="heal"] .acct-menu { background: linear-gradient(180deg, #FFFEFB, #FBF7EF); }
body[data-theme="heal"] .nav-more-list { background: linear-gradient(180deg, #FFFEFB, #FBF7EF) !important; }
body[data-theme="heal"] .footer { background: linear-gradient(180deg, transparent, rgba(253,251,247,0.94)); }
* { box-sizing: border-box; margin: 0; padding: 0; }
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* 全站禁止选中文字：避免出现蓝色高亮，也避免选中后拖不动牌/罗盘 */
* { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
/* 唯一例外：输入框和备注框要能正常打字与选中 */
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
html, body { height: 100%; }
html { overflow: hidden; }
body {
font-family: var(--sans);
font-size: 16px;
color: var(--text);
background:
radial-gradient(1200px 700px at 70% -10%, rgba(23,48,72,0.55), transparent 60%),
radial-gradient(900px 600px at 12% 108%, rgba(16,36,56,0.6), transparent 60%),
linear-gradient(155deg, var(--bg) 0%, var(--bg-2) 52%, var(--bg-3) 100%);
min-height: 100vh;
overflow: hidden;
-webkit-font-smoothing: antialiased;
}
/* 苹果式惯性滚动（WebKit 生效，其余降级平滑滚动） */
.momentum { overflow-y: auto; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; overscroll-behavior: contain; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { cursor: pointer; font-family: inherit; }
input, textarea { cursor: text; }
label, .clickable { cursor: pointer; }
/* ---------- 背景氛围层 ---------- */
.ink { position: fixed; border-radius: 50%; pointer-events: none; z-index: 0; filter: blur(3px); }
.ink-1 { width: 46vw; height: 46vw; left: -14vw; top: 26vh;
background: radial-gradient(circle, rgba(var(--gold-rgb),0.05), transparent 62%); }
.ink-2 { width: 38vw; height: 38vw; right: -10vw; top: -8vh;
background: radial-gradient(circle, rgba(61,106,120,0.10), transparent 62%); }
.grain { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,"); }
.starfield { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.4;
background-image:
radial-gradient(1px 1px at 12% 22%, rgba(var(--gold-bright-rgb),.5), transparent 100%),
radial-gradient(1px 1px at 78% 12%, rgba(226,221,210,.35), transparent 100%),
radial-gradient(1.2px 1.2px at 56% 68%, rgba(var(--gold-bright-rgb),.3), transparent 100%),
radial-gradient(1px 1px at 30% 84%, rgba(226,221,210,.3), transparent 100%),
radial-gradient(1px 1px at 90% 55%, rgba(var(--gold-bright-rgb),.35), transparent 100%); }
/* ---------- 顶部导航（微立体浮雕） ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: var(--z-nav);
background: linear-gradient(180deg, rgba(var(--bg-rgb),0.92), rgba(var(--bg-rgb),0.78));
border-bottom: 1px solid var(--line);
box-shadow: 0 10px 30px rgba(var(--shadow-rgb),0.55), inset 0 -1px 0 rgba(var(--gold-rgb),0.06);
backdrop-filter: blur(10px); }
.nav-inner { max-width: 1440px; margin: 0 auto; height: 100%;
display: flex; align-items: center; gap: 26px; padding: 0 26px; }
.logo { display: flex; align-items: center; gap: 11px; cursor: pointer; flex-shrink: 0; }
.logo-seal { width: 38px; height: 38px; filter: drop-shadow(0 2px 6px rgba(10,23,39,0.575)); }
.logo-name { font-family: var(--serif); font-size: 20px; font-weight: 900; letter-spacing: 5px; color: var(--gold);
text-shadow: 0 1px 0 #4d3f20, 0 2px 4px rgba(10,23,39,0.69), 0 0 18px rgba(var(--gold-rgb),.25); }
.logo-sub { font-size: 10.5px; letter-spacing: 3px; color: var(--text-dim); margin-top: 2px; }
.nav-links { display: flex; gap: 4px; margin: 0 auto; }
.nav-links a { position: relative; padding: 9px 15px; border-radius: 8px; font-size: 16.5px; letter-spacing: 2.5px;
color: var(--gold-dim); font-family: var(--serif); font-weight: 600; transition: color .3s var(--ease), background .3s var(--ease);
text-shadow: 0 1px 2px rgba(10,23,39,0.575); }
.nav-links a:hover { color: var(--gold-bright); background: rgba(var(--gold-rgb),0.07); }
/* 选中态：亮金 + 金色描边 + 下缘金线，与未选中明显区分 */
.nav-links a.active { color: #F2DFA8; background: linear-gradient(180deg, rgba(226,196,136,0.20), rgba(var(--gold-rgb),0.10));
border: 1px solid rgba(226,196,136,0.45);
box-shadow: inset 0 1px 0 rgba(255,240,205,0.22), 0 4px 16px rgba(var(--shadow-rgb),.5), 0 0 18px rgba(var(--gold-rgb),.16); }
.nav-links a.active::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 3px; height: 2px;
background: linear-gradient(90deg, transparent, var(--gold-bright), transparent); }
.nav-side { display: flex; gap: 8px; flex-shrink: 0; }
.nav-side a { padding: 8px 14px; border-radius: 8px; font-size: 15.5px; letter-spacing: 2px; color: var(--gold-dim);
font-family: var(--serif); font-weight: 600; border: 1px solid transparent; transition: all .3s var(--ease);
text-shadow: 0 1px 2px rgba(10,23,39,0.575); }
.nav-side a:hover { color: var(--gold-bright); border-color: var(--line); background: rgba(var(--gold-rgb),0.07); }
.nav-side a.active { color: #F2DFA8; border-color: rgba(226,196,136,0.45);
background: linear-gradient(180deg, rgba(226,196,136,0.18), rgba(var(--gold-rgb),0.09)); }
/* ---------- 主体三栏（一屏适配） ---------- */
.stage { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto;
padding: 76px 26px 0; display: grid;
grid-template-columns: 21% minmax(0, 1fr) 21%; gap: 22px; align-items: stretch;
height: calc(100vh - 46px); }
/* 起卦时仅弱化除罗盘以外的内容，罗盘保持实体清晰 */
.side-col, .stage-head, .float-panel, .tarot-hero { transition: opacity .7s var(--ease); }
.stage.dimmed .side-col, .stage.dimmed .stage-head, .stage.dimmed .float-panel, .stage.dimmed .tarot-hero { opacity: 0.08; pointer-events: none; }
.side-col { display: flex; flex-direction: column; gap: 16px; padding-top: 10px;
min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* 左栏内容整体在纵向居中（原来贴顶，和中间/右侧对不齐）。
用 auto 外边距而不是 justify-content:center —— 内容超高时 auto 归零、
自动退回顶部，滚动条能滚到第一条（flex 居中 + 滚动会把顶部顶出可视区）。 */
#inputCol > *:first-child { margin-top: auto; }
#inputCol > *:last-child { margin-bottom: auto; }
/* ---------- 左栏标题与输入 ---------- */
/* 页面大标题已去掉（导航已有对应项，重复啰嗦）；
注意 #stageTitle/#stageSub 的实际父级是 .stage-center，不是在 .stage-head 里 */
.stage-head, #stageTitle, #stageSub { display: none; }
.side-label { font-size: 12.5px; color: var(--gold-dim); letter-spacing: 3.5px; margin-bottom: 6px; }
/* 「心中默念所想之事」——左侧字号收小、不再抢占主视觉 */
.mind-title { font-family: var(--serif); font-size: 18.5px; font-weight: 700; letter-spacing: 4px;
color: var(--text); margin-bottom: 12px; text-align: center;
text-shadow: 0 1px 0 rgba(10,23,39,0.632), 0 2px 10px rgba(10,23,39,0.46), 0 0 24px rgba(var(--gold-rgb),.12); }
.form-title-big { font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: 4px;
color: var(--text); margin-bottom: 10px; text-align: center;
text-shadow: 0 1px 0 rgba(10,23,39,0.632), 0 2px 10px rgba(10,23,39,0.46); }
.form-title-sub { font-size: 13px; color: var(--text-dim); letter-spacing: 3px; margin-bottom: 16px; text-align: center; }
/* 问事输入框：无任何底部黄线，改为克制的暗色面板 + 聚焦柔光 */
.q-input { position: relative; margin-bottom: 14px; }
.q-input input[type="text"] { display: block; width: 100%; height: 88px;
background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008));
border: 1px solid var(--line); border-radius: 12px;
color: var(--text); font-size: 16px; font-family: inherit; outline: none;
text-align: center; line-height: 88px; letter-spacing: 2px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 8px 22px rgba(var(--shadow-rgb),0.38);
transition: border-color .35s var(--ease), box-shadow .35s var(--ease); }
.q-input input::placeholder { color: rgba(154,148,136,0.8); text-align: center; transition: color .3s; }
.q-input input:focus::placeholder { color: transparent; }
.q-input input:focus { border-color: rgba(var(--gold-rgb),0.55);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 26px rgba(var(--shadow-rgb),0.45), 0 0 18px rgba(var(--gold-rgb),0.10); }
/* 分段按钮（起局法等） */
.seg-wrap { text-align: center; }
.seg-group { display: flex; gap: 0; border-radius: 10px; overflow: hidden;
background: rgba(255,255,255,0.04); border: 1px solid var(--line);
box-shadow: inset 0 1px 3px rgba(10,23,39,0.345); }
.seg-btn { flex: 1; padding: 12px 0; font-size: 15px; letter-spacing: 3px;
font-family: var(--serif); font-weight: 600; color: var(--text-dim);
background: transparent; border: none; cursor: pointer;
transition: color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease); }
.seg-btn:hover { color: var(--gold-bright); background: rgba(var(--gold-rgb),0.06); }
.seg-btn.active { color: var(--text); background: linear-gradient(180deg, #E2C488, var(--gold) 55%, #A5873F);
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 0 #6d5a2e, 0 6px 18px rgba(var(--shadow-rgb),.45);
text-shadow: 0 1px 0 rgba(255,255,255,.3); }
/* 姻缘合婚：左右两方信息卡紧凑化，避免左栏过长需要下拉才能看到合盘按钮 */
.hunyin-party { padding: 9px 12px; margin-bottom: 8px; border-radius: 12px; }
.party-label { font-size: 15px; letter-spacing: 3px; margin-bottom: 6px; padding-bottom: 5px; }
.hunyin-party .dt-field { padding: 8px 12px; margin-bottom: 7px; }
.hunyin-party .dt-field .dt-show { font-size: 16px; letter-spacing: 1px; }
.hunyin-party .btn-input { margin-bottom: 6px; }
.hunyin-party .inp-label { font-size: 13px; letter-spacing: 2px; margin-bottom: 4px; }
.hunyin-party .btn-input select { padding: 9px 28px 9px 10px; font-size: 14px; }
.hunyin-party .btn-input:has(> select)::after { font-size: 15px; bottom: 10px; right: 11px; }
.party-label { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--gold);
letter-spacing: 3px; text-align: center; margin-bottom: 8px; padding-bottom: 6px;
border-bottom: 1px solid var(--line); text-shadow: 0 1px 0 rgba(10,23,39,0.575); }
/* 合婚两方卡片本体 */
.hunyin-party { background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
border: 1px solid var(--line); box-shadow: var(--float-shadow); }
/* 通用下拉 */
.btn-input { margin-bottom: 14px; text-align: center; }
.inp-label { display: block; font-size: 15px; color: var(--gold-dim); letter-spacing: 2.5px; margin-bottom: 7px; text-align: center; }
.btn-input select { width: 100%; padding: 12px 34px 12px 12px; appearance: none; -webkit-appearance: none;
background: var(--float-bg); color: var(--text); font-size: 15px; outline: none; letter-spacing: 1px;
border: 1px solid var(--line); border-radius: 10px; text-align: center; text-align-last: center;
box-shadow: var(--float-shadow); transition: border-color .3s var(--ease); cursor: pointer; }
.btn-input select:hover { border-color: var(--line-strong); }
.btn-input select option { background: #0E1F31; color: var(--text); }
.btn-input { position: relative; }
/* 下拉箭头只给"真正的 select"；分段按钮（奇门起局法等）不加箭头 */
.btn-input:has(> select)::after { content: "\25BE"; position: absolute; right: 13px; bottom: 13px; color: var(--gold); font-size: 18px; line-height: 1; pointer-events: none; }
/* 解读卡里的解锁按钮：去掉多余间距（界面内只保留一个入口） */
.unlock-row { margin-top: 10px; }
.unlock-row .unlock-btn { width: 100%; }
/* ============================================================
2026-11-04 付费墙骨架（免费态）：只占位，不含付费正文
—— 真正的完整排盘 / 详细解读 HTML 存在 JS 内存，解锁后才补进 DOM。
============================================================ */
.pw-slot {
margin: 10px 0; padding: 16px 14px; text-align: center;
border: 1px dashed rgba(var(--gold-rgb), .42); border-radius: 12px;
background: rgba(var(--gold-rgb), .05);
}
.pw-lock { font-size: 18px; line-height: 1; color: var(--gold); opacity: .85; }
.pw-title {
margin: 7px 0 3px; font-family: var(--serif); font-size: 15px;
letter-spacing: 2px; color: var(--gold-bright, var(--gold));
}
.pw-sub { margin-bottom: 11px; font-size: 12px; color: var(--text-dim); line-height: 1.7; }
.pw-btn {
max-width: 100%; padding: 7px 20px; border-radius: 999px; cursor: pointer;
font-size: 13px; letter-spacing: 1px; color: var(--gold-bright, var(--gold));
background: rgba(var(--gold-rgb), .1); border: 1px solid rgba(var(--gold-rgb), .5);
transition: background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.pw-btn:hover { background: rgba(var(--gold-rgb), .18); border-color: rgba(var(--gold-rgb), .75); }
/* 完整排盘的列名图例（付费态） */
.ly-legend { font-size: 11px; letter-spacing: 2px; opacity: .62; margin-top: -2px; }
/* 解读卡上的付费开关 */
.result-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.result-head .method { margin-left: auto; }
.pay-inline { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.pay-inline-label { font-size: 12.5px; color: var(--gold-dim); letter-spacing: 2px; }
/* 外观微调滑杆（设置面板） */
.tune-row { display: grid; grid-template-columns: 78px 1fr 52px; align-items: center; gap: 10px; margin: 10px 0; }
.tune-row > span:first-child { font-size: 13.5px; color: var(--text-dim); letter-spacing: 1px; }
.tune-row output { font-size: 13px; color: var(--gold-bright); text-align: right; }
.tune-row input[type="range"] { width: 100%; accent-color: var(--gold); cursor: pointer; }
.row2 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; text-align: center; }
.row2 .btn-input { text-align: center; }
.row1 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 出生/问事时间条 */
.dt-field { padding: 13px 16px; margin-bottom: 14px; text-align: center;
background: var(--float-bg); border: 1px solid var(--line); border-radius: 10px;
box-shadow: var(--float-shadow); transition: border-color .3s var(--ease), transform .3s var(--ease); }
.dt-field:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.dt-field .dt-cap { display: block; font-size: 12.5px; color: var(--gold-dim); letter-spacing: 3px; margin-bottom: 5px; }
.dt-field .dt-show { display: block; font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: 2px; color: var(--gold-bright); }
/* 起卦按钮：哑光鎏金，无扫光，悬停变色、点击下沉 */
.btn-cast { display: block; width: 100%; padding: 16px 0; font-size: 18px; letter-spacing: 10px;
font-family: var(--serif); color: var(--text); font-weight: 700;
background: linear-gradient(180deg, #E2C488 0%, var(--gold) 46%, #A5873F 100%);
border: none; border-radius: 999px; margin-top: 8px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -2px 4px rgba(60,42,10,0.35),
0 3px 0 #6d5a2e, 0 10px 26px rgba(var(--shadow-rgb),0.5), 0 0 30px rgba(var(--gold-rgb),0.15);
position: relative; overflow: hidden; transition: transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease); }
.btn-cast:hover { transform: translateY(-2px); filter: brightness(1.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 4px rgba(60,42,10,0.35),
0 5px 0 #6d5a2e, 0 16px 34px rgba(var(--shadow-rgb),0.55), 0 0 40px rgba(var(--gold-rgb),0.3); }
.btn-cast:active { transform: translateY(2px); filter: brightness(0.96);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 0 #6d5a2e, 0 5px 14px rgba(var(--shadow-rgb),0.5); }
.btn-cast:disabled { opacity: .45; cursor: wait; transform: none; filter: none; }
/* 校准进度 */
/* 2026-10-13 用户：「校准进度的背景色…除了上面有输入框的（如奇门遁甲）可以是白点的，
剩下都改成左侧相同的颜色」→ 默认透明（随页面底色），奇门加 .cbox-white 保持浮层白 */
.calib-box { padding: 15px 17px; border-radius: 12px; background: transparent;
border: 1px solid rgba(var(--gold-rgb),0.1); box-shadow: var(--float-shadow); margin-bottom: 14px; text-align: center; }
.calib-box .side-label { text-align: center; font-size: 15px; letter-spacing: 2.5px; margin-bottom: 9px; }
/* 校准项：整块占满卡片，圆点列固定宽 + 文字列左对齐（两条竖线都齐） */
.calib-box { text-align: center; }
.calib-box.cbox-white { background: var(--float-bg); }
.calib-row { display: grid; grid-template-columns: 16px 1fr; align-items: center; column-gap: 8px;
font-size: 14.5px; color: var(--text-dim); padding: 5px 0;
/* 整块居中（原来贴左边缘、和居中的「校准进度」标题对不齐）；
行内仍是点列 + 左对齐文字，四条的点成一竖线 */
width: auto; max-width: 172px; margin-left: auto; margin-right: auto;
text-align: left; transition: color .3s; }
.calib-row .dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--text-dim); justify-self: start; transition: all .3s; }
.calib-row.done { color: var(--gold-bright); }
.calib-row.done .dot { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px rgba(var(--gold-rgb),.8); }
/* ---------- 中间主视觉 ---------- */
.stage-center { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; min-width: 0; }
.stage-head { text-align: center; flex-shrink: 0; }
.stage-title { font-family: var(--serif); font-size: 36px; font-weight: 900; letter-spacing: 12px;
color: var(--text); text-align: center; margin-bottom: 8px;
text-shadow: 0 1px 0 rgba(10,23,39,0.69), 0 2px 12px rgba(10,23,39,0.575), 0 0 34px rgba(var(--gold-rgb),.12); }
.stage-sub { font-size: 14.5px; color: var(--text-dim); letter-spacing: 5px; text-align: center; margin-bottom: 22px; }
/* 罗盘：尺寸由 JS 按容器实测高度写入 --compass-size（保证任何屏幕都完整可见不溢出）
立体做法：外层给透视 + 内层倾斜，模拟真实罗盘摆在桌面的俯视倾角；
倾角用的 CSS 变量可在设置面板里调（0 = 正圆俯视）。 */
.compass-wrap { display: flex; flex-direction: column; align-items: center; width: 100%; min-height: 0;
/* overflow 从 hidden 改 visible（用户 2026-10-10 第四批"罗盘底下少一块"）：
盘面带 3D 倾斜，投影总比容器宽 ~10%（右侧还会偏 ~2%），hidden 会把它
切掉一条边（实测默认尺寸下右侧被裁 23px，用户把盘调大后更明显）。
相邻两栏有天然间距，溢出 ~40px 不会压到左右栏。 */
justify-content: center; flex: 1; overflow: visible;
perspective: 1400px; perspective-origin: 50% 42%;
/* 首帧版式未定，尺寸会校正一次；用短淡入把这次校正藏起来，
所以用户看不到罗盘"从小变大"的入场感。 */
opacity: 0; transition: opacity .38s var(--ease-out); }
.compass-wrap.ready { opacity: 1; }
/* 停靠 / 全屏状态不受初始淡入影响 */
.compass-wrap.shrink-to-left, .compass-wrap.fullscreen { opacity: 1; }
/* 罗盘：投影只留一层柔和落影，去掉底部那圈发黑的厚重阴影 */
/* 2026-10-24 流体尺寸（STD-WCAG-1410）：宽度仍取 JS 算的 --compass-size，
max-width:100% 是最后一道硬闸 —— JS 给多大都不能压到左右栏。 */
.compass { width: var(--compass-size, min(52vw, 620px)); max-width: 100%; align-self: center; flex: 0 0 auto; aspect-ratio: 1;
transform: rotateX(var(--tilt-x, 23deg)) rotateZ(var(--tilt-z, -5deg));
transform-style: preserve-3d; will-change: transform;
filter: drop-shadow(0 18px 26px rgba(0,0,0,var(--glow, 0.42)));
/* 尺寸校正（如字体加载完成后的重算）平滑过渡 260ms，避免开场看到"跳一下" */
transition: width .26s var(--ease-out); }
.compass svg { width: 100%; height: 100%; display: block; }
/* 起卦动画：全屏 → 缩小靠左，全程实体清晰；无黄色闪烁，仅极淡收敛 */
.compass-wrap.fullscreen .compass, .compass-wrap.shrink-to-left .compass { width: 100%; height: 100%; }
/* 全屏（起卦放大到位后的持续旋转态）：必须用 !important 钉住定位与尺寸 ——
.compass-wrap 基础规则里的 flex/width:100% 会覆盖这里的值，
导致罗盘在放大过程中被甩到右半屏（实测 left 卡在 848px）。 */
.compass-wrap.fullscreen { position: fixed !important; z-index: var(--z-result);
display: block !important; flex: none !important; overflow: visible !important;
/* 四边全部由 JS 实测写入（--fs-size / --fs-left / --fs-top），
不再依赖 left:50% 与 translateX(-50%) 推断 —— 那会受 flex 与 3D 影响而偏移。
回退值保证静态打开时也不会贴到视口边。 */
width: var(--fs-size, min(92vmin, 1010px)) !important;
height: var(--fs-size, min(92vmin, 1010px)) !important;
left: var(--fs-left, 8vw) !important;
top: var(--fs-top, 76px) !important;
right: auto !important; bottom: auto !important; margin: 0 !important;
transform: none !important;
transition: top .9s var(--ease), left .9s var(--ease),
width .9s var(--ease), height .9s var(--ease); }
/* 靠左停靠：宽度优先用 JS 算好的 --park-w（已扣掉导航与底部声明）；
注意 var() 的 fallback 里不能再套 min()，否则整条声明失效回退成大尺寸。 */
.compass-wrap.shrink-to-left { position: fixed; top: var(--park-top, 14vh); left: var(--park-left, 3vw);
width: min(34vw, 500px); height: min(34vw, 500px); z-index: var(--z-result); display: block;
transform: none;
transition: top 1s var(--ease-out), left 1s var(--ease-out),
width 1s var(--ease-out), height 1s var(--ease-out),
transform 1s var(--ease-out); }
.compass-wrap.shrink-to-left { width: var(--park-w, min(34vw, 500px)); height: var(--park-w, min(34vw, 500px)); }
/* 停靠时盘面放平：取消倾斜，盘面就严格等于容器尺寸（零溢出），
左边缘能精确对齐设置值；同时盘面正对用户，卦辞对照着看也更清楚。 */
.compass-wrap.shrink-to-left .compass { transform: none; }
.compass-wrap.shrink-to-left .compass svg { width: 100%; height: 100%; }
.compass-wrap.fade-out { opacity: 0; transition: opacity 1.1s var(--ease), top 1.1s var(--ease), left 1.1s var(--ease), width 1.1s var(--ease), height 1.1s var(--ease); }
/* 定格瞬间：极淡的向内收敛反馈 */
.compass.settle svg { animation: settlePulse .9s var(--ease-out) 1; }
@keyframes settlePulse {
0% { transform: scale(1.015); filter: brightness(1.12); }
100% { transform: scale(1); filter: brightness(1); }
}
/* 铜钱卦主视觉：三枚铜钱（起卦法=铜钱卦 时替换罗盘，占位同 --compass-size）。
写入方约定：外层 .coin 只由 CSS 动画写 transform（待机浮沉 coinBob / 摇卦抛起 coinToss），
内层 .coin-in 由 JS 写 rotateY 翻面 —— 一层一个写入方（案例 006 同类坑）。 */
.coins-visual { width: var(--compass-size, min(52vw, 620px)); max-width: 100%; aspect-ratio: 1;
display: flex; align-items: center; justify-content: center; gap: 5%; }
.coin { width: 27%; aspect-ratio: 1; position: relative; perspective: 700px;
animation: coinBob 3.4s ease-in-out infinite; }
.coin:nth-child(2) { animation-delay: .55s; }
.coin:nth-child(3) { animation-delay: 1.1s; }
@keyframes coinBob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3.5%); }
}
@keyframes coinToss {
0% { transform: translateY(0) scale(1) rotate(0deg); }
42% { transform: translateY(-19%) scale(1.05) rotate(-7deg); }
100% { transform: translateY(0) scale(1) rotate(0deg); }
}
.coin-in { position: absolute; inset: 0; transform-style: preserve-3d; }
.coin-face { position: absolute; inset: 0; backface-visibility: hidden; }
/* 背面贴图随旋转轴改 rotateX（2026-10-13：翻转轴由 rotateY 改 rotateX，
"左右转"改"上下翻"——背面必须绕同一轴翻 180° 才能正好朝外） */
.coin-face.back { transform: rotateX(180deg); }
.coin-face svg { width: 100%; height: 100%; display: block;
filter: drop-shadow(0 12px 18px rgba(0,0,0,.45)); }
.coin-face text { font-family: var(--serif); }
/* 全屏 / 停靠态：随容器缩放到 100%（与 .compass 同规则） */
.compass-wrap.fullscreen .coins-visual, .compass-wrap.shrink-to-left .coins-visual { width: 100%; height: 100%; }
/* ============================================================
时间卦主视觉：十二时辰盘（起卦法=时间卦 时替代罗盘）
数理透明：盘转到位 + 四个起卦数依次点亮，结果面板再摊开算式
============================================================ */
.time-visual, .nums-visual { width: var(--compass-size, min(52vw, 620px)); max-width: 100%; aspect-ratio: 1;
display: flex; align-items: center; justify-content: center; }
.compass-wrap.fullscreen .time-visual, .compass-wrap.shrink-to-left .time-visual,
.compass-wrap.fullscreen .nums-visual, .compass-wrap.shrink-to-left .nums-visual { width: 100%; height: 100%; }
.tv-svg { width: 100%; height: 100%; display: block;
filter: drop-shadow(0 10px 26px rgba(10,23,39,.6)); }
/* 时辰环字与四格读数改金色家族（用户 2026-10-11 第五批："中间圆圈里面的白字改成
这种金色的一样的颜色"）——原来是白/灰系（226,221,210 / 154,148,136） */
.tv-zhi { fill: rgba(var(--gold-rgb),.78); font-size: 34px; font-family: var(--serif); }
.tv-cap { fill: rgba(var(--gold-rgb),.62); font-size: 16px; font-family: var(--serif); letter-spacing: 3px; }
.tv-val { fill: rgba(var(--gold-rgb),.38); font-size: 42px; font-family: var(--serif);
transition: fill .3s var(--ease-out); }
.tv-val.on { fill: var(--gold-bright); }
/* ★ 环的旋转中心必须钉在盘心（320,320）：缺了它，CSS transform: rotate() 会以
SVG 坐标系原点 (0,0) 为轴，720° 转完把 12 个时辰字整体甩到画面外 ——
这正是用户报的"起卦后圆圈里面没字"的根因（实测字心 x=-37px） */
.tv-spin { transform-box: view-box; transform-origin: 50% 50%; }
/* 起卦特效：盘先「朦胧」下去（模糊+变淡），算出的数与算式再从远处（由小到大、去模糊）浮现 */
.tv-svg.hazy .tv-spin, .tv-svg.hazy .tv-zhi, .tv-svg.hazy circle {
filter: blur(2.6px); opacity: .32;
transition: filter .9s var(--ease-out), opacity .9s var(--ease-out); }
.tv-val, .tv-calc { transform-box: fill-box; transform-origin: center; }
.tv-val.on { animation: tvFromFar .75s var(--ease-out) both; }
.tv-calc.on { animation: tvFromFar .8s var(--ease-out) both; }
@keyframes tvFromFar {
from { opacity: 0; transform: scale(.38); filter: blur(5px); }
60% { opacity: 1; filter: blur(.6px); }
to { opacity: 1; transform: scale(1); filter: blur(0); } }
/* 算式行：三行落在圆内下半部（替代原先把长句写成一行、横穿出圈外的 .tv-note） */
.tv-calc { fill: rgba(226,221,210,0); font-size: 15.5px; font-family: var(--serif);
letter-spacing: 1px; transition: fill .45s var(--ease-out); }
.tv-calc.on { fill: rgba(var(--gold-rgb),.95); }
/* ---------- 每日一卦：左栏小组件（时间卦「此刻」卡片 / 数字卦「数字格」） ---------- */
.now-card { padding: 13px 15px; border-radius: 12px; background: var(--float-bg);
border: 1px solid rgba(var(--gold-rgb),.14); box-shadow: var(--float-shadow); text-align: center; }
.now-cap { font-size: 12.5px; color: var(--gold-dim); letter-spacing: 3px; margin-bottom: 7px; }
.now-line b { font-family: var(--serif); font-size: 19px; color: var(--gold-bright); letter-spacing: 2px; }
.now-zhi { margin-left: 9px; font-family: var(--serif); font-size: 17px; color: var(--gold); }
.now-note { margin-top: 8px; font-size: 12px; line-height: 1.75; color: var(--text-dim); text-align: left; }
.num-grid { padding: 13px 15px 12px; border-radius: 12px; background: var(--float-bg);
border: 1px solid rgba(var(--gold-rgb),.14); box-shadow: var(--float-shadow); }
.ng-cap { font-size: 12.5px; color: var(--gold-dim); letter-spacing: 3px; text-align: center; margin-bottom: 10px; }
.ng-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
.ng-box { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: text; }
.ng-box input { width: 100%; aspect-ratio: 1; text-align: center; font-family: var(--serif);
font-size: 26px; color: var(--gold-bright); background: rgba(255,255,255,.05);
border: 1px solid rgba(var(--gold-rgb),.28); border-radius: 10px; outline: none;
appearance: textfield; -moz-appearance: textfield;
transition: border-color .25s var(--ease), background .25s var(--ease); }
.ng-box input::-webkit-outer-spin-button, .ng-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ng-box input:focus { border-color: rgba(var(--gold-rgb),.75); background: rgba(var(--gold-rgb),.08); }
/* 聚焦即隐藏占位（? / 可空）——与问题输入框 .q-input 同一口径（用户 2026-10-10 第四批） */
.ng-box input:focus::placeholder { color: transparent; }
.ng-box input.bad { border-color: rgba(201,131,111,.85); }
.ng-box span { font-size: 12px; color: var(--text-dim); letter-spacing: 1px; }
.ng-box.ng-opt span { color: rgba(154,148,136,.6); }
.ng-note { margin-top: 10px; font-size: 12px; line-height: 1.75; color: var(--text-dim); text-align: left; }
/* ============================================================
数字卦主视觉：三枚数珠（起卦法=数字卦 时替代罗盘）
输入框里的数字实时映到珠面；起卦时逐珠亮起并给出「÷8 取余」
============================================================ */
.nums-visual { flex-direction: column; gap: 26px; }
.nv-row { display: flex; gap: 3%; justify-content: center; width: 92%; }
.nv-item { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; max-width: 31%; }
.nv-tile { width: 88%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
border-radius: 20px; border: 1.5px solid rgba(var(--gold-rgb),.45);
background: linear-gradient(180deg, rgba(19,37,56,.92), rgba(10,24,40,.92));
color: rgba(226,221,210,.9); font-size: 54px; font-family: var(--serif);
box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(6,14,24,.5);
transition: border-color .3s var(--ease-out), color .3s var(--ease-out), box-shadow .3s var(--ease-out); }
.nv-tile.on { border-color: var(--gold-bright); color: #F0DCA8;
box-shadow: 0 0 18px rgba(var(--gold-bright-rgb),.35), inset 0 1px 0 rgba(255,255,255,.1); }
.nv-cap { font-size: 16px; letter-spacing: 3px; color: var(--text-dim); }
.nv-rem { font-size: 15px; color: var(--gold-dim); letter-spacing: 1px; text-align: center; min-height: 21px; }
.nv-note { font-size: 17px; letter-spacing: 1.5px; color: rgba(var(--gold-rgb),.88);
font-family: var(--serif); margin: 0; text-align: center; }
/* 结果面板里的「起卦过程」（时间卦/数字卦的算式摊开） */
.gua-steps { margin: 10px 0 12px; padding: 10px 14px; border-radius: 10px;
background: rgba(10,23,39,.45); border: 1px solid rgba(var(--gold-rgb),.18); }
.gua-steps ol { margin: 6px 0 0 20px; padding: 0; }
.gua-steps li { font-size: 13.5px; line-height: 2; color: var(--text-dim); }
.gua-steps li::marker { color: var(--gold-dim); }
.drag-hint { margin-top: 12px; font-size: 12px; color: var(--text-dim); letter-spacing: 3px; opacity: .7; }
/* 各页引导语（每页不同，字号跟随面板文字大小） */
.panel-hint { font-size: calc(var(--panel-fs, 17px) * 1.02); color: var(--text-dim);
letter-spacing: 2.5px; text-align: center; margin: 0 0 calc(var(--panel-gap, 14px) * 1.1); }
/* 断卦依据 / 规则来源 说明块 */
.basis-box { margin-top: 12px; padding: 10px 12px; border-radius: 10px;
background: rgba(255,255,255,0.028); border-left: 2px solid rgba(var(--gold-rgb),.45); text-align: left; }
.basis-title { font-size: calc(var(--panel-fs, 17px) * 0.88); color: var(--gold-dim);
letter-spacing: 2px; margin-bottom: 5px; font-family: var(--serif); }
.basis-item { font-size: calc(var(--panel-fs, 17px) * 0.85); color: var(--text-dim);
line-height: 1.85; }
.basis-item a { color: var(--gold-bright); text-decoration: none; border-bottom: 1px dotted rgba(var(--gold-rgb),.5); }
.basis-item a:hover { color: #F2DFA8; }
/* 四柱 / 紫微 / 奇门 / 合婚 的格子：悬停柔和浮起（统一动效） */
.sizhu-item, .zw-palace, .qm-cell, .hunyin-party { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.sizhu-item:hover, .zw-palace:hover, .qm-cell:hover, .hunyin-party:hover {
transform: translateY(-3px);
box-shadow: 0 10px 26px rgba(10,23,39,0.575), 0 0 0 1px rgba(var(--gold-rgb),.22), 0 0 18px rgba(var(--gold-rgb),.10); }
/* 未排盘时的占位文字：比正文小两号（可用「文字大小」滑杆整体缩放） */
.qm-cell.qm-idle .qm-god, .zw-palace .zw-idle { font-size: calc(var(--panel-fs, 17px) * 0.76); color: #8FA6BC; letter-spacing: 1px; }
/* ---------- 深色悬浮通用面板（无边框内嵌感，悬空居中） ---------- */
.float-panel { background: var(--float-bg); border: none;
/* 底部留 44px：滚到底时最后一行不贴着面板下沿（用户第四批"卦辞显示不全"——
内容长于屏幕时用滚动承接，滚到底有完整收尾，不是被生硬切断） */
border-radius: 16px; padding: 22px 26px 44px; width: 100%; max-width: 100%; color: var(--text);
font-size: var(--panel-fs, 17px); text-align: var(--panel-align, center);
box-shadow: var(--float-shadow); flex-shrink: 1; min-height: 0; max-height: 100%; overflow-y: auto;
-webkit-overflow-scrolling: touch; scroll-behavior: smooth; overscroll-behavior: contain; }
/* 面板撑满中间一栏（原来最大 680px、高度随内容，比左右两栏显小）；
内容纵向居中，宫格类面板把格行拉伸填满（12 宫不再挤在中间一坨）。
⚠ justify-content 必须是 safe center（用户 2026-10-11 第五批："卦辞看不到顶部、被遮挡"）：
普通 center 在内容比面板高时会把顶部溢出到滚动区之外 —— 滚动条到顶也够不着
（Chrome 的经典坑，实测八字四柱第一行"年柱/月柱"整行被切掉、无法滚上去）。
safe center = 放得下时居中、放不下时退回顶部对齐，滚动自然可及。 */
.stage-center > .float-panel { flex: 0 1 auto; display: flex; flex-direction: column; justify-content: safe center;
min-height: 72%; } /* 至少占中间一栏的 72%（原来只随内容，显小）；内容多时自然长到 100% 再滚动 */
.float-panel > .ziwei-grid, .float-panel > .qm-grid { flex: 1 1 auto; grid-auto-rows: 1fr; }
.float-panel > .sizhu-row { flex: 0 0 auto; width: 100%; max-width: 620px; }
.float-panel h3 { font-family: var(--serif); font-size: calc(var(--panel-fs, 17px) * 1.4); font-weight: 700; color: var(--gold);
margin-bottom: var(--panel-gap, 14px); text-align: center; letter-spacing: 4px;
text-shadow: 0 1px 0 rgba(10,23,39,0.575), 0 0 20px rgba(var(--gold-rgb),.15); }
/* 行距 1.95→1.78、段距 8→6：字号调大（15→17）后总高基本不变，
长内容在 1080p 屏上一屏能看完（第四批"显示不全"） */
.float-panel p { font-size: var(--panel-fs, 17px); line-height: 1.78; margin: 6px 0; }
.float-panel strong { color: var(--gold-bright); font-weight: 700; }
.float-panel .hint { color: var(--text-dim); font-size: calc(var(--panel-fs, 17px) * 0.9); }
/* 四柱 / 紫微 / 奇门 格子：字号与间距统一跟面板走 */
.sizhu-row { gap: var(--panel-gap, 14px); margin: calc(var(--panel-gap, 14px) * 1.2) auto; }
.sizhu-item .pillar-label { font-size: calc(var(--panel-fs, 17px) * 0.95); }
.sizhu-item .pillar-value { font-size: calc(var(--panel-fs, 17px) * 2.1); }
.sizhu-item .pillar-sub { font-size: calc(var(--panel-fs, 17px) * 0.9); }
.ziwei-grid, .qm-grid, .wuxing-bar { gap: var(--panel-gap, 14px); }
.qm-cell .qm-gong { font-size: calc(var(--panel-fs, 17px) * 1.2); }
.qm-cell .qm-men { font-size: calc(var(--panel-fs, 17px) * 1.05); }
.qm-cell .qm-star, .qm-cell .qm-god, .qm-cell .qm-gan { font-size: calc(var(--panel-fs, 17px) * 0.92); }
/* 四柱：两列 × 两行（四框并排太宽，改为上下两行更整齐） */
.sizhu-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--panel-gap, 12px); margin: 18px auto; max-width: 460px; }
.sizhu-item { text-align: center; padding: 16px 10px; border-radius: 12px;
background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.008));
box-shadow: var(--float-shadow); }
.pillar-label { color: var(--gold-dim); letter-spacing: 4px; }
.pillar-value { font-family: var(--serif); font-weight: 700; letter-spacing: 4px; margin: 10px 0;
color: var(--gold-bright); text-shadow: 0 2px 0 rgba(10,23,39,0.46), 0 0 24px rgba(var(--gold-rgb),.25); }
.pillar-sub { color: var(--text-dim); letter-spacing: 2px; }
.pillar-sub { font-size: 13px; color: var(--text-dim); letter-spacing: 2px; }
/* 五行能量条 */
.wuxing-bar { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.wx-item { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); letter-spacing: 2px; }
.wx-bar { flex: 1; height: 7px; background: rgba(255,255,255,0.06); border-radius: 6px; overflow: hidden;
box-shadow: inset 0 1px 3px rgba(10,23,39,0.575); }
/* 说明：进度条宽度、折叠面板高度属一次性变化，不影响交互帧率，
按 soft-skill 的 performance guardrails 属可接受例外（非连续动画）。 */
.wx-fill { height: 100%; border-radius: 6px; transition: width 1s var(--ease-out);
box-shadow: 0 0 10px rgba(var(--gold-rgb),.35); }
/* TD-038 P0-03：结果面板顶部「先看结论」摘要（前 3 行），盘面留在原位 */
.lead-card { margin: 8px 0 14px; padding: 12px 14px; border-radius: 12px; text-align: left;
background: rgba(var(--gold-rgb), .07); border: 1px solid rgba(var(--gold-rgb), .22);
border-left: 3px solid rgba(var(--gold-rgb), .62); }
.lead-cap { font-size: 12px; letter-spacing: 3px; color: var(--gold-dim); margin-bottom: 4px;
font-family: var(--serif); }
.lead-card p { margin: 4px 0; line-height: 1.75; }
/* 紫微十二宫（字号跟随面板文字大小变量，可整页调大） */
.ziwei-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--panel-gap, 10px); margin: 14px 0; }
.zw-palace { padding: 11px 9px; border-radius: 10px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.008));
box-shadow: var(--float-shadow); min-height: 92px; }
.zw-palace.zw-life { outline: 1px solid rgba(var(--gold-rgb),.4); }
.zw-head { font-size: calc(var(--panel-fs, 17px) * 0.98); color: var(--gold); letter-spacing: 1px; font-family: var(--serif); font-weight: 700; }
.zw-ganzhi { font-size: calc(var(--panel-fs, 17px) * 0.84); color: var(--text-dim); margin: 3px 0 5px; }
.zw-main { font-size: calc(var(--panel-fs, 17px) * 1.15); color: var(--gold-bright); line-height: 1.55; font-family: var(--serif); }
.zw-aux { font-size: calc(var(--panel-fs, 17px) * 0.9); color: #A9BCCE; line-height: 1.55; margin-top: 4px; }
.zw-hua { font-size: calc(var(--panel-fs, 17px) * 0.9); color: #C9836F; margin-top: 4px; }
/* 全屏看盘：同一面板 fixed 放大，12 宫改 6×2 一屏排下（不复制 DOM） */
.zw-full-btn { display: block; margin: 0 auto 10px; padding: 5px 14px; border-radius: 999px;
border: 1px solid rgba(var(--gold-rgb), .45); background: rgba(var(--gold-rgb), .08);
color: var(--gold-bright); font-size: 12.5px; letter-spacing: 2px; cursor: pointer;
font-family: var(--serif); transition: background .25s var(--ease), border-color .25s var(--ease); }
.zw-full-btn:hover { background: rgba(var(--gold-rgb), .16); border-color: rgba(var(--gold-rgb), .7); }
.float-panel.zw-full, .result-slide-in.zw-full { position: fixed; inset: 24px; z-index: calc(var(--z-modal) + 6);
width: auto; max-width: none; max-height: none; overflow: auto; background: var(--float-bg);
box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--gold-rgb), .22); }
.float-panel.zw-full .ziwei-grid,
.result-slide-in.zw-full .ziwei-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.float-panel.zw-full #leadSlot,
.result-slide-in.zw-full #leadSlot { display: none; } /* 看盘模式只留盘 */
@media (max-width: 900px) {
.float-panel.zw-full, .result-slide-in.zw-full { inset: 10px; }
.float-panel.zw-full .ziwei-grid,
.result-slide-in.zw-full .ziwei-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* 奇门九宫 */
.qm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.qm-cell { padding: 13px 8px; border-radius: 10px; text-align: center; min-height: 112px;
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.008));
box-shadow: var(--float-shadow); transition: transform .3s var(--ease); }
.qm-cell:hover { transform: translateY(-2px); }
.qm-gong { font-family: var(--serif); font-weight: 700; color: var(--gold); font-size: 18px; letter-spacing: 2px; }
.qm-god { font-size: 13.5px; color: #B9C7D6; margin-top: 5px; }
.qm-men { font-size: 16px; color: var(--text); margin-top: 4px; font-family: var(--serif); font-weight: 600; }
.qm-star { font-size: 14px; color: #A9BCCE; margin-top: 3px; }
.qm-gan { font-size: 14px; color: var(--gold-dim); margin-top: 4px; letter-spacing: 1px; }
/* 未起局时的占位「待排」：提亮到看得清 */
.qm-cell.qm-idle .qm-god { color: #93AAC1; }
.qm-cell.qm-idle .qm-gong { color: rgba(var(--gold-rgb),0.9); }
.qm-good { outline: 1px solid rgba(var(--gold-rgb),.35); }
.qm-bad { outline: 1px solid rgba(178,106,90,.4); }
/* 合婚评分 */
.hy-score { text-align: center; margin: 16px 0; }
.hy-score-num { font-family: var(--serif); font-size: 64px; font-weight: 700; line-height: 1; color: var(--gold-bright);
text-shadow: 0 4px 30px rgba(var(--gold-rgb),.35); }
.hy-score-label { font-size: 13px; color: var(--text-dim); letter-spacing: 6px; margin-top: 6px; }
/* 结果卡片（悬空，无边框内嵌感） */
.result-card { margin-top: 16px; padding: 18px 20px; border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01));
box-shadow: var(--float-shadow); }
.result-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.result-head h3 { margin: 0; font-size: 17px; }
.result-head .method { font-size: 11.5px; color: var(--text-dim); letter-spacing: 2px; }
.result-body p { font-size: 14.5px; line-height: 1.95; margin: 6px 0; }
.result-body .hint { color: var(--text-dim); font-size: 13px; }
.status { text-align: center; letter-spacing: 2px; padding: 12px 0; }
.status.err { color: #C98A7A; }
.status-ok { color: var(--gold-bright); }
.loading { text-align: center; color: var(--gold-dim); letter-spacing: 4px; padding: 26px 0; font-size: 14px; }
/* 2026-11-03：旧「这卦应验了吗」行（.fb-row / .fb-note）已随 payFeedbackHtml 一起下线，
反馈统一走四档块（结果区 .cast-fb / 记录详情 .hist-fbx / 大视图 .hv-fb）。 */
.fb-btn { padding: 7px 20px; border-radius: 16px; border: 1px solid var(--line-strong);
background: transparent; color: var(--text-dim); font-size: 14px; letter-spacing: 2px; transition: all .3s var(--ease); font-family: var(--serif); }
.fb-btn:hover { color: var(--gold); border-color: var(--gold); }
.fb-btn.on { background: rgba(var(--gold-rgb), .16); color: var(--gold-bright); border-color: var(--gold); }
.fb-btn:disabled { opacity: .55; cursor: default; }
/* ---------- 右栏：悬空小篆（无框） ---------- */
.result-panel { position: relative; display: flex; align-items: center; justify-content: center;
flex: 1; min-height: 0; }
.compass-verse { writing-mode: vertical-rl; text-orientation: upright; font-family: var(--serif); font-weight: 600;
/* 2026-10-24 流体尺寸（STD-WCAG-144）：手动设定值只当**上限**，窗口变窄时按视口缩，
下限 16px 保证可读；1920×1080 下算得 42px，与用户原设定一致。 */
font-size: clamp(16px, min(2.4vw, 4.4vh), var(--verse-size, 42px));
letter-spacing: clamp(8px, min(1.2vw, 2.2vh), var(--verse-gap, 24px)); line-height: 2.05;
transform: translateX(var(--verse-shift, 0px));
color: rgba(222,196,128,0.95);
max-height: 86vh; text-shadow: 0 1px 0 rgba(10,23,39,0.805), 0 2px 6px rgba(10,23,39,0.632), 0 0 30px rgba(var(--gold-rgb),.22);
/* 规范禁止 ease-in-out；这里改用带轻微过冲的自定义曲线，呼吸感更自然，
并把周期拉长到 9s（无限循环动画应尽量降低频率） */
animation: verseFloat 9s cubic-bezier(.45,.05,.55,.95) infinite; filter: drop-shadow(0 6px 14px rgba(10,23,39,0.517)); }
/* 两竖行：显式换行，行间距均衡对称 */
.compass-verse .vline { display: block; }
@keyframes verseFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
/* 起卦出结果时，右栏竖排文案淡出，避免与卦辞面板重叠 */
.side-col:last-child { transition: opacity .5s var(--ease); }
.side-col:last-child.verse-hidden { opacity: 0; pointer-events: none; }
/* ---------- 卦辞悬浮面板（起卦后右侧浮空，无外框） ----------
上边沿由 JS 按当前页"中间内容框"的实测顶边写入 --gua-top（用户可在 ⚙ 里覆盖）；
左右平分：面板占屏 48%，左侧罗盘/牌区同样 ~48%；内容内部滚动，叉号固定。 */
.result-slide-in { position: fixed; top: var(--gua-top, 178px); right: var(--gua-right, 2%);
width: var(--gua-w, 48%); height: var(--gua-h, calc(100vh - 178px - 66px));
overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
z-index: var(--z-result); background: transparent; border: none; box-shadow: none;
padding: 26px 28px 34px; color: var(--text);
font-size: var(--panel-fs, 17px);
animation: slideFloat 1.1s var(--ease-out) both; }
/* 关闭叉号：面板右上角外侧，实心金底圆形，保证完整可见不被其他层遮住 */
/* 关闭叉号：挂在 body 上，固定在卦辞面板右上外侧。
注意：通用 .close-x 规则在本文件后面，同优先级会覆盖，故这里用更高优先级选择器。 */
/* 关闭叉号：细线条、低对比度；大小与深浅由设置面板的 --x-size / --x-dark 控制 */
span.gua-close-fixed.close-x { position: fixed !important;
/* top/left 由 JS 按"面板实测矩形"写内联（贴框外面的右上角，见 watchCloseX）——
这里不再写死 --gua-top/--gua-right 的换算值：面板几何一变（内容渲染完、
换页、拖拽、缩放），写死的值就把叉号留在框里了（用户 2026-10-11 第七批
"叉号要在框外面的右上角固定"）。 */
width: var(--x-size, 30px); height: var(--x-size, 30px); margin: 0; padding: 0;
display: flex; align-items: center; justify-content: center;
font-size: calc(var(--x-size, 30px) * 0.72); font-weight: 400; line-height: 1;
/* 默认值 2026-10-11 第七批调大调亮（用户："叉号都太小和颜色淡"）：24px/0.45 → 30px/0.7 */
color: rgba(var(--gold-rgb),var(--x-dark, 0.7)) !important; background: none !important;
border: none !important; border-radius: 0;
box-shadow: none !important; z-index: var(--z-float-x); cursor: pointer;
transition: color .25s var(--ease), transform .25s var(--ease); }
span.gua-close-fixed.close-x:hover { color: rgba(242,223,168,1) !important; transform: rotate(90deg) scale(1.1); }
/* 塔罗流程期（洗牌/摊牌）叉号 #tarotFlowClose：贴身右上角。
它复用 .gua-close-fixed 样式，但上面那套定位是给卦辞面板对齐用的
（right: --gua-right 11.5%，1600 窗实测距右缘 184px，离得太远；窄窗下还会更偏），
用户 2026-10-11："关闭叉号要在最右侧顶上那离得近点。不要在这里"。 */
#tarotFlowClose { top: 84px !important; right: 26px !important; }
.result-slide-in.fade-out { animation: slideFade 1s var(--ease) both; }
/* 进场：原地淡入（不做横向位移，避免"从右侧滑进来"） */
@keyframes slideFloat { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideFade { from { opacity: 1; } to { opacity: 0; } }
.result-slide-in h3 { color: var(--gold); font-family: var(--serif); letter-spacing: 3px; margin-bottom: 10px; font-size: calc(var(--panel-fs, 17px) * 1.25); }
.result-slide-in p { font-size: var(--panel-fs, 17px); line-height: 2; margin: 7px 0; }
.result-slide-in strong { color: var(--gold-bright); }
.result-slide-in .hint { color: var(--text-dim); font-size: calc(var(--panel-fs, 17px) * 0.9); }
/* ---------- 结果面板「再占一卦」（用户 2026-10-11 第七批口径）----------
旧版是 sticky 贴底 + 一层深色渐变底（用户："不能有黑影横岗，太难看"），
滚动时正文还会从按钮下面穿过被压住（"上下拉都挡住了"）。
现在面板拆成【滚动区 | 固定页脚】：按钮在滚动区之外 ——
位置恒定（= "必须固定在那不动"）、永远压不到正文，因此**不需要任何底色**。
结构见 app.js mountAgainRow()。 ---------- */
.gua-again-row { flex: 0 0 auto; margin-top: 0;
display: flex; justify-content: center; align-items: center;
padding: 10px 0 2px; background: none; box-shadow: none; }
/* 面板两段式：结果面板（浮层 #resultSlide / 排盘用 #mainPanel）都适用 */
.result-slide-in.panel-flex, .float-panel.panel-flex {
display: flex; flex-direction: column; overflow: hidden; }
.panel-flex > .panel-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
display: flex; flex-direction: column; justify-content: safe center;
/* 滚动条只属于内容区，不压到页脚按钮 */
scrollbar-width: thin; scrollbar-color: rgba(var(--gold-rgb),.5) transparent;
-webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.panel-flex > .panel-scroll::-webkit-scrollbar { width: 8px; }
.panel-flex > .panel-scroll::-webkit-scrollbar-track { background: transparent; }
.panel-flex > .panel-scroll::-webkit-scrollbar-thumb { background: rgba(var(--gold-rgb),.5); border-radius: 6px; }
.panel-flex > .panel-scroll::-webkit-scrollbar-thumb:hover { background: rgba(var(--gold-rgb),.75); }
/* 紫微/奇门：原来靠 .float-panel > 直接子元素 撑满整栏，包进滚动区后补上同款 */
.panel-flex > .panel-scroll > .ziwei-grid,
.panel-flex > .panel-scroll > .qm-grid { flex: 1 1 auto; grid-auto-rows: 1fr; }
.panel-flex > .panel-scroll > .sizhu-row { flex: 0 0 auto; width: 100%; max-width: 620px; }
.gua-again { padding: 11px 32px; border-radius: 10px; cursor: pointer;
font-family: var(--serif); font-size: 15px; font-weight: 700; letter-spacing: 3px;
color: var(--text); border: none;
background: linear-gradient(180deg, var(--gold-bright), var(--gold) 62%, #A5873F);
box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 3px 0 #6d5a2e, 0 8px 22px rgba(var(--shadow-rgb),.5);
transition: filter .18s var(--ease-out), transform .16s var(--ease-out); }
.gua-again:hover { filter: brightness(1.06); transform: translateY(-1px); }
.gua-again:active { transform: translateY(1px); filter: brightness(.96); }
.gua-name-big { font-family: var(--serif); font-size: 48px; font-weight: 900; letter-spacing: 10px;
color: var(--gold-bright); text-shadow: 0 2px 0 rgba(10,23,39,0.46), 0 4px 24px rgba(10,23,39,0.632), 0 0 40px rgba(var(--gold-rgb),.28);
margin: 8px 0 4px; }
.gua-namesub { font-size: 15px; color: var(--text-dim); letter-spacing: 3px; margin-bottom: 14px; }
.gua-namesub .bian { color: var(--gold); }
.gua-pan { display: flex; gap: 30px; justify-content: center; margin: 14px 0; }
.gua-col { text-align: center; }
.gua-role { font-size: 12px; color: var(--text-dim); letter-spacing: 4px; margin-top: 4px; }
.gua-name { font-family: var(--serif); font-size: 16px; color: var(--gold); margin-top: 2px; letter-spacing: 2px; }
.gua-divider { height: 1px; margin: 16px 0; background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb),.35), transparent); }
.gua-ci { font-family: var(--serif); font-size: 17px; color: var(--text); letter-spacing: 2.5px; line-height: 2.1; margin: 8px 0; }
.yao-line { font-size: 14px; color: var(--text-dim); line-height: 1.9; padding: 3px 0 3px 14px; border-left: 2px solid rgba(var(--gold-rgb),.3); margin: 5px 0; }
.yao-line em { font-style: normal; color: var(--gold-dim); }
/* 逐字显现 */
.rv-char { display: inline-block; opacity: 0; animation: rvIn .5s var(--ease-out) both; }
@keyframes rvIn { from { opacity: 0; filter: blur(4px); transform: translateY(4px); } to { opacity: 1; filter: blur(0); transform: none; } }
.unlock-btn { display: block; width: 100%; margin-top: 20px; padding: 13px 0;
border-radius: 10px; background: linear-gradient(180deg, rgba(var(--gold-rgb),.2), rgba(var(--gold-rgb),.08));
border: 1px solid var(--line-strong); font-family: var(--serif); font-size: 16px; font-weight: 700;
letter-spacing: 5px; color: var(--gold-bright); transition: all .3s var(--ease);
box-shadow: var(--float-shadow); }
.unlock-btn:hover { background: linear-gradient(180deg, rgba(var(--gold-rgb),.32), rgba(var(--gold-rgb),.14)); transform: translateY(-2px);
box-shadow: var(--float-shadow), 0 0 26px rgba(var(--gold-rgb),.18); }
.unlock-btn:active { transform: translateY(1px); }
/* 关闭叉号：细线条哑光金 */
.close-x, .gold-x { position: absolute; top: 10px; right: 14px; z-index: 5;
width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
font-size: 17px; color: #7A6334; cursor: pointer; border-radius: 50%;
font-weight: 300; transition: all .3s var(--ease); letter-spacing: 0;
border: 0; background: transparent; padding: 0; font-family: inherit; }
.close-x:focus-visible, .gold-x:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.close-x:hover, .gold-x:hover { color: var(--gold-bright); background: rgba(var(--gold-rgb),0.1); transform: rotate(90deg); }
/* 卦辞面板叉号：右上角外侧 */
.result-slide-in > .close-x { top: -16px; right: -8px; }
/* ---------- 塔罗 · 78 张竖版卡牌圆环（第四批 2026-10-10 定稿；类名沿用 ring22-*） ----------
规格：78 张（22 大阿卡纳 + 56 小阿卡纳）/ 逆时针编号 / 1 号在 12 点 /
**竖排**：每张牌长边竖直、不随圆周旋转 / 压叠按角度重排 z 序（接缝恒在正下方）/
同时最多一张 3D 翻面 / 抓牌可拖可转圈（切向转圈、径向拖牌，见 JS 双通道）。 */
.tarot-hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
width: 100%; flex: 1; min-height: 0; overflow: hidden;
touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.tarot-ring { position: absolute; inset: 0; touch-action: none; }
/* 卡牌外层：只负责"摆到环上的哪个位置" */
.ring22-card { position: absolute; left: 50%; top: 50%;
margin-left: calc(var(--r22-w) / -2); margin-top: calc(var(--r22-h) / -2);
width: var(--r22-w); height: var(--r22-h);
will-change: transform, z-index; transform-origin: 50% 50%; backface-visibility: hidden;
cursor: grab; }
.ring22-card:active { cursor: grabbing; }
/* 中间层：单张拖拽的位移 / 倾斜 / 液态形变 */
.ring22-jelly { position: absolute; inset: 0; perspective: 600px; will-change: transform;
transform-origin: 50% 50%; }
/* 内层：3D 翻面（同时最多一张正面，见 JS toggleRingFlip） */
.ring22-flip { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(0deg);
transition: transform 450ms cubic-bezier(.34, 1.56, .64, 1); }
.ring22-flip.is-front { transform: rotateY(180deg); }
/* 两个面 */
.ring22-face { position: absolute; inset: 0; border-radius: 6px; overflow: hidden;
backface-visibility: hidden; -webkit-backface-visibility: hidden; }
/* 正面：第四批起环上是竖版（长边竖直、不随圆周旋转），正面改为竖版排布 ——
数字/点数在顶部居中、宝石菱形在其下、牌名居中（大阿卡纳=牌名，小阿卡纳=花色）。
字号按牌宽收敛（78 张时牌面窄，旧 .26em 会溢出）。 */
.ring22-face-front { transform: rotateY(180deg);
background: linear-gradient(160deg, #F4EFE2 0%, #E4DBC6 55%, #D6C9AC 100%);
border: 1px solid var(--gold); box-shadow: 0 2px 10px rgba(0, 0, 0, .38);
display: flex; align-items: center; justify-content: center;
padding: 0 9%; color: #2A2113; }
.ring22-face-back { background:
repeating-linear-gradient(45deg, rgba(var(--gold-rgb), .10) 0 4px, transparent 4px 8px),
linear-gradient(160deg, #16324C 0%, #0E2135 60%, #0A1626 100%);
border: 1px solid rgba(var(--gold-rgb), .55);
box-shadow: 0 2px 10px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(var(--gold-rgb), .16); }
.ring22-face-back::after { content: ""; position: absolute; inset: 12%;
border: 1px solid rgba(var(--gold-rgb), .30); border-radius: 3px; }
.r22-back-gem { position: absolute; left: 50%; top: 50%;
width: 30%; aspect-ratio: 1 / 1;
transform: translate(-50%, -50%) rotate(45deg);
border: 1px solid rgba(var(--gold-rgb), .5); }
/* 正面内部装饰（字号由 JS 按卡高设置；尺寸全部相对字号，不写死 px） */
.r22-num { position: absolute; left: 50%; top: 6%; transform: translateX(-50%);
font-family: "Iowan Old Style", Palatino, Georgia, serif;
font-size: .12em; letter-spacing: .05em; color: #8A6D2F; line-height: 1; }
.r22-gem { position: absolute; left: 50%; top: 16%; width: 14%; aspect-ratio: 1 / 1;
border: 1px solid rgba(138, 109, 47, .55);
transform: translateX(-50%) rotate(45deg); display: grid; place-items: center; }
.r22-gem i { display: block; width: 42%; aspect-ratio: 1 / 1; background: var(--gold); }
.r22-name { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
font-size: .12em; letter-spacing: .08em; color: #4A3A1C; line-height: 1; white-space: nowrap; }
/* ---------- 塔罗抽牌新流程（2026-10-10）：聚拢 → 洗牌 → 摊开 → 手选 → 翻面 ---------- */
/* 覆盖层。旧铺满阶段是透明底；新流程有"手选"环节，需要暗幕聚焦并挡住底下的表单 */
.tarot-stage { position: fixed; inset: 0; z-index: var(--z-overlay); display: block;
background: transparent; pointer-events: none; }
.tf-stage { background: radial-gradient(120% 90% at 50% 45%, rgba(10, 26, 45, .94) 0%, rgba(6, 14, 26, .97) 100%);
pointer-events: auto; perspective: 1400px; }
/* 流程卡：外层管"位置/朝向/大小"，中间层管"绕环心的半径"，内层管 3D 翻面
（三层各管一个 transform，只有一个写入方 —— RUNBOOK 硬规则） */
/* will-change 由 JS 在抽牌流程创建卡片时内联加、流程结束随覆盖层移除（2026-11-05） */
.tf-slot { position: fixed; left: 0; top: 0; transform-origin: 50% 50%;
cursor: pointer; }
.tf-arm { position: absolute; inset: 0; transform-origin: 50% 50%; }
.tf-3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
transition: transform .55s cubic-bezier(.34, 1.3, .64, 1); }
.tf-3d.tf-flip { transform: rotateY(180deg); }
.tf-face { position: absolute; inset: 0; border-radius: 8px; overflow: hidden;
backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tf-front { transform: rotateY(180deg); background: #0B1828; }
.tf-front img, .tf-front svg { width: 100%; height: 100%; display: block; }
.tf-back { background:
repeating-linear-gradient(45deg, rgba(var(--gold-rgb), .10) 0 4px, transparent 4px 8px),
linear-gradient(160deg, #16324C 0%, #0E2135 60%, #0A1626 100%);
border: 1px solid rgba(var(--gold-rgb), .55);
box-shadow: 0 6px 18px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(var(--gold-rgb), .16); }
.tf-back::after { content: ""; position: absolute; inset: 12%;
border: 1px solid rgba(var(--gold-rgb), .30); border-radius: 3px; }
.tf-slot.tf-taken .tf-face { box-shadow: 0 0 0 1px rgba(var(--gold-bright-rgb), .75), 0 0 26px rgba(var(--gold-rgb), .55); }
.tf-hint { position: fixed; left: 0; right: 0; bottom: 42px; text-align: center;
font-family: var(--serif); font-size: 15px; letter-spacing: 4px; color: var(--gold-bright);
pointer-events: none; transition: opacity .4s ease; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
/* 右侧卦辞滑出（需求 21）：只做入场动画、fill-mode 不保留 —— 面板是可拖拽的，
动画若保留最终 transform 会永久压住拖拽写入的内联样式（RUNBOOK 案例 006）。 */
.result-slide-in.from-right { animation: guaSlideIn .55s var(--ease-out); }
@keyframes guaSlideIn { from { opacity: 0; transform: translateX(46px); } to { opacity: 1; transform: translateX(0); } }
/* 牌列表（结果区） */
.tarot-grid { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.tarot-grid .tarot-card { padding: 12px 14px; border-radius: 12px;
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.008)); box-shadow: var(--float-shadow); }
.tarot-grid .pos { font-size: 12px; color: var(--gold-dim); letter-spacing: 3px; }
.tarot-grid .tname { font-family: var(--serif); color: var(--gold-bright); font-size: 16px; margin: 3px 0; font-weight: 700; }
.tarot-grid .tor { font-size: 12px; color: var(--text-dim); }
.tarot-grid .tmeaning { font-size: 13.5px; color: var(--text); opacity: .85; margin-top: 4px; line-height: 1.7; }
/* ---------- 弹出式时间滚轮 ----------
黑影来源排查结论：①伪元素渐隐层 at z-index 2 会盖住滚动内容形成一整行暗带；
②框内 inset 阴影过重。现在只保留两侧独立渐隐层（在滚轮之外），容器不再有遮罩。 */
.dt-mask { position: fixed; inset: 0; background: rgba(4,10,18,0.55);
z-index: var(--z-result); opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease);
display: flex; align-items: center; justify-content: center; }
.dt-mask.open { opacity: 1; pointer-events: auto; }
.dt-pop { width: 620px; max-width: 94vw; border-radius: 16px; padding: 26px 26px 20px; position: relative;
background: var(--float-bg); box-shadow: var(--float-shadow), 0 10px 26px rgba(var(--shadow-rgb),0.35);
transform: scale(.985); transform-origin: center center; transition: transform .3s var(--ease); }
.dt-mask.open .dt-pop { transform: none; }
.dt-pop-title { font-family: var(--serif); font-size: 18px; font-weight: 700; letter-spacing: 6px; color: var(--gold);
text-align: center; margin-bottom: 18px; text-shadow: 0 1px 0 rgba(10,23,39,0.575), 0 0 20px rgba(var(--gold-rgb),.18); }
.dt-cols { display: flex; gap: 12px; justify-content: center; }
.dt-col { width: 100px; text-align: center; position: relative; }
.dt-cap { font-size: 16px; color: var(--gold); letter-spacing: 5px; margin-bottom: 10px; font-family: var(--serif); }
.dt-wheel-wrap { position: relative; }
/* 上下边缘用 CSS mask 做极淡过渡：不叠加任何遮罩层，因此不会出现"一整行发暗" */
.dt-wheel { position: relative; height: 236px; overflow-y: auto; -webkit-overflow-scrolling: touch;
padding: 96px 0; overscroll-behavior: contain; border-radius: 12px;
background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02));
box-shadow: inset 0 2px 10px rgba(10,23,39,0.253), inset 0 1px 0 rgba(255,255,255,.04);
touch-action: none; user-select: none;
-webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.55) 0, #000 74px, #000 calc(100% - 74px), rgba(0,0,0,.55) 100%);
mask-image: linear-gradient(180deg, rgba(0,0,0,.55) 0, #000 74px, #000 calc(100% - 74px), rgba(0,0,0,.55) 100%); }
.dt-wheel .dt-item { display: flex; align-items: center; justify-content: center; height: 44px;
font-family: var(--serif); font-size: 20px; color: rgba(226,221,210,0.55); cursor: pointer;
transition: color .28s var(--ease), transform .28s var(--ease), font-size .28s var(--ease); user-select: none; }
.dt-wheel .dt-item:hover { color: rgba(226,221,210,0.85); }
/* 选中项平滑放大（不再突兀跳变） */
.dt-wheel .dt-item.sel { color: var(--gold-bright); font-size: 25px; font-weight: 700; transform: none;
text-shadow: 0 0 18px rgba(var(--gold-rgb),.35); }
.dt-line { position: absolute; left: 8px; right: 8px; top: 50%; height: 46px; transform: translateY(-50%);
border-top: 1px solid rgba(var(--gold-rgb),.28); border-bottom: 1px solid rgba(var(--gold-rgb),.28);
pointer-events: none; z-index: 1; background: rgba(var(--gold-rgb),.045); border-radius: 6px; }
.dt-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; gap: 14px; }
.dt-value { flex: 1; text-align: center; font-family: var(--serif); font-size: 17px; color: var(--gold-bright); letter-spacing: 2px;
text-shadow: 0 1px 0 rgba(10,23,39,0.575), 0 0 14px rgba(var(--gold-rgb),.18); }
.dt-ok { padding: 11px 36px; border-radius: 10px; border: none; font-family: var(--serif);
font-size: 16px; font-weight: 700; letter-spacing: 4px; color: var(--text);
background: linear-gradient(180deg, #E2C488, var(--gold) 55%, #A5873F);
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 0 #6d5a2e, 0 8px 20px rgba(var(--shadow-rgb),.5);
transition: transform .2s var(--ease), filter .2s var(--ease); }
.dt-ok:hover { transform: translateY(-1px); filter: brightness(1.08); }
.dt-ok:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 0 #6d5a2e; }
.dt-cancel { padding: 11px 24px; border-radius: 10px; border: 1px solid var(--line);
background: transparent; color: var(--text-dim); font-size: 14px; letter-spacing: 3px; font-family: inherit; transition: all .3s var(--ease); }
.dt-cancel:hover { color: var(--gold); border-color: var(--line-strong); }
/* ---------- 右上角弹出提示 ---------- */
.toast-wrap { position: fixed; top: 80px; right: 24px; z-index: var(--z-float-x);
display: flex; flex-direction: column; gap: 12px; max-width: 420px; }
.toast { padding: 16px 20px; border-radius: 12px; background: var(--float-bg);
box-shadow: var(--float-shadow), 0 20px 50px rgba(10,23,39,0.575);
border-left: 2px solid rgba(var(--gold-rgb),.5); animation: toastIn .5s var(--ease-out) both; }
.toast.out { animation: toastOut .7s var(--ease) both; }
.toast .t-title { font-family: var(--serif); color: var(--gold-bright); font-size: 18px; font-weight: 700; letter-spacing: 3px; margin-bottom: 6px; }
.toast .t-sub { font-size: 14.5px; color: var(--text); line-height: 1.8; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateX(30px); } }
/* ---------- 支付面板 ---------- */
.pay-mask { position: fixed; inset: 0; background: rgba(4,10,18,0.6); backdrop-filter: blur(6px);
/* 支付面板必须压过一切面板（卦辞/结果/抽屉/时间选择器）——用户 2026-10-10 第四批：
「点了卦辞里的解锁完整详解，支付界面要在我能操作的最顶层」。
原先用 --z-result(980)，与结果面板同级、DOM 顺序在前 → 被卦辞面板盖住点不动。
比 --z-modal(1000) 再高 20；只低于 toast(1030)。 */
z-index: calc(var(--z-modal) + 20); display: flex; align-items: center; justify-content: center;
opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
.pay-mask.open { opacity: 1; pointer-events: auto; }
.pay-panel { width: 520px; max-width: 92vw; border-radius: 16px; padding: 30px 30px 24px; position: relative;
background: var(--float-bg); box-shadow: var(--float-shadow), 0 10px 26px rgba(var(--shadow-rgb),0.35);
transform: translateY(20px) scale(.97); transition: transform .5s var(--ease-out); }
.pay-mask.open .pay-panel { transform: none; }
.pay-panel h3 { text-align: center; font-family: var(--serif); color: var(--gold); font-size: 21px; font-weight: 700;
letter-spacing: 6px; margin-bottom: 6px; text-shadow: 0 1px 0 rgba(10,23,39,0.575), 0 0 22px rgba(var(--gold-rgb),.18); }
.pay-sub { text-align: center; font-size: 12.5px; color: var(--text-dim); letter-spacing: 1px; margin-bottom: 20px; }
.pay-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 22px; }
.pay-plan { padding: 16px 8px; border-radius: 12px; text-align: center; border: 1px solid var(--line);
background: rgba(255,255,255,0.03); transition: all .3s var(--ease); cursor: pointer; }
.pay-plan:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.pay-plan.selected { border-color: var(--gold); background: rgba(var(--gold-rgb),0.1);
box-shadow: 0 0 22px rgba(var(--gold-rgb),.15), inset 0 1px 0 rgba(255,240,205,.1); }
.pay-plan .pp-name { font-size: 13.5px; color: var(--text-dim); letter-spacing: 2px; }
.pay-plan .pp-price { font-family: var(--serif); font-size: 27px; color: var(--gold-bright); font-weight: 700; margin: 6px 0; }
.pay-plan .pp-note { font-size: 11.5px; color: var(--gold-dim); letter-spacing: 2px; }
.pay-methods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 22px; }
.pay-method { padding: 12px 4px; border-radius: 10px; text-align: center; font-size: 12.5px; color: var(--text-dim);
border: 1px solid var(--line); background: rgba(255,255,255,0.02); transition: all .3s var(--ease); cursor: pointer; letter-spacing: 1px; }
.pay-method:hover { border-color: var(--line-strong); color: var(--text); }
.pay-method.selected { border-color: var(--gold); color: var(--gold-bright); background: rgba(var(--gold-rgb),0.08); }
.pm-ico { display: block; width: 30px; height: 30px; line-height: 30px; margin: 0 auto 6px; border-radius: 8px;
font-family: var(--serif); font-weight: 700; font-size: 14px; color: var(--bg); }
.pm-wx { background: #7BC97B; } .pm-ali { background: #6FA8DC; }
.pm-uni { background: #C98A7A; } .pm-cc { background: #B9AED3; }
.pay-confirm { display: block; width: 100%; padding: 14px 0; border: none; border-radius: 10px;
background: linear-gradient(180deg, #E2C488, var(--gold) 55%, #A5873F);
font-family: var(--serif); font-size: 17px; font-weight: 700; letter-spacing: 6px; color: var(--text);
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 0 #6d5a2e, 0 10px 26px rgba(var(--shadow-rgb),.5);
transition: transform .2s var(--ease), filter .2s var(--ease); }
.pay-confirm:hover { transform: translateY(-2px); filter: brightness(1.08); }
.pay-confirm:active { transform: translateY(2px); }
.pay-hint { text-align: center; margin-top: 12px; }
/* ---------- 侧边抽屉（卦例 / 设置） ---------- */
.drawer-mask { position: fixed; inset: 0; background: rgba(4,10,18,0.55); backdrop-filter: blur(4px);
opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease); z-index: var(--z-modal); }
.drawer-mask.open { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: -560px; width: 540px; max-width: 94vw; height: 100vh;
/* 修复：原为 --z-float-x(990) < 蒙层 --z-modal(1000)，导致抽屉被毛玻璃蒙层盖住：整屏发虚、点击穿透关闭。
抽屉须在蒙层之上（蒙层仍是点外部关闭的接收者），toast(1030) 仍在最上层。 */
background: linear-gradient(180deg, #102133, #0A1727); z-index: calc(var(--z-modal) + 1);
box-shadow: -8px 0 22px rgba(var(--shadow-rgb),0.35), inset 1px 0 0 rgba(var(--gold-rgb),.12);
transition: right 0.55s var(--ease-out); display: flex; flex-direction: column; }
.drawer.open { right: 0; }
.drawer-head { display: flex; align-items: center; justify-content: space-between;
padding: 22px 26px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.drawer-head span:first-child { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--gold); letter-spacing: 5px;
text-shadow: 0 1px 0 rgba(10,23,39,0.575), 0 0 18px rgba(var(--gold-rgb),.15); }
.drawer-close { position: static; }
.drawer-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 22px 26px 34px; }
/* 卦例列表：字号放大，整条可点展开，右侧仅删除 */
.hist-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.hist-clear { font-size: 13.5px; color: #C98A7A; letter-spacing: 2px; cursor: pointer; transition: color .3s; }
.hist-clear:hover { color: #E8A08C; }
.hist-item { padding: 14px 16px; border-radius: 12px; margin-bottom: 12px; cursor: pointer;
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.008));
box-shadow: var(--float-shadow); transition: transform .3s var(--ease), background .3s var(--ease); position: relative; }
.hist-item:hover { transform: translateY(-2px); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.015)); }
.hist-item .hist-time { font-size: 13px; color: var(--text-dim); letter-spacing: 1px; }
.hist-item .hist-q { font-size: 15.5px; color: var(--text); margin: 5px 0 3px; line-height: 1.6; padding-right: 56px; }
.hist-item .hist-g { font-family: var(--serif); font-size: 16px; color: var(--gold); letter-spacing: 1.5px; font-weight: 600; padding-right: 56px; }
.hist-del { position: absolute; top: 14px; right: 14px; font-size: 13px; color: rgba(201,138,122,0.75);
letter-spacing: 2px; cursor: pointer; padding: 3px 8px; border-radius: 6px; transition: all .3s var(--ease); }
.hist-del:hover { color: #E8A08C; background: rgba(178,106,90,.12); }
.hist-expand { max-height: 0; overflow: hidden; transition: max-height .55s var(--ease-out); }
.hist-item.open .hist-expand { max-height: 520px; }
.hist-detail { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 2; }
.hist-detail p { margin: 3px 0; }
.hist-detail strong { color: var(--gold-bright); font-weight: 700; }
.hist-empty { text-align: center; color: var(--text-dim); letter-spacing: 4px; padding: 60px 0; font-size: 15px; font-family: var(--serif); }
/* 设置面板 */
.cfg-label { font-size: 13px; color: var(--gold-dim); letter-spacing: 3px; margin: 16px 0 8px; }
.mode-opt { padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line); margin-bottom: 10px;
background: rgba(255,255,255,0.025); transition: all .3s var(--ease); cursor: pointer; }
.mode-opt:hover { border-color: var(--line-strong); }
.mode-opt.sel { border-color: var(--gold); background: rgba(var(--gold-rgb),0.09); box-shadow: 0 0 18px rgba(var(--gold-rgb),.1); }
.mode-opt b { display: block; font-size: 15px; color: var(--text); font-weight: 600; letter-spacing: 2px; }
.mode-opt small { display: block; font-size: 12.5px; color: var(--text-dim); margin-top: 3px; letter-spacing: 1px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 2px;
font-size: 15px; color: var(--text); letter-spacing: 2px; }
.switch { width: 46px; height: 25px; border-radius: 14px; background: rgba(255,255,255,0.08);
border: 1px solid var(--line); position: relative; cursor: pointer; transition: all .35s var(--ease); flex-shrink: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%;
background: #6b7683; transition: all .35s var(--ease); box-shadow: 0 2px 6px rgba(10,23,39,0.46); }
.switch.on { background: rgba(var(--gold-rgb),0.3); border-color: var(--gold); }
.switch.on::after { left: 22px; background: var(--gold-bright); }
.cfg-inp { width: 100%; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--line);
background: rgba(255,255,255,0.03); color: var(--text); font-size: 14px; outline: none; letter-spacing: 1px;
transition: border-color .3s var(--ease); }
.cfg-inp:focus { border-color: var(--line-strong); }
/* 开源技术致谢 */
.credit-group { margin-bottom: 20px; }
.credit-group-title { font-family: var(--serif); font-size: 15.5px; font-weight: 700; color: var(--gold);
letter-spacing: 3px; margin: 18px 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--line);
text-shadow: 0 1px 0 rgba(10,23,39,0.575); }
.credit-item { display: block; padding: 9px 12px; border-radius: 10px; margin-bottom: 6px;
background: rgba(255,255,255,0.025); border: 1px solid transparent; transition: all .3s var(--ease); }
.credit-item:hover { border-color: var(--line); background: rgba(var(--gold-rgb),0.06); transform: translateX(3px); }
.credit-item .ci-name { font-size: 14.5px; color: var(--gold-bright); font-weight: 600; letter-spacing: 1px; }
.credit-item .ci-desc { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; line-height: 1.6; }
.credit-note { font-size: 12.5px; color: var(--text-dim); line-height: 1.9; letter-spacing: 1px; margin: 8px 0 14px; }
/* 塔罗卦辞列表：编号 + 位置 + 牌名 + 正逆位，一行标题一行牌义 */
.tarot-q { margin-bottom: 12px; }
.tarot-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.tarot-item { padding: 10px 14px; border-radius: 10px;
background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.008));
box-shadow: var(--float-shadow); text-align: left;
transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.tarot-item:hover { transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(10,23,39,0.575), 0 0 0 1px rgba(var(--gold-rgb),.22); }
.ti-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ti-idx { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
font-size: calc(var(--panel-fs, 17px) * 0.72); color: var(--text); background: var(--gold); font-weight: 700; }
.ti-pos { font-size: calc(var(--panel-fs, 17px) * 0.9); color: var(--text-dim); letter-spacing: 1px; }
.ti-name { font-family: var(--serif); font-size: calc(var(--panel-fs, 17px) * 1.15); font-weight: 700;
color: var(--gold-bright); letter-spacing: 1px; }
.ti-ori { font-size: calc(var(--panel-fs, 17px) * 0.82); color: var(--text-dim); }
.ti-mean { font-size: calc(var(--panel-fs, 17px) * 0.92); color: var(--text); line-height: 1.75; margin-top: 5px; }
/* 中间结果框的关闭叉号：浮动在结果框右上外侧，细线低对比度 */
span.mid-close-fixed.close-x { position: fixed !important; margin: 0; padding: 0;
/* 与 .gua-close-fixed 同口径：大小/深浅都走 --x-size / --x-dark（第七批调大调亮） */
width: var(--x-size, 30px); height: var(--x-size, 30px);
display: flex; align-items: center; justify-content: center;
font-size: calc(var(--x-size, 30px) * 0.72); font-weight: 400; line-height: 1;
color: rgba(var(--gold-rgb),var(--x-dark, 0.7)) !important; background: none !important;
border: none !important; border-radius: 0; box-shadow: none !important;
z-index: var(--z-float-x); cursor: pointer;
transition: color .25s var(--ease), transform .25s var(--ease); }
span.mid-close-fixed.close-x:hover { color: var(--gold-bright) !important; transform: rotate(90deg) scale(1.1); }
/* 塔罗抽牌：牌停在左侧牌区（占屏 48%），与每日一卦的卦辞面板同一样式（悬空无框） */
/* 塔罗已抽牌区：不贴导航（默认上边沿 = 卦辞上沿 - 12px，至少 84px），
在左半屏内水平居中排布。 */
#tarotDrawn { left: var(--tcards-left, 2%) !important; right: auto !important;
width: var(--tcards-w, 48%) !important;
top: var(--tcards-top, calc(var(--gua-top, 178px) - 12px)) !important;
display: flex; flex-direction: column; align-items: center; text-align: center; }
#tarotDrawn > h3 { margin: 0 0 6px; }
#tarotDrawn .tarot-cards { justify-content: center; }
/* 需求 20：左侧牌阵「纵向」排列 —— 先竖着排，超高自动换到第二列 */
.tarot-cards { display: flex; flex-direction: column; flex-wrap: wrap; gap: 14px;
justify-content: center; align-content: flex-start;
max-height: calc(100vh - var(--gua-top, 178px) - 90px); }
.tc-box { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tc-facewrap { width: var(--tcard-w, min(96px, 18vw)); height: calc(var(--tcard-w, min(96px, 18vw)) * 1.72); border-radius: 10px;
box-shadow: 0 8px 20px rgba(10,23,39,0.517); }
.tc-facewrap svg { border-radius: 10px; }
.tc-cap { font-size: calc(var(--panel-fs, 17px) * 0.82); color: var(--text-dim); letter-spacing: 1px; text-align: center; }
.tc-cap b { color: var(--gold-dim); font-weight: 600; margin-right: 4px; }
/* ---------- 界面模式：客户模式（收起操作者专属入口） ---------- */
#modeBack { color: var(--gold-bright) !important; }
body.mode-client .tune-btn,
body.mode-client .dev-steps { display: none !important; }
body.mode-client .nav-side a[data-mod="history"],
body.mode-client .nav-side a[data-mod="settings"] { display: none !important; }
body.mode-client .hist-export, body.mode-client .hist-clear { display: none !important; }
/* 客户模式：解读与结果文字整体放大一档，离屏幕远一点也看得清 */
body.mode-client .result-slide-in p { font-size: calc(var(--panel-fs, 17px) * 1.12); }
body.mode-client .compass-verse { opacity: .92; }
/* ---------- 卦例导出 PDF（打印专用版式；屏幕上不显示） ---------- */
#printRoot { display: none; }
@media print {
body > *:not(#printRoot) { display: none !important; }
#printRoot { display: block !important; background: #fff; color: #1B1B1B;
font-family: var(--serif); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#printRoot .pr-head { text-align: center;
border-bottom: 2.5px solid var(--gold); padding-bottom: 9px; margin-bottom: 16px; }
#printRoot .pr-headline { display: flex; align-items: center; justify-content: center; gap: 12px; }
#printRoot .pr-seal { width: 30px; height: 30px; border: 2px solid var(--gold); border-radius: 6px;
color: #8A6D2F; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
#printRoot .pr-title { font-size: 20px; font-weight: 700; letter-spacing: 3px; color: #2A2113; }
#printRoot .pr-sub { margin-top: 5px; font-size: 12px; color: #777; letter-spacing: 1px; }
#printRoot .pr-card { border: 1px solid #DDD2B6; border-radius: 8px; padding: 12px 15px;
margin-bottom: 12px; page-break-inside: avoid; break-inside: avoid; }
#printRoot .pr-row { font-size: 13px; line-height: 1.75; text-align: center; }
#printRoot .pr-row b { color: #8A6D2F; margin-right: 8px; letter-spacing: 2px; font-weight: 600; }
/* 结果一行：整条记录的主角，居中放大 */
#printRoot .pr-res { font-size: 15.5px; font-weight: 600; color: #2A2113;
margin: 6px 0 2px; letter-spacing: 1px; }
#printRoot .pr-no { text-align: center; color: #8A6D2F; letter-spacing: 2px; font-size: 13.5px;
border-bottom: 1px dashed #E6DCC0; padding-bottom: 6px; margin-bottom: 9px; }
#printRoot .pr-no span { margin-left: 10px; color: #999; letter-spacing: 1px; font-size: 12px; }
/* 排盘结果 / 解读：限宽居中成块，块内左对齐（长文左对齐才好读） */
#printRoot .pr-body { font-size: 12.5px; color: #333; line-height: 1.8; padding: 8px 12px;
background: #FAF7EF; border-radius: 6px; margin: 8px auto; max-width: 470px; text-align: left; }
#printRoot .pr-interp { font-size: 13px; line-height: 1.9; margin: 8px auto; max-width: 470px; text-align: left; }
#printRoot .pr-fb { color: #666; text-align: center; margin-top: 8px; }
#printRoot .pr-foot { margin-top: 16px; text-align: center; font-size: 11.5px; color: #999; }
}
@page { size: A4; margin: 14mm 13mm; }
/* 卦例工具条：导出 / 清空 */
.hist-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.hist-export, .hist-export-one { cursor: pointer; transition: color .25s var(--ease), background .25s var(--ease); }
.hist-export { margin-left: auto; font-size: 13px; color: var(--gold-bright); letter-spacing: 1px;
padding: 5px 12px; border-radius: 8px; border: 1px solid rgba(var(--gold-rgb),.4); background: rgba(var(--gold-rgb),.08); }
.hist-export:hover { background: rgba(var(--gold-rgb),.2); }
/* 两个导出按钮并排：文本在 right:74（原位置），PDF 往左让一位；只有第一个吃 margin-left:auto */
.hist-export + .hist-export { margin-left: 8px; }
/* 单条导出：一个入口 + 平滑展开的两项菜单（2026-10-10 用户：不要并排两个按钮） */
.hist-exp { position: absolute; right: 74px; top: 12px; }
.hist-export-one { font-size: 12.5px; color: var(--gold-dim); display: inline-block;
padding: 3px 9px; border-radius: 6px; border: 1px solid transparent; }
.hist-export-one:hover { color: var(--gold-bright); border-color: rgba(var(--gold-rgb),.4); }
.hist-exp-menu { position: absolute; top: calc(100% + 7px); right: 0; min-width: 116px;
padding: 5px; border-radius: 10px; z-index: var(--z-float-x);
background: linear-gradient(180deg, #16283C, #101F2F);
border: 1px solid rgba(var(--gold-rgb),.3); box-shadow: 0 14px 30px rgba(0,0,0,.5);
opacity: 0; transform: translateY(-7px) scale(.96); transform-origin: top right;
pointer-events: none; transition: opacity .2s var(--ease-out), transform .22s var(--ease-out); }
.hist-exp.open .hist-exp-menu { opacity: 1; transform: none; pointer-events: auto; }
.hist-exp-item { display: block; padding: 7px 12px; font-size: 13px; color: var(--text);
letter-spacing: 1px; border-radius: 7px; white-space: nowrap; cursor: pointer;
transition: background .18s var(--ease-out), color .18s var(--ease-out); }
.hist-exp-item:hover { background: rgba(var(--gold-rgb),.14); color: var(--gold-bright); }
.hist-exp-item + .hist-exp-item { border-top: 1px solid rgba(var(--gold-rgb),.12); border-radius: 0 0 7px 7px; }
.hist-item { position: relative; }
/* ============================================================
卦辞 / 结果面板 · 统一排版规范
设计规则（8px 间距体系）：
· 卦名 32px 700 鎏金，居中
· 卦画 图形居中，本卦/变卦标签 12px
· 卦辞正文 17px 400 行距 2.0，居中
· 释义副文 15px 400 次要色，居中
· 小标题 12px 600 字距 4px 鎏金暗，居中
· 元信息 12px 400 极淡，居中
所有块共用同一条居中轴，不再出现"图上居中、字靠左"的错位。
============================================================ */
.result-slide-in { text-align: center; }
.gua-name-big { font-family: var(--serif); font-weight: 700; font-size: 34px; letter-spacing: 8px;
color: var(--gold-bright); text-shadow: 0 2px 6px rgba(10,23,39,0.575); margin: 0 0 18px;
text-indent: 8px; } /* 抵消字距造成的右偏，视觉真正居中 */
.gua-pan { display: flex; gap: 32px; justify-content: center; align-items: flex-start; margin: 0 0 8px; }
.gua-pan svg { display: block; }
.gua-divider { height: 1px; margin: 20px auto; width: 76%;
background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb),.32), transparent); }
/* （旧的 40em 限制已废弃：卡片改为满宽，行宽由内部段落控制） */
.gua-body > * + * { margin-top: 12px; }
/* 卡片满宽后，行宽限制下沉到段落：与解读卡一致（外层满宽、内层限宽居中），
既保证两张卡外框等宽，又不会让正文行长过宽而难读 */
.gua-body > p, .gua-body > .gua-sub, .gua-body > .yao-line {
max-width: 30em; margin-left: auto; margin-right: auto; }
.gua-ci { font-family: var(--serif); font-size: 17px; font-weight: 500; color: var(--text);
letter-spacing: 1.6px; line-height: 2.0; margin: 0; }
.gua-sub { font-size: 15px; font-weight: 400; color: var(--text-dim); letter-spacing: .6px;
line-height: 1.95; margin: 0; }
.gua-label { font-size: 12px; font-weight: 600; color: var(--gold-dim); letter-spacing: 4px;
margin: 22px 0 10px; text-indent: 4px; }
.gua-meta { font-size: 12px; color: rgba(154,148,136,.72); letter-spacing: 1.2px; margin: 22px 0 0; }
/* 爻辞：居中成块，左侧细线改为居中留白，读起来更整齐 */
.yao-line { display: inline-block; text-align: left; font-size: 14.5px; color: var(--text-dim);
line-height: 1.9; padding: 6px 16px; margin: 6px 0; border-left: 2px solid rgba(var(--gold-rgb),.3);
border-radius: 6px; background: rgba(255,255,255,.02); }
.yao-line em { font-style: normal; color: var(--gold-dim); }
/* ============================================================
顺滑下拉菜单（替换原生 select 弹出层）
展开：120ms 淡入 + 从 96% 缩放 + 每项 12ms 错峰上浮
============================================================ */
.smooth-drop { position: fixed; z-index: var(--z-dropdown); overflow-y: auto; overscroll-behavior: contain;
padding: 6px; border-radius: 12px;
background: linear-gradient(180deg, rgba(18,35,54,.99), rgba(12,24,38,.99));
border: 1px solid rgba(var(--gold-rgb),.32);
box-shadow: var(--shadow-card-deep);
opacity: 0; transform: translateY(-6px) scale(.96); transform-origin: top center;
transition: opacity .16s var(--ease-out), transform .2s var(--ease-out); }
.smooth-drop.open { opacity: 1; transform: none; }
.sd-item { padding: 9px 14px; border-radius: 8px; cursor: pointer; font-size: 15px;
color: var(--text); letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
opacity: 0; transform: translateY(-4px);
transition: background .16s ease, color .16s ease; }
.smooth-drop.open .sd-item { animation: sdIn .22s var(--ease-out) forwards; }
@keyframes sdIn { to { opacity: 1; transform: none; } }
.sd-item:hover { background: rgba(var(--gold-rgb),.14); color: var(--gold-bright); }
.sd-item.sel { color: var(--gold-bright); background: rgba(var(--gold-rgb),.1); font-weight: 600; }
.sd-item.sel::after { content: "✓"; float: right; color: var(--gold); margin-left: 12px; }
/* ============================================================
设置抽屉内的「本页布局」滑杆
沿用浮层的视觉语言，但间距按抽屉加宽、去掉外层框（抽屉本身已是容器）
============================================================ */
.tune-in-drawer { border-radius: 12px; background: rgba(255,255,255,.022);
border: 1px solid rgba(var(--gold-rgb),.14); padding: 4px 14px 10px; }
.tune-in-drawer .tune-group { margin: 14px 0 6px; }
.tune-in-drawer .tune-group + .tune-group { border-top: 1px solid rgba(255,255,255,.05); padding-top: 12px; }
.tune-in-drawer .tune-gtitle { font-family: var(--serif); font-size: 13px; font-weight: 600;
color: var(--gold-dim); letter-spacing: 3px; margin-bottom: 8px; }
.tune-in-drawer .tune-row { display: grid; grid-template-columns: 92px 1fr 54px 18px;
align-items: center; gap: 10px; padding: 5px 0; }
.tune-in-drawer .tune-row > span:first-child { font-size: 13.5px; color: var(--text-dim); letter-spacing: .5px; }
.tune-in-drawer .tune-row output { font-size: 12.5px; color: var(--gold); text-align: right;
font-variant-numeric: tabular-nums; }
.tune-in-drawer .tune-clear { font-size: 14px; color: rgba(var(--gold-rgb),.34); cursor: pointer;
text-align: center; transition: color .2s var(--ease), transform .2s var(--ease); }
.tune-in-drawer .tune-clear:hover { color: var(--gold-bright); transform: rotate(-180deg); }
/* 设置里的滑杆：细轨 + 金色圆钮，拖动即时反馈 */
.tune-in-drawer input[type="range"] { -webkit-appearance: none; appearance: none;
width: 100%; height: 22px; background: transparent; cursor: pointer; }
.tune-in-drawer input[type="range"]::-webkit-slider-runnable-track { height: 3px; border-radius: 6px;
background: linear-gradient(90deg, rgba(var(--gold-rgb),.55), rgba(var(--gold-rgb),.18)); }
.tune-in-drawer input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none;
width: 14px; height: 14px; margin-top: -5.5px; border-radius: 50%;
background: linear-gradient(180deg, #F0DCA8, var(--gold));
border: 1px solid rgba(0,0,0,.35); box-shadow: 0 2px 6px rgba(10,23,39,0.517);
transition: transform .16s var(--ease-out); }
.tune-in-drawer input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.18); }
.tune-in-drawer input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.3); }
/* ============================================================
真实塔罗牌面（Rider-Waite 1909，公有领域）
图片填满卡片容器；逆位时旋转 180°（不修改原图，仅 CSS 变换）
============================================================ */
.tc-img { width: 100%; height: 100%; object-fit: cover; display: block;
border-radius: inherit; user-select: none; -webkit-user-drag: none; }
.tc-img.rev { transform: rotate(180deg); }
/* 塔罗牌正面：浅色卡面，配一层极细金边，避免和深色背景糊在一起 */
.tc-box .tc-facewrap { background: #0B1828; }
.tc-facewrap { overflow: hidden; }
/* ---------- 每页「⚙ 本页调节」浮层（调好后可整块删除） ---------- */
.tune-btn { position: fixed; right: 18px; bottom: 54px; z-index: var(--z-dropdown);
width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
font-size: 20px; line-height: 1; color: var(--text);
background: linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, #A5873F);
border: 1px solid rgba(255,255,255,.32);
box-shadow: 0 6px 18px rgba(10,23,39,0.575), inset 0 1px 0 rgba(255,255,255,.45);
transition: transform .3s var(--ease), filter .3s var(--ease); }
.tune-btn:hover { transform: rotate(60deg) scale(1.06); filter: brightness(1.08); }
.tune-panel { position: fixed; right: 18px; bottom: 108px; z-index: var(--z-toast);
width: 330px; max-height: calc(100vh - 190px); overflow-y: auto;
background: rgba(14,31,49,.96); backdrop-filter: blur(10px);
border: 1px solid rgba(var(--gold-rgb),.35); border-radius: 14px;
box-shadow: 0 8px 20px rgba(var(--shadow-rgb),0.38);
padding: 14px 16px 12px; color: var(--text);
opacity: 0; transform: translateY(14px) scale(.97); pointer-events: none;
transition: opacity .3s var(--ease), transform .3s var(--ease); }
.tune-panel.open { opacity: 1; transform: none; pointer-events: auto; }
.tune-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tune-head b { font-family: var(--serif); font-size: 16px; color: var(--gold); letter-spacing: 2px; }
.tune-page { font-size: 12px; color: var(--text-dim); }
.tune-x { margin-left: auto; cursor: pointer; color: var(--gold-dim); font-size: 15px; padding: 2px 6px; }
.tune-x:hover { color: var(--gold-bright); }
.tune-group { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed rgba(var(--gold-rgb),.18); }
.tune-group:last-child { border-bottom: none; }
.tune-gtitle { font-size: 13px; color: var(--gold-dim); letter-spacing: 2px; margin-bottom: 6px; }
.tune-row { display: grid; grid-template-columns: 62px 1fr 50px; align-items: center; gap: 8px; margin: 7px 0; }
.tune-row > span:first-child { font-size: 13px; color: var(--text-dim); }
.tune-row output { font-size: 12.5px; color: var(--gold-bright); text-align: right; }
.tune-row input[type="range"] { width: 100%; accent-color: var(--gold); cursor: pointer; }
.tune-foot { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.tune-reset { padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 13px;
color: var(--gold-bright); background: rgba(var(--gold-rgb),.1);
border: 1px solid rgba(var(--gold-rgb),.4); transition: background .3s var(--ease); }
.tune-reset:hover { background: rgba(var(--gold-rgb),.2); }
.tune-foot .hint { font-size: 11.5px; }
/* ---------- 底部声明（固定页面最底部居中） ---------- */
.footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; text-align: center;
padding: 12px 20px; font-size: 14px; color: rgba(154,148,136,0.75); letter-spacing: 3px;
background: linear-gradient(180deg, transparent, rgba(8,17,28,0.85));
font-family: var(--serif);
transition: opacity .3s ease; } /* 抽牌铺满阶段会被 body.tarot-staging 隐藏，需要淡出/淡入 */
/* ---------- 响应式（窄屏兜底，仍保持一屏） ---------- */
@media (max-width: 1100px) {
.stage { grid-template-columns: 24% minmax(0, 1fr) 24%; gap: 16px; }
.compass { width: min(50vw, 58vh, 560px); }
.result-slide-in { width: min(40vw, 440px); }
}
@media (max-width: 780px) {
html { overflow: auto; }
body { overflow: auto; }
.stage { height: auto; grid-template-columns: 1fr; padding-top: 74px; }
.compass { width: min(86vw, 480px); }
.tarot-ring { width: min(84vw, 420px); }
.result-slide-in { position: static; width: auto; max-height: none; margin-top: 16px; }
.nav-links { overflow-x: auto; margin: 0; }
.footer { position: static; }
.compass-verse { writing-mode: horizontal-tb; text-orientation: mixed; text-align: center; padding: 16px 0; font-size: clamp(15px, 4.6vw, 18px); }
.compass-verse .vline { display: inline; }
}
/* ============================================================
解读面板（塔罗/每日一卦共用）内部排版修正
问题：标题居中、正文却贴左，视觉轴不统一。
规则：面板整体居中；条目行居中；长段落限宽后居中，段落内部左对齐。
============================================================ */
.result-slide-in > h3 { text-align: center; margin: 0 0 10px; }
.result-slide-in > .hint { text-align: center; }
.result-slide-in p { text-align: center; }
.result-slide-in .interp-card,
.result-slide-in #interpretSlot > div { text-align: center; }
/* 长文段落：限宽 + 居中，段内左对齐更好读 */
.result-slide-in .interp-card p,
.result-slide-in #interpretSlot p { max-width: 34em; margin-left: auto; margin-right: auto; text-align: left; }
/* ============================================================
卦辞面板 · 排版 v3（按用户反馈：红框区域"不好看"，学解读卡的框感）
改动要点：
① 卦画与卦名合成一个"卡片"，与下方正文区分开
② 正文区加一层极淡的卡面（和解读卡同一语言），不再是无依无靠的散字
③ 爻辞改成整行卡片（宽一些、左对齐），解决"九二：枯杨生稊，老夫得其女 / 妻"的碎断
④ 统一 8px 间距节奏，段落之间留白更清楚
============================================================ */
/* --- 卦名 --- */
.gua-name-big { text-align: center; font-family: var(--serif); font-weight: 700;
font-size: 30px; letter-spacing: 6px; text-indent: 6px; line-height: 1.3;
color: var(--gold-bright); text-shadow: 0 2px 6px rgba(10,23,39,0.575); margin: 0 0 14px; }
/* --- 卦画：与卦名同属"图示区"，居中、下方细线收口 --- */
.gua-pan { display: flex; gap: 28px; justify-content: center; align-items: flex-start; margin: 0; }
.gua-pan svg { display: block; }
.gua-divider { height: 1px; margin: 16px auto 18px; width: 88%;
background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb),.26), transparent); }
/* --- 正文卡片：一层极淡卡面，呼应解读卡的视觉语言 --- */
.gua-body { max-width: none; width: 100%; box-sizing: border-box;
margin: 0; text-align: left;
padding: 18px 20px 20px; border-radius: 14px;
background: rgba(255,255,255,.022);
border: 1px solid rgba(var(--gold-rgb),.14); }
.gua-body > * + * { margin-top: 12px; }
/* 卦辞原文（短句）→ 居中，字号略大，作为卡片主句 */
.result-slide-in p.gua-ci { text-align: center; font-family: var(--serif); font-size: 17px;
font-weight: 500; color: var(--text); letter-spacing: 1.2px; line-height: 1.95; margin: 0 auto;
max-width: 18em; line-break: strict; word-break: normal; text-wrap: pretty; }
/* 长解释（大象 / 卦意）→ 左对齐，行距 1.9。
权重必须高于文件后面的通配规则 `.result-slide-in p { text-align:center }`。 */
.result-slide-in p.gua-sub { text-align: left; font-size: 14.5px; font-weight: 400;
color: var(--text-dim); letter-spacing: .3px; line-height: 1.9; margin: 0; }
/* 小标题（动爻 / 变卦辞）→ 居中 + 字距拉开 + 上方细分隔线 */
.result-slide-in p.gua-label { text-align: center; font-size: 12px; font-weight: 600;
color: var(--gold-dim); letter-spacing: 4px; text-indent: 4px;
margin: 20px 0 10px; padding-top: 14px;
border-top: 1px solid rgba(var(--gold-rgb),.12); }
/* 爻辞：整行卡片，宽度交给容器（不再限窄），彻底避免句中碎断 */
.yao-line { display: block; text-align: left; font-size: 14px; color: var(--text-dim);
line-height: 1.85; padding: 9px 14px; margin: 8px 0; max-width: none;
border-left: 2px solid rgba(var(--gold-rgb),.36); border-radius: 8px;
background: rgba(255,255,255,.03); }
.yao-line em { font-style: normal; color: var(--gold-dim); }
/* 元信息（六爻纳甲）→ 居中、最淡，放在卡片最后 */
.result-slide-in p.gua-meta { text-align: center; font-size: 12px; color: rgba(154,148,136,.62);
letter-spacing: 1px; margin: 20px 0 0; padding-top: 12px;
border-top: 1px solid rgba(var(--gold-rgb),.1); }
/* --- 面板宽度 --- */
.result-slide-in { width: var(--gua-w, 440px); }
/* --- 解读卡：与卦辞卡保持同一圆角/边框语言 --- */
.result-slide-in .result-card { padding: 16px 18px; border-radius: 14px; }
.result-slide-in .result-card h4, .result-slide-in .card-title { text-align: center; }
.result-slide-in #interpretSlot p { max-width: 24em; margin-left: auto; margin-right: auto;
text-align: left; font-size: 14.5px; line-height: 1.9; }
.result-slide-in #interpretSlot .hint { text-align: center; }
/* ============================================================
导航栏布局改版
目标：撑满但不松散、右侧不留大片空白、搜索栏不过宽
手段：中段用等宽栅格；搜索栏固定 200px；左右两侧用 flex 分配
============================================================ */
.nav-inner { display: flex; align-items: center; gap: 18px;
max-width: 1560px; margin: 0 auto; padding: 0 20px; height: 64px; }
/* 左：logo 固定宽度，避免挤压中段 */
.nav-inner .logo { flex: 0 0 auto; }
/* 中：导航项等宽排布，撑满可用空间但不溢出 */
.nav-links { display: flex; flex: 1 1 auto; align-items: center; justify-content: center;
gap: 2px; min-width: 0; }
.nav-links a { flex: 0 1 auto; padding: 9px 15px; border-radius: 10px; font-size: 16px;
letter-spacing: .5px; white-space: nowrap;
border: 1px solid transparent; background: transparent;
transition: color .2s var(--ease-out), background .2s var(--ease-out),
border-color .2s var(--ease-out); }
.nav-links a:hover { color: var(--gold-bright); background: rgba(var(--gold-rgb),.08); }
/* 选中态：与「每日一卦」完全一致的金色描边卡片 */
.nav-links a.active { color: var(--gold-bright); background: rgba(var(--gold-rgb),.1);
border-color: rgba(var(--gold-rgb),.5);
box-shadow: 0 4px 14px rgba(10,23,39,0.402), inset 0 1px 0 rgba(255,255,255,.06); }
/* 搜索栏：收窄到 200px，不再抢导航的视觉重量 */
.nav-search { flex: 0 0 200px; min-width: 0; margin: 0 6px; }
.nav-search input { height: 33px; font-size: 13px; padding: 0 10px 0 32px; }
.nav-search .ns-icon { left: 11px; font-size: 15px; }
/* 右侧：卦词 / 设置，与 logo 同宽量级，形成对称留白 */
.nav-side { display: flex; flex: 0 0 auto; align-items: center; gap: 2px; }
.nav-side a { padding: 9px 15px; border-radius: 10px; font-size: 16px;
border: 1px solid transparent; white-space: nowrap;
transition: color .2s var(--ease-out), background .2s var(--ease-out),
border-color .2s var(--ease-out); }
.nav-side a:hover { color: var(--gold-bright); background: rgba(var(--gold-rgb),.08); }
.nav-side a.active { color: var(--gold-bright); background: rgba(var(--gold-rgb),.1);
border-color: rgba(var(--gold-rgb),.5); }
/* 中等屏幕：压缩内边距与字号，保证 8 项 + 搜索 + 右侧仍在一行 */
@media (max-width: 1500px) {
.nav-links a, .nav-side a { padding: 8px 11px; font-size: 15px; }
.nav-search { flex: 0 0 168px; }
}
@media (max-width: 1280px) {
.nav-links a, .nav-side a { padding: 8px 8px; font-size: 14.5px; letter-spacing: 0; }
.nav-search { flex: 0 0 150px; }
.nav-inner { gap: 10px; padding: 0 12px; }
}
/* ============================================================
本页设置 · 分步操作按钮
用途：把当前页的动画拆成可单独触发的动作，逐个检查观感
============================================================ */
.tune-note { font-size: 12px; color: rgba(154,148,136,.72); line-height: 1.7;
margin: 0 0 10px; }
.dev-steps { display: flex; flex-direction: column; gap: 7px; }
.dev-step { display: block; width: 100%; text-align: left; cursor: pointer;
padding: 9px 13px; border-radius: 10px; font-size: 14px; letter-spacing: .4px;
color: var(--text); background: rgba(255,255,255,.04);
border: 1px solid rgba(var(--gold-rgb),.2);
transition: background .18s var(--ease-out), border-color .18s var(--ease-out),
transform .14s var(--ease-out), color .18s var(--ease-out); }
.dev-step:hover { background: rgba(var(--gold-rgb),.14); border-color: rgba(var(--gold-rgb),.46);
color: var(--gold-bright); transform: translateX(3px); }
.dev-step:active { transform: translateX(3px) scale(.985); }
/* 完整流程与复位单独区分，避免误点 */
.dev-step[data-act="full"] { border-color: rgba(var(--gold-rgb),.42); font-weight: 600; }
.dev-step[data-act="reset"] { color: var(--text-dim); border-color: rgba(154,148,136,.26); }
.dev-step[data-act="reset"]:hover { color: #E8A08C; border-color: rgba(178,106,90,.5);
background: rgba(178,106,90,.1); }
/* ============================================================
安全警示卡（自伤 / 疾病 / 违法等）
设计：
· 危机类用暖色强调边（不是红色警告色，避免刺激），必须点击按钮才能关闭
· 热线号码做成可点击拨打的大按钮，一眼可见
· 层级最高，盖住卦辞面板与所有浮层
============================================================ */
.safety-mask { position: fixed; inset: 0; z-index: var(--z-toast);
background: rgba(4,10,18,.76); display: flex; align-items: center; justify-content: center;
padding: 24px; opacity: 0; transition: opacity .26s var(--ease); }
.safety-mask.open { opacity: 1; }
.safety-box { width: min(620px, 94vw); max-height: 84vh; overflow-y: auto;
border-radius: 16px; padding: 24px 26px 22px;
background: linear-gradient(180deg, #14273f, #0C1A2A);
border: 1px solid rgba(var(--gold-rgb),.34);
box-shadow: 0 26px 64px rgba(10,23,39,0.805), inset 0 1px 0 rgba(255,255,255,.06);
transform: translateY(12px) scale(.98); transition: transform .3s var(--ease-out); }
.safety-mask.open .safety-box { transform: none; }
/* 危机类：暖金边加粗，不用刺眼红色 */
.safety-mask.crisis .safety-box { border-color: rgba(226,196,136,.62);
box-shadow: 0 26px 64px rgba(10,23,39,0.828), 0 0 0 1px rgba(226,196,136,.18),
inset 0 1px 0 rgba(255,255,255,.08); }
.safety-head { display: flex; align-items: center; gap: 10px;
font-family: var(--serif); font-size: 20px; font-weight: 700; letter-spacing: 1.5px;
color: var(--gold-bright); margin-bottom: 14px; line-height: 1.4; }
.safety-badge { flex: 0 0 auto; font-family: var(--sans, sans-serif); font-size: 11.5px;
font-weight: 600; letter-spacing: 1px; padding: 3px 9px; border-radius: 6px;
color: var(--text); background: linear-gradient(180deg, var(--gold-bright), var(--gold)); }
.safety-lead { font-size: 15px; line-height: 1.95; color: var(--text);
margin: 0 0 14px; text-align: left; }
.safety-actions { margin: 0 0 16px; padding-left: 20px; }
.safety-actions li { font-size: 14.5px; line-height: 1.95; color: var(--text-dim);
margin-bottom: 7px; text-align: left; }
/* 热线区：号码做成可拨打按钮 */
.safety-res { border-radius: 12px; padding: 12px 14px; margin-bottom: 14px;
background: rgba(255,255,255,.03); border: 1px solid rgba(var(--gold-rgb),.18); }
.sr-cap { font-size: 12px; letter-spacing: 2px; color: var(--gold-dim); margin-bottom: 10px; }
.sr-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 8px 0; border-top: 1px solid rgba(255,255,255,.05); }
.sr-row:first-of-type { border-top: none; }
.sr-info { min-width: 0; }
.sr-name { font-size: 14.5px; color: var(--text); }
.sr-note { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; line-height: 1.6; }
.sr-call { flex: 0 0 auto; font-size: 16px; font-weight: 700; letter-spacing: 1px;
font-variant-numeric: tabular-nums; color: var(--text); text-decoration: none;
padding: 8px 14px; border-radius: 10px; white-space: nowrap;
background: linear-gradient(180deg, var(--gold-bright), var(--gold) 62%, #A5873F);
box-shadow: 0 4px 12px rgba(10,23,39,0.483), inset 0 1px 0 rgba(255,255,255,.45);
transition: transform .16s var(--ease-out), filter .16s var(--ease-out); }
a.sr-call:hover { transform: translateY(-1px); filter: brightness(1.07); }
.sr-call.static { background: none; color: var(--gold-bright); box-shadow: none;
border: 1px solid rgba(var(--gold-rgb),.4); }
.safety-note { font-size: 13.5px; color: var(--gold-dim); line-height: 1.85;
margin: 0 0 16px; text-align: left; }
.safety-foot { display: flex; gap: 10px; align-items: center; }
.safety-ok { flex: 1 1 auto; padding: 12px 18px; border-radius: 10px; border: none;
cursor: pointer; font-size: 15px; font-weight: 600; letter-spacing: 1px; color: var(--text);
background: linear-gradient(180deg, var(--gold-bright), var(--gold) 62%, #A5873F);
box-shadow: 0 6px 16px rgba(10,23,39,0.517), inset 0 1px 0 rgba(255,255,255,.45);
transition: transform .16s var(--ease-out), filter .16s var(--ease-out); }
.safety-ok:hover { filter: brightness(1.06); }
.safety-back { flex: 0 0 auto; padding: 12px 18px; border-radius: 10px; cursor: pointer;
font-size: 14px; color: var(--text-dim); background: transparent;
border: 1px solid rgba(154,148,136,.34);
transition: color .18s var(--ease), border-color .18s var(--ease); }
.safety-back:hover { color: var(--text); border-color: rgba(154,148,136,.6); }
.safety-src { margin-top: 14px; font-size: 12px; color: rgba(154,148,136,.62); }
.safety-src summary { cursor: pointer; letter-spacing: 1px; }
.safety-src ul { margin: 8px 0 0; padding-left: 18px; }
.safety-src li { line-height: 1.8; margin-bottom: 4px; text-align: left; }
/* ============================================================
本地字体栈（无 CDN 依赖）
本机已安装 Noto Serif SC / Noto Sans SC（Windows 自带，亦随 Office 分发），
因此不再引用 Google Fonts，避免断网时阻塞样式解析。
回退顺序按「本机一定有」优先：微软雅黑 / 宋体 / 黑体 均在 Windows 标配。
============================================================ */
:root {
--serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "华文宋体", "宋体", SimSun, serif;
--sans: "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "微软雅黑", "Microsoft YaHei",
"黑体", SimHei, system-ui, sans-serif;
}
body, button, input, select, textarea { font-family: var(--sans); }
h1, h2, h3, .gua-name-big, .logo-name, .dt-pop-title, .legal-head,
.safety-head, .es-title, .tune-gtitle {
font-family: var(--serif);
}
/* 本页设置底部按钮组：恢复 / 导出 / 导入 三连排 */
.tune-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tune-foot .tune-reset { flex: 0 0 auto; }
.tune-foot .hint { flex: 1 1 100%; margin-top: 4px; }
/* ============================================================
解梦面板
结构：判断徽章 → 意象 → 三项速览 → 民俗断语 → 心理视角 → 三视角 → 建议
设计：传统与现代分区呈现，不混成一段含糊的话；
危机内容不给卦象，由安全卡接管。
============================================================ */
/* 判断徽章：用金色深浅区分，不用红绿交通灯 */
.jm-head { display: flex; justify-content: center; margin-bottom: 6px; }
.jm-verdict { font-size: 12.5px; letter-spacing: 3px; text-indent: 3px;
padding: 4px 14px; border-radius: 6px; font-weight: 600;
color: var(--gold-bright); background: rgba(var(--gold-rgb),.1);
border: 1px solid rgba(var(--gold-rgb),.34); }
.jm-verdict.good { color: var(--gold-bright); background: rgba(var(--gold-rgb),.16);
border-color: rgba(var(--gold-rgb),.5); }
.jm-verdict.bad { color: #D9A08C; background: rgba(178,106,90,.12);
border-color: rgba(178,106,90,.42); }
/* 三项速览：外层 shell + 内层 core（双bez） */
.jm-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
margin: 14px 0 4px; padding: 8px; border-radius: 14px;
background: rgba(255,255,255,.022);
border: 1px solid rgba(var(--gold-rgb),.12); }
.jm-fact { display: flex; flex-direction: column; gap: 3px;
padding: 9px 11px; border-radius: 10px;
background: rgba(255,255,255,.032);
box-shadow: var(--shadow-inset-highlight); }
.jm-fact.wide { grid-column: 1 / -1; }
.jm-fact span { font-size: 11.5px; letter-spacing: 2px; color: var(--gold-dim); }
.jm-fact b { font-size: 15px; font-weight: 500; color: var(--text);
line-height: 1.7; text-align: left; letter-spacing: .3px; }
/* 三视角：左侧细金线，读起来像并列的注解 */
.jm-view { text-align: left; padding: 10px 0 10px 13px; margin: 0 0 4px;
border-left: 2px solid rgba(var(--gold-rgb),.24); }
.jm-view-name { font-size: 12px; letter-spacing: 2px; color: var(--gold-dim);
margin-bottom: 5px; }
/* 建议：序号用金色圆点，不用默认数字 */
.jm-sug { list-style: none; margin: 0; padding: 0; counter-reset: jm; }
.jm-sug li { position: relative; counter-increment: jm;
font-size: 14.5px; line-height: 1.9; color: var(--text-dim);
padding: 0 0 0 26px; margin-bottom: 9px; text-align: left; }
.jm-sug li::before { content: counter(jm);
position: absolute; left: 0; top: 3px;
width: 17px; height: 17px; line-height: 17px; text-align: center;
font-size: 11px; color: var(--text); border-radius: 50%;
background: linear-gradient(180deg, var(--gold-bright), var(--gold)); }
/* 免责与附注 */
.jm-warn { font-size: 12.5px; line-height: 1.85; color: rgba(154,148,136,.72);
margin: 14px 0 0; padding: 10px 12px; border-radius: 10px;
background: rgba(255,255,255,.02);
border-left: 2px solid rgba(178,106,90,.3); text-align: left; }
/* ============================================================
多行输入框（解梦等需要写一段场景的模块）
与单行 .q-input 保持同一视觉语言：内描边 + 极淡底 + 聚焦金边
============================================================ */
.q-area textarea { width: 100%; box-sizing: border-box; resize: none;
padding: 14px 15px; border-radius: 12px; border: 1px solid rgba(var(--gold-rgb),.18);
background: rgba(255,255,255,.028); color: var(--text);
font-family: var(--sans); font-size: 15px; line-height: 1.85;
letter-spacing: .3px; outline: none;
box-shadow: var(--shadow-inset-highlight-faint);
transition: border-color .22s var(--ease-out), background .22s var(--ease-out); }
.q-area textarea::placeholder { color: rgba(154,148,136,.6); line-height: 1.85; }
.q-area textarea:hover { border-color: rgba(var(--gold-rgb),.3); }
.q-area textarea:focus { border-color: rgba(var(--gold-rgb),.56);
background: rgba(255,255,255,.042);
box-shadow: var(--shadow-ring-gold); }
/* 解梦面板：内容较多，把行距与间距收紧一点，尽量一屏看完 */
.float-panel .jm-facts { margin-top: 12px; }
.float-panel .jm-view { padding-top: 8px; padding-bottom: 8px; }
.float-panel .jm-sug li { margin-bottom: 7px; line-height: 1.8; }
.float-panel .jm-warn { margin-top: 12px; padding: 9px 11px; }
/* 解梦专有的「给你的话」用稍窄的行宽，读起来更稳 */
.float-panel .gua-sub { max-width: 24em; margin-left: auto; margin-right: auto; }
/* 解梦结果：双栏并排（左视角 / 右建议）
单栏纵向叠 5 段会把底部挤出可视区；并排后纵向减半，一屏可见。
窄面板自动退回单栏。 */
.jm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 20px;
align-items: start; margin-top: 2px; }
.jm-cols.single { grid-template-columns: 1fr; }
.jm-col { min-width: 0; }
/* 栏内的分隔标签：上边线只画一次，避免两栏各画一条显得碎 */
.jm-col > .gua-label:first-child { margin-top: 14px; }
/* 窄栏里的视角名：两字名保持原号，四字名缩一号防止折行 */
.jm-view-name.sm { font-size: 11px; letter-spacing: 1px; }
/* 窄面板 / 窄屏：退回单栏 */
@media (max-width: 1400px) {
.jm-cols { grid-template-columns: 1fr; }
}
/* 双栏里行宽变窄，正文缩一点号更耐看 */
.jm-col .gua-sub { font-size: 13.5px; line-height: 1.85; max-width: none; }
.jm-col .jm-sug li { font-size: 13.5px; line-height: 1.8; padding-left: 24px; }
.jm-col .jm-sug li::before { width: 15px; height: 15px; line-height: 15px; font-size: 10px; }
.jm-col .jm-view { padding: 8px 0 8px 11px; margin-bottom: 2px; }
/* 解梦面板纵向压缩：目标是在 900px 视口下一屏看完
手段：缩标题与段落间距（不改字号，保证可读性），并给面板加可见滚动条兜底 */
.float-panel { scrollbar-width: thin; scrollbar-color: rgba(var(--gold-rgb),.5) transparent; }
.float-panel::-webkit-scrollbar { width: 8px; }
.float-panel::-webkit-scrollbar-track { background: transparent; }
.float-panel::-webkit-scrollbar-thumb { background: rgba(var(--gold-rgb),.5); border-radius: 6px; }
.float-panel::-webkit-scrollbar-thumb:hover { background: rgba(var(--gold-rgb),.75); }
/* 解梦专属：把纵向留白收一收 */
.float-panel h3 { margin-bottom: 6px; }
.float-panel .jm-head { margin-bottom: 2px; }
.float-panel .gua-name-big { margin: 2px 0 4px; }
.float-panel .jm-facts { margin: 10px 0 0; padding: 6px; gap: 6px; }
.float-panel .jm-fact { padding: 7px 10px; }
.float-panel p.gua-label { margin: 12px 0 7px; padding-top: 10px; }
.float-panel p.gua-ci { margin: 0; line-height: 1.8; }
.float-panel .jm-col > .gua-label:first-child { margin-top: 10px; }
.float-panel .jm-view { padding: 6px 0 6px 10px; }
.float-panel .jm-sug li { margin-bottom: 6px; }
.float-panel .jm-warn { margin-top: 10px; padding: 8px 10px; font-size: 12px; }
.float-panel p.gua-meta { margin-top: 10px; padding-top: 8px; }
/* ============================================================
小六壬 · 掐指一算
视觉：线稿手掌（与全站线描语言一致），六宫沿指节排布
动画：手掌淡入 → 掐指光点沿宫位跳动 → 落宫高亮 → 卦辞浮现
============================================================ */
/* 关键：.float-panel 默认 display:none（只有变成浮层时才显示）。
小六壬的手掌是常驻中间区域，必须显式显示。 */
#mainPanel.xlr-stage, .float-panel.xlr-stage { display: flex !important;
align-items: center; justify-content: center;
overflow: visible; background: none; border: none; box-shadow: none;
padding: 0; }
.xlr-wrap { display: flex; flex-direction: column; align-items: center;
gap: 6px; width: 100%; }
/* 2026-10-13 图68："首先这手再大点，在中间这手太小了" → 46/58vh → 54/67.5vh（同 0.8 比例） */
.xlr-hand { display: block; width: min(54vh, 388px); height: min(67.5vh, 485px);
aspect-ratio: 720 / 900; flex: 0 0 auto; overflow: visible;
color: rgba(208,178,108,.55); /* 手掌线稿颜色 */
filter: drop-shadow(0 10px 26px rgba(10,23,39,.6)); }
.xlr-hand .xlr-outline { color: rgba(216,186,116,.62); } /* 外轮廓：略亮，勾出手型 */
/* 掌纹 / 指节细纹：随轮廓画完后淡入（掐指手掌与手相图共用） */
.hand-detail { opacity: 0; animation: handInk .9s ease .5s forwards; }
@keyframes handInk { to { opacity: .9; } }
.hand-line { fill: currentColor; color: rgba(214,184,112,.52); }
.hand-crease { fill: none; stroke: currentColor; color: rgba(214,184,112,.6); stroke-width: 1.3; }
.hand-ref { fill: none; stroke: currentColor; color: rgba(214,184,112,.62); }
/* 手掌淡入：描边自下往上画出 */
@keyframes xlrDraw { from { stroke-dashoffset: var(--len, 900); } to { stroke-dashoffset: 0; } }
@keyframes xlrCellIn { from { opacity: 0; transform: translate(var(--tx, 0), calc(var(--ty, 0) + 8px)); }
to { opacity: 1; } }
/* 掌上六宫（2026-10-13 图67："这些字是在手指上的，不要用圆包起来"——
深色圆底盘/圆点都删，字直接落在手指节位上；纸色描边保证压在指节线上也清晰） */
.xlr-cell { opacity: 1; } /* 2026-10-14 用户（图71）：手和字本身就在，直接都出现（原 opacity:0+出现动画会'手和字先后浮现'，已删） */
.xlr-cell .xc-name { fill: rgba(122, 102, 66, .94); font-size: 28px; font-weight: 600;
font-family: var(--serif); letter-spacing: 1px; text-anchor: middle;
paint-order: stroke; stroke: rgba(251, 247, 239, .85); stroke-width: 3px;
transition: fill .26s var(--ease-out); }
/* 当前经过的宫：字变朱砂 */
.xlr-cell.on .xc-name { fill: var(--cinnabar); }
/* 落宫：朱砂定格 + 轻呼吸（原来外围扩散圈 / 光点特效已删——"不要有别的特效"） */
.xlr-cell.final .xc-name { fill: #8E2C22; font-weight: 700;
filter: drop-shadow(0 0 7px rgba(178, 58, 46, .5));
animation: xlrBreath 2.2s cubic-bezier(.45,.05,.55,.95) infinite; }
@keyframes xlrBreath {
0%, 100% { opacity: 1; }
50% { opacity: .68; }
}
.xlr-tip { font-size: 13.5px; letter-spacing: 2px; color: rgba(154,148,136,.72);
text-align: center; margin: 0; }
/* 卦辞面板里的「再掐一次」 */
.xlr-again { display: block; margin: 18px auto 0; padding: 10px 26px;
border-radius: 10px; cursor: pointer; font-size: 14px; letter-spacing: 2px;
color: var(--text); border: none;
background: linear-gradient(180deg, var(--gold-bright), var(--gold) 62%, #A5873F);
box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
transition: filter .18s var(--ease-out), transform .16s var(--ease-out); }
.xlr-again:hover { filter: brightness(1.06); }
.xlr-again:active { transform: translateY(1px); }
/* 卦辞诗：略大一号、居中，与别处「卦辞」一致 */
.xlr-poem { font-size: 16.5px; line-height: 2; letter-spacing: 1.4px; }
/* 掐指过程：序号 + 文案，左对齐好读 */
.xlr-steps li { padding-left: 26px; }
.xlr-steps li b { color: var(--gold-dim); font-weight: 600; letter-spacing: 1px; }
/* ============================================================
导航「更多」下拉
设计：主项 8 个保持一行；其余模块收进下拉，避免导航越来越长。
动效：高度 + 透明度平滑展开（不用 display 切换，保证有过渡）
============================================================ */
.nav-more { position: relative; flex: 0 0 auto; }
.nav-more-btn { display: flex; align-items: center; gap: 5px;
padding: 9px 15px; border-radius: 9px; font-size: 16px; letter-spacing: .5px;
color: var(--text); background: transparent; border: 1px solid transparent;
cursor: pointer; font-family: inherit; white-space: nowrap;
transition: color .2s var(--ease-out), background .2s var(--ease-out),
border-color .2s var(--ease-out); }
.nav-more-btn:hover { color: var(--gold-bright); background: rgba(var(--gold-rgb),.08); }
.nav-more.open .nav-more-btn,
.nav-more.active .nav-more-btn { color: var(--gold-bright);
background: rgba(var(--gold-rgb),.1); border-color: rgba(var(--gold-rgb),.5); }
/* 小三角：展开时旋转 180° */
.nm-caret { width: 0; height: 0; border-left: 4px solid transparent;
border-right: 4px solid transparent; border-top: 5px solid currentColor;
opacity: .7; transition: transform .24s var(--ease-out); }
.nav-more.open .nm-caret { transform: rotate(180deg); }
/* 下拉面板 */
.nav-more-list { position: absolute; top: calc(100% + 8px); left: 50%;
transform: translateX(-50%) translateY(-6px) scale(.98);
min-width: 208px; max-height: 60vh; overflow-y: auto;
padding: 6px; border-radius: 14px;
background: linear-gradient(180deg, #14273f, #0C1A2A);
border: 1px solid rgba(var(--gold-rgb),.28);
box-shadow: 0 18px 44px rgba(10,23,39,.72), inset 0 1px 0 rgba(255,255,255,.05);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity .22s var(--ease-out), transform .26s var(--ease-out),
visibility 0s linear .26s;
z-index: var(--z-dropdown); }
.nav-more.open .nav-more-list { opacity: 1; visibility: visible; pointer-events: auto;
transform: translateX(-50%) translateY(0) scale(1);
transition: opacity .22s var(--ease-out), transform .26s var(--ease-out),
visibility 0s linear 0s; }
.nav-more-list a { display: block; padding: 9px 12px; border-radius: 9px;
text-decoration: none; color: var(--text);
transition: background .18s var(--ease-out), color .18s var(--ease-out); }
.nav-more-list a:hover { background: rgba(var(--gold-rgb),.12); color: var(--gold-bright); }
.nav-more-list a.active { background: rgba(var(--gold-rgb),.16); color: var(--gold-bright); }
.nm-title { display: block; font-size: 15px; letter-spacing: .4px; }
.nm-sub { display: block; font-size: 11.5px; color: rgba(154,148,136,.7);
margin-top: 2px; letter-spacing: 0;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
/* 窄屏：下拉贴右，避免超出视口 */
@media (max-width: 1400px) {
.nav-more-list { left: auto; right: 0; transform: translateY(-6px) scale(.98); }
.nav-more.open .nav-more-list { transform: translateY(0) scale(1); }
}
/* ============================================================
通用模块面板（数字能量学 / 生命灵数 / 梅花易数 …）
输入区与结果区共用同一套视觉语言，避免每个模块各画一套
============================================================ */
.gen-stage { display: flex; align-items: center; justify-content: center; }
#mainPanel.gen-stage, .float-panel.gen-stage { display: flex !important;
align-items: center; justify-content: center;
background: none; border: none; box-shadow: none; padding: 0; overflow: visible; }
.gen-form { width: min(400px, 88%); display: flex; flex-direction: column; gap: 14px; }
/* 带手相图例的面板：图在左、表单在右（字段双列，避免超出可视高度） */
.gen-form.has-figure { width: min(880px, 94%); flex-direction: row; align-items: flex-start; gap: 34px; }
.gen-form.has-figure .gen-fields { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr;
gap: 10px 14px; min-width: 0; max-height: calc(100vh - 200px); overflow-y: auto; padding-right: 4px; }
.gen-form.has-figure .gi-row { gap: 5px; }
.gen-form.has-figure .gi-row.gi-wide { grid-column: 1 / -1; }
/* 2026-10-17 四审（用户："性别男女到右侧手相中间"）：性别段控跨两列并在表单区水平居中，
宽度仍保持原来的一列宽（两列 = 100%，列距 14px）。 */
.gen-form.has-figure .gi-seg-row { grid-column: 1 / -1; align-items: center; }
.gen-form.has-figure .gi-seg-row .seg-group { width: calc((100% - 14px) / 2); }
.gen-form.has-figure .gi-photo-preview img { max-height: 150px; }
.gen-figure { flex: 0 0 246px; display: flex; flex-direction: column; align-items: center; }
.palm-fig { width: 100%; max-width: 240px; height: auto; color: rgba(208,178,108,.55);
filter: drop-shadow(0 10px 26px rgba(10,23,39,.6)); }
.palm-fig .xlr-outline { color: rgba(216,186,116,.6); }
.pf-mark circle { fill: rgba(7,17,28,.66); stroke: rgba(var(--gold-rgb),.55); stroke-width: 1.4; }
.pf-mark text { fill: var(--gold-bright); font-size: 17px; text-anchor: middle; font-family: var(--serif); }
.pf-cap { font-size: 12px; letter-spacing: 2px; color: rgba(154,148,136,.75);
text-align: center; margin: 10px 0 0; }
.pf-legend { font-size: 12px; letter-spacing: 1.5px; color: rgba(154,148,136,.9);
text-align: center; margin: 4px 0 0; line-height: 1.95; }
/* 通用面板的 select 与本机照片预览（上传/拍照只在本机，不上传服务器） */
.gen-form select { width: 100%; padding: 10px 12px; border-radius: 10px;
background: rgba(10,23,39,.6); border: 1px solid rgba(var(--gold-rgb),.24);
color: var(--text); font-family: var(--serif); font-size: 14.5px; letter-spacing: 1px;
outline: none; appearance: none; cursor: pointer; }
.gen-form select:hover { border-color: rgba(var(--gold-rgb),.4); }
.gen-form select:focus { border-color: rgba(var(--gold-rgb),.56); }
.gi-photo-btns { display: flex; gap: 10px; }
.gi-photo-btn { flex: 1; position: relative; overflow: hidden; text-align: center;
padding: 10px 0; border: 1px dashed rgba(var(--gold-rgb),.38); border-radius: 10px;
color: var(--gold-dim); font-size: 13.5px; letter-spacing: 2px; cursor: pointer;
transition: border-color .2s var(--ease-out), color .2s var(--ease-out); }
.gi-photo-btn:hover { border-color: rgba(var(--gold-rgb),.72); color: var(--gold-bright); }
.gi-photo-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.gi-photo-preview { position: relative; margin-top: 10px; border-radius: 10px; overflow: hidden;
border: 1px solid rgba(var(--gold-rgb),.3); }
.gi-photo-preview img { display: block; width: 100%; max-height: 210px; object-fit: cover; }
.gi-photo-clear { position: absolute; top: 8px; right: 8px; padding: 4px 12px;
border-radius: 8px; border: 1px solid rgba(var(--gold-rgb),.5); cursor: pointer;
background: rgba(10,23,39,.72); color: var(--gold-dim); font-size: 12px; letter-spacing: 2px; }
.gi-photo-clear:hover { color: var(--gold-bright); border-color: rgba(var(--gold-rgb),.85); }
.gi-photo-hint { font-size: 12px; letter-spacing: 1px; color: rgba(154,148,136,.7); margin: 6px 0 0; }
.gi-row { display: flex; flex-direction: column; gap: 7px; }
.gi-label { font-size: 13px; letter-spacing: 2px; color: var(--gold-dim); }
/* 2026-10-20 运势模块：出生时间走站内选择器，附「时辰不详」 */
.gi-dt-row .dt-field { text-align: center; }
.dt-unknown { display: flex; align-items: center; justify-content: center; gap: 6px;
font-size: 12.5px; color: var(--gold-dim); cursor: pointer; margin: -2px 0 10px; user-select: none; }
.dt-unknown input { accent-color: var(--cinnabar, #B23A2E); }
.gen-unknown-time { margin: 2px 0 8px; }
.gen-form input[type="text"], .gen-form textarea {
width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px;
border: 1px solid rgba(var(--gold-rgb),.2); background: rgba(255,255,255,.028);
color: var(--text); font-family: var(--sans); font-size: 15px; letter-spacing: .4px;
outline: none; resize: none;
box-shadow: var(--shadow-inset-highlight-faint);
transition: border-color .22s var(--ease-out), background .22s var(--ease-out); }
.gen-form textarea { line-height: 1.85; }
.gen-form input::placeholder, .gen-form textarea::placeholder { color: rgba(154,148,136,.58); }
.gen-form input:hover, .gen-form textarea:hover { border-color: rgba(var(--gold-rgb),.32); }
.gen-form input:focus, .gen-form textarea:focus { border-color: rgba(var(--gold-rgb),.56);
background: rgba(255,255,255,.042);
box-shadow: var(--shadow-ring-gold); }
/* 年月日三连输入 */
.gi-date3 { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.gi-date3 input { text-align: center; font-variant-numeric: tabular-nums; }
.gi-date3 input::-webkit-outer-spin-button,
.gi-date3 input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gen-none { font-size: 13.5px; color: rgba(154,148,136,.72); text-align: center;
line-height: 1.9; margin: 0; }
/* 结果区 */
.gen-head { font-size: 22px !important; line-height: 1.5; letter-spacing: .5px; }
.gen-score { text-align: center; font-size: 13px; letter-spacing: 2px;
color: var(--gold-dim); margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.gen-lines .jm-fact { padding: 14px 16px; gap: 8px; }
.gen-line { font-size: 14.5px; line-height: 1.9; color: var(--text-dim);
margin: 0 0 7px; text-align: left; }
.gen-line:last-child { margin-bottom: 0; }
.gen-line b { color: var(--gold-bright); }
.gen-detail { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.gd-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
padding: 7px 12px; border-radius: 9px; background: rgba(255,255,255,.024);
border: 1px solid rgba(var(--gold-rgb),.1); }
.gd-row span { font-size: 12.5px; color: var(--gold-dim); letter-spacing: 1px; flex: 0 0 auto; }
.gd-row b { font-size: 13.5px; font-weight: 500; color: var(--text);
text-align: right; word-break: break-all; font-variant-numeric: tabular-nums; }
/* ============================================================
算法出处 · 所用流派
同一术数常有多个流派（如大六壬的月将加时 vs 其他换将法），
写明本实现采用哪一派，便于用户核对与日后换派。
============================================================ */
.gen-method { margin-top: 14px; padding: 11px 13px; border-radius: 12px;
background: rgba(255,255,255,.02);
border: 1px solid rgba(var(--gold-rgb),.12);
border-left: 2px solid rgba(var(--gold-rgb),.4); }
.gm-cap { font-size: 11.5px; letter-spacing: 2.5px; color: var(--gold-dim);
margin-bottom: 7px; }
.gm-school { font-size: 14px; color: var(--gold-bright); margin: 0 0 5px;
letter-spacing: .5px; text-align: left; }
.gm-texts { font-size: 12.5px; color: var(--text-dim); margin: 0 0 6px;
line-height: 1.8; text-align: left; }
.gm-note { font-size: 12.5px; color: rgba(154,148,136,.8); margin: 0;
line-height: 1.85; text-align: left; }
/* ============================================================
左栏紧凑化（用户反馈：出生时间区域几个框偏大）
手段：缩内边距与字号，不改结构；整体高度约减 150px
============================================================ */
/* 时间选择框：54 → 44 */
.dt-field { padding: 9px 12px !important; margin-bottom: 10px !important; }
.dt-field .dt-cap { font-size: 11.5px; letter-spacing: 2.5px; margin-bottom: 3px; }
.dt-field .dt-show { font-size: 16px; letter-spacing: 1.5px; }
/* 性别 / 城市下拉：47 → 40 */
#inputCol select { padding: 9px 30px 9px 11px !important; font-size: 14px !important; }
#inputCol .smooth-drop { min-height: 40px; }
/* 校准进度面板：183 → 约 132 */
.calib-panel { padding: 10px 12px !important; }
.calib-panel .calib-cap { font-size: 11.5px; letter-spacing: 2px; margin-bottom: 6px; }
.calib-row { padding: 4px 0 !important; font-size: 13px !important; }
.calib-row .dot { width: 6px; height: 6px; }
/* 排盘按钮：58 → 48 */
#inputCol #castBtn { padding: 12px 0 !important; font-size: 17px !important; }
/* 左栏整体间距收紧 */
.side-col { gap: 12px !important; }
#inputCol .row2 { gap: 8px !important; margin-bottom: 10px !important; }
#inputCol .q-input { margin-bottom: 10px; }
#inputCol .q-input input, #inputCol .q-area textarea { padding: 11px 13px; font-size: 14.5px; }
#inputCol .q-area textarea { height: 156px; } /* 2026-10-13 用户：「中间的输入框往高的扩，和中间比例协调」 */
/* ============================================================
导航「更多」按钮：与普通导航项同色，不默认高亮
原来加了 .active 就是深金底 + 金边，视觉上比其它项重很多。
现在：默认与普通项完全一致；仅"下拉展开"或"当前模块在收纳列表里"时描边。
============================================================ */
/* 未激活时用与 .nav-links a 同一个颜色变量，保证完全一致 */
.nav-more-btn { color: var(--gold) !important;
background: transparent !important; border-color: transparent !important; font-size: 16px; }
.nav-more-btn:hover { color: var(--gold-bright) !important;
background: rgba(var(--gold-rgb),.08) !important; }
.nav-more.active .nav-more-btn,
.nav-more.open .nav-more-btn {
color: var(--gold-bright) !important;
background: transparent !important;
border-color: rgba(var(--gold-rgb),.45) !important; }
/* ============================================================
下拉菜单视觉规格统一（按主流设计系统的 Menu 规范）
· 项内边距 10/12，标题 15px 用正文色，副题 11.5px 用次要色
· 项之间用 1px 极淡分隔线（比纯空白更清晰，又不显重）
· 首尾项圆角与容器一致，避免方角溢出
============================================================ */
.nav-more-list { padding: 6px; }
.nav-more-list a { padding: 10px 12px; border-radius: 9px; }
.nav-more-list a + a { border-top: 1px solid rgba(var(--gold-rgb),.07); border-radius: 0; }
.nav-more-list a:first-child { border-radius: 9px 9px 0 0; }
.nav-more-list a:last-child { border-radius: 0 0 9px 9px; }
.nav-more-list a:only-child { border-radius: 9px; }
.nm-title { font-size: 15px; line-height: 1.35; letter-spacing: .4px;
color: var(--text); font-weight: 400; }
.nm-sub { font-size: 11.5px; line-height: 1.5; margin-top: 3px;
color: rgba(154,148,136,.66); letter-spacing: 0; }
.nav-more-list a:hover { background: rgba(var(--gold-rgb),.1); }
.nav-more-list a:hover .nm-title { color: var(--gold-bright); }
.nav-more-list a.active { background: rgba(var(--gold-rgb),.13); }
.nav-more-list a.active .nm-title { color: var(--gold-bright); }
/* ============================================================
导航「更多」下拉 · 最终版
改造要点（对照用户反馈）：
① 文字统一用鎏金色系（与导航栏一致），不再用灰白 --text
② 标题与副题全部居中
③ 与「更多」按钮协调：间距 6px + 指向三角 + 双bez嵌套
④ 长列表按类目分组，带分组标题
============================================================ */
/* 外层 shell：淡底 + 发丝描边 + 内边距（双bez的第一层） */
.nav-more-list {
padding: 7px !important;
border-radius: 14px !important;
background: rgba(255,255,255,.028) !important;
border: 1px solid rgba(var(--gold-rgb),.2) !important;
box-shadow: 0 20px 48px rgba(10,23,39,.7) !important;
}
/* 内层 core：深底 + inset 高光（第二层，同心圆角 = 14 - 7） */
.nav-more-list::before {
content: "";
position: absolute; inset: 7px;
border-radius: 8px;
background: linear-gradient(180deg, rgba(12,26,42,.92), rgba(9,20,33,.96));
box-shadow: var(--shadow-inset-highlight);
pointer-events: none; z-index: -1;
}
.nav-more-list { position: absolute; }
.nav-more-list > * { position: relative; z-index: 1; }
/* 指向「更多」按钮的鎏金三角 */
.nav-more-list::after {
content: "";
position: absolute;
top: -5px;
left: var(--nm-caret-x, 50%);
transform: translateX(-50%) rotate(45deg);
width: 9px; height: 9px;
background: rgba(255,255,255,.028);
border-left: 1px solid rgba(var(--gold-rgb),.24);
border-top: 1px solid rgba(var(--gold-rgb),.24);
border-radius: 2px 0 0 0;
z-index: 2;
}
.nav-more-list.flip::after {
top: auto; bottom: -5px;
border-left: none; border-top: none;
border-right: 1px solid rgba(var(--gold-rgb),.24);
border-bottom: 1px solid rgba(var(--gold-rgb),.24);
border-radius: 0 0 2px 0;
}
/* 分组标题 */
/* 2026-11-03 P1-1：组间距 5px → 12px（用户验收要求，9 组展开时不挤成一坨） */
.nm-group + .nm-group { margin-top: 12px;
border-top: 1px solid rgba(var(--gold-rgb),.1); padding-top: 5px; }
.nm-gname { font-size: 11px; letter-spacing: 3px; text-indent: 3px;
color: rgba(var(--gold-rgb),.5); text-align: center;
padding: 5px 0 4px; }
/* 项：文字居中 + 鎏金配色（与导航栏一致） */
.nav-more-list a {
display: block; padding: 8px 12px !important;
border-radius: 7px !important; border-top: none !important;
text-align: center;
transition: background .16s var(--ease-out), color .16s var(--ease-out);
}
.nav-more-list a:hover { background: rgba(var(--gold-rgb),.12) !important; }
.nav-more-list a.active { background: rgba(var(--gold-rgb),.16) !important; }
/* 标题：与导航项同色系（未激活=导航 idle 金，悬停/激活=亮金） */
.nm-title { display: block; font-size: 15px !important; line-height: 1.4;
letter-spacing: .6px; color: var(--gold) !important; font-weight: 400;
text-align: center; transition: color .16s var(--ease-out); }
.nav-more-list a:hover .nm-title,
.nav-more-list a.active .nm-title { color: var(--gold-bright) !important; }
/* 副题：同色系但更暗更小 */
.nm-sub { display: block; font-size: 11px !important; line-height: 1.5;
margin-top: 2px; letter-spacing: .3px;
color: rgba(var(--gold-rgb),.42) !important; text-align: center;
white-space: normal !important; max-width: none !important; }
.nav-more-list a:hover .nm-sub { color: rgba(var(--gold-rgb),.68) !important; }
/* 滚动条：细，同色系 */
.nav-more-list { scrollbar-width: thin;
scrollbar-color: rgba(var(--gold-rgb),.3) transparent; }
.nav-more-list::-webkit-scrollbar { width: 5px; }
.nav-more-list::-webkit-scrollbar-thumb {
background: rgba(var(--gold-rgb),.28); border-radius: 5px; }
/* ============================================================
导航统一配色变量（此前只有引用没有定义，导致下拉标题颜色失效）
============================================================ */
:root { --nav-idle: var(--gold); }
.nav-links > a { color: var(--nav-idle); }
.nav-more-btn { color: var(--nav-idle) !important; }
.nm-title { color: var(--nav-idle) !important; }
/* ============================================================
导航配色 · 最终权威规则（放在文件最后，一次性压过前面所有冲突）
------------------------------------------------------------
背景：此前多轮追加导致 .nm-title / .nav-more-btn 各有 5 条以上
互相冲突的规则，最终生效的仍是旧的 var(--text) 灰白。
按 LESSONS.md「C2 多版本规则互相覆盖」，这里不再逐条修补，
而是用一条末尾规则统一裁决。
规则：
· 未激活（导航项 / 更多按钮 / 下拉标题）→ --nav-idle（鎏金主色）
· 悬停、当前页 → --gold-bright（亮金）
· 副题 → 同色系降透明度
============================================================ */
/* 2026-10-25 双主题：原此处 `:root { --nav-idle: var(--gold) !important; }`
与 2324 行同名声明重复，且 !important 会压住主题块对 --nav-idle 的覆盖。
删掉这条重复声明，变量仍由 2324 行定义、随 --gold 自动跟随主题。 */
.nav-links > a,
.nav-more-btn,
.nav-more-list .nm-title {
color: var(--nav-idle) !important;
}
.nav-links > a:hover,
.nav-more-btn:hover,
.nav-more-list a:hover .nm-title,
.nav-links > a.active,
.nav-more.active .nav-more-btn,
.nav-more.open .nav-more-btn,
.nav-more-list a.active .nm-title {
color: var(--gold-bright) !important;
}
.nav-more-list .nm-sub { color: rgba(var(--gold-rgb),.46) !important; }
.nav-more-list a:hover .nm-sub,
.nav-more-list a.active .nm-sub { color: rgba(var(--gold-bright-rgb),.78) !important; }
/* 副题不再截断，居中，字号统一 */
.nav-more-list .nm-sub { white-space: normal !important; max-width: none !important;
text-align: center !important; font-size: 11px !important; }
.nav-more-list .nm-title { text-align: center !important; }
/* ============================================================
导航配色 · 唯一裁决（文件末尾，覆盖此前一切）
实测：导航项 = rgb(230,200,136) = var(--gold-bright)（亮金）
统一到这支金：导航项 / 更多按钮 / 下拉标题 全部同色；
悬停与当前页只在"背景 + 描边"上区分，不改文字颜色 ——
这样永不出现"看着不一样"的情况。
============================================================ */
:root { --nav-idle: var(--gold-bright) !important; }
.nav-links > a,
.nav-links > a.active,
.nav-more-btn,
.nav-more.active .nav-more-btn,
.nav-more.open .nav-more-btn,
.nav-more-list .nm-title,
.nav-more-list a.active .nm-title,
.nav-more-list a:hover .nm-title {
color: var(--gold-bright) !important;
}
/* 悬停 / 当前页：只改底色与描边 */
.nav-links > a:hover { background: rgba(var(--gold-rgb),.1) !important; }
.nav-links > a.active,
.nav-more.active .nav-more-btn,
.nav-more.open .nav-more-btn {
background: rgba(var(--gold-rgb),.12) !important;
border-color: rgba(var(--gold-rgb),.5) !important;
}
.nav-more-list a:hover { background: rgba(var(--gold-rgb),.12) !important; }
.nav-more-list a.active { background: rgba(var(--gold-rgb),.16) !important; }
.nav-more-list .nm-sub { color: rgba(var(--gold-bright-rgb),.5) !important; }
.nav-more-list a:hover .nm-sub,
.nav-more-list a.active .nm-sub { color: rgba(var(--gold-bright-rgb),.82) !important; }
/* ============================================================
六爻卦盘（第①层结构）+ 断语规则库（第②层断语）
------------------------------------------------------------
层级关系（skill: primary-vs-reference）：
· 六神属参考层 → 刻意做暗、做小
· 干支六亲旺衰属主判层 → 用正文色
· 断语按 delta 正负着色，但只用金色深浅 + 极淡暖红（品牌规范）
============================================================ */
/* P4：六爻盘整体加一层卡面，与解读卡（.result-card）同一视觉语言。
两层结构：外层是"卡"，内层 .ly-table 是"表"（自带更细的框），不是重复描边。
注意：加了 18px 内边距后内层宽度由 440 → 404px，.ly-row 的 1fr 列只剩约 74px，
标签会自动换行 —— 改这里必须跑 tools/diag_gua_frames.js 复核列宽。 */
.ly-wrap { margin-top: 14px;
padding: 16px 18px 18px; border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01));
box-shadow: var(--float-shadow); }
.ly-head { font-family: var(--serif); font-size: 15px; color: var(--gold-bright);
letter-spacing: 1px; text-align: center; margin-bottom: 5px; }
.ly-meta { font-size: 12px; color: var(--text-dim); text-align: center;
letter-spacing: .5px; margin-bottom: 10px;
font-variant-numeric: tabular-nums; }
.ly-table { border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
background: rgba(255,255,255,.018); }
.ly-row { display: grid;
grid-template-columns: 42px 62px 34px 46px 44px 46px 1fr;
align-items: center; gap: 6px; padding: 7px 10px;
border-top: 1px solid rgba(var(--gold-rgb),.07);
font-size: 13px; font-variant-numeric: tabular-nums; }
.ly-row:first-child { border-top: none; }
.ly-row.is-dong { background: rgba(var(--gold-rgb),.07); }
.ly-bian { background: rgba(var(--gold-rgb),.035); font-size: 12px; }
.ly-bian .ly-arrow { color: var(--gold-dim); text-align: center; }
.ly-shen { font-size: 11px; color: rgba(154,148,136,.55); } /* 参考层：做暗 */
.ly-sym { color: var(--gold-dim); letter-spacing: -1px; font-size: 12px; }
.ly-pos { font-size: 11px; color: var(--text-dim); }
.ly-zhi { color: var(--text); }
.ly-zhi em { font-style: normal; font-size: 10.5px; color: var(--gold-dim);
margin-left: 2px; }
.ly-qin { color: var(--gold-bright); font-size: 12.5px; }
.ly-wang { font-size: 12px; color: var(--text-dim); }
.ly-wang em { font-style: normal; font-size: 10.5px;
color: rgba(154,148,136,.6); margin-left: 2px; }
.ly-huai { font-size: 12px; color: var(--text-dim); }
.ly-huai.good { color: var(--gold-bright); }
.ly-huai.bad { color: var(--bad, #B26A5A); }
.ly-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.ly-tag { font-style: normal; font-size: 10px; padding: 1px 5px; border-radius: 4px;
background: rgba(var(--gold-rgb),.12); color: var(--gold-dim); letter-spacing: .5px; }
.ly-tag.shi { background: rgba(var(--gold-rgb),.28); color: var(--gold-bright); }
.ly-tag.ying { background: rgba(var(--gold-rgb),.16); }
.ly-tag.dong { background: rgba(var(--gold-rgb),.32); color: #0A1727; font-weight: 600; }
.ly-tag.kong { background: rgba(255,255,255,.06); color: rgba(154,148,136,.7); }
.ly-tag.po { background: rgba(178,106,90,.22); color: var(--bad, #B26A5A); }
.ly-tag.an { background: rgba(var(--gold-rgb),.2); }
.ly-tag.he { background: rgba(255,255,255,.05); color: var(--text-dim); }
.ly-cap { display: inline-block; min-width: 54px; font-size: 11px;
letter-spacing: 2px; color: var(--gold-dim); }
.ly-ys, .ly-chain, .ly-yq { font-size: 12.5px; color: var(--text);
line-height: 1.9; padding: 5px 0; border-top: 1px solid rgba(var(--gold-rgb),.08); }
.ly-dim { color: rgba(154,148,136,.75); font-size: 12px; }
/* ── 第②层：断语 ── */
.ly-judge { margin-top: 12px; border-top: 1px solid rgba(var(--gold-rgb),.14);
padding-top: 10px; }
.ly-jhead { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.ly-verdict { font-family: var(--serif); font-size: 17px; letter-spacing: 2px;
padding: 2px 12px; border-radius: 8px; border: 1px solid rgba(var(--gold-rgb),.35);
color: var(--gold-bright); }
.ly-verdict.v-需留意, .ly-verdict.v-当心 { color: var(--bad, #B26A5A);
border-color: rgba(178,106,90,.4); }
.ly-verdict.v-平 { color: var(--text-dim); border-color: var(--line); }
/* 2026-11-04 需留意：面板整体 text-align:center，.ly-rtext 是 inline span 时
text-align:left 不生效，断语会变成居中短句的纵向堆叠（用户："竖排是不对的"）。
改成 flex 条目：序号列 + 左对齐正文，行距沿用既有 line-height 与 padding。 */
.ly-rule { display: flex; align-items: baseline; gap: 8px;
text-align: left; padding: 6px 0;
border-top: 1px solid rgba(var(--gold-rgb),.06); }
.ly-rule:first-of-type { border-top: none; }
.ly-rno { flex: 0 0 auto; min-width: 1.4em; text-align: right;
font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ly-rtext { flex: 1 1 auto; min-width: 0;
font-size: 13px; color: var(--text); line-height: 1.8;
text-align: left; }
.ly-src { font-size: 10.5px; color: rgba(154,148,136,.68); white-space: nowrap;
text-decoration: none; border-bottom: 1px dotted rgba(154,148,136,.45);
justify-self: end; max-width: 148px; overflow: hidden; text-overflow: ellipsis; }
.ly-src:hover { color: var(--gold-bright); border-bottom-color: rgba(217,188,122,.6); }
.ly-notice { margin-top: 10px; font-size: 12px; line-height: 1.9;
color: rgba(178,106,90,.92); background: rgba(178,106,90,.07);
border-left: 2px solid rgba(178,106,90,.4); border-radius: 8px;
padding: 9px 12px; text-align: left; }
@media (max-width: 720px) {
.ly-row { grid-template-columns: 34px 52px 1fr 40px 34px; font-size: 12px; }
.ly-row .ly-pos, .ly-row .ly-wang { display: none; }
}
/* ============================================================
算卦复盘（老师傅的自我进化入口）
------------------------------------------------------------
设计意图：让"算不准"这件事有地方落脚，并且强制分清原因。
归因选项按"该改哪里"分组着色：
· 改代码（算错）→ 暖红
· 改规则库（解错/规则缺/义变/应期偏）→ 鎏金
· 不改（外力/未明）→ 灰
============================================================ */
.evo-mask { position: fixed; inset: 0; z-index: var(--z-modal, 1000);
background: rgba(6,14,24,.72); backdrop-filter: blur(6px);
display: flex; align-items: center; justify-content: center; padding: 20px; }
.evo-box { width: min(560px, 94vw); max-height: 88vh; overflow-y: auto;
background: linear-gradient(180deg, #0e2036, #0a1727);
border: 1px solid rgba(var(--gold-rgb),.28); border-radius: 16px;
padding: 18px 20px 20px; box-shadow: 0 24px 64px rgba(6,14,24,.8);
-webkit-overflow-scrolling: touch;
transition: transform .3s cubic-bezier(.32,.72,0,1), opacity .3s; }
.evo-mask.saved .evo-box { transform: scale(.97); opacity: .5; }
.evo-head { display: flex; justify-content: space-between; align-items: center;
font-family: var(--serif); font-size: 18px; color: var(--gold-bright);
letter-spacing: 2px; margin-bottom: 6px; }
.evo-x { font-style: normal; cursor: pointer; color: var(--gold-dim);
font-size: 15px; padding: 4px 8px; border-radius: 8px;
transition: background .18s var(--ease-out), color .18s var(--ease-out); }
.evo-x:hover { background: rgba(var(--gold-rgb),.14); color: var(--gold-bright); }
.evo-sub { font-size: 12.5px; color: rgba(154,148,136,.85); line-height: 1.9;
margin: 0 0 12px; text-align: left; }
.evo-id { color: var(--gold-dim); font-variant-numeric: tabular-nums; }
.evo-lab { display: block; font-size: 12px; letter-spacing: 2px;
color: var(--gold-dim); margin: 12px 0 6px; }
.evo-tip { letter-spacing: 0; color: rgba(154,148,136,.6); font-size: 11.5px; }
.evo-box textarea { width: 100%; box-sizing: border-box; resize: vertical;
background: rgba(255,255,255,.035); border: 1px solid var(--line);
border-radius: 10px; padding: 9px 12px; color: var(--text);
font-family: var(--sans); font-size: 13.5px; line-height: 1.8; outline: none;
transition: border-color .18s var(--ease-out); }
.evo-box textarea:focus { border-color: rgba(var(--gold-rgb),.5); }
.evo-seg { display: flex; gap: 8px; }
.evo-seg .seg-btn { flex: 1; padding: 8px 0; border-radius: 9px;
background: rgba(255,255,255,.04); border: 1px solid var(--line);
color: var(--text-dim); font-size: 14px; cursor: pointer;
transition: background .18s var(--ease-out), color .18s var(--ease-out),
border-color .18s var(--ease-out); }
.evo-seg .seg-btn:hover { border-color: rgba(var(--gold-rgb),.4); }
.evo-seg .seg-btn.active { background: rgba(var(--gold-rgb),.18);
border-color: rgba(var(--gold-rgb),.6); color: var(--gold-bright); }
.evo-causes { display: grid; gap: 6px; }
.evo-cause { display: block; width: 100%; text-align: left; cursor: pointer;
padding: 8px 12px; border-radius: 10px;
background: rgba(255,255,255,.028); border: 1px solid var(--line);
transition: background .18s var(--ease-out), border-color .18s var(--ease-out); }
.evo-cause b { display: block; font-size: 13.5px; color: var(--text);
font-weight: 400; letter-spacing: .3px; }
.evo-cause em { display: block; font-style: normal; font-size: 11px;
color: rgba(154,148,136,.65); margin-top: 2px; line-height: 1.6; }
.evo-cause:hover { background: rgba(var(--gold-rgb),.09); border-color: rgba(var(--gold-rgb),.3); }
.evo-cause.active { background: rgba(var(--gold-rgb),.16); border-color: rgba(var(--gold-rgb),.55); }
.evo-cause.active b { color: var(--gold-bright); }
.evo-btns { display: flex; gap: 10px; margin-top: 16px; }
.evo-ok { flex: 2; padding: 11px 0; border-radius: 11px; cursor: pointer;
background: linear-gradient(180deg, #d8b96f, #b8944a); border: none;
color: #0a1727; font-size: 15px; font-weight: 600; letter-spacing: 2px;
transition: transform .18s var(--ease-out), filter .18s var(--ease-out); }
.evo-ok:hover { filter: brightness(1.06); }
.evo-ok:active { transform: translateY(1px); }
.evo-cancel { flex: 1; padding: 11px 0; border-radius: 11px; cursor: pointer;
background: transparent; border: 1px solid var(--line); color: var(--text-dim);
font-size: 14px; transition: border-color .18s var(--ease-out); }
.evo-cancel:hover { border-color: rgba(var(--gold-rgb),.4); color: var(--text); }
/* ── 看板 ── */
.evo-dash { margin-top: 18px; border-top: 1px solid rgba(var(--gold-rgb),.14);
padding-top: 12px; }
.evo-dcap { font-size: 11.5px; letter-spacing: 2.5px; color: var(--gold-dim);
margin: 12px 0 6px; }
.evo-stats { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px;
color: var(--text-dim); }
.evo-stats b { color: var(--gold-bright); font-variant-numeric: tabular-nums;
margin-left: 3px; }
.evo-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px;
align-items: baseline; font-size: 12.5px; padding: 5px 0;
border-top: 1px solid rgba(var(--gold-rgb),.06); }
.evo-row span { color: var(--text); text-align: left; }
.evo-row b { color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.evo-row em { font-style: normal; font-size: 11px; color: rgba(154,148,136,.6);
white-space: nowrap; }
.evo-pat { padding: 8px 11px; border-radius: 10px; margin-bottom: 6px;
background: rgba(255,255,255,.028); border-left: 2px solid rgba(var(--gold-rgb),.3); }
.evo-pat.ready { background: rgba(var(--gold-rgb),.1);
border-left-color: var(--gold-bright); }
.evo-pat b { display: block; font-size: 12.5px; color: var(--text);
font-weight: 400; line-height: 1.7; }
.evo-pat.ready b { color: var(--gold-bright); }
.evo-pat em { display: block; font-style: normal; font-size: 11.5px;
color: rgba(154,148,136,.8); margin-top: 3px; line-height: 1.7; }
.evo-pat u { display: block; text-decoration: none; font-size: 10.5px;
color: rgba(var(--gold-rgb),.5); margin-top: 3px; font-variant-numeric: tabular-nums; }
/* ============================================================
第一批界面修复
============================================================ */
/* ① 去掉左右两块黑影（.ink 径向渐变圆）
实测证据：.ink-1 位于 left:-14vw / top:26vh，46vw 见方，
filter:blur(3px) + 金色 5% 径向渐变 —— 正是"左中下方那块黑影"。
.ink-2 在右上同理。两者纯装饰，去掉后背景是干净的藏青底。 */
.ink, .ink-1, .ink-2 { display: none !important; }
/* ③ 搜索框去掉最前面的圆圈图标（放大镜）
该图标由内联 SVG 或 ::before 提供，两种都清掉 */
.nav-search .ns-ic,
.nav-search svg.ns-ic,
#navSearchBox > svg:first-child { display: none !important; }
.nav-search::before, .nav-search-box::before { content: none !important; }
#navSearchInput { padding-left: 14px !important; }
.ns-icon { display: none !important; }
/* ④ 「更多」下拉下半部分补背景
原来 ::before 只覆盖 inset:7px 之内，列表滚动到底部时
后面的项落在 ::before 之外，就没有深底了。
改为让整个列表容器自身带深底，::before 只做内层高光。 */
.nav-more-list {
background: linear-gradient(180deg, rgba(12,26,42,.97), rgba(9,20,33,.99)) !important;
}
.nav-more-list::before {
background: none !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}
/* 滚动容器底部留一点内边距，最后一项不贴边 */
.nav-more-list { padding-bottom: 9px !important; }
/* ============================================================
底部法律弹层（免责声明 / 隐私说明）
------------------------------------------------------------
实测根因：openLegal() 一直在正常工作，点一下确实会创建 .legal-mask，
但 CSS 里**根本没有 .legal-mask / .legal-box 的规则** ——
所以弹层没有定位、没有背景、没有 z-index，肉眼完全看不见。
（此前误判为"点击无反应"，实际是"弹了但无样式"。）
============================================================ */
.legal-mask {
position: fixed; inset: 0; z-index: var(--z-modal, 1000);
display: flex; align-items: center; justify-content: center;
padding: 24px;
background: rgba(6, 14, 24, .74);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
opacity: 0; visibility: hidden;
transition: opacity .26s var(--ease-out), visibility .26s;
}
.legal-mask.open { opacity: 1; visibility: visible; }
.legal-box {
/* 用户 2026-10-11（第八批）："这个框再窄点，底下的文字正好都包裹，左右都有点空隙；免责声明居中" */
width: min(600px, 92vw);
max-height: min(76vh, 640px);
display: flex; flex-direction: column;
background: linear-gradient(180deg, #0e2036, #0a1727);
border: 1px solid rgba(var(--gold-rgb), .26);
border-radius: 16px;
box-shadow: 0 10px 26px rgba(var(--shadow-rgb), .40);
transform: translateY(12px) scale(.985);
transition: transform .3s cubic-bezier(.32, .72, 0, 1);
}
.legal-mask.open .legal-box { transform: none; }
.legal-head {
flex: 0 0 auto;
/* 标题居中（用户 2026-10-11 第八批："免责声明居中"）；✕ 改为绝对定位贴右，不再把标题挤到左边 */
position: relative;
display: flex; align-items: center; justify-content: center;
text-align: center;
padding: 16px 44px 12px;
font-family: var(--serif); font-size: 18px; letter-spacing: 2px;
color: var(--gold-bright);
border-bottom: 1px solid rgba(var(--gold-rgb), .14);
}
.legal-x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
cursor: pointer; font-size: 15px; color: var(--gold-dim);
padding: 4px 9px; border-radius: 8px;
transition: background .18s var(--ease-out), color .18s var(--ease-out); }
.legal-x:hover { background: rgba(var(--gold-rgb), .14); color: var(--gold-bright); }
.legal-body {
flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding: 16px 22px 22px;
}
.legal-body p {
margin: 0 0 13px; font-size: 13.5px; line-height: 2.0;
/* 正文居中、左右留白（用户 2026-10-11 第八批：
"底下的文字正好都包裹，左右都有点空隙"） */
color: var(--text); text-align: center;
max-width: none;
}
.legal-body p:last-child { margin-bottom: 0; }
/* 条文编号高亮（正文以「一、」「二、」开头） */
.legal-body p::first-line { color: var(--text); }
.legal-body::-webkit-scrollbar { width: 6px; }
.legal-body::-webkit-scrollbar-thumb {
background: rgba(var(--gold-rgb), .3); border-radius: 6px; }
/* 塔罗左栏牌列：去掉重复标题后，容器自己给上边距，避免贴顶 */
#tarotDrawn { padding-top: 6px; }
#tarotDrawn .tarot-cards:first-child { margin-top: 0; }
/* ============================================================
补丁143：时间选择器高亮框 + 城市下拉高度
============================================================ */
/* ① 时间选择器：高亮框固定在可见窗口中心，不随滚动移动
结构：.dt-wheel-wrap（定位父级，不滚动）
├── .dt-line ← 绝对定位，固定在中心
└── .dt-wheel ← 滚动容器
之前 .dt-line 在 .dt-wheel 内部，滚动时跟着滚走（实测偏出 3476px）。 */
.dt-wheel-wrap { position: relative; height: 236px; }
.dt-wheel-wrap .dt-line {
position: absolute; left: 8px; right: 8px;
top: 50%; height: 46px; transform: translateY(-50%);
border-top: 1px solid rgba(var(--gold-rgb), .28);
border-bottom: 1px solid rgba(var(--gold-rgb), .28);
background: linear-gradient(180deg,
rgba(var(--gold-rgb),.10), rgba(var(--gold-rgb),.03) 45%, rgba(var(--gold-rgb),.10));
border-radius: 10px; pointer-events: none; z-index: 1;
}
.dt-wheel-wrap .dt-wheel { height: 100%; }
/* 避免旧的 .dt-line 规则（若仍存在）产生第二个框 */
.dt-wheel > .dt-line { display: none !important; }
/* ② 城市下拉：40 个城市不能全展开，给最大高度 + 滚动 */
.smooth-drop {
max-height: min(60vh, 420px) !important;
overflow-y: auto !important;
overscroll-behavior: contain;
scrollbar-width: thin;
scrollbar-color: rgba(var(--gold-rgb),.32) transparent;
}
.smooth-drop::-webkit-scrollbar { width: 6px; }
.smooth-drop::-webkit-scrollbar-thumb {
background: rgba(var(--gold-rgb),.3); border-radius: 6px; }
.smooth-drop::-webkit-scrollbar-track { background: transparent; }
/* 城市这类长列表：项高略压缩，一屏能看到更多 */
.smooth-drop .sd-item { padding-top: 8px; padding-bottom: 8px; }
/* ============================================================
B144 塔罗铺满阶段：底部不得有任何文字
用户要求「铺满时底下不得有任何文字」，抽牌飞行期间给 body 挂
.tarot-staging，页脚那段声明文字整体让位；动画收尾 clearTarotStage()
会摘掉这个类，页脚自动回来（淡入的 transition 写在 .footer 本体上）。
============================================================ */
body.tarot-staging .footer {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* ---- P1 客户档案：卦例搜索框 + 客户/标签样式 ---- */
.hist-search { width: 100%; box-sizing: border-box; margin: 2px 0 12px; padding: 10px 14px;
border-radius: 10px; border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.04); color: inherit; font-size: 14px; outline: none; letter-spacing: 1px; }
.hist-search:focus { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(var(--gold-rgb),0.15); }
.hist-search::placeholder { color: var(--text-dim, #7d8b9a); }
.hist-client { display: inline-block; margin-left: 10px; padding: 1px 9px; border-radius: 10px;
background: rgba(var(--gold-rgb),0.14); color: var(--gold); font-size: 12px; letter-spacing: 1px; }
.hist-tags { background: rgba(120,160,200,0.14); color: #9fc0dd; }
.hist-client-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0 4px;
padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,0.03);
border: 1px dashed rgba(var(--gold-rgb),0.3); }
.hist-client-name, .hist-client-tags { flex: 1 1 140px; min-width: 120px; padding: 7px 10px; border-radius: 8px;
border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.04); color: inherit; font-size: 13px; outline: none; }
.hist-client-name:focus, .hist-client-tags:focus { border-color: var(--gold); }
.hist-client-save { cursor: pointer; padding: 7px 14px; border-radius: 8px; font-size: 13px;
border: 1px solid rgba(var(--gold-rgb),0.5); background: rgba(var(--gold-rgb),0.12); color: var(--gold); }
.hist-client-save:hover { background: rgba(var(--gold-rgb),0.26); }
/* ============================================================
2026-10-10 用户反馈批次 · 唯一裁决段（本文末最后一条规则生效）
以下规则为最终口径，前面同名规则凡与此冲突者以此为准。
============================================================ */
/* ① 三栏横向构图：中栏内容右移 30px，让「左栏内容↔中间主视觉」与
「中间主视觉↔右栏竖排文案」两处间隙相等。
根因：左栏内容是满栏宽（右边缘贴轨道），右栏竖排文案窄（约 172px）居中于轨道，
两侧视觉留白天然不等（实测 1600 宽：左 68 / 右 127）。
不用 padding/transform：padding 会把塔罗环等容器挤小，transform 会新建
fixed 包含块；position:relative 只改渲染位置，不动布局盒。窄屏（≤1100px）不适用。 */
@media (min-width: 1101px) {
.stage-center { position: relative; left: 30px; }
}
/* ② 卦词记录抽屉标题：加大并居中（用户：这字再大点、居中） */
.drawer-head { position: relative; justify-content: center; }
.drawer-head span:first-child { font-size: 24px; letter-spacing: 8px; text-indent: 8px; text-align: center; }
/* 用独立的 translate 属性做垂直居中：把 transform 留给 hover 的旋转（避免互相覆盖） */
.drawer-head .drawer-close { position: absolute; right: 22px; top: 50%; translate: 0 -50%; }
/* ③ 卦例条目正文稍微再大一档（配合标题，整页阅读更清楚） */
.hist-item .hist-time { font-size: 13.5px; }
.hist-item .hist-q { font-size: 16.5px; }
.hist-item .hist-g { font-size: 17px; }
/* ④ 数字卦第三格「算出来的动爻数」：虚线框与手输两格区分
（右上角「算」角标已按用户 2026-10-13 要求去掉：「第三个框右上角的算字去掉」） */
.nv-tile.calc { position: relative; border-style: dashed; }
/* ============================================================
2026-10-10 夜 · 用户第三批反馈（本段在文件最末 = 唯一裁决，前面相关规则作废）
============================================================ */
/* ① 左栏信息卡：去掉黑色外投影 —— 用户："每个界面左侧信息后面都有黑影，去掉"。
实测证据：把卡片 box-shadow 关掉后，卡片缝隙亮度 12.3 → 29.0（= 页面底色 29），
黑影就是 --float-shadow 里那两条大黑投影（0 14px 34px / 0 30px 60px rgba(var(--shadow-rgb),…)）。
这里只在左栏作用域内把外投影换成极轻一层：保留"浮起"的层次，但不再发黑。
（同类历史问题：更早的 .ink 径向渐变黑斑，见本文件 2507 行那段的记录） */
#inputCol {
--float-shadow: inset 0 1px 0 rgba(255,255,255,0.055),
inset 0 0 26px rgba(var(--gold-rgb),0.035),
0 1px 3px rgba(var(--shadow-rgb),0.16),
0 0 30px rgba(var(--gold-rgb),0.03);
}
/* ② 卦辞面板顶部夹紧 —— 用户："中间的东西扩大往上走了，卦辞在顶部就看不到了"。
中间主视觉被放大/上移（中间的「缩放/上下」滑杆、或停靠上边距调负）时，
JS 算出的 --gua-top 会变成负数，整块卦辞跑出屏幕上方。
这里给 top 加下限 76px（= 导航下沿）+ 高度随可用空间收缩，标题永远看得见。
注意：夹紧只影响"跑出去"的极端值，正常情况（--gua-top ≥ 76）与原来完全一致。 */
.result-slide-in {
top: max(76px, var(--gua-top, 178px));
height: min(var(--gua-h, 100vh), calc(100vh - max(76px, var(--gua-top, 178px)) - 66px));
}
#tarotDrawn { top: max(76px, var(--tcards-top, calc(var(--gua-top, 178px) - 12px))) !important; }
.tarot-cards { max-height: calc(100vh - max(76px, var(--gua-top, 178px)) - 90px); }
/* ③ 校准进度：整组按"最长那一行"定宽后居中（原每行固定 172px、内容左对齐 → 看着偏左） */
.calib-rows { display: grid; grid-template-columns: 16px auto; column-gap: 8px;
width: max-content; max-width: 100%; margin: 0 auto; }
.calib-box .calib-row { width: auto; max-width: none; margin: 0;
grid-template-columns: 16px auto; column-gap: 8px; }
/* ④ 连不上本地服务（服务没开）时的常驻提示条：见 app.js netWarn() */
#netWarn { position: fixed; left: 50%; translate: -50% 0; top: 78px; z-index: 9999;
display: flex; gap: 10px; align-items: baseline; max-width: 90vw;
padding: 12px 18px; border-radius: 12px; font-size: 14.5px; letter-spacing: .5px;
background: linear-gradient(180deg, #2A1D14, #1B1310); color: #F2DFA8;
border: 1px solid rgba(var(--gold-rgb),.45); box-shadow: 0 12px 30px rgba(var(--shadow-rgb),.5); }
#netWarn b { font-size: 15.5px; }
#netWarn span { color: #D8CDB6; }
/* ③ 校准进度（修订：上一段把 .calib-rows 写成 grid 会让四行被拆到两列 —— 作废）。
正确做法：容器 width:max-content 按"最长那一行"收窄、margin auto 居中，
行仍是块级 → 自动撑满容器宽 → 圆点在一条竖线上、整组内容居中。 */
.calib-rows { display: block; width: max-content; max-width: 100%; margin: 0 auto; }
/* ⑤ 塔罗「余 N 张」那摞已整体移除（用户 2026-10-11 第五批："左下角余多少张去掉，
不管阵牌是单张还是几张"）—— 未选中的牌在收尾动画里直接淡出。 */
/* ⑥ 商标上牌背（用户 2026-10-10："商标弄好后，给我放在塔罗牌的背面当图标"）。
原来牌背中心是一个 45° 的金色方块轮廓；现在改成"金色方块 + 中间的易字马"，
方块不转、里面那张图也不转（转 45° 的方块留着做外框，图标保持正立才好认）。 */
.r22-back-gem { display: grid; place-items: center; }
.r22-back-gem .r22-back-mark { width: 130%; max-width: none; height: auto;
transform: rotate(-45deg); display: block;
filter: drop-shadow(0 0 6px rgba(var(--gold-rgb),.35)); }
/* ============================================================
第五批（2026-10-11）唯一裁决块 —— 卦辞面板 / 六爻盘 / 解读字号上调
------------------------------------------------------------
用户原话：「这里的和卦辞出现的字体啥的都太小……没有的都给我放大，布局协调」
按 RUNBOOK 覆盖规范：本段放在文件最末尾，前面多代规则里的同名字号以本段为准
（只动大小与列宽，不动对齐与配色；正文仍居中，见 .result-slide-in 的既有规则）。 */
.gua-name-big { font-size: 38px; letter-spacing: 10px; }
.gua-ci { font-size: 19.5px; line-height: 2.05; }
.result-slide-in p.gua-ci { font-size: 19.5px; }
.gua-sub { font-size: 16.5px; }
.result-slide-in p.gua-sub { font-size: 16.5px; }
.gua-label { font-size: 13.5px; }
.result-slide-in p.gua-label { font-size: 13.5px; }
.gua-steps li { font-size: 15px; }
/* 六爻盘：字号 +1~1.5px、固定列同步加宽（否则 7 列在窄面板里会挤到换行；
改完跑 tools/diag_gua_frames.js 复核列宽） */
.ly-head { font-size: 17px; }
.ly-meta { font-size: 13px; }
/* 只对 >720px 生效：小屏的 @media (max-width:720px) 精简列不能被我这段反压 */
@media (min-width: 721px) {
.ly-row { grid-template-columns: 46px 68px 38px 50px 48px 50px 1fr; font-size: 14.5px; }
}
.ly-bian { font-size: 13px; }
.ly-shen { font-size: 12px; }
.ly-sym { font-size: 13px; }
.ly-pos { font-size: 12px; }
.ly-qin { font-size: 14px; }
.ly-wang { font-size: 13.5px; }
.ly-huai { font-size: 13.5px; }
.ly-tag { font-size: 11px; }
.ly-cap { font-size: 12px; }
.ly-ys, .ly-chain, .ly-yq { font-size: 14px; }
.ly-dim { font-size: 13px; }
.ly-rtext { font-size: 14.5px; }
.ly-src { font-size: 11.5px; }
.ly-notice { font-size: 13px; }
.ly-verdict { font-size: 19px; }
/* ============================================================
第八批（2026-10-11 用户反馈）
① 顶部搜索框改为「只展示不搜索」
② 右上角：卦词 / 论坛 / 登录注册（设置收进账号菜单）
============================================================ */
/* ① 展示态搜索框：不可点、不可输入、没有联想浮层 —— 只保留外观与提示文字 */
.nav-search-static { pointer-events: none; }
.nav-search-static input { cursor: default; }
.nav-search-static input::placeholder { color: rgba(154,148,136,.62); }
/* ② 右上角（.nav-side 已有样式，这里只补新增项） */
.nav-side .nav-account { color: var(--gold-bright); font-weight: 600; }
.nav-side .nav-account:hover { color: #F2DFA8; }
/* ---------- 本机账号弹层 ---------- */
.acct-mask { position: fixed; inset: 0; z-index: calc(var(--z-modal) + 30);
display: flex; align-items: center; justify-content: center;
background: rgba(6,14,24,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
opacity: 0; visibility: hidden; transition: opacity .26s var(--ease-out), visibility .26s; }
.acct-mask.open { opacity: 1; visibility: visible; }
.acct-box { position: relative; width: min(400px, 92vw);
background: linear-gradient(180deg, #10243a, #0a1727);
border: 1px solid rgba(var(--gold-rgb),.28); border-radius: 16px;
box-shadow: 0 10px 26px rgba(var(--shadow-rgb),.40);
padding: 22px 24px 20px; transform: translateY(12px) scale(.985);
transition: transform .3s cubic-bezier(.32,.72,0,1); }
.acct-mask.open .acct-box { transform: none; }
.acct-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.acct-tab { padding: 7px 20px; border-radius: 9px; cursor: pointer; font-size: 15px;
letter-spacing: 2px; color: var(--text-dim); border: 1px solid transparent;
transition: all .2s var(--ease-out); }
.acct-tab:hover { color: var(--gold-bright); }
.acct-tab.active { color: var(--gold-bright); border-color: rgba(var(--gold-rgb),.42);
background: rgba(var(--gold-rgb),.1); }
.acct-field { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.acct-field > span { flex: 0 0 44px; font-size: 13.5px; color: var(--gold-dim);
letter-spacing: 2px; text-align: right; }
.acct-field input { flex: 1 1 auto; height: 38px; padding: 0 12px; border-radius: 9px;
background: rgba(255,255,255,.04); border: 1px solid rgba(var(--gold-rgb),.28);
color: var(--text); font-size: 14px; outline: none; letter-spacing: .5px;
transition: border-color .2s var(--ease-out), background .2s var(--ease-out); }
.acct-field input:focus { border-color: rgba(var(--gold-rgb),.7); background: rgba(255,255,255,.06); }
.acct-err { min-height: 18px; margin: 2px 0 6px; font-size: 12.5px; color: #E39A8A;
text-align: center; letter-spacing: .5px; }
.acct-go { display: block; width: 100%; padding: 11px 0; border-radius: 10px; cursor: pointer;
font-family: var(--serif); font-size: 15px; font-weight: 700; letter-spacing: 4px;
color: #1a1408; border: 1px solid rgba(255,255,255,.32);
background: linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, #A5873F);
box-shadow: 0 4px 12px rgba(var(--shadow-rgb),.32); transition: filter .25s var(--ease); }
.acct-go:hover { filter: brightness(1.07); }
.acct-note { margin-top: 12px; font-size: 12px; line-height: 1.85; color: var(--text-dim);
text-align: center; }
/* ---------- 账号下拉菜单（点右上角账号名弹出） ---------- */
.acct-menu { position: fixed; top: 66px; right: 18px; z-index: calc(var(--z-modal) + 10);
min-width: 168px; padding: 6px; border-radius: 12px;
background: linear-gradient(180deg, rgba(18,35,54,.99), rgba(12,24,38,.99));
border: 1px solid rgba(var(--gold-rgb),.3);
box-shadow: 0 10px 24px rgba(var(--shadow-rgb),.38);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility .2s; }
.acct-menu.open { opacity: 1; visibility: visible; transform: none; }
.acct-menu-name { padding: 7px 11px 8px; font-size: 12.5px; color: var(--gold-dim);
letter-spacing: 1px; border-bottom: 1px solid rgba(var(--gold-rgb),.16); margin-bottom: 5px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-menu a { display: block; padding: 9px 11px; border-radius: 8px; font-size: 14px;
color: var(--text); text-decoration: none; letter-spacing: 1.5px;
transition: background .16s ease, color .16s ease; }
.acct-menu a:hover { background: rgba(var(--gold-rgb),.13); color: var(--gold-bright); }
/* ---------- 全局：输入框聚焦即隐藏占位提示 ----------
用户 2026-10-11 第八批："这个输入框，点了以后，里面就没有提示词才对，但还有"。
原生 placeholder 只在输入后才消失，这里让它一聚焦就隐形（失焦且为空时自动回来）。 */
input:focus::placeholder, textarea:focus::placeholder { color: transparent !important; }
/* ---------- 解梦面板：文字居中（用户 2026-10-11 第八批："文字居中，在周公解梦这里"）
现状：三项速览（核心意象/主要情绪/心理原型）的标签居中、值左对齐 →
用户看到的是"一半居中一半左对齐"，所以统一成居中。 ---------- */
.jm-fact { align-items: center; text-align: center; }
.jm-fact b { text-align: center; }
.jm-fact span { text-align: center; }
/* 免责声明/提示行也居中（用户第八批："下面的字，解梦为传统文化与心理学参考这些字居中"） */
.jm-warn { text-align: center; border-left: none; }
.float-panel .jm-warn { text-align: center; }
/* ---------- 删除警示框（第八批）：删除后无法恢复 + 左下角「以后不再提醒」 ---------- */
.cfm-mask { position: fixed; inset: 0; z-index: calc(var(--z-modal) + 40);
display: flex; align-items: center; justify-content: center;
background: rgba(6,14,24,.70); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
opacity: 0; visibility: hidden; transition: opacity .2s var(--ease-out), visibility .2s; }
.cfm-mask.open { opacity: 1; visibility: visible; }
.cfm-box { width: min(400px, 92vw); padding: 20px 22px 14px; border-radius: 14px;
background: linear-gradient(180deg, #14273f, #0C1A2A);
border: 1px solid rgba(178,106,90,.34);
box-shadow: 0 8px 22px rgba(var(--shadow-rgb),.40);
transform: translateY(10px) scale(.985); transition: transform .26s cubic-bezier(.32,.72,0,1); }
.cfm-mask.open .cfm-box { transform: none; }
.cfm-title { font-family: var(--serif); font-size: 16.5px; font-weight: 700; color: var(--gold-bright);
letter-spacing: 2px; text-align: center; margin-bottom: 8px; }
.cfm-desc { font-size: 13.5px; line-height: 1.9; color: var(--text-dim); text-align: center; }
.cfm-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(var(--gold-rgb),.12); }
.cfm-remember { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
color: var(--text-dim); cursor: pointer; letter-spacing: .5px; user-select: none; }
.cfm-remember input { width: 14px; height: 14px; accent-color: var(--gold); cursor: pointer; }
.cfm-btns { display: inline-flex; gap: 8px; margin-left: auto; }
.cfm-btn { padding: 7px 16px; border-radius: 9px; cursor: pointer; font-size: 13.5px;
letter-spacing: 2px; color: var(--text); background: rgba(255,255,255,.05);
border: 1px solid rgba(var(--gold-rgb),.26); transition: all .2s var(--ease-out); }
.cfm-btn:hover { border-color: rgba(var(--gold-rgb),.5); color: var(--gold-bright); }
.cfm-btn.danger { color: #E8A08C; border-color: rgba(178,106,90,.5); background: rgba(178,106,90,.12); }
.cfm-btn.danger:hover { color: #F3B7A3; border-color: rgba(178,106,90,.75); background: rgba(178,106,90,.2); }
/* 客户模式（师傅/客户模式）：设置已从导航收进账号菜单，
老的 `body.mode-client .nav-side a[data-mod=...]` 规则再也匹配不到 —— 补上新的落点。
2026-10-13：账号菜单里的「卦词记录」已删（卦辞记录在导航外，访客可见），
卦辞入口在客户模式下的显隐仍由上面 `body.mode-client .nav-side a[data-mod=history]` 负责。 */
body.mode-client #acctMenu a[data-act="settings"] { display: none !important; }
/* ============================================================
朱批纸本 · 全站主题层（2026-10-13 用户定稿「朱批版」）
纪律：本块只换主题不动布局；历史规则一律不删不改，
靠变量重定义 + 少量表面覆盖。基准样稿：theme-zhupi-preview.html
============================================================ */
:root {
--bg: #F7F3EC; --bg-2: #FCFAF6; --bg-3: #F2ECE1;
--bg-rgb: 247,243,236;
/* TD-038 P1-02：纸底上正文金统一压到 ≥4.5:1；装饰线仍用 --gold-rgb 的亮金 */
--gold: #7A6334; --gold-bright: #8A6E36; --gold-dim: #6B552B;
--gold-rgb: 168,137,78; --gold-bright-rgb: 185,155,94;
--shadow-rgb: 28,27,25;
--text: #1C1B19; --text-dim: #6B6660;
--line: rgba(var(--shadow-rgb),0.12);
--line-strong: rgba(var(--shadow-rgb),0.30);
--cinnabar: #B23A2E;
--cinnabar-dark: #8E2C22;
/* 这两层梯度里嵌的浅色 hex 也提成 token（--sf-page / 新增 --sf-float-a·b），
否则夜读只改了 --sf-* 却改不到「用 var(--float-bg) 的组件」——
典籍库整页就漏了（实测浅底压浅字）。 */
--sf-float-a: #F9F5EC;
--sf-float-b: #F4EEE2;
--float-bg: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.10)),
linear-gradient(160deg, var(--sf-page) 0%, var(--sf-float-a) 55%, var(--sf-float-b) 100%);
--float-shadow: inset 0 1px 0 rgba(255,255,255,0.75),
inset 0 0 22px rgba(168,137,78,0.03),
0 1px 3px rgba(var(--shadow-rgb),0.05),
0 5px 14px rgba(var(--shadow-rgb),0.07);
}
/* ---------- 表面 token（2026-10-25 新增，为深色主题铺路） ----------
问题：本层有 31 个写死的浅色 hex 散在 81 处 background 里（#FFFDF8 用了 24 次），
深色主题没法只靠改 --bg 生效，只能一条条追着覆盖 —— 那必然漏（实测漏了 .setpage，
夜读下变成浅字压浅底、对比度 1.3:1）。
做法：把这些 hex 提成「表面 token」，**默认值与原 hex 逐字相同**，
所以朱批纸本的观感零变化（这是可静态证明的：替换后每个 token 的默认值 = 原字面量）；
深色/更浅主题只重定义这批 token，不再需要逐元素覆盖。
命名：--sf-* = surface；后缀 a/b/c 表示同一处渐变里的起点/中点/终点，
-b 结尾 = bottom（渐变末端），不是「备用」。 */
:root {
--sf-white: #FFFFFF; /* 纯白：输入聚焦、卡面高光 */
--sf-hi: #FFFEFB; /* 次白 */
--sf-card: #FFFDF8; /* 卡片/浮层渐变起点（用得最多，24 处） */
--sf-page: #FDFBF6; /* 整页壳渐变起点 */
--sf-input: #FCFAF6; /* 输入框、下拉选项底 */
--sf-soft: #FBF8F2; /* 分享框等柔底 */
--sf-panel: #FBF7EF; /* 面板、教程正文块 */
--sf-cream: #FBF6EA; /* 米白块 */
--sf-fav: #FAF6EE; /* 收藏夹底 */
--sf-body-a: #F8F4EC; /* 页面渐变起点 */
--sf-float-b: #F7F1E6; /* 浮层渐变末端 */
--sf-hv-b: #F7F1E3; /* 悬停卡末端 */
--sf-cloud-b: #F7F0E2; /* 云同步卡末端 */
--sf-body-b: #F6F1E7; /* 页面渐变中点 */
--sf-page-b: #F6F0E5; /* 整页壳渐变末端 */
--sf-card-b: #F6F0E4; /* 卡片渐变末端（8 处） */
--sf-zhupi-b: #F6EFDC; /* 朱批栏末端 */
--sf-warn-b: #F6E3DA; /* 断网提示末端（暖红） */
--sf-select-b: #F5EFE2; /* 下拉框末端 */
--sf-btn: #F4EEE1; /* 浅色按钮底 */
--sf-face: #F4EDE0; /* 牌面/翻牌面（**深色主题也保持浅色**，它是「物件」不是「界面」） */
--sf-stage-b: #F3EEE5; /* 分享舞台格纹深格 */
--sf-skip: #F3EDE2; /* 跳转链接底 */
--sf-body-c: #F3EDE1; /* 页面渐变末端 */
--sf-tile-b: #F3ECDD; /* 导航磁贴末端 */
--sf-tile-b2: #F3ECDC; /* 磁贴末端（另一档） */
--sf-deep: #EFE7D4; /* 最深的纸色 */
--sf-stage-a: #EDE8DF; /* 分享舞台格纹浅格 */
--sf-zhupi-a: #FBF5E7; /* 朱批栏起点 */
--sf-warn-a: #FBF1EA; /* 断网提示起点 */
/* 玻璃层：浮层/胶囊/胶囊按钮的「近不透明浅色」填充（38 处）。
它们不是纯色而是带透明度的暖白，深色主题下会变成亮斑，
所以同样提成 token，1:1 保留原值。后缀 a/b = 渐变起/末，
p = pure white 系，w = warm 暖白系，数字 = alpha×100。 */
--sf-glass-a: rgba(253,250,243,.97); /* toast/提示/丝带 渐变起点 */
--sf-glass-b: rgba(247,240,229,.97); /* 同上 渐变末端 */
--sf-glass-hi: rgba(255,255,255,.85); /* 内高光 */
--sf-glass-p55: rgba(255,255,255,.55);
--sf-glass-p70: rgba(255,255,255,.70);
--sf-glass-p62: rgba(255,255,255,.62);
--sf-glass-p32: rgba(255,255,255,.32);
--sf-glass-p36: rgba(255,255,255,.36);
--sf-glass-p80: rgba(255,255,255,.80);
--sf-glass-p30: rgba(255,255,255,.30);
--sf-glass-p92: rgba(252,250,246,.92);
--sf-glass-w85: rgba(251,247,239,.85);
--sf-glass-w80: rgba(255,247,238,.80);
--sf-glass-w98: rgba(238,231,217,.98);
--sf-glass-w97: rgba(242,236,226,.97);
--sf-glass-w98b: rgba(250,246,238,.98);
--sf-glass-w98c: rgba(244,238,227,.98);
--sf-glass-w285: rgba(255,252,245,.85);
--sf-glass-w292: rgba(255,252,245,.92);
--sf-glass-w290: rgba(255,252,245,.90);
--sf-glass-w260: rgba(255,252,245,.60);
--sf-glass-w62: rgba(251,247,239,.62);
}
body { background:
radial-gradient(1200px 700px at 70% -10%, rgba(168,137,78,0.05), transparent 60%),
radial-gradient(900px 600px at 12% 108%, rgba(178,58,46,0.03), transparent 60%),
linear-gradient(155deg, var(--sf-body-a) 0%, var(--sf-body-b) 52%, var(--sf-body-c) 100%); }
.ink, .starfield { display: none; }
.grain { opacity: 0.05; mix-blend-mode: multiply; }
.nav { background: linear-gradient(180deg, rgba(var(--bg-rgb),0.94), rgba(var(--bg-rgb),0.86));
box-shadow: 0 8px 24px rgba(var(--shadow-rgb),0.05), inset 0 -1px 0 rgba(168,137,78,0.10); }
.logo-name { color: var(--text); text-shadow: none; }
.logo-seal { filter: drop-shadow(0 2px 5px rgba(var(--shadow-rgb),0.22)); }
.skip-link { background: var(--sf-skip); color: var(--text); border-color: var(--line-strong); }
:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline-color: rgba(178,58,46,0.7); }
.cfg-inp:focus-visible, .q-input input:focus-visible, input[type="text"]:focus-visible {
outline: none; border-color: rgba(178,58,46,0.5); box-shadow: 0 0 0 3px rgba(178,58,46,0.10); }
/* --- 朱批纸本 · 表面覆盖（面板/弹层/按钮，2026-10-13） --- */
.drawer { background: linear-gradient(180deg, var(--sf-page), var(--sf-page-b)); }
.drawer-mask { background: rgba(var(--shadow-rgb),0.28); }
.safety-box, .evo-box, .legal-box, .nav-more-list { background: linear-gradient(180deg, var(--sf-card), var(--sf-float-b)); }
.btn-input select option { background: var(--sf-input); color: var(--text); }
/* 主操作统一朱砂（朱批纪律：朱色只给主 CTA 与选中态） */
.btn-cast, .es-go, .gua-again, .dt-ok, .pay-confirm {
background: linear-gradient(180deg, #C4483A, #B23A2E 55%, #8E2C22); color: #FFFDF8; }
.seg-btn.active { background: linear-gradient(180deg, #C4483A, #B23A2E 60%, #9A3126); color: #FFFDF8; }
.tune-btn { background: linear-gradient(180deg, var(--sf-card), var(--sf-btn)); color: var(--text);
box-shadow: 0 2px 10px rgba(var(--shadow-rgb),0.10), hsl(0 0% 100% / 0.5) inset 0 1px 0; }
.ly-tag.dong { color: var(--text); }
/* 页脚 & 导航选中态（朱批） */
.footer { background: linear-gradient(180deg, transparent, rgba(var(--bg-rgb),0.94)); color: rgba(107,102,96,0.85); }
.nav-links a.active { color: var(--cinnabar); background: rgba(178,58,46,0.07); }
.nav-links a.active::after { background: var(--cinnabar); }
.footer .legal-link { color: rgba(107,102,96,0.85); }
.footer .legal-link:hover { color: var(--cinnabar); border-color: rgba(178,58,46,0.5); }
/* 导航配色 · 朱批版裁决（!important 压过 2298/2335 两代"最终规则"） */
:root { --nav-idle: var(--text-dim) !important; }
.nav-links > a, .nav-more-btn, .nav-more-list .nm-title { color: var(--nav-idle) !important; }
.nav-links > a:hover { color: var(--text) !important; }
.nav-links > a.active { color: var(--cinnabar) !important; border-color: rgba(178,58,46,0.35);
background: rgba(178,58,46,0.06); box-shadow: none; }
.nav-side a { color: var(--text-dim); }
.nav-side a:hover { color: var(--text); }
.nav-more.active .nav-more-btn, .nav-more.open .nav-more-btn { color: var(--cinnabar) !important; }
.nav-more-list a.active .nm-title { color: var(--cinnabar) !important; }
/* ============================================================
快修批（2026-10-13 夜，用户扫尾反馈 · 纸色主题一致性）
① 旧深色主题残留面板一律纸色化（"更多/登录注册里还是黑的"）
② 深色文字投影在浅底上变「重影」——整站清除
③ 字色加深 / 金色收敛（"字太淡看不清、别太多金色"）
④ 时间卦/数字卦深色件换浅（"里面是黑的、框颜色深"）
⑤ 塔罗牌背/牌底换淡色
纪律：本块只改色不动布局，一律放文件末尾以压过历史规则。
============================================================ */
/* ① 重影清除：旧深色主题给字加的投影在纸底上就是重影（装饰 filter 不受影响） */
body, body * { text-shadow: none !important; }
/* ②-1 「更多」下拉：压过修复③ 的深蓝 !important（含 ::before 内层深底） */
.nav-more-list { background: linear-gradient(180deg, var(--sf-card), var(--sf-card-b)) !important;
border: 1px solid rgba(168,137,78,.38) !important;
box-shadow: 0 16px 40px rgba(var(--shadow-rgb),.16), inset 0 1px 0 var(--sf-glass-p70) !important; }
.nav-more-list::before { background: none !important; box-shadow: none !important; }
.nav-more-list .nm-gname { color: #8A6F3C !important; }
.nav-more-list .nm-title { color: var(--text) !important; }
.nav-more-list .nm-sub { color: #7E7466 !important; }
.nav-more-list a:hover, .nav-more-list a.active { background: rgba(178,58,46,.07) !important; }
.nav-more-list a:hover .nm-title, .nav-more-list a.active .nm-title { color: var(--cinnabar) !important; }
.nav-more-list a:hover .nm-sub, .nav-more-list a.active .nm-sub { color: rgba(178,58,46,.62) !important; }
/* ②-2 账号下拉菜单 + 登录/注册弹层 */
.acct-menu { background: linear-gradient(180deg, var(--sf-card), var(--sf-card-b));
border-color: rgba(168,137,78,.4); box-shadow: 0 16px 40px rgba(var(--shadow-rgb),.18); }
.acct-menu-name { color: #8A6F3C; border-bottom-color: rgba(168,137,78,.22); }
.acct-menu a { color: var(--text); }
.acct-menu a:hover { background: rgba(178,58,46,.07); color: var(--cinnabar); }
.acct-box { background: linear-gradient(180deg, var(--sf-card), var(--sf-card-b)); border-color: rgba(168,137,78,.4); }
.acct-tab { color: #6B6660; }
.acct-tab:hover { color: var(--cinnabar); }
.acct-tab.active { color: var(--cinnabar); border-color: rgba(178,58,46,.42); background: rgba(178,58,46,.07); }
.acct-field > span { color: #8A6F3C; }
.acct-field input { background: var(--sf-page); border-color: rgba(var(--shadow-rgb),.18); color: var(--text); }
.acct-field input:focus { border-color: rgba(178,58,46,.5); background: var(--sf-hi); }
.acct-go { color: #FFFDF8; border-color: var(--sf-glass-p30);
background: linear-gradient(180deg, #C4483A, #B23A2E 60%, #9A3126); }
.acct-note { color: #7E7466; }
/* ②-3 删除警示框 */
.cfm-box { background: linear-gradient(180deg, var(--sf-card), var(--sf-card-b)); border-color: rgba(178,58,46,.35); }
.cfm-title { color: var(--cinnabar); }
.cfm-desc { color: #5C564E; }
.cfm-btn { color: var(--text); background: var(--sf-btn); border-color: rgba(168,137,78,.35); }
.cfm-btn:hover { border-color: rgba(178,58,46,.5); color: var(--cinnabar); }
.cfm-btn.danger { color: #B23A2E; border-color: rgba(178,58,46,.45); background: rgba(178,58,46,.08); }
.cfm-btn.danger:hover { color: #8E2C22; background: rgba(178,58,46,.14); }
.cfm-remember input { accent-color: #B23A2E; }
/* ③ 字色加深一档 + 金色收敛（竖排文案从金色发光改淡墨） */
:root { --text-dim: #5C564E; }
.compass-verse { color: #5A544C; }
.footer { color: #6E685F; }
.footer .legal-link { color: #6E685F; }
.side-label, .calib-row { color: #5C564E; }
/* ④-1 时间卦：盘影去黑、字加深 */
.tv-svg { filter: none; }
.tv-zhi { fill: rgba(90,74,40,.92); }
.tv-cap { fill: rgba(90,74,40,.72); }
.tv-val { fill: rgba(90,74,40,.5); }
.tv-val.on { fill: #8A6F3C; }
.tv-calc.on { fill: #7A6B52; }
/* ④-2 数字卦：三格数珠牌 深蓝→纸色浅底；左栏数字框浅底可见 */
.nv-tile { background: linear-gradient(180deg, var(--sf-card), var(--sf-tile-b));
color: #8A6F3C; border-color: rgba(168,137,78,.5);
box-shadow: inset 0 1px 0 var(--sf-glass-p80), 0 8px 20px rgba(var(--shadow-rgb),.08); }
.nv-tile.on { border-color: #B23A2E; color: #B23A2E; box-shadow: 0 8px 20px rgba(178,58,46,.16); }
.ng-box input { background: var(--sf-page); border-color: rgba(var(--shadow-rgb),.2); color: #8A6F3C; }
.ng-box input:focus { border-color: rgba(178,58,46,.5); background: var(--sf-hi); }
.ng-box span { color: #5C564E; }
/* ④-3 铜钱深影→浅影 */
.coin-face svg { filter: drop-shadow(0 10px 16px rgba(60,48,28,.20)); }
/* ⑤ 塔罗牌背/牌底换淡色（牌背纹样在 app.js cardBackSvg，这里管容器底） */
.tc-box .tc-facewrap, .tc-facewrap { background: var(--sf-face); }
.tf-front { background: var(--sf-face); }
.ring22-face-back { background:
repeating-linear-gradient(45deg, rgba(168,137,78,.08) 0 4px, transparent 4px 8px),
linear-gradient(160deg, var(--sf-cream) 0%, var(--sf-tile-b2) 60%, var(--sf-deep) 100%);
border: 1px solid rgba(168,137,78,.5);
box-shadow: 0 2px 10px rgba(var(--shadow-rgb),.12), inset 0 0 0 1px rgba(168,137,78,.14); }
/* 抽牌流程（洗牌/摊开/手选）的牌背与舞台：深蓝 → 淡色 */
.tf-back { background:
repeating-linear-gradient(45deg, rgba(168,137,78,.08) 0 4px, transparent 4px 8px),
linear-gradient(160deg, var(--sf-cream) 0%, var(--sf-tile-b2) 60%, var(--sf-deep) 100%);
border: 1px solid rgba(168,137,78,.5);
box-shadow: 0 6px 16px rgba(var(--shadow-rgb),.16), inset 0 0 0 1px rgba(168,137,78,.14); }
.tf-back::after { border-color: rgba(168,137,78,.3); }
.tf-stage { background: radial-gradient(120% 90% at 50% 45%, rgba(var(--bg-rgb),.95) 0%, var(--sf-glass-w98) 100%); }
.tf-hint { color: #8A6F3C; }
/* ⑥ 免责/隐私弹层：正文靠左（标题保持居中） */
.legal-body p { text-align: left; }
/* ⑦ logo 与导航间距（"知几而谋和每日一卦碰一起"） */
.logo { margin-right: 12px; }
/* ⑧ 婚配输入卡：残留投影去掉（第八批口径"不要阴影"的漏网） */
.hunyin-party { box-shadow: none !important; }
/* ============================================================
朱批扫尾批（2026-10-13）：深色件清查后的漏网（CSS 全量解析找出的
仍带旧深蓝底的组件）。纪律同前：只换色，末尾覆盖。
============================================================ */
/* ① 通用模块 select（手相/面相「性别」等）——深蓝底 →纸色 */
.gen-form select { background: linear-gradient(180deg, var(--sf-card), var(--sf-select-b));
border-color: rgba(var(--shadow-rgb),.2); color: var(--text); }
.gen-form select:hover { border-color: rgba(168,137,78,.5); }
.gen-form select:focus { border-color: rgba(178,58,46,.45); }
.gen-form select option { background: var(--sf-input); color: var(--text); }
/* ② 结果面板「起卦过程」（时间卦/数字卦算式块）：深蓝底 → 淡金纸底 */
.gua-steps { background: rgba(168,137,78,.07); border-color: rgba(168,137,78,.28); }
/* ③ 顺滑下拉（出生城市等） */
.smooth-drop { background: linear-gradient(180deg, var(--sf-card), var(--sf-card-b));
border-color: rgba(168,137,78,.4);
box-shadow: 0 16px 40px rgba(var(--shadow-rgb),.16), inset 0 1px 0 var(--sf-glass-p70); }
.sd-item { color: var(--text); }
.sd-item:hover { background: rgba(178,58,46,.07); color: var(--cinnabar); }
.sd-item.sel { color: var(--cinnabar); background: rgba(178,58,46,.08); }
.sd-item.sel::after { color: var(--cinnabar); }
/* ④ 卦词抽屉「导出」下拉 */
.hist-exp-menu { background: linear-gradient(180deg, var(--sf-card), var(--sf-card-b));
border-color: rgba(168,137,78,.4); box-shadow: 0 14px 30px rgba(var(--shadow-rgb),.18); }
.hist-exp-item { color: var(--text); }
.hist-exp-item:hover { background: rgba(178,58,46,.07); color: var(--cinnabar); }
.hist-exp-item + .hist-exp-item { border-top-color: rgba(var(--shadow-rgb),.08); }
/* ⑤ 本页调节浮层（右下角齿轮） */
.tune-panel { background: linear-gradient(180deg, var(--sf-card), var(--sf-card-b));
border-color: rgba(168,137,78,.4); box-shadow: 0 10px 26px rgba(var(--shadow-rgb),.18); }
/* ⑥ 照片预览「移 除」钮 */
.gi-photo-clear { background: var(--sf-glass-p92); color: var(--text-dim);
border-color: rgba(168,137,78,.5); }
.gi-photo-clear:hover { color: var(--cinnabar); border-color: rgba(178,58,46,.55); }
/* ⑦ 搜索下拉（功能停用，保活备恢复） */
.ns-list { background: linear-gradient(180deg, var(--sf-card), var(--sf-card-b));
border-color: rgba(168,137,78,.4); box-shadow: 0 16px 40px rgba(var(--shadow-rgb),.16); }
/* ⑧ 断网提示条：棕黑金字 → 纸底朱砂 */
#netWarn { background: linear-gradient(180deg, var(--sf-warn-a), var(--sf-warn-b)); color: #8E2C22;
border-color: rgba(178,58,46,.45); box-shadow: 0 12px 30px rgba(var(--shadow-rgb),.2); }
#netWarn span { color: #6B4A44; }
/* ⑨ 蒙层统一暖墨（原深蓝近黑；drawer 昨晚已改 0.28，其余拉齐） */
.dt-mask, .pay-mask, .safety-mask, .evo-mask, .legal-mask, .acct-mask, .cfm-mask {
background: rgba(var(--shadow-rgb),.32); }
/* 环上牌正面真实牌图（2026-10-13 用户：牌正面用下载的真实韦特图，不用自绘图案） */
.r22-front-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
display: block; border-radius: inherit; user-select: none; -webkit-user-drag: none; }
/* ============================================================
第九批（2026-10-13 用户反馈 · 导航）
实测（tools/measure_nav.js，改前，相邻矩形间隙）：
1600/1920 更多⨯搜索框 -16.7px、每日一卦⨯logo -10.7px
1366 -33.3/-27.2 ｜ 1152 -57.1/-51.0 ｜ 1024 更多⨯卦辞 -41.1、每日一卦⨯logo -29.0
用户原话："鼠标放每日一卦显示的外框和「知几而谋」的谋字重合"、"鼠标放更多按钮上，
外框和搜索栏重合"。根因：.nav-links 内容宽于可用空间，nowrap 项溢出压邻居
（.nav-inner 定宽 1520，≥1560 屏布局冻结，所以 1600/1920 同样重叠）。
纪律同前几批：只调尺寸与颜色，末尾覆盖。
① 分档收紧 + 搜索框收窄：1024–1920 零重叠（tools/verify_nav_fit.js 33 断言）
② 导航里的描边"外框"一律去掉：纸本上像按下的按钮，且是压字/压框的元凶
③ 悬停配色：登录/注册 #F2DFA8（纸底对比 1.2:1，等于看不见）→ 朱砂；
更多按钮亮金（2.2:1）→ 深墨（与其它导航项悬停一致）
============================================================ */
/* ① 布局：连续缩放防重叠（分档媒体查询在档位边界上会跳变溢出 ——
实测 1300/1501 两处档口溢出 26.8/11.2px，所以改用 clamp 连续过渡）。
2026-10-13 用户："点开每日一卦，鼠标放在右侧八字排盘，两个外框紧挨着"
→ 项与项之间留出可见间隙（原来 gap:0，选中/悬停底纹块首尾相接看着像一坨）。
间隙从每项左右 padding 里匀出来，总宽基本不变（measure_nav.js 复测零重叠）。 */
.nav-links { gap: clamp(2px, 0.26vw, 6px); }
.nav-links > a, .nav-more-btn {
padding: 9px clamp(5.5px, 0.62vw, 10.5px);
font-size: clamp(13px, 1.05vw, 16px);
}
.nav-side a {
padding: 8px clamp(6.5px, 0.62vw, 11px);
font-size: clamp(13.5px, 1.0vw, 16px);
}
.nav-search { flex: 0 0 clamp(108px, 10.5vw, 200px); }
/* ≤1200：搜索框让位（展示态装饰件），横排一项不减 */
@media (max-width: 1200px) {
.nav-links > a, .nav-more-btn { padding: 7px 6px; font-size: 13.5px; }
.nav-side a { padding: 7px 7px; font-size: 14px; }
.nav-search { display: none; }
}
/* ② 去描边（hover / 选中 / 更多展开，一律不画外框） */
.nav-links > a, .nav-side a, .nav-more-btn,
.nav-links > a:hover, .nav-side a:hover, .nav-more-btn:hover,
.nav-links > a.active, .nav-side a.active,
.nav-more.active .nav-more-btn, .nav-more.open .nav-more-btn {
border-color: transparent !important;
}
.nav-links > a.active, .nav-side a.active { box-shadow: none; }
.nav-links > a.active, .nav-more.active .nav-more-btn, .nav-more.open .nav-more-btn {
background: rgba(178,58,46,.05) !important; /* 旧规则带 !important 的金色底纹 → 淡朱（按下感再降一档） */
}
.nav-side a.active { color: var(--cinnabar); background: rgba(178,58,46,.06); }
/* ③ 悬停配色（对比度实测，WCAG 正文 4.5:1 / 大字 3:1） */
.nav-more-btn:hover { color: var(--text) !important; } /* 亮金 2.2:1 → 深墨 14:1 */
.nav-side .nav-account { color: var(--gold-dim); } /* 亮金 2.2:1 → 暗金 4.0:1 */
.nav-side .nav-account:hover { color: var(--cinnabar); background: rgba(178,58,46,.07); } /* 1.2:1 → 5.4:1 */
.nav-more-list a:hover .nm-sub, .nav-more-list a.active .nm-sub { color: rgba(178,58,46,.78) !important; }
/* ③-2 全站悬停色统查（tools/audit_hover_contrast.js 逐元素实测）：
旧深色主题把「悬停 = 变亮金」，在纸底上悬停反而看不清（<2.5:1）——
一律改成朱砂（与设置/更多下拉里的悬停色一致）。 */
.seg-btn:not(.active):hover { color: var(--text); background: rgba(178,58,46,.06); } /* 2.21:1 → 14:1；选中项悬停保持朱砂底（选中态不因悬停消失） */
.close-x:hover, .gold-x:hover { color: var(--cinnabar); }
span.mid-close-fixed.close-x:hover { color: var(--cinnabar) !important; transform: rotate(90deg) scale(1.1); }
.tune-x:hover, .evo-x:hover, .legal-x:hover, .tune-in-drawer .tune-clear:hover { color: var(--cinnabar); }
.hist-export-one:hover, .gi-photo-btn:hover, .gi-photo-clear:hover { color: var(--cinnabar); }
.fb-btn:hover, .dt-cancel:hover { color: var(--cinnabar); border-color: rgba(178,58,46,.5); }
.basis-item a:hover { color: var(--cinnabar); }
.nav-more-list a:hover { color: var(--cinnabar) !important; } /* 自身色，防未来子元素继承 */
.hist-client-save { color: var(--gold-dim); } /* 2.85:1 → 3.9:1（金色按钮在纸底一律加深一档） */
.hist-client-save:hover { color: var(--cinnabar); background: rgba(178,58,46,.10); border-color: rgba(178,58,46,.45); }
/* ============================================================
2026-10-13（用户："婚姻合婚左下角的合盘下面有黑影，怎么还没修"）
根因：.btn-cast 的 3D 立体阴影是深色主题遗留 ——
`0 3px 0 #6d5a2e`（深褐硬底边）+ `0 10px 26px rgba(shadow-rgb,.5)`（大黑模糊）
在纸底上就是按钮下面一坨黑影（全站排盘类页面的同一颗按钮，合婚页在最左下最显眼）。
唯一裁决：压平成立即的纸本投影。上面 413-425 行的三态 box-shadow 作废。 */
.btn-cast {
box-shadow: inset 0 1px 0 var(--sf-glass-p32),
0 1px 0 rgba(142,44,34,.85),
0 5px 14px rgba(72,54,30,.20);
}
.btn-cast:hover {
box-shadow: inset 0 1px 0 var(--sf-glass-p36),
0 2px 0 rgba(142,44,34,.85),
0 8px 20px rgba(72,54,30,.24);
}
.btn-cast:active {
box-shadow: inset 0 2px 6px rgba(60,20,16,.35),
0 1px 0 rgba(142,44,34,.85),
0 2px 8px rgba(72,54,30,.16);
}
/* ============================================================
2026-10-13 · 批语卡 App 集成 + 朱批元素上结果卡（用户点名四项）
① 结果面板页脚加「分享批语卡」（与「再占一卦」并排；全模块覆盖）
② 分享浮层（canvas 出图 1080 宽，预览即出图）
③ 朱批元素上结果卡：标签朱色 / 圈点 / 朱批行 / 落款印（出现特效）
④ .gua-again 与 .btn-cast 同款「深色 3D 硬底边+大黑模糊」一并压平
============================================================ */
/* 卡片字迹（canvas 也要能用到这两款字体；只有分享时才会真正下载 8MB 文楷） */
@font-face { font-family: 'YSG-WenKai';
src: url('fonts/candidates/LXGWWenKai.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'YSG-EBGaramond';
src: url('fonts/latin/EBGaramond.woff2') format('woff2'); font-display: swap; }
/* ① 页脚两按钮并排 + 分享按钮样式 */
.gua-again-row { gap: 14px; }
.gua-share {
padding: 11px 24px; border-radius: 10px; cursor: pointer;
font-family: var(--serif); font-size: 15px; font-weight: 700; letter-spacing: 2px;
color: var(--cinnabar); background: rgba(255, 253, 248, 0.92);
border: 1px solid rgba(178, 58, 46, 0.45);
box-shadow: 0 2px 8px rgba(72, 54, 30, 0.10);
transition: background .18s var(--ease-out), transform .16s var(--ease-out); }
.gua-share:hover { background: rgba(178, 58, 46, 0.09); transform: translateY(-1px); }
.gua-share:active { transform: translateY(1px); }
/* ④ 「再占一卦」压平（原来 0 3px 0 #6d5a2e 深褐硬边 + 0 8px 22px 大黑模糊 —— 用户报的"黑影"同款） */
.gua-again {
box-shadow: inset 0 1px 0 var(--sf-glass-p32),
0 1px 0 rgba(142, 44, 34, .85),
0 5px 14px rgba(72, 54, 30, .20); }
.gua-again:hover { box-shadow: inset 0 1px 0 var(--sf-glass-p36),
0 2px 0 rgba(142, 44, 34, .85), 0 8px 20px rgba(72, 54, 30, .24); }
.gua-again:active { box-shadow: inset 0 2px 6px rgba(60, 20, 16, .35),
0 1px 0 rgba(142, 44, 34, .85), 0 2px 8px rgba(72, 54, 30, .16); }
/* ② 分享浮层 */
.share-mask { position: fixed; inset: 0; z-index: 1024; display: flex; align-items: center;
justify-content: center; background: rgba(var(--shadow-rgb), 0.42);
opacity: 0; transition: opacity .22s var(--ease-out); }
.share-mask.open { opacity: 1; }
.share-box { width: min(560px, 94vw); max-height: 94vh; overflow: auto;
background: var(--sf-soft); border: 1px solid rgba(var(--shadow-rgb), 0.12); border-radius: 14px;
box-shadow: 0 18px 50px rgba(72, 54, 30, 0.28); padding: 14px 18px 16px;
transform: translateY(10px); transition: transform .24s var(--ease-out); }
.share-mask.open .share-box { transform: none; }
.share-head { display: flex; align-items: center; justify-content: space-between;
font-family: var(--serif); font-size: 18px; letter-spacing: 4px; color: var(--text);
padding-bottom: 10px; border-bottom: 1px solid rgba(var(--shadow-rgb), 0.08); }
.share-x { cursor: pointer; color: var(--ink-3, #6B655B); font-size: 17px; padding: 2px 6px;
transition: color .16s, transform .16s; }
.share-x:hover { color: var(--cinnabar); transform: rotate(90deg); }
.share-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 0; }
.share-picker .sg { display: flex; align-items: center; gap: 7px; }
.share-picker .sg b { font-size: 12.5px; color: rgba(107, 102, 96, 0.95); letter-spacing: 2px; font-weight: 400; }
.share-picker .sg button { font-family: var(--serif); font-size: 13px; letter-spacing: 1px;
color: rgba(107, 102, 96, 0.95); background: transparent;
border: 1px solid rgba(var(--shadow-rgb), 0.16); border-radius: 6px; padding: 5px 12px; cursor: pointer;
transition: all .15s; }
.share-picker .sg button:hover { border-color: rgba(178, 58, 46, 0.5); color: var(--cinnabar); }
.share-picker .sg button.on { background: var(--cinnabar); border-color: var(--cinnabar); color: #FFFDF8; }
.share-hide { display: flex; align-items: center; gap: 6px; font-size: 12.5px;
color: rgba(107, 102, 96, 0.95); cursor: pointer; letter-spacing: 1px; }
.share-stage { display: flex; justify-content: center; padding: 12px 0 6px;
background: repeating-conic-gradient(var(--sf-stage-a) 0 25%, var(--sf-stage-b) 0 50%) 0 0/22px 22px;
border: 1px solid rgba(var(--shadow-rgb), 0.08); border-radius: 10px; }
.share-stage canvas { display: block; max-width: 100%; box-shadow: 0 2px 6px rgba(72, 54, 30, .12), 0 14px 34px rgba(72, 54, 30, .12); }
.share-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; row-gap: 8px; padding-top: 12px; }
.share-save { font-family: var(--serif); font-size: 15px; font-weight: 700; letter-spacing: 2px;
white-space: nowrap; flex: 0 0 auto;
color: #FFFDF8; background: linear-gradient(180deg, #C4483A, #B23A2E 55%, #8E2C22);
border: none; border-radius: 9px; padding: 10px 26px; cursor: pointer;
box-shadow: 0 1px 0 rgba(142, 44, 34, .85), 0 5px 14px rgba(72, 54, 30, .20); }
.share-save:hover { filter: brightness(1.06); }
/* 2026-11-03 D1-11：9:16 副按钮（次级描边，不抢「保存图片」主按钮） */
.share-save-916 { padding: 10px 14px; font-size: 13px; letter-spacing: 1px; white-space: nowrap;
flex: 0 0 auto;
color: var(--cinnabar); background: transparent; border: 1px solid rgba(178, 58, 46, 0.45);
box-shadow: none; }
.share-save-916:hover { background: rgba(178, 58, 46, 0.07); filter: none; }
.share-save-916:disabled { opacity: .5; cursor: wait; }
.share-roll { font-family: var(--serif); font-size: 13.5px; letter-spacing: 1.5px;
color: var(--cinnabar); background: transparent; border: 1px solid rgba(178, 58, 46, 0.45);
border-radius: 8px; padding: 8px 16px; cursor: pointer; }
.share-roll:hover { background: rgba(178, 58, 46, 0.07); }
.share-tip { font-size: 12px; color: rgba(138, 123, 102, 0.95); letter-spacing: .5px; }
/* ③ 朱批元素上结果卡（样稿 theme-zhupi-preview.html 的四处朱砂语言） */
/* ③-1 标签朱色（起卦过程/动爻/变卦辞等小节标题） */
.result-slide-in p.gua-label, .float-panel p.gua-label, .result-slide-in .gua-label,
.panel-flex p.gua-label { color: var(--cinnabar-dark); }
/* ③-2 圈点：关键句上方的朱点（旧式圈点；app.js zhupiMark() 打标） */
.gua-sub .mark, .gua-ci .mark, .zhupi-lines .mark {
text-emphasis: filled dot var(--cinnabar);
-webkit-text-emphasis: filled dot var(--cinnabar);
text-emphasis-position: over right; -webkit-text-emphasis-position: over right; }
/* ③-3 解读区：整块一笺暖纸（用户 2026-10-13："下面的解读内容，换个背景，
这种颜色和形式不好看"——原「每条浅朱底 + 左朱线」作废；批注语义改由圈点与
朱色小标签承担，底色退回纸本暖黄一档，全块一体） */
.zhupi-lines {
background: linear-gradient(180deg, var(--sf-zhupi-a), var(--sf-zhupi-b));
border: 1px solid rgba(168, 137, 78, 0.28);
border-radius: 10px; padding: 4px 16px 6px; margin: 10px 0 4px; }
.zhupi-lines p {
border: none; background: none; border-radius: 0;
padding: 6px 0; margin: 6px 0; }
.zhupi-lines p + p { border-top: 1px dashed rgba(168, 137, 78, 0.18); }
/* ③-4 落款印：卦辞末尾钤「易」印（出现特效：淡入 + 微落） */
.zhupi-sign { display: flex; justify-content: flex-end; align-items: center; gap: 10px;
margin: 14px 4px 6px; }
.zhupi-sign img { width: 40px; height: 40px; transform: rotate(-3.5deg); opacity: 0; }
.zhupi-sign span { font-family: var(--serif); font-size: 11.5px; color: rgba(138, 123, 102, 0.95);
letter-spacing: 2.5px; opacity: 0; }
.result-slide-in .zhupi-sign img, .float-panel .zhupi-sign img {
animation: zhupiSealIn .9s cubic-bezier(.22, .8, .28, 1) .25s forwards; }
.result-slide-in .zhupi-sign span, .float-panel .zhupi-sign span {
animation: zhupiSealIn .9s cubic-bezier(.22, .8, .28, 1) .45s forwards; }
@keyframes zhupiSealIn {
0% { opacity: 0; transform: translateY(-8px) rotate(-3.5deg) scale(1.25); }
60% { opacity: .95; }
100% { opacity: .95; transform: translateY(0) rotate(-3.5deg) scale(1); }
}
.share-stage { position: relative; flex-direction: column; align-items: center; }
.share-gen { font-family: var(--serif); font-size: 13px; color: rgba(138, 123, 102, 0.95);
letter-spacing: 3px; padding: 26px 0; }
.share-save:disabled { opacity: .5; cursor: wait; }
.share-picker .sg button.dis, .share-picker .sg button:disabled { opacity: .38; cursor: not-allowed; }
/* ═══════════════ 邀请裂变（2026-10-13）═══════════════
规格：批语卡规格 §四/§五/§九之二.5 —— 分享链接带 ?inv=邀请码，
双方各得 1 次「解锁完整详解」、每天最多累计 3 次。
位置：① 支付面板里一行「邀请奖励」 ② 分享浮层脚注一行邀请码/余额 */
.pay-invite { margin-top: 14px; padding: 11px 14px 9px; border: 1px dashed var(--line-strong);
border-radius: 10px; background: rgba(178,58,46,0.035); }
.pay-invite .pi-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pay-invite .pi-left { font-size: 13.5px; color: var(--text-dim); letter-spacing: .5px; }
.pay-invite .pi-left b { font-family: var(--serif); font-size: 18px; color: var(--cinnabar);
margin: 0 3px; vertical-align: -1px; }
.pay-invite .pi-btn { border: 1px solid var(--cinnabar); color: var(--cinnabar); background: transparent;
border-radius: 9px; padding: 7px 16px; font-family: var(--serif); font-size: 13.5px;
letter-spacing: 2px; cursor: pointer; }
.pay-invite .pi-btn:hover:not(:disabled) { background: var(--cinnabar); color: #FFFDF8; }
.pay-invite .pi-btn:disabled { opacity: .45; cursor: not-allowed; border-color: var(--line-strong); color: var(--text-dim); }
.pay-invite .pi-note { font-size: 12px; color: var(--text-dim); margin-top: 7px;
font-family: var(--serif); letter-spacing: 1px; }
.share-inv { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px;
padding-top: 10px; border-top: 1px solid rgba(var(--shadow-rgb),0.08);
font-size: 12.5px; color: rgba(138,123,102,0.98); letter-spacing: .5px; }
.share-inv b { font-family: var(--serif); color: var(--cinnabar); font-size: 14.5px;
letter-spacing: 2px; margin: 0 1px; }
.share-inv .si-note { color: var(--text-dim); }
/* ═══════════════ 2026-10-13 第十一批反馈（唯一裁决，压过前面同名规则）═══════════════ */
/* ① 卦辞记录：展开项与相邻卡片拉开区别（用户："点开一个信息后，这个框看不出和
第二格有区别，得有区别，看是加深框的颜色还是"）——朱色内描边（inset 不占布局）+
浅朱底 + 投影加深，三处同时加强 */
.hist-item.open {
box-shadow: inset 0 0 0 1.5px rgba(178, 58, 46, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.7),
0 8px 20px rgba(var(--shadow-rgb), 0.12);
background: linear-gradient(180deg, rgba(178, 58, 46, 0.06), rgba(178, 58, 46, 0.015)),
linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.10)); }
/* ② 客户档案输入框：旧样式是白 4% 底 + 白 15% 描边（深色主题时代的写法），
在朱批纸本浅色下完全看不见（用户："客户档案后面的输入框都看不见，修改"） */
.hist-client-row { background: rgba(168, 137, 78, 0.055); border-color: rgba(168, 137, 78, 0.42); }
.hist-client-name, .hist-client-tags {
background: var(--sf-card); color: var(--text);
border: 1px solid rgba(var(--shadow-rgb), 0.28); }
.hist-client-name:focus, .hist-client-tags:focus {
border-color: rgba(178, 58, 46, 0.6); box-shadow: 0 0 0 3px rgba(178, 58, 46, 0.10);
outline: none; }
.hist-client-name::placeholder, .hist-client-tags::placeholder { color: rgba(107, 102, 96, 0.72); }
/* ③ 八字四柱 ↔ 五行条 联动高亮（用户："我鼠标放在哪了，下面金木水火土这些
就跟这里联动。一一对应"）。app.js renderBazi 打 data-wx-*、bindWuxingLink 联动 */
.wx-item { transition: color .22s var(--ease), transform .22s var(--ease); }
.wx-item.lit { color: var(--cinnabar-dark); transform: translateX(3px); }
.wx-item.lit .wx-bar { box-shadow: 0 0 0 2px rgba(178, 58, 46, 0.32); }
.wx-item.lit .wx-fill { filter: saturate(1.2) brightness(1.06); }
/* ═══════════════ 2026-10-13 下午批（补 10-13 上午 19+4 条未落地项）═══════════════
本块为唯一裁决，压过前面同名规则。来源：用户 10-13 上午反馈清单
（当时只做了复述未执行，见 docs/用户反馈处理-20261013-上午批.md）。 */
/* ① 问事输入框改「多行 textarea」：字靠左、多了换行、右侧带滚动条
（用户：「左侧输入框里面的字是靠左排列，多了就往下列，输入框右侧有上下拉的，
字不是一溜往后排」）。旧「88px 单行居中 + 0 8px 22px 向下大投影」作废 */
.q-input textarea {
display: block; width: 100%; min-height: 64px; max-height: 128px;
padding: 10px 30px 10px 14px;
background: rgba(255, 253, 248, 0.9);
border: 1px solid var(--line); border-radius: 12px;
color: var(--text); font-size: 15px; font-family: inherit; line-height: 1.7;
text-align: left; letter-spacing: .5px; resize: none; outline: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(168,137,78,.5) transparent;
transition: border-color .3s var(--ease); }
.q-input textarea::placeholder { color: rgba(107, 102, 96, 0.55); text-align: left; transition: color .3s; }
.q-input textarea:focus::placeholder { color: transparent; }
.q-input textarea:focus { border-color: rgba(178, 58, 46, 0.55); }
.q-input textarea::-webkit-scrollbar { width: 6px; }
.q-input textarea::-webkit-scrollbar-thumb { background: rgba(168,137,78,.45); border-radius: 3px; }
/* ② 出生时间条紧凑化 + 性别间距/居中（用户：「所有模块左侧的出生日期都缩短一下，
性别这俩字分开点，下面的男女居中」） */
#inputCol .dt-field { padding: 8px 12px; margin-bottom: 10px; }
#inputCol .dt-field .dt-show { font-size: 17px; letter-spacing: 1.5px; }
#inputCol .row2 > .btn-input:first-child .inp-label { letter-spacing: 8px; text-indent: 8px; }
/* select 文本真居中：旧 padding 左 11 / 右 30（给箭头留位）→ 居中点偏左。
改左右对称 + text-align-last 居中；箭头改背景图方案（见 ④）不再占 padding 位。 */
#inputCol select { padding: 9px 30px !important; text-align: center; text-align-last: center; }
/* ③ 左栏「框与框中间不许有黑影」定死（用户第三次点名）。左栏内所有框
去掉向下外投影，只留一条顶部内高光。 */
#inputCol { --float-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65),
inset 0 0 18px rgba(168, 137, 78, 0.03); }
#inputCol .q-input input { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); }
/* ④ 下拉箭头垂直居中（用户：「婚姻合婚输入框右侧选择的那个下拉箭头没有居中」）。
旧实现是 .btn-input::after（相对含 label 的整体定位 → 永远偏上）；改为 select
自己的背景图，天然随 select 垂直居中，全站通用。 */
.btn-input:has(> select)::after, .hunyin-party .btn-input:has(> select)::after { content: none; }
.btn-input select, .hunyin-party .btn-input select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center; }
.hunyin-party .btn-input select { background-position: right 10px center; }
/* ⑤ 八字四柱 ↔ 五行条 联动加强（用户 10-13 图46：「这个选中后下面的不太明显，金木这些」）。
旧版只 translateX(3px)+细阴影 —— 太弱。改为：整行朱底 + 字加粗变色 + 条加高发光；
柱子本体同步高亮（十神字变朱加粗）。 */
.wx-item { padding: 2px 8px; margin: 0 -8px; border-radius: 8px; }
/* 2026-10-14 第二十七批（图221626）：用户"这不还是有红杠吗，去掉"——
上一批只去了 2px 朱红外圈（box-shadow），整行朱色渐变底还在（看着就是一条红杠）。
现在高亮手段只剩：字变朱加粗 + 条加高（不铺底、不描边）。 */
.wx-item.lit { color: var(--cinnabar-dark); font-weight: 700; transform: none;
background: none; }
/* 2026-10-13 用户（图60）："去掉涂的红色的横杠这个，保留加高这个"——
悬停高亮去掉红色描边（box-shadow 红圈），只保留条加高（7→11px）。 */
.wx-item.lit .wx-bar { height: 11px; }
.wx-item.lit .wx-fill { filter: saturate(1.35) brightness(1.08); }
.sizhu-item { border-radius: 12px; transition: background .22s var(--ease), box-shadow .22s var(--ease); }
.sizhu-item.lit { background: rgba(178, 58, 46, 0.06);
box-shadow: inset 0 0 0 1.5px rgba(178, 58, 46, 0.42); }
.sizhu-item.lit .pillar-sub { color: var(--cinnabar-dark); font-weight: 700; }
.sizhu-item.lit .pillar-value { color: var(--cinnabar-dark); }
/* ⑥ 手掌宫格线（用户发手相宫位参考图：「去掉字，按这上面的来，这个手是在掐指一算
等可以用到的地方」）——十二宫式方格分线，无文字；与掌纹同色系、更淡一档 */
.hand-grid path { fill: none; stroke: rgba(216, 186, 116, 0.4); stroke-width: 1.2;
stroke-linecap: round; }
/* ⑦ 阳历/阴历 切换（2026-11-02 历法方案 A：切到出生时间输入条**上方**。
用户 2026-10-13：「所有模块的出生时间下面加个左右可以选择的阳历阴历，
这个得联动下面的出生日期」） */
.dt-cal { display: flex; justify-content: center; margin: 8px auto 10px;
width: 148px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden;
background: rgba(255, 253, 248, 0.7); }
.dt-cal button { flex: 1; padding: 5px 0; font-size: 13px; letter-spacing: 3px;
font-family: var(--serif); color: var(--text-dim); background: transparent;
border: none; cursor: pointer; transition: color .25s var(--ease), background .25s var(--ease); }
.dt-cal button:hover { color: var(--cinnabar); }
.dt-cal button.active { color: #FFFDF8; background: linear-gradient(180deg, #C4483A, #B23A2E 60%, #9A3126); }
/* ⑧ 卦辞面板纹样（用户 2026-10-13 指定的主版：冰裂底 5% + 卷草顶 + 宝相徽分隔）。
素材 = web/static/patterns/*.svg（生成脚本 tools/make_patterns.js，几何与
web_preview/纹样应用样稿.html 主版 gMix 逐参数一致）。 */
.panel-scroll:has(.gua-label) {
background-image: url("/static/patterns/ice-crack.svg");
background-repeat: repeat;
background-position: 0 0;
background-size: 300px auto; }
/* 卷草顶：固定在面板顶部「压一道」（不随内容滚走），内容从下面穿过。
⚠ 千万不要给 .panel-flex 写 position —— .result-slide-in 是 fixed（结果面板靠它浮在
右侧），改成 relative 会让整个面板掉进文档流（2026-10-13 下午批踩过：面板消失、
关闭叉跑到屏幕左下角）。卷草项挂在面板容器自身（都是已定位元素）上。 */
.result-slide-in:has(.gua-label)::before,
.float-panel:has(.gua-label)::before {
content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
width: 78%; height: 20px; pointer-events: none; z-index: 2;
background: url("/static/patterns/curly-top.svg") center / 100% 20px no-repeat; }
.float-panel:has(.gua-label) { position: relative; }
/* 段落分隔：宝相花小徽替代线条（两侧各一枚，分隔标题居中） */
.panel-scroll .gua-label { display: flex; align-items: center; justify-content: center; gap: 9px; }
.panel-scroll .gua-label::before, .panel-scroll .gua-label::after {
content: ""; width: 14px; height: 14px; flex: 0 0 auto;
background: url("/static/patterns/baoxiang-mini.svg") center / contain no-repeat; opacity: .85; }
/* ⑨ 手部墨线加深（2026-10-13）：浅金线在纸底上发虚、格子几不可见 ——
按用户发的手相宫位参考图（深墨线）加深一档，手形/掌纹/节纹/格线都清楚 */
.xlr-hand .xlr-outline { color: rgba(122, 102, 66, 0.85); }
.xlr-hand .hand-line { color: rgba(138, 116, 78, 0.66); }
.xlr-hand .hand-crease { color: rgba(138, 116, 78, 0.66); } /* 指节分格线加深一档（用户要"看见每根手指上面的线"） */
.xlr-hand .hand-ref, .palm-fig .hand-ref { color: rgba(122, 102, 66, 0.78); }
.palm-fig { color: rgba(122, 102, 66, 0.72); }
.palm-fig .xlr-outline { color: rgba(122, 102, 66, 0.85); }
.hand-grid path { stroke: rgba(138, 116, 78, 0.5); }
/* ═══════════════ 2026-10-13 第十五批反馈（唯一裁决，压过前面同名规则）═══════════════ */
/* ① 校准进度盒：加浅纸底 + 更明显的边（用户："前面改的校准进度那个框，在加点颜色，
都看不到框了"）。奇门白盒 .cbox-white 保持浮层白不动。 */
.calib-box:not(.cbox-white) {
background: rgba(255, 252, 245, 0.78);
border: 1px solid rgba(var(--gold-rgb), 0.32); }
/* ② 掐指六宫：圆环 35→28（JS 层）+ 字 19→17，六环不再相切（用户："把中间这三指头分开"） */
.xlr-cell .xc-name { font-size: 17px; }
/* ③ 问事框：单行居中、多行自动左对齐（用户："先居中，然后字多了会自动靠左排列下来"）。
纯前端判定（scrollHeight 超一行即 .multi），不产生任何模型费用。 */
.q-input textarea { text-align: center; }
.q-input textarea.multi { text-align: left; }
.q-input textarea::placeholder { text-align: center; }
/* ④ 卦辞面板可读性：表内金/灰字加深一档（用户："卦辞内容字颜色太浅……都看不清卦辞的字了"）。
冰裂纹本身在 ice-crack.svg 里 opacity 0.15→0.09（见该文件）。 */
.panel-scroll .ly-head { color: #8A6D35; }
.panel-scroll .ly-qin { color: #8A6D35; }
.panel-scroll .ly-sym { color: #8A6D35; }
.panel-scroll .ly-meta, .panel-scroll .ly-wang, .panel-scroll .ly-huai,
.panel-scroll .ly-pos { color: #5C564E; }
.panel-scroll .ly-zhi { color: #1C1B19; }
.panel-scroll .ly-zhi em, .panel-scroll .ly-wang em { color: #8A6D35; }
.panel-scroll .ly-shen { color: rgba(92, 86, 78, 0.78); }
.panel-scroll .ly-dim { color: rgba(92, 86, 78, 0.9); }
.panel-scroll .ly-bian { color: #5C564E; background: rgba(var(--gold-rgb), 0.06); }
.panel-scroll .ly-huai.good { color: #8A6D35; }
/* ⑤ 分享批语卡：放大按钮（卡片右上角、浅纸色圆钮，与卡面配色协调；点击全屏放大预览） */
.share-zoom { position: absolute; top: 10px; right: 10px; z-index: 5;
width: 34px; height: 34px; border-radius: 50%; padding: 0;
display: flex; align-items: center; justify-content: center;
background: rgba(252, 249, 242, 0.94); border: 1px solid rgba(168, 137, 78, 0.42);
color: #8A6D35; cursor: pointer; box-shadow: 0 2px 8px rgba(72, 54, 30, 0.14);
transition: color .22s var(--ease), border-color .22s var(--ease), transform .22s var(--ease); }
.share-zoom:hover { color: var(--cinnabar); border-color: rgba(178, 58, 46, 0.55); transform: scale(1.06); }
.share-zoom svg { display: block; }
/* 放大态：整个 stage 变全屏遮罩，canvas 以最大可视尺寸显示（位图仍 1080，清晰） */
.share-stage.zoomed { position: fixed; inset: 0; z-index: 1032; padding: 20px;
background: rgba(28, 24, 18, 0.82); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.share-stage.zoomed canvas { width: auto !important; height: auto !important;
max-width: min(86vw, 980px); max-height: 84vh;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); cursor: default; }
.share-stage.zoomed .share-gen { display: none; }
.share-stage.zoomed .share-zoom { position: fixed; top: 18px; right: 22px; z-index: 1033;
background: rgba(252, 249, 242, 0.9); }
/* ⑥ 铜钱摇卦：少转、慢一点、抛起柔化（用户："铜钱卦铜钱转圈的特效太难看，好看点、文雅点"）。
2026-10-13 再修（用户："铜钱特效没改…不要左右转了，这种不好看"）：
翻转轴 rotateY（左右翻）→ rotateX（上下翻，见 app.js coinTossAnimate），
外层抛起加左右轻摆 —— 观感从"平面左右转"变"空中抛翻"。 */
@keyframes coinToss {
0% { transform: translateY(0) scale(1) rotate(0deg); }
38% { transform: translateY(-16.5%) scale(1.04) rotate(-4.5deg); }
64% { transform: translateY(-18%) scale(1.05) rotate(3.5deg); }
100% { transform: translateY(0) scale(1) rotate(0deg); }
}
/* ⑦ 梦境界面落地（用户："给我那个周公解梦那个界面看怎么设置"）。
口径 = 已定的 A·纸底月白：云气纹（10% 透明线）+「梦」朱印 + 月白/夜青副色。
待机：云气纹底 + 梦印 + 引导语（原来是一块空白面板）。
结果：云气纹替代卦辞面板的冰裂/卷草/宝相纹样（jm-panel 覆盖），落款加「梦」印。 */
.jm-standby { position: relative; width: 100%; min-height: 340px; flex: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
/* 蝶云纹底（2026-10-13 图66：梦境找古代描述梦的花纹 → 庄周梦蝶·蝶纹 + 云气） */
.jm-standby::before { content: ""; position: absolute; inset: 0; pointer-events: none;
background: url("/static/patterns/dream-butterfly.svg") repeat; background-size: 220px auto; }
.jm-standby-seal { position: relative; width: 96px; height: 96px;
transform: rotate(-3.5deg); opacity: .95; }
.jm-standby-title { position: relative; font-size: 24px; letter-spacing: 8px;
font-weight: 600; color: var(--text); }
.jm-standby .panel-hint { position: relative; }
/* 结果面板：蝶云纹盖掉卦辞纹样（:not 覆盖同权重旧规则要靠顺序在后 + 提权） */
.float-panel.jm-panel .panel-scroll:has(.gua-label) { background-image: url("/static/patterns/dream-butterfly.svg");
background-size: 220px auto; }
.float-panel.jm-panel::before { content: none; } /* 卷草顶不用于梦境 */
.float-panel.jm-panel .panel-scroll .gua-label::before,
.float-panel.jm-panel .panel-scroll .gua-label::after { content: none; }
/* 月白夜青副色（标题签 / 断语标签 / 速览标签） */
.float-panel.jm-panel .panel-scroll .gua-label { color: #2B4356; letter-spacing: 6px; }
.float-panel.jm-panel .jm-verdict,
.float-panel.jm-panel .jm-verdict.good,
.float-panel.jm-panel .jm-verdict.bad { color: #2B4356; letter-spacing: 3px;
border: 1px solid rgba(43, 67, 86, 0.35); background: rgba(231, 237, 244, 0.7); }
.float-panel.jm-panel .jm-fact span,
.float-panel.jm-panel .jm-view-name { color: #2B4356; }
/* 落款：「梦」解此夜 + 梦印（与样稿 A 版同款） */
.jm-sign { display: flex; justify-content: flex-end; align-items: center; gap: 12px;
margin-top: 16px; }
.jm-sign span { font-family: var(--serif); font-size: 11px; color: var(--text-dim);
letter-spacing: 2.5px; }
.jm-sign img { width: 42px; height: 42px; transform: rotate(-3.5deg); opacity: .95;
animation: zhupiSealIn .9s cubic-bezier(.22, .8, .28, 1) .25s forwards; }
/* ═══════════════ 2026-10-13 第十七批反馈（唯一裁决，压过前面同名规则）═══════════════ */
/* ① 复选框/单选框光标：全局 `input, textarea { cursor: text }` 把它们盖成竖杠
（用户图58：「在前面的框里面还是竖杠，改成框里面是小手」）——显式改回小手。 */
input[type="checkbox"], input[type="radio"], input[type="file"] { cursor: pointer; }
.share-hide { user-select: none; -webkit-user-select: none; padding: 2px 0; }
.share-hide:hover { color: var(--cinnabar-dark); }
/* ② 「此刻」卡片时辰下拉（时间卦 / 掐指一算，2026-10-13 用户：时辰可改） */
.now-card .now-line { display: flex; align-items: center; justify-content: center; gap: 10px; }
.now-zhi-sel { appearance: none; -webkit-appearance: none;
border: 1px solid rgba(var(--gold-rgb), .38); border-radius: 8px;
background: var(--sf-glass-w285) url("data:image/svg+xml;utf8,") no-repeat right 8px center;
color: var(--gold); font-family: var(--serif); font-size: 15px; letter-spacing: 1px;
padding: 3px 26px 3px 10px; cursor: pointer;
transition: border-color .22s var(--ease), color .22s var(--ease); }
.now-zhi-sel:hover { border-color: rgba(var(--gold-rgb), .62); color: var(--gold-bright); }
/* ③ 面相参考图（三停示意）的引线与标签 */
.face-fig .pf-tag line { stroke: rgba(122, 102, 66, 0.5); stroke-width: 1.2; stroke-dasharray: 3 4; }
.face-fig .pf-tag text { fill: rgba(122, 102, 66, 0.85); font-family: var(--serif);
font-size: 24px; letter-spacing: 2px; }
/* ④ 面相/手相参考图线条加深（纸色底上淡金太浅，图看不清） */
.face-fig .hand-line, .palm-fig .hand-line { color: rgba(122, 102, 66, 0.80); stroke-width: 2; }
.face-fig .hand-crease, .palm-fig .hand-crease { color: rgba(122, 102, 66, 0.72); stroke-width: 1.6; }
.face-fig .xlr-outline, .palm-fig .xlr-outline { stroke-width: 2.4; }
/* ============================================================
第十八批（2026-10-14 用户 图73）：「更多」下拉两项修正
① 副题行已从 DOM 删除（见 app.js buildMoreNav）
② 项与项不再拼接 —— 原 `a + a { border-radius: 0 }` 让相邻项成直角相连，
悬停下一项时背景块与上一项的高亮在交界处视觉重合（用户：「框和第一个重合了」）。
唯一裁决：每项独立圆角 + 2px 间隙；首尾特例一并作废。
============================================================ */
.nav-more-list a { border-radius: 9px !important; margin: 2px 0 !important; }
.nav-more-list a + a { border-top: none !important; }
.nav-more-list a:first-child,
.nav-more-list a:last-child,
.nav-more-list a:only-child { border-radius: 9px !important; }
/* ============================================================
大六壬 · 掌上十二宫（2026-10-14 第十八批）
地盘十二支固定落四指指节（净图手原样、食指在左，与通行掌诀图一致）；
起课后每位下叠朱色小字 = 天盘支；三传（初/中/末）与贵人标色。
============================================================ */
.dlr-cell text { text-anchor: middle; font-family: var(--serif); }
.dlr-cell .dc-name { fill: rgba(122, 102, 66, .94); font-size: 26px; font-weight: 600;
letter-spacing: 1px; paint-order: stroke; stroke: var(--sf-glass-w85); stroke-width: 3px; }
.dlr-cell .dc-tian { fill: rgba(178, 58, 46, .9); font-size: 18px; font-weight: 600;
paint-order: stroke; stroke: var(--sf-glass-w85); stroke-width: 2.5px; }
.dlr-cell.chuan .dc-name { fill: #8E2C22; font-weight: 700; }
.dlr-cell.gui .dc-name { fill: var(--cinnabar);
filter: drop-shadow(0 0 6px rgba(178, 58, 46, .35)); }
/* ============================================================
第十八批二（2026-10-14 用户 图74）：掐指字的强调
① 字被掐到：放大→回落（JS Web Animations），此处提供 transform 基准
② 掐到即朱色 + 微光，一眼看清走到哪个字
============================================================ */
.xlr-cell .xc-name { transform-box: fill-box; transform-origin: center; }
.xlr-cell.on .xc-name { filter: drop-shadow(0 0 6px rgba(178, 58, 46, .42)); }
/* 大六壬：左栏「起课时间」输入（与掐指页「此刻」卡同语言） */
.dlr-time-box { margin: 10px 0; }
/* 2026-10-17 三审（用户："左侧的性别还没有上移到手的统一高度，性别啥的没居中"）：
大六壬的 #castBtn 是 display:none，左栏 "可见末元素" 是 #dlrTimeBox，
原来只有首元素吃到 margin-top:auto → 整块被压到栏底。给可见块补 margin-bottom:auto，
与中间手掌同高居中。 */
#inputCol #dlrTimeBox { margin-top: auto; margin-bottom: auto; }
/* 2026-10-17 三审（用户："左侧性别和起课时间都得居中"）：标签/输入文字全部居中，
与掐指页的 .inp-label / 此刻卡同一套排版。 */
.dlr-time-box label { display: block; font-size: 13px; color: #8A7B66; margin-bottom: 6px;
letter-spacing: .5px; text-align: center; }
.dlr-time-box input { width: 100%; box-sizing: border-box; padding: 10px 12px;
border-radius: 10px; border: 1px solid rgba(168, 137, 78, .35);
background: var(--sf-card); color: var(--text); font-size: 14px; text-align: center; }
.dlr-time-box input:focus { outline: none; border-color: rgba(178, 58, 46, .5); }
/* ============================================================
第十八批四（2026-10-14 用户 图75/77）：
① 手笔画延迟淡入删除 —— 原 .hand-detail{opacity:0; animation: handInk .9s ease .5s}
导致"先出指节线和字、手 0.5s 后才到"（用户：「先出现手指头的分隔线和字，
然后才是整个手，这不对」）
② 「更多」里的模块：中栏顶部显示模块名（主导航的模块不写，导航栏已有高亮）
============================================================ */
.hand-detail { opacity: 1; animation: none; }
body.in-more-mod #stageTitle { display: block; }
/* ===== 2026-10-14 第二十批：指节线变细 =====
用户原话（图80）："掐指一算的手的掌纹这几个短横线粗，变细点。"
做法：线本身由「成对双线（±2.5px）」改成单线（app.js PALM_CREASES/PALM_CELLS），
描边宽度同步收细。**唯一裁决** —— 前面的 .hand-crease / .palm-fig .hand-crease 宽度作废。 */
.hand-crease { stroke-width: 0.9; }
.xlr-hand .hand-crease { stroke-width: 0.9; }
.face-fig .hand-crease, .palm-fig .hand-crease { stroke-width: 1.1; }
/* ===== 2026-10-14 第二十一批：数字格占位问号 → 主视觉数珠同款 =====
用户原话（图85）："把左面的问号改为右面的样式。"（左栏数字格三小框的 "?"）
右面 `.nv-tile` 的问号 = var(--serif) 衬线 + 泥金 #8A6F3C；
左面默认走浏览器占位灰，且部分浏览器给占位默认半透明。
**唯一裁决** —— 本规则在文件末；聚焦隐藏占位（.ng-box input:focus::placeholder）
的旧规则不受影响（color: transparent 优先级更高）。 */
.ng-box input::placeholder { color: #8A6F3C; opacity: 1; font-family: var(--serif); letter-spacing: 1px; }
/* ===== 2026-10-14 第二十三批①：导航小罗盘摆件（全站常驻） =====
用户原话："这个小罗盘能不能一直存在的这个网站的各个界面……他平常在最左侧的
左上角的导航栏，易算阁的左面，或者右上角的那里。登录注册那里，小的自转，
当别人点击他，他会有反应，会晃动一下，拽出导航栏可以哪都移动，当拽着他移到
导航栏时，会自动吸附在两个原位，都可以吸附。"
第二条："拽他一个边的时候，小手会变成抓握的状态，他会有拉扯感，和塔罗牌一样，
但不是会回到原位，而是会变大，当一直拽着拉的时候会变大。"
实现：position:fixed 覆盖层（不改导航布局 → 导航回归零影响）；
自转(.orn-spin)与晃动(.orn-wob)分两层包裹 —— 一个 transform 一个写入方；
z=60：高过导航(50)、低于抽屉/弹层(1000+)。 */
.orn-compass {
position: fixed; z-index: 60;
width: 44px; height: 44px; border-radius: 50%;
cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none;
filter: drop-shadow(0 3px 9px rgba(60,48,28,.22));
transition: left .24s cubic-bezier(.3,.7,.3,1), top .24s cubic-bezier(.3,.7,.3,1),
width .2s ease, height .2s ease;
}
.orn-compass.dragging { cursor: grabbing; transition: none; }
.orn-compass.pulling { cursor: grabbing; transition: none; }
.orn-compass.edge { cursor: grabbing; } /* 放到边上：小手变抓握（用户口径） */
.orn-compass.edge .orn-wob::after { /* 边沿提示环：能拉 */
content: ""; position: absolute; inset: -5px; border-radius: 50%;
border: 1.5px dashed rgba(178,58,46,.55); animation: ornEdgeBreathe 1.6s ease-in-out infinite;
}
.orn-compass.snap-hint .orn-wob::after {
content: ""; position: absolute; inset: -7px; border-radius: 50%;
border: 2px solid rgba(178,58,46,.5); box-shadow: 0 0 18px rgba(178,58,46,.35);
}
.orn-wob { position: relative; width: 100%; height: 100%; }
.orn-wob.wobbling { animation: ornWobble .66s cubic-bezier(.36,.07,.19,.97); }
.orn-spin { width: 100%; height: 100%; animation: ornSpin 88s linear infinite; will-change: transform; }
@keyframes ornSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* 2026-10-20 连续问卦 × 小罗盘（蝴蝶结态）：挂件原位变红色蝴蝶结，
小罗盘 40px 挂在下方；整组可拖，规则见 app.js「蝴蝶结态」段。 */
.orn-bow { position: fixed; z-index: 60; width: 56px; height: 40px;
cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none;
filter: drop-shadow(0 5px 9px rgba(60,48,28,.22));
transition: opacity .18s var(--ease-out); }
.orn-bow:active { cursor: grabbing; }
.orn-bow svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.orn-compass[data-mode="bow"] { cursor: grab; }
/* 自由态小罗盘拖到挂件附近：挂件亮朱红描边，提示可吸附 */
.streak-ribbon.sr-snap { border-color: var(--cinnabar, #B23A2E);
box-shadow: 0 0 0 3px rgba(178,58,46,.16), 0 6px 18px rgba(60,48,28,.14); }
@keyframes ornWobble {
0%, 100% { transform: rotate(0deg); }
15% { transform: rotate(-13deg); } 30% { transform: rotate(10deg); }
45% { transform: rotate(-7deg); } 60% { transform: rotate(5deg); }
75% { transform: rotate(-2.5deg); } 88% { transform: rotate(1.2deg); }
}
@keyframes ornEdgeBreathe { 0%,100% { opacity: .45; } 50% { opacity: .95; } }
.orn-compass svg { width: 100%; height: 100%; display: block; pointer-events: none; }
/* 摆件滑过导航标题时的反馈样式（第二十三批①；用户："移动到各个标题的时候标题是有反馈样式的"）——
指针被摆件捕获，原生 :hover 到不了标题，这里由 JS 加 .orn-hover 补上，
配色沿用第九批的朱砂悬停口径。 */
.nav-links > a.orn-hover, .nav-side a.orn-hover, .nav-more-btn.orn-hover {
color: var(--cinnabar, #B23A2E) !important;
background: rgba(178,58,46,.05) !important;
}
/* ===== 2026-10-14 第二十三批②：铜钱卦「龟壳摇卦」仪式场景 =====
用户原话："开始算卦时，铜钱要有一个从下面飞起到竹筒或者乌龟壳里，得从口进……
乌龟壳的话，起飞的时候，乌龟壳也开始背面对着我们，然后铜钱从他头的窟窿里进去。
开始摇晃起来。有双手在摇晃，该摇几下就摇几下，然后手和竹筒、乌龟壳都没了，
只剩铜钱出的结果，出现在中间……"
实现：场景覆盖在 .coins-visual 上（真铜钱 .casting 时隐去，结果出现那刻再亮）；
壳/袖/指画在 cs-rig-svg 里（壳压袖、指压壳）；飞入铜钱 = 3 个 .cs-fly 按
视线抛物线进「头窟窿」（场景坐标 50% / 21% 处）。 */
.coins-visual { position: relative; }
.coin-scene { position: absolute; inset: 0; display: none; pointer-events: none; }
.coin-scene.on { display: block; }
.cs-rig { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
transition: opacity .3s ease, transform .34s cubic-bezier(.4,.6,.3,1); }
.cs-rig-svg { width: 78%; height: auto; overflow: visible; }
/* 第二十四批：无手版摇晃（用户"去掉双手，只有龟甲摇晃。是真实的摇晃动作"）。
第二十六批重做（用户："龟甲晃的方式不对，按照现实中的摇晃方式来"）——
现实摇卦 = 手腕为支点（盘底几乎不动）的连续「上下颠 + 左右倾」：以垂直颠动为主
（幅度大、有抛起回落），倾斜为辅，一轮 420ms 内两次颠（≈4Hz 的"哗啦"节奏），
影子留在地上（物起影缩/物落影复）。
旧版只有慢速纯左右摆（360ms 只摆 ±2.7deg）→ 看着像"飘"不像"摇"，本轮作废。
2026-11-02 摇卦物件换竹筒：宏观摆（csShakeMacro）参数换成 Gemini bambooShake
（左右顿挫：±3~6deg 的旋转主导、配小幅平移），微观抖振（csRattle）换成高频
平移碰撞；不新增第二套动画，总时长仍 420ms×6（与 JS SHAKE_N/SHAKE_MS 同步）。
铜钱全程不可见（.casting 隐真钱 + 飞钱入口后 opacity:0），只有口沿高光
.cs-mouth-hi 走 csMouthPulse 做明暗变化。 */
.coin-scene.shaking .cs-rig-svg { animation: csShakeMacro 420ms cubic-bezier(.36,.07,.19,.97) 6; transform-origin: 50% 86%; }
.coin-scene.shaking .cs-shell-g { animation: csRattle 88ms linear infinite;
transform-box: fill-box; transform-origin: 50% 88%; }
.coin-scene.shaking .cs-shadow-g { animation: csShadowPulse 210ms ease-in-out infinite;
transform-box: fill-box; transform-origin: 50% 42%; }
.coin-scene.shaking .cs-mouth-hi { animation: csMouthPulse 240ms ease-in-out infinite; }
/* 2026-11-02 摇卦物件换竹筒：摇动期间飞钱强制不可见（兜底，不依赖 csFly 结束态），
真铜钱已由 .coins-visual.casting 隐去；只在筒口留 csMouthPulse 明暗。 */
.coin-scene.shaking .cs-fly { opacity: 0 !important; }
@keyframes csShakeMacro {
0% { transform: rotate(0deg) translate(0, 0); }
20% { transform: rotate(6deg) translate(-2px, -4px); }
40% { transform: rotate(-5deg) translate(3px, -2px); }
60% { transform: rotate(4deg) translate(-1px, -5px); }
80% { transform: rotate(-3deg) translate(2px, -1px); }
100% { transform: rotate(0deg) translate(0, 0); }
}
@keyframes csRattle {
0%, 100% { transform: translate(0, 0); }
10% { transform: translate(1.5px, -1.5px); }
20% { transform: translate(-2px, 2px); }
30% { transform: translate(1px, 2px); }
40% { transform: translate(-1.5px, -1px); }
50% { transform: translate(2px, -1.5px); }
60% { transform: translate(-1px, 1.5px); }
70% { transform: translate(1.5px, 1px); }
80% { transform: translate(-2px, -2px); }
90% { transform: translate(0, 0); }
}
@keyframes csShadowPulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(.9); opacity: .7; }
}
@keyframes csMouthPulse {
0%, 100% { opacity: .35; }
50% { opacity: .85; }
}
.coin-scene.gone .cs-rig { opacity: 0; transform: scale(.86); }
.cs-fly { position: absolute; width: 15%; aspect-ratio: 1; left: 42.5%; top: 108%; opacity: 0; }
.cs-fly .cs-coin svg { width: 100%; height: 100%; display: block;
filter: drop-shadow(0 6px 10px rgba(60,48,28,.25)); }
.cs-fly.f1 { --x0: 22%; --x1: 38%; }
.cs-fly.f2 { --x0: 42.5%; --x1: 47%; }
.cs-fly.f3 { --x0: 63%; --x1: 56%; }
.coin-scene.flying .cs-fly { animation: csFly 660ms cubic-bezier(.33,.6,.3,1) both; }
.coin-scene.flying .cs-fly.f2 { animation-delay: .16s; }
.coin-scene.flying .cs-fly.f3 { animation-delay: .32s; }
@keyframes csFly {
0% { left: var(--x0); top: 108%; opacity: 0; transform: scale(.9) rotate(-16deg); }
16% { opacity: 1; }
70% { left: var(--x1); top: 38%; opacity: 1; transform: scale(.8) rotate(8deg); }
100% { left: 42.5%; top: 21%; opacity: 0; transform: scale(.62) rotate(14deg); }
}
.coins-visual .coin { transition: opacity .3s ease; }
.coins-visual.casting .coin { opacity: 0; }
/* ===== 2026-10-14 第二十四批：批语卡「准备」阶段（唯一裁决，追加于末尾）=====
用户："批语卡出现时，不是直接出现内容，好像是得准备吗，准备好了才出现东西，之前没内容。"
实现：打开卡片先见「研墨三点」准备态（盖住卡片区）；渲染完成且停留 ≥700ms 后
.share-stage.ready → 准备层淡出、卡片内容淡入。切换方案/版式不重播。 */
.share-stage #shareCanvas { opacity: 0; transition: opacity .55s ease .05s; }
.share-stage.ready #shareCanvas { opacity: 1; }
.share-prep { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 16px; border-radius: 10px;
background: linear-gradient(180deg, rgba(var(--bg-rgb),.97), var(--sf-glass-w97));
transition: opacity .45s ease; }
.share-stage.ready .share-prep { opacity: 0; pointer-events: none; }
.prep-dots { display: flex; gap: 11px; }
.prep-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(178,58,46,.72);
animation: prepInk 1.05s ease-in-out infinite; }
.prep-dots i:nth-child(2) { animation-delay: .18s; }
.prep-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes prepInk {
0%, 100% { opacity: .22; transform: scale(.7); }
45% { opacity: 1; transform: scale(1); }
}
.prep-txt { font-family: var(--serif); font-size: 14px; letter-spacing: 5px;
color: rgba(138,123,102,.95); }
/* ===== 2026-10-14 第二十四批：留存三件套（唯一裁决，追加于末尾）=====
① 连续天数（结果页脚 .gua-streak + 左栏 .daily-streak）② 回来记结果（.ysg-nudge）
③ 首屏价值主张（.daily-value）。方案：docs/留存与转化方案-20261014.md §三/§五。 */
.gua-streak { flex-basis: 100%; text-align: center; font-family: var(--serif);
font-size: 12px; letter-spacing: 2px; color: rgba(138,123,102,.95); padding-top: 2px; }
.daily-value { margin-top: 14px; font-family: var(--serif); font-size: 12.5px; letter-spacing: 1px;
color: rgba(138,123,102,.9); text-align: center; line-height: 1.7; }
.daily-streak { margin-top: 6px; font-family: var(--serif); font-size: 12.5px; letter-spacing: 2px;
color: var(--cinnabar, #B23A2E); text-align: center; opacity: .9; }
.ysg-nudge { position: fixed; left: 18px; bottom: 18px; z-index: 1015; display: flex; align-items: center; gap: 10px;
max-width: min(430px, 86vw); padding: 10px 14px; border-radius: 10px;
background: linear-gradient(180deg, var(--sf-glass-w98b), var(--sf-glass-w98c));
border: 1px solid rgba(178,58,46,.35); box-shadow: 0 8px 26px rgba(60,48,28,.18);
font-family: var(--serif); font-size: 13.5px; color: #4A3F33; opacity: 0; transform: translateY(8px);
transition: opacity .3s ease, transform .3s ease; }
.ysg-nudge.on { opacity: 1; transform: none; }
.ysg-nudge .yn-go { font-family: var(--serif); font-size: 13px; color: #FFFDF8;
background: linear-gradient(180deg, #C4483A, #B23A2E); border: none; border-radius: 7px;
padding: 6px 12px; cursor: pointer; letter-spacing: 1px; }
.ysg-nudge .yn-x { background: transparent; border: none; color: rgba(90,78,62,.6); cursor: pointer; font-size: 13px; }
/* ===== 2026-10-14 第二十五批：数字卦左侧格子占位 = 主视觉数珠同款「？」 =====
用户原话："再说一遍，左面三个？，换成右面的？，右面的问号好看。换了"
右面 `.nv-tile` 的问号 = 全角「？」+ var(--serif) + 泥金 #8A6F3C + 54px（浅底主题）；
左面原来 1/2 格是半角 "?"、第三格是"可空"——字形与字号都不同，看着就不像一套。
现：① app.js 占位文本统一成全角「？」 ② 占位字号 26→32px（跟随格子放大）。
聚焦隐藏占位（.ng-box input:focus::placeholder → transparent）不受影响。
**唯一裁决** —— 本规则在文件末，覆盖 3796 行那条（色/字族沿用，补字号）。 */
.ng-box input::placeholder { color: #8A6F3C; opacity: 1; font-family: var(--serif);
font-size: 32px; letter-spacing: 0; }
/* ===== 2026-10-14 第二十五批：小罗盘摆件 —— 放大后「里面的东西可以转」 =====
用户原话："放大后，里面的东西可以转，每个圈里面的东西，像之前在每日卦里面一样，
可以抓住转，指针可以转带动所有转。"（转动语义照搬每日卦大罗盘：抓圈转圈 / 抓指针
三环整体 / 松手惯性回正；外盘固定不可拖）
· .orn-rot = 第二十五批新增的手动转角层（JS 写 transform）—— 与 .orn-spin 的
CSS 自转动画分离，两者互不抢同一个 transform（RUNBOOK「一个写入方」）。
· .orn-big = 自由态尺寸 ≥150px，悬停圈/指针时给抓握光标提示。 */
.orn-rot { width: 100%; height: 100%; }
.orn-compass.orn-big.rz-grab { cursor: grab; }
.orn-compass.rz-turn { cursor: grabbing; }
/* ===== 2026-10-14 第二十六批：全站输入框文字居中（唯一裁决）=====
用户（图205054）："只要有输入框的地方，是上下左右都居中"。
单行 input 的上下居中 = 浏览器原生行为；这里统一左右居中（占位文字同）。
多行大框（.q-area 解梦 / g_dream）保持左对齐顶排 —— 内容多了要往下排、不压中线。
覆盖：更多里的通用模块（.gen-form 内所有文本输入）、记录搜索、账号名、导航搜索框。 */
.gen-form input[type="text"], .gen-form input[type="number"], .gen-form input:not([type]),
#histSearch, #acctUser, #navSearchInput { text-align: center; }
/* ===== 2026-10-14 第二十六批：结果页脚「再占一卦」挤一块（图205348）=====
用户："卦辞下面的再占一卦这些怎么挤一块了。咋回事。"
根因：.gua-again-row 是 flex nowrap 行，三个子元素默认 flex-shrink:1 ——
连续天数（basis:100%）没被挤去第二行，反而三个同挤一行（行宽 507：112+97+279），
两个按钮被压窄 →「再占一卦」纵排两行（实测 h=64）、「分享批语卡」三行（h=87）。
裁决：① 容器允许换行；② 两个按钮不收缩不换行（保原宽单行）；
③ 连续天数 grow 1 / shrink 0 / basis 100% → 恒独占第二行、文案不挤。 */
.gua-again-row { flex-wrap: wrap; }
.gua-again-row > .gua-again, .gua-again-row > .gua-share { flex: 0 0 auto; white-space: nowrap; }
.gua-again-row > .gua-streak { flex: 1 0 100%; }
/* ===== 2026-10-14 第二十六批：记录单条「分享」—— 贴在「导出」左边（图205635）=====
用户："卦辞记录里面，右上角导出左面在加一个分享，到时候可以分析本次的批语。"
.hist-exp（导出）right:74；导出按钮实宽 ≈45（12.5px 两字 + 3/9 padding + 边框），
分享 right = 74 + 45 + 6 = 125，top 与导出一致 12。 */
.hist-share-one { position: absolute; right: 125px; top: 12px; }
/* ===== 2026-10-14 第二十六批：五行条联动去红框（图205848）=====
用户："这个不是说了吗，下面的金木这些只是增高就行，不要有这些红色横杠了。"
悬停四柱 ↔ 五行条联动：高亮手段改为"只增高"（3544 的 height 7→11px 保留），
去掉 3485 那条 2px 朱红外圈（用户说的"红色横杠"）。文字变色（lit）保留。 */
.wx-item.lit .wx-bar { box-shadow: none; }
/* ===== 2026-10-14 第二十六批：卦辞面板开着时「更多」下拉被盖住（图211533）=====
用户："卦辞没关的时候，点更多出现这种情况，修改。"
根因：菜单 .nav-more-list 自身 z=1010(--z-dropdown)，但它在 .nav 里，
.nav 的 z-index=50 形成 stacking context —— 整棵子树都被钉在 50 层，
结果面板(--z-result 980) 直接盖过菜单（实测：菜单项 elementFromPoint 命中 resultSlide）。
修法：菜单开启时把导航本体抬到 --z-dropdown（结果面板 top 恒 ≥76，不与导航条重叠，
视觉零变化；抽屉/弹窗打开时不会同时开菜单，无冲突）。 */
.nav:has(.nav-more.open) { z-index: var(--z-dropdown); }
/* ===== 2026-10-14 第二十六批：小罗盘自转改「里圈转、乾圈不转」（用户原话）=====
"小罗盘自转，不是整个圆转，是里面的各圈一起转，然后外层的那个乾圈不转，
然后给我确定哪个字在最上面不对，正冲最顶，然后里面的各圈转，然后别的不变。"
结构（buildCompass）：外层卦名环 r285 起于 0° → 顶部正是「乾」（正冲最顶 ✓，固定）；
里圈 = #luopanInner（廿四山/先天八卦/十二地支三环）+ #txLayer（正立文字层）。
改法：自转动画从整个容器（.orn-spin）移到里圈两组 —— 字格一起转、
外圈「乾」钉在正顶不动。SVG 子元素写 CSS transform 必须显式
transform-box: view-box + origin 50% 50%（否则绕 SVG 原点甩飞）。 */
.orn-spin { animation: none; }
/* 2026-10-15 第二十八批修：本块原「两组直接挂动画」已被下方第二十八批②的
.orn-inner-spin 包裹组取代 —— 不移除则两层动画叠加成双转速（实测
orn-luopanInner / orn-txLayer 与包裹组同挂 ornSpin，内盘实速 44s/圈）。
现在自转只由 .orn-inner-spin 一份驱动：88s/圈。 */
/* ===== 2026-10-14 第二十六批：奇门校准框颜色对齐其它页（用户原话："模块左侧有
校准进度的，按照姻缘合婚界面左侧窄度设置，然后校准进度框里面一样的颜色"）=====
现状：奇门 .cbox-white 保持"浮层白"（实测透明底 + 金边透明度 0.1）——
与姻缘/八字/紫微/财运各页（浅纸底 rgba(255,252,245,.78) + 金边 .32）不一致。
本轮统一：奇门校准框也用浅纸底 + 金边 .32。（宽度实测各页一致 291px，无需动。） */
.calib-box.cbox-white { background: rgba(255, 252, 245, 0.78);
border: 1px solid rgba(var(--gold-rgb), 0.32); }
/* ===== 2026-10-14 第二十七批①：全角「？」/占位居中 + 第三格「可空」 =====
用户（图221256）："第三个框里面写着可空，我点击可以写东西，不要写？"、
"还有？问号都居中，上下左右居中"。
实测：全角「？」的字形 ink 在字身框里偏左 —— 左栏 32px 字号偏 8px、
主视觉数珠 54px 字号偏 13px（= 0.24em，两个字号同比例）。
修法：只在"正在显示问号"的状态做位移（`:placeholder-shown` / `.nv-tile.ph`），
输入了数字（半角，本来就居中）不再位移。
⚠ `.ng-box input:placeholder-shown` 的 text-indent 在居中排版里只挪一半（indent/2），
所以 32px 字要写 .5em = 16px（实移 8px）；数珠是 flex 居中，
padding-left 同样只挪一半，54px 字写 26px（实移 13px）。 */
.ng-box input:placeholder-shown { text-indent: 16px; }
.ng-box.ng-opt input:placeholder-shown { text-indent: 0; } /* 第三格是"可空"两字，本来居中 */
.nv-tile.ph { padding-left: 26px; }
/* 第三格「可空」提示字：小一号的灰字（可点可输入，聚焦即隐占位同旧口径） */
.ng-box.ng-opt input::placeholder { font-size: 26px; letter-spacing: 1px; color: #6B655B; }
/* ⚠ 15px 小字会被 26px 的行盒基线压得偏低 5.5px（实测）；与输入框同字号 26px
才能上下居中（实测偏移 +1.5px，宽 49px 在 80px 格里放得下）。 */
/* ===== 2026-10-14 第二十七批②：打开「更多」时导航小罗盘被盖住 =====
用户（图224015）："当我打开更多时，小罗盘就不见了，打开更多，小罗盘也得在"。
根因（probe_b27_diag 实证）：菜单打开时 .nav 的 z-index 提到 --z-dropdown(1010)
（第二十六批为修"菜单被卦辞面板盖住"），导航自带不透明渐变底 → 把挂在 body 上、
z-index:60 的摆件整个盖住（elementFromPoint 在摆件中心命中 .nav）。
修法：菜单打开期间把摆件抬到菜单之上（原本就是"导航里的装饰件"，不抢面板层级）。 */
.nav:has(.nav-more.open) ~ #ornCompass { z-index: calc(var(--z-dropdown) + 1); }
/* ===== 2026-10-14 第二十七批③：带「校准进度」的页，左栏输入条与姻缘合婚同宽 =====
用户原话（26/27 两批重复）："只要有校准进度的宽度也得和姻缘合婚一样，左侧宽度一样。"
实测：姻缘页的出生条/下拉被 .hunyin-party 内缩 13px（265 vs 其它页 291），
其它页满宽 —— 统一按姻缘那档窄度。（.hunyin-party 里的字段不受影响，避免二次内缩。） */
#inputCol.with-calib > .dt-field,
#inputCol.with-calib > .row2,
#inputCol.with-calib > .dt-row,
#inputCol.with-calib > .field { margin-left: 13px; margin-right: 13px; }
/* ===== 2026-10-14 第二十八批①：五行条整体加粗一半 =====
用户（2026-10-14 夜）："五行条在粗一半，就行。" —— 基础高 7px→10.5px（+50%），
悬停高亮同步 11px→15px（保持高亮时比常态更粗的既有手感）。 */
.wx-bar { height: 10.5px; }
.wx-item.lit .wx-bar { height: 15px; }
/* ===== 2026-10-14 第二十八批②：小罗盘自转只转内盘（乾固定正顶）=====
用户（图231739 全屏小罗盘）："这个罗盘乾在左面不在上面，修改。"
旧版 .orn-spin 动画转整个克隆 SVG → 外八山（乾坎艮震巽离坤兑）跟着转，乾跑到左面。
新裁决：动画移到克隆体内新包组 .orn-inner-spin（只含 luopanInner+txLayer），
外八山/外框/天池/磁针固定 —— 乾恒定位正顶；内盘继续 88s/圈 自转。
transform-box:view-box 让 rotate 原点落回 viewBox 的盘心 (320,320)。 */
.orn-spin { animation: none; }
.orn-inner-spin { transform-box: view-box; transform-origin: 320px 320px;
animation: ornSpin 88s linear infinite; will-change: transform; }
/* ============================================================
紫微流年块（2026-10-15 第二十九批）
用户：「紫微流年四化已能算…要不要加流年页签」→「你推荐加就加」。
追加在末尾，不改上文 .zw-* 既有规则。
============================================================ */
.zw-ln { margin-top: 12px; padding: 10px 12px; border-radius: 10px;
border: 1px solid rgba(var(--gold-rgb), .28);
background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012)); }
.zw-ln-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-family: var(--serif); letter-spacing: 1px; color: var(--gold); }
.zw-ln-head strong { font-size: calc(var(--panel-fs, 17px) * 1.02); }
.zw-ln-btn { margin-left: 2px; padding: 2px 9px; border-radius: 999px; cursor: pointer;
font-size: calc(var(--panel-fs, 17px) * .82); color: var(--text-dim);
border: 1px solid rgba(var(--gold-rgb), .3); background: transparent; }
.zw-ln-btn.active { color: #1C1B19; background: var(--gold); border-color: var(--gold); }
.zw-ln-body { margin-top: 7px; font-size: calc(var(--panel-fs, 17px) * .95); color: var(--text-dim); }
.zw-ln-body strong { color: var(--gold-bright); font-family: var(--serif); }
.zw-ln-huas { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; }
.zw-ln-hua { font-size: calc(var(--panel-fs, 17px) * .95); color: #C9836F; font-family: var(--serif); }
.zw-ln-hua em { font-style: normal; color: var(--text-dim); margin-left: 4px; }
/* 格上打标：流年命宫（朱点）/ 当前大限（金线），两者可叠加 */
.zw-palace.zw-ln-mk { outline: 1px solid rgba(201,131,111,.85); }
.zw-palace.zw-dx-mk { box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .45); }
.zw-palace.zw-ln-mk .zw-head { color: #E0A48F; }
/* 流年块压两行（2026-10-15 第二十九批修：四行版把最后一排宫挤到页脚下面） */
.zw-ln-meta { font-size: calc(var(--panel-fs, 17px) * .88); color: var(--text-dim);
font-family: var(--serif); margin-left: 6px; }
/* ============================================================
第三十批（2026-10-15 用户图反馈 + 设计评审快赢）—— 追加于末尾（唯一裁决）
逐条对应见 app.js 同名注释；本块只做表面层，不动任何既有布局口径。
============================================================ */
/* ① 小罗盘·导航清晰度（用户："还是不清晰在导航栏，再清晰点"）——
尺寸 44→52 已由 JS（ORN_NAV）生效。
2026-10-15 用户第2轮：「颜色恢复之前的颜色。不要这么亮」→ 撤销对比/饱和滤镜，
恢复原投影（原来的颜色 + 只保留尺寸与投影）。 */
.orn-compass { filter: drop-shadow(0 3px 9px rgba(60,48,28,.22)); }
/* ② 连续问卦·全站左侧竖排挂件（用户："左下角这个连续问卦两天，看放在左侧边上，
竖排或者弄个日历还是啥，上面写着连续问卦两天" + "每个界面都显示"）——
≥2 天才由 JS 建节点；这里只负责样式。数字为本挂件主视觉（朱红放大）。 */
.streak-ribbon { position: fixed; left: 10px; top: 42%; z-index: 59;
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 13px 8px 11px; border-radius: 13px; cursor: default;
background: linear-gradient(180deg, var(--sf-glass-a), var(--sf-glass-b));
border: 1px solid rgba(var(--gold-rgb), .5);
box-shadow: var(--shadow-card-soft);
font-family: var(--serif); color: var(--text-dim); user-select: none; }
/* 2026-10-15 用户第2轮：「字整体大点」12→13.5、数字 27→30；红点已删 */
.streak-ribbon .sr-label, .streak-ribbon .sr-unit {
writing-mode: vertical-rl; text-orientation: upright;
font-size: 13.5px; letter-spacing: 6px; }
.streak-ribbon .sr-num { font-size: 30px; line-height: 1; font-weight: 700;
color: var(--cinnabar, #B23A2E); font-family: var(--serif); }
/* 2026-10-15 用户第2轮：「鼠标放上去出现椭圆那种框，和连续这个框一样，只是横的，
颜色也一样」—— 悬停横版药丸提示。原为单场景 ::after 实现，第三十一批·第三轮起
改由全站统一组件 .ysg-tip 承担（streak-ribbon 仍只挂 data-tip，行为不变）；
样式唯一来源见文件末尾「提示统一」块。（旧 .streak-ribbon::after 规则已作废） */
@media (max-width: 1150px) { .streak-ribbon { display: none; } }
/* ③ 结果页脚·连续天数加重（用户 图2："连续2天这些字再大点……主要是2天重点"）——
整行 12→14.5px，"N 天" 朱红 19px 加粗（数字重点）。 */
.gua-streak { font-size: 14.5px; color: var(--text-dim); }
.gua-streak .sk-days { color: var(--cinnabar, #B23A2E); font-size: 19px;
font-weight: 700; letter-spacing: 1px; padding: 0 2px; }
/* ④ 首屏价值主张两行版（设计评审 QuickWin①：全站最小最淡的字）——
12.5px/≈3.2:1 → 14px/≥4.5:1；两行手动分行，不再被从「免/费」中间折断。 */
.daily-value { font-size: 14px; color: var(--text-dim); line-height: 1.75; }
.daily-value .dv-l1 { display: block; color: var(--text-dim); letter-spacing: 1.5px; }
.daily-value .dv-l2 { display: block; margin-top: 3px; font-size: 13px;
color: var(--gold-dim, #8C7444); letter-spacing: .5px; }
/* ⑤ 卦辞记录·搜索框明确标识（用户 图2："应该明确标识，显示这是搜索框"）——
基础规则里是暗色主题残留（白色 14% 描边≈看不见）→ 纸底金框 + 左侧放大镜。 */
.hist-search-box { position: relative; margin: 2px 0 12px; }
.hist-search-box .hist-search { margin: 0; padding: 10px 14px 10px 40px;
background: var(--sf-glass-w292); border: 1px solid rgba(var(--gold-rgb),.5);
color: var(--text); }
.hist-search-box .hs-ico { position: absolute; left: 13px; top: 50%;
width: 16px; height: 16px; transform: translateY(-50%);
color: var(--gold-dim, #8C7444); pointer-events: none; }
/* ⑥ 待机空态骨架条（设计评审 ③-P1：五页「—」看着像渲染坏了） */
.skl { display: inline-block; border-radius: 6px;
background: linear-gradient(180deg, rgba(var(--gold-rgb),.18), rgba(var(--gold-rgb),.08)); }
.skl-lg { width: 58px; height: 18px; }
.skl-sm { width: 44px; height: 10px; opacity: .85; }
/* ⑦ 手相图注对比度（设计评审 漏洞1：全站最低两处，2.1/2.4:1 → --text-dim ≈4.9:1） */
.pf-cap { color: var(--text-dim); }
.pf-legend { color: var(--text-dim); }
/* ⑧ 紫微宫名加深 + 29 批流年标记色反效果修正（设计评审 2.1/③-紫微）：
宫名 gold #A8894E≈3.0:1 → gold-dim #8C7444≈4.1:1（已带 700 粗）；
流年命宫宫名 #E0A48F≈1.9:1 → 朱砂 5.4:1；四化 chips #C9836F → gold-dim。 */
.zw-head { color: var(--gold-dim, #8C7444); }
.zw-palace.zw-ln-mk .zw-head { color: var(--cinnabar, #B23A2E); }
.zw-ln-hua { color: var(--gold-dim, #8C7444); }
/* ⑨ 「更多」菜单：两列 + 更高视口（设计评审 ③-更多 P1）+ 底部一行「共 N 个模块 · 全部免费」。
2026-10-15 第三十一批修：原来 column-count 多列 + max-height 76vh —— 高度放不下的组
会被浏览器排成菜单右侧看不见的「第三列」（用户实拍"更多里没有面相"：实测 1707×859 下
「相学与生活」组 x=1149，落在菜单右缘 x=1143 之外，整组不可见）。
改为 flex 两列容器 .nm-col（列由 buildMoreNav 切好），只留纵向滚动，
上限抬到 calc(100vh - 96px) —— 1707×859 实测全 6 组可见、无横向溢出。 */
@media (min-width: 900px) {
/* 2026-10-18 用户「往中间挤挤，中间空白太多」：两列收窄到 420（原 560），
两列文字向中间靠拢；4 字标题（196px 列宽）仍不换行。 */
.nav-more-list { display: flex; flex-wrap: wrap; align-content: flex-start;
column-gap: 14px; min-width: 420px; max-height: calc(100vh - 96px); }
.nav-more-list .nm-col { flex: 1 1 0; min-width: 0; }
.nav-more-list .nm-col:empty { display: none; }
.nav-more-list .nm-foot { flex: 0 0 100%; }
}
/* 2026-11-03 P1-1：<900px 改单列（每条独占一行）+ 限宽到视口内。
必须压过 m02.css 的 `body .nav-links a { display:inline-flex }`（菜单在 .nav-links 内），
否则 390 下会排成横向多列、右缘出屏。 */
@media (max-width: 899px) {
.nav-more-list { min-width: 0; width: calc(100vw - 24px); max-width: calc(100vw - 24px); }
body .nav-links .nav-more-list a { display: block; }
/* 按钮在窄屏导航条里可能已出屏，指向三角的 --nm-caret-x 会撑出横向滚动，隐藏 */
.nav-more-list::after { display: none; }
}
.nav-more-list .nm-foot { margin-top: 8px; padding: 9px 12px 4px; text-align: center;
font-family: var(--serif); font-size: 12px; letter-spacing: 1.5px; line-height: 1.8;
white-space: normal;
color: var(--gold-dim, #8C7444); border-top: 1px solid rgba(var(--gold-rgb),.18); }
/* 2026-11-03 P1-1：底部「全部模块索引」入口（沿用朱砂色，不新增色板 token） */
.nav-more-list .nm-foot a { color: var(--cinnabar, #B23A2E); text-decoration: none;
border-bottom: 1px dotted rgba(178,58,46,.45); }
.nav-more-list .nm-foot a:hover { border-bottom-style: solid; }
/* 第三十批 追加②（同上块的续）：结果页脚上下文入口 / 记录抽屉邀请行 / 输入列提示行 */
.gua-context { flex: 1 0 100%; text-align: center; font-family: var(--serif);
font-size: 12.5px; letter-spacing: 1px; color: var(--text-dim); padding-top: 1px; }
.gua-context a { color: var(--gold-dim, #8C7444); text-decoration: none;
border-bottom: 1px dotted rgba(var(--gold-rgb),.45); }
.gua-context a:hover { color: var(--cinnabar, #B23A2E); border-color: rgba(178,58,46,.45); }
.gua-context i { font-style: normal; margin: 0 8px; opacity: .6; }
.hist-invite { margin: 14px 2px 6px; padding-top: 12px; text-align: center;
font-family: var(--serif); font-size: 12.5px; letter-spacing: 1.5px;
color: var(--gold-dim, #8C7444); border-top: 1px dashed rgba(var(--gold-rgb), .3); }
.inp-hint { margin-top: 8px; text-align: center; font-size: 12.5px; letter-spacing: 1px;
color: var(--text-dim); }
/* 2026-11-03 D1-15/96：自动时区提示（与普通提示同字号，弱色，不抢出生时间控件） */
.tz-hint { margin-top: 10px; line-height: 1.6; text-align: left; letter-spacing: .4px; }
/* 第三十批 追加③：手相/黄历等 generic 模块的 CTA 入表单列（设计评审 ③-P1） +
小六壬六宫字加深一档（4.4:1 临界 → ≈5.4:1） */
.gen-go { margin-top: 18px; align-self: stretch; }
.xlr-cell .xc-name { fill: rgba(100, 82, 52, .96); }
/* 第三十批 追加④（用户第2轮）：「金木水火平常状态上下缩一点」——
五行条常态高 10.5 → 8px（悬停/高亮 15px 不动，保持"高亮更粗"的既有手感）。 */
.wx-bar { height: 8px; }
/* 第三十批 追加⑤：风水堪舆结果盘（九宫飞星 + 八宅） */
.fs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 6px; }
.fs-cell { position: relative; padding: 26px 8px 10px; border-radius: 10px; text-align: center;
border: 1px solid rgba(var(--gold-rgb), .3); background: var(--sf-glass-w260); }
.fs-center { border-color: rgba(var(--gold-rgb), .55); background: rgba(var(--gold-rgb), .08); }
.fs-gong { position: absolute; left: 9px; top: 7px; font-family: var(--serif);
font-size: 12px; color: var(--text-dim); }
.fs-yun { position: absolute; right: 9px; top: 7px; font-size: 12px; color: var(--text-dim); }
.fs-yun.on { color: var(--cinnabar, #B23A2E); font-weight: 700; }
.fs-shuang { display: flex; justify-content: center; gap: 16px; }
.fs-shuang b { font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--text); }
.fs-shuang b.on { color: var(--cinnabar, #B23A2E); }
.fs-bz { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 8px 0 4px; }
.fs-bz-row { display: flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 9px;
border: 1px solid rgba(var(--gold-rgb), .22); font-size: 13px; color: var(--text-dim); }
.fs-bz-row b { font-family: var(--serif); color: var(--text); font-weight: 600; flex: 1; }
.fs-bz-row i { font-style: normal; font-size: 12px; }
.fs-bz-row.good { border-color: rgba(var(--gold-rgb), .5); }
.fs-bz-row.good i { color: var(--gold-dim, #8C7444); }
.fs-bz-row.bad { border-color: rgba(178,58,46,.3); }
.fs-bz-row.bad i { color: var(--cinnabar, #B23A2E); }
/* ============================================================
第三十批 追加⑥（框D）：设计评审剩余 P2 零碎 —— 每条对应 app.js 同名注释。
只做表面/交互层，不动任何既有布局口径。
============================================================ */
/* ⑥-1 卦辞记录：分批渲染（每 50 条「加载更多」）+ 删除移入展开详情 */
.hist-more-wrap { text-align: center; margin: 10px 0 2px; }
.hist-more { padding: 8px 22px; border-radius: 999px; cursor: pointer;
font-family: var(--serif); font-size: 13px; letter-spacing: 2px;
color: var(--gold-dim, #8C7444); background: var(--sf-glass-w290);
border: 1px solid rgba(var(--gold-rgb), .4);
transition: border-color .2s var(--ease-out), color .2s var(--ease-out); }
.hist-more:hover { color: var(--cinnabar, #B23A2E); border-color: rgba(178,58,46,.45); }
.hist-ops { margin-top: 12px; padding-top: 10px;
display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
border-top: 1px dashed rgba(var(--gold-rgb), .25); }
/* 2026-11-04：左下角「再算一次」——同卦种/同主题重新起一卦 */
.hist-again { padding: 6px 14px; border-radius: 8px; cursor: pointer;
font-size: 12.5px; letter-spacing: 1px; color: var(--gold-bright, var(--gold));
background: transparent; border: 1px solid rgba(var(--gold-rgb), .42);
transition: background .2s var(--ease-out), border-color .2s var(--ease-out); }
.hist-again:hover { background: rgba(var(--gold-rgb), .08); border-color: rgba(var(--gold-rgb), .7); }
.hist-del2 { padding: 6px 14px; border-radius: 8px; cursor: pointer;
font-size: 12.5px; letter-spacing: 1px; color: var(--cinnabar, #B23A2E);
background: transparent; border: 1px solid rgba(178,58,46,.35);
transition: background .2s var(--ease-out); }
.hist-del2:hover { background: rgba(178,58,46,.07); }
/* ⑥-2 校准进度待机折叠成一行（设计评审 ③-P2：4 项空心圆点对首访是噪音）——
起卦时第一颗点变金（.done）即展开四行；resetCalib 清点后自动折回 */
.calib-box .calib-idle { font-family: var(--serif); font-size: 13px; letter-spacing: 2px;
color: #5C564E; text-align: center; padding: 2px 0; }
.calib-box:has(.calib-row.done) .calib-idle { display: none; }
.calib-box:not(:has(.calib-row.done)) > .side-label,
.calib-box:not(:has(.calib-row.done)) .calib-rows { display: none; }
/* ⑥-3 四柱高亮自解释（设计评审 ③-P2：红框无文案说明会被当成错误） */
.sizhu-tip { text-align: center; margin: 2px 0 4px; }
/* ⑥-4 流年年份胶囊激活态 → 朱砂（全站纪律「选中态=朱砂」，金底黑字是特例） */
.zw-ln-btn.active { color: #FDFAF4; background: var(--cinnabar, #B23A2E);
border-color: var(--cinnabar, #B23A2E); }
/* ⑥-5 奇门待排宫名加深（设计评审 2.1：≈2.8:1 → gold-dim ≈4.1:1） */
.qm-cell.qm-idle .qm-gong { color: var(--gold-dim, #8C7444); }
/* ⑥-6 更多菜单组名 11 → 12px（仍是金字，只提一档） */
.nav-more-list .nm-gname { font-size: 12px; }
/* ⑥-7 logo 副题 10.5 → 11.5px + 加深（偏小偏淡档） */
.logo-sub { font-size: 11.5px; color: #7A6A50; }
/* ⑥-8 通用模块：小组题（手相「五线占比 / 纹路」）+ select 补下拉箭头
（appearance:none 后像只读输入框，设计评审 ③-手相 P2） */
.gi-group { margin-top: 2px; }
.gi-group span { display: block; font-family: var(--serif); font-size: 13px; letter-spacing: 2px;
color: var(--gold-dim, #8C7444); padding-bottom: 4px;
border-bottom: 1px solid rgba(var(--gold-rgb), .22); }
.gi-row:has(> select) { position: relative; }
.gi-row:has(> select)::after { content: "\25BE"; position: absolute; right: 13px; bottom: 11px;
color: var(--gold-dim, #8C7444); font-size: 15px; line-height: 1; pointer-events: none; }
/* ⑥-9 主视觉切页交叉淡入 240ms（设计评审 2.4 P2：硬切换）+
自愈修正尺寸的 220ms 过渡（sz-anim 只由 compassSelfCheck 修正瞬间挂上） */
@keyframes modFadeIn { from { opacity: .25; } to { opacity: 1; } }
.stage.mod-fade { animation: modFadeIn 240ms var(--ease-out); }
.compass-wrap.sz-anim, .compass-wrap.sz-anim .compass, .compass-wrap.sz-anim .coins-visual,
.compass-wrap.sz-anim .time-visual, .compass-wrap.sz-anim .nums-visual {
transition: width .22s var(--ease-out), height .22s var(--ease-out); }
/* ⑥-10 铜钱待机放大 1.19×（设计评审 ③-P2：容器 711×711，铜钱带只占 y≈330-500，
上下各 ~250px 真空）；只加待机态 —— 停靠/全屏有既定 FLIP 与落位口径，不动 */
.compass-wrap:not(.fullscreen):not(.shrink-to-left) .coins-visual { gap: 4%; }
.compass-wrap:not(.fullscreen):not(.shrink-to-left) .coins-visual .coin { width: 31%; flex: 0 0 auto; }
/* ⑥-12 解梦等多行输入框放开 128px 上限（JS 自增到 200px，见 app.js「梦文自增」注释）；
注意 .q-input textarea 的 max-height:128px 是细则高度，不加这条 JS 写了也没用（探针实测） */
#inputCol .q-area textarea { min-height: 128px; max-height: 200px; }
/* ⑥-11 批语卡弹窗：点卡片可放大检查（验字迹/圈点） */
.share-stage canvas { cursor: zoom-in; }
.share-stage.zoomed canvas { cursor: default; }
/* ============================================================
看痣（2026-10-15 第三十批 框A）：人脸图点选（左/中栏表单）+ 结果断语卡
============================================================ */
.gi-moleface { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mf-canvas { width: 100%; max-width: 340px; cursor: crosshair; }
.mf-canvas svg.mole-fig { width: 100%; max-width: none; height: auto; display: block; }
.mole-fig .mf-guide { stroke: rgba(var(--gold-rgb), .26); stroke-width: 1; stroke-dasharray: 5 7; fill: none; }
.mole-dot circle { fill: var(--cinnabar, #B23A2E); stroke: var(--sf-glass-w80); stroke-width: 1.5; }
.mole-dot text { fill: #FFF7EE; font-size: 15px; text-anchor: middle; font-family: var(--serif); }
/* 2026-10-17：痣也换同一张无字脸（face-clean.svg），朱点按坐标逆变换落在脸上 */
.mf-face { position: relative; width: 100%; line-height: 0; }
.mf-face-img { display: block; width: 100%; height: auto; }
.mf-dots { position: absolute; inset: 0; }
.mole-dot2 { position: absolute; width: 18px; height: 18px; border-radius: 50%;
background: var(--cinnabar, #B23A2E); color: #FFF7EE; font-size: 10px; line-height: 18px;
text-align: center; transform: translate(-50%, -50%); pointer-events: none;
border: 1.5px solid var(--sf-glass-w80); font-family: var(--serif); }
.mf-tools { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-dim); }
.mf-clear { font: inherit; padding: 3px 12px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--line-strong); background: none; color: var(--text-dim); }
.mf-clear:hover { color: var(--cinnabar, #B23A2E); border-color: rgba(178, 58, 46, .45); }
.mf-hint { font-size: 12.5px; color: var(--text-dim); line-height: 1.7; margin: 2px 0 0; text-align: center; }
/* 结果面板：带朱点的人脸 + 逐颗断语卡 */
.mf-read { width: 100%; max-width: 320px; margin: 6px auto 4px; }
.mf-read svg.mole-fig { width: 100%; max-width: none; height: auto; display: block; }
.mz-list { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 4px; }
.mz-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px 13px;
background: rgba(var(--gold-rgb), .04); }
.mz-row.good { border-color: rgba(var(--gold-rgb), .5); }
.mz-row.bad { border-color: rgba(178, 58, 46, .34); }
.mz-row.ref { opacity: .86; }
.mz-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.mz-n { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto;
background: var(--cinnabar, #B23A2E); color: #FFF7EE; text-align: center;
font-size: 12px; line-height: 20px; font-family: var(--serif); }
.mz-head b { font-family: var(--serif); font-size: 15px; color: var(--text); }
.mz-head i { font-style: normal; font-size: 12px; color: var(--text-dim); }
.mz-text { margin: 6px 0 2px; font-size: 14.5px; line-height: 1.85; color: var(--text); }
.mz-plain { margin: 0; font-size: 13px; line-height: 1.8; color: var(--text-dim); }
/* 九宫飞星盘紧凑一档（框A 实测：原 26px 上留白 + 21px 大字，面板首屏只放得下两行
九宫，第三行被页脚截掉）——只收尺寸，不动结构 */
.fs-wrap .fs-grid { gap: 6px; margin: 6px 0 4px; }
.fs-wrap .fs-cell { padding: 18px 6px 8px; }
.fs-wrap .fs-shuang b { font-size: 18px; }
.fs-wrap .fs-bz-row { padding: 5px 10px; }
/* 脸线稿描边修复（2026-10-15 第三十批 框A）：`.xlr-outline` 全站只有 color、
没有 fill/stroke —— 手稿方（.xlr-hand）靠手型路径自带描边属性没事，但**脸**的
轮廓/五官是裸 path → 脸廓画不出来、五官变成实心色块（面相页参考图也一直是这个
状态的糊图）。给脸上这两类显式描边、去掉填充，与手相图同语言。
⚠ 只作用于 .face-fig / .mole-fig，不影响手掌（.xlr-hand 的填充块是有意的）。 */
.face-fig .xlr-outline, .mole-fig .xlr-outline { fill: none; stroke: currentColor; }
.face-fig .hand-line, .mole-fig .hand-line { fill: none; stroke: currentColor; }
/* 第三十一批（2026-10-15 用户："我说的是选择框里面的，比如选男女这些，里面男在最左面"）——
下拉框（select）收起态文字改**居中**，与全站输入框「文字居中」口径拉齐。
唯一裁决：覆盖 .btn-input select(12/34) / .gen-form select(10/12) / #inputCol select(9/30)
各自的 padding 左右不对称（不对称会让"居中"视觉上偏左），统一左右 12px；
原生箭头已由 appearance:none + ::after 接管（不占 padding）。展开的 option 弹层不受影响。
若未来某个下拉确需左对齐，在该处加 text-align:left!important 即可。 */
select {
text-align: center !important;
text-align-last: center !important;
padding-left: 12px !important;
padding-right: 12px !important;
}
/* ============================================================
第三十一批（2026-10-15 用户："删除本条记录固定在右下角，里面东西多了，
这个单个信息框里面内容可以上下拉"）—— 记录展开区改「滚动内容 + 固定页脚」，
与全站结果面板同口径（.panel-scroll ‖ .gua-again-row）。
· .hist-expand 高度一律由 JS 实测写入（超过上限即封顶，旧的 520px 硬上限作废）
· .hist-detail = 框内滚动区（↑↓ 看内容）；.hist-ops = 固定页脚（删除钮永远贴在框内右下）
============================================================ */
.hist-expand { display: flex; flex-direction: column; }
.hist-item.open .hist-expand { max-height: none; } /* 覆盖上方的 520px 硬上限（高度看内联实测值） */
.hist-expand > .hist-detail {
flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
padding-right: 9px; /* 给滚动条让位，文字不压条 */
}
.hist-expand > .hist-ops { flex: 0 0 auto; margin-top: 0; } /* 固定页脚：不随内容滚 */
/* 框内滚动条要看得见（全站 *::-webkit-scrollbar 是隐藏的）——同 .panel-scroll 的规格 */
.hist-expand > .hist-detail::-webkit-scrollbar { width: 8px; }
.hist-expand > .hist-detail::-webkit-scrollbar-track { background: transparent; }
.hist-expand > .hist-detail::-webkit-scrollbar-thumb { background: rgba(var(--gold-rgb),.5); border-radius: 6px; }
.hist-expand > .hist-detail::-webkit-scrollbar-thumb:hover { background: rgba(var(--gold-rgb),.75); }
/* ============================================================
第三十一批（2026-10-15 用户定版）· 记录行操作区 + 勾选模式 + 撤销条
· 行右上角三件套：分享 ｜ 导出▾（文本/PDF）｜ 删除（乙·低调灰，hover 才红）
—— 原来 分享/导出 各自写死 absolute 定位（right:125px / right:74px），
现在统一进 .hist-acts 容器（唯一裁决，旧定位作废）
· 勾选模式：左上「全选」条 + 每行左侧勾选框 + 底部「取消 ｜ 删除(N)」条
变体1（用户选）：未选 = 两钮等宽、删除灰不可点；选中 → 删除变宽变红并带条数
· 撤销条：删除后底部弹「已删除 · 撤销」，5 秒内可原样写回
============================================================ */
.hist-item .hist-acts { position: absolute; top: 10px; right: 12px; display: flex; gap: 7px;
align-items: center; z-index: 3; }
.hist-item .hist-exp { position: static; } /* 作废旧 right:74px */
.hist-acts .hist-share-one { position: static; } /* 作废旧 right:125px */
.hist-del-one { font-size: 12.5px; color: #a89c8c; border: 1px solid rgba(var(--gold-rgb), .3);
border-radius: 8px; padding: 3px 11px; cursor: pointer; background: transparent;
transition: color .25s var(--ease), border-color .25s var(--ease); }
.hist-del-one:hover { color: #B23A2E; border-color: rgba(178, 58, 46, .45); }
/* —— 勾选模式 —— */
.hist-cb { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid rgba(var(--gold-rgb), .65);
background: transparent; display: inline-block; position: relative; cursor: pointer; flex: 0 0 auto;
transition: background .2s var(--ease), border-color .2s var(--ease); }
.hist-cb.on { background: #B23A2E; border-color: #B23A2E; }
.hist-cb.on::after { content: "✓"; color: #fff; font-size: 12px; position: absolute; left: 3px; top: -3px; }
.hist-selbar { display: flex; align-items: center; gap: 9px; margin: 0 0 10px;
font-size: 13.5px; color: var(--text-dim); letter-spacing: 1px; }
.hist-selcount { margin-left: auto; font-size: 13px; }
.hist-item.sel { padding-left: 44px; }
.hist-item.sel .hist-row-cb { position: absolute; left: 14px; top: 17px; }
.hist-item.sel .hist-acts { display: none; } /* 勾选模式里不出现分享/导出/删除 */
.hist-item.sel.picked { border-color: rgba(178, 58, 46, .5);
background: linear-gradient(180deg, rgba(178, 58, 46, .05), rgba(178, 58, 46, .02)); }
/* 底部条：未选 = 等宽两钮（删除灰）；选中 = 删除变宽（flex-grow 1.8）变红 */
.hist-selbar2 { display: flex; gap: 10px; position: sticky; bottom: 0; z-index: 4;
padding: 10px 0 4px; margin-top: 6px;
background: linear-gradient(180deg, rgba(253, 251, 246, 0), var(--sf-page) 45%); }
.hist-selbar2 .hs-cancel, .hist-selbar2 .hs-del { flex: 1 1 0; text-align: center; padding: 9px 0;
border-radius: 9px; cursor: pointer; font-size: 13.5px; letter-spacing: 1px;
transition: flex-grow .3s var(--ease-out), background .25s var(--ease), color .25s var(--ease); }
.hist-selbar2 .hs-cancel { border: 1px solid rgba(var(--gold-rgb), .45); color: var(--gold-dim, #8A7548);
background: var(--sf-card); }
.hist-selbar2 .hs-del { border: 1px solid rgba(178, 58, 46, .5); background: #B23A2E; color: #fff; }
.hist-selbar2 .hs-del.off { background: rgba(0, 0, 0, .05); color: rgba(0, 0, 0, .28);
border-color: rgba(0, 0, 0, .08); cursor: not-allowed; }
.hist-selbar2.have .hs-del { flex-grow: 1.8; }
/* —— 撤销条 —— */
.undo-toast { position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px; z-index: 20;
display: flex; align-items: center; gap: 14px; background: #2C2A26; color: #F7F3EA;
font-size: 13.5px; padding: 10px 16px; border-radius: 10px;
box-shadow: 0 10px 30px rgba(30, 22, 10, .28); }
.undo-toast .undo { color: #E6C888; cursor: pointer; letter-spacing: 1px; }
.undo-toast .undo:hover { text-decoration: underline; }
/* 第三十一批：顶部条「导出 ▾」下拉（2026-10-15 用户："肯定合并啊"）——
.hist-exp 的旧定位是列表行内 absolute，这里顶部条里改成相对定位（下拉挂在按钮下方） */
.hist-toolbar .hist-exp { position: relative; top: 0; right: 0; }
/* ⚠ 2026-10-15 实测根因：基础规则 .hist-exp{position:absolute; right:74px; top:12px}（style.css:1290）
—— 这里只改 position:relative 时，right/top 变成**相对偏移**：整枚导出钮视觉左移 74、下移 12，
与「共 N 条 / 清空全部」不在一条横线（用户："有点位置…在一条横线上。不要不正"）→ 必须显式归零 */
.hist-toolbar .hist-exp .hist-exp-menu { top: calc(100% + 9px); }
/* ============================================================
第三十一批 · 第二轮（2026-10-15 下午；用户当天新提；唯一裁决 —— 覆盖旧规则）
① 顶部条「导出」归位：
用户原话："共446条中间的导出在下面需要移动到删除全部左侧有点空间。别的歪都改正。"
—— 原 .hist-toolbar 三个直接子女 space-between 均摊，导出被摊到正中间；
改为：共 N 条居左（margin-right:auto 吃掉空隙），「导出 ▾ + 清空全部」
贴右成组、组内沿用 gap:12px，三者仍在同一条横线上。
② 全站提示框统一为「连续两天」好看款：
用户原话："以后再有提示就改成和连续两天提示那个提示框一样……长方形白色底，
以后都改成好看的那种"（= 纸底金边药丸、同投影）。
根因（LESSONS 已记）：好看款当时只写死在 .streak-ribbon::after（单场景悬停），
没抽成公用组件 → 后续新提示（导出/撤销等）走的还是旧 .toast 白底长方形。
本块 = 提示样式的唯一来源；.toast（toast() 唯一通道，全站提示都走它）
与 .undo-toast（抽屉撤销条）同款。
============================================================ */
.hist-toolbar { justify-content: flex-start; } /* 作废 space-between 均摊 */
.hist-toolbar > span:first-child { margin-right: auto; } /* 共 N 条居左，导出+清空全部贴右 */
.toast {
padding: 12px 24px; border-radius: 999px;
background: linear-gradient(180deg, var(--sf-glass-a), var(--sf-glass-b));
border: 1px solid rgba(var(--gold-rgb), .5);
box-shadow: var(--shadow-card-soft);
} /* 作废旧：float-bg 白底 / border-left 金线 / 大黑影 */
.toast .t-title { color: var(--gold-dim, #8A7548); font-size: 15px; letter-spacing: 2px; margin-bottom: 3px; }
.toast .t-sub { font-size: 13px; line-height: 1.75; }
.undo-toast {
padding: 9px 20px; border-radius: 999px;
background: linear-gradient(180deg, var(--sf-glass-a), var(--sf-glass-b));
border: 1px solid rgba(var(--gold-rgb), .5);
box-shadow: var(--shadow-card-soft);
color: var(--text-dim); font-size: 13px;
} /* 作废旧：深灰底白字方块 */
.undo-toast .undo { color: var(--cinnabar, #B23A2E); }
/* ⚠ 2026-10-15 实测根因（第二个 bug）：.toast-wrap 的 z-index 用了 --z-float-x(990)，
低于抽屉层级(1000) → 提示框被画在抽屉背后（记录抽屉里点导出，提示根本看不见；
实测 elementFromPoint(1400,110) 命中抽屉）。--z-toast(1030) 的注释本来就写着
"右上角提示（最高）"，此处归位为唯一正确层级。 */
.toast-wrap { z-index: var(--z-toast); }
/* ============================================================
第三十一批 · 第二轮·后台 A 案（2026-10-15 下午续）：记录抽屉「云同步」+ 云账号面板
============================================================ */
.hist-cloud { font-size: 12.5px; color: var(--gold-dim, #8A7548); letter-spacing: 1px;
cursor: pointer; padding: 3px 11px; border-radius: 8px;
border: 1px solid rgba(var(--gold-rgb), .3); background: transparent;
transition: color .25s var(--ease), border-color .25s var(--ease); }
.hist-cloud:hover { color: var(--cinnabar, #B23A2E); border-color: rgba(178, 58, 46, .45); }
body.mode-client .hist-cloud { display: none !important; } /* 客户模式不出现云同步 */
.cloud-panel { position: fixed; inset: 0; z-index: 1015; display: none;
align-items: center; justify-content: center; background: rgba(28, 24, 16, .34); backdrop-filter: blur(3px); }
.cloud-panel.open { display: flex; }
.cloud-card { width: min(430px, 92vw); border-radius: 16px; padding: 20px 22px 14px;
background: linear-gradient(180deg, var(--sf-card), var(--sf-cloud-b));
border: 1px solid rgba(var(--gold-rgb), .45);
box-shadow: var(--shadow-card-lifted); }
.cloud-title { font-family: var(--serif); font-size: 18px; letter-spacing: 5px;
color: #8A6F3C; text-align: center; margin-bottom: 8px; }
.cloud-sub { font-size: 13.5px; color: #6B6660; line-height: 1.9; margin-bottom: 10px; }
.cloud-row { display: flex; gap: 10px; margin: 10px 0 8px; }
.cloud-btn { flex: 1; padding: 10px 0; border-radius: 10px; cursor: pointer; font-size: 14px;
font-family: var(--serif); letter-spacing: 2px; background: var(--sf-card);
border: 1px solid rgba(var(--gold-rgb), .45); color: #8A7548;
transition: transform .18s var(--ease-out), background .2s var(--ease); }
.cloud-btn.main { background: linear-gradient(180deg, #C4483A, #B23A2E);
border-color: rgba(178, 58, 46, .6); color: #FFFDF8; }
.cloud-btn:hover { transform: translateY(-1px); }
.cloud-note { font-size: 12.5px; color: #8a8478; line-height: 1.8; }
.cloud-foot { display: flex; justify-content: flex-end; gap: 16px; margin-top: 12px;
padding-top: 10px; border-top: 1px dashed rgba(var(--gold-rgb), .3); }
.cloud-link { font-size: 13px; color: #8A7548; cursor: pointer; letter-spacing: 1px; }
.cloud-link:hover { color: var(--cinnabar, #B23A2E); text-decoration: underline; }
/* ============================================================
第三十一批·第二轮·移动端止血 3 项（2026-10-15 设计评审 P0——用户："设计评审交互里面的
建议也给我改啊"）。完整移动版仍按既定排期（挣钱后）；本块只解决"进得来、看得到、走得了"：
① 390px 实测 .nav-links 被挤成 0 宽 → 8 常驻 + 更多全部不可达；
② 铜钱主视觉容器沿用桌面 --compass-size（实测 468px）被静默裁切（罗盘 86vw/塔罗环 84vw
早有窄屏规则，铜钱没吃到）；
③ 「更多」按钮随 ① 一起可横向滑到。
注：两行导航下高度 ~108px；浮动元素的"导航下沿 76px"夹紧值是桌面口径，窄屏略过属止血范围。
============================================================ */
@media (max-width: 780px) {
.nav { height: auto; }
.nav-inner { flex-wrap: wrap; height: auto; padding: 6px 12px 0; gap: 8px; }
.logo { flex: 1 1 auto; }
.nav-side { flex: 0 0 auto; }
/* ①+③：模块带独占第二行、整行宽、横向可滑（滚动条隐藏、触屏惯性） */
.nav-links { order: 9; flex: 1 1 100%; height: 44px; margin: 0;
justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch;
scrollbar-width: none; border-top: 1px solid var(--line); }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links > a, .nav-more-btn { flex: 0 0 auto; }
/* 2026-10-17 专业复查 P0-2：「更多」下拉是 .nav-links 的后代，被 overflow-x:auto
裁在框外 → 窄屏点开整块不可见（模块多时手机端断入口）。打开时放开裁剪。 */
.nav-links:has(.nav-more.open) { overflow: visible; }
.stage { padding-top: 156px; } /* 实测两行导航总高 ~150px，留一点余量防压 */
/* ②：主视觉按视口收（fullscreen/停靠态的 100% 规则更具体，不受影响） */
.coins-visual { width: var(--compass-size, 86vw); max-width: 100%; }
}
/* ============================================================
第三十一批 · 第三轮（2026-10-15 晚）—— 以下为唯一裁决，覆盖前面同选择器旧规则
用户原话：①"卦辞里面，云同步鼠标放上去提示的框是好看的框吗，导出pdf是好看的框吗"
②"以后再有提示就改成和连续两天提示那个提示框一样"
③"为什么云同步右侧的导出颜色会不一样"
① 全站悬停提示组件 .ysg-tip：任何 [data-tip] 元素悬停/聚焦即出此框（JS 见
app.js「全站悬停提示」段）；与 .toast / 连续两天挂件同款（纸底渐变 +
金边 rgba(gold,.5) + 同投影 + 药丸椭圆 999px）。层级 = --z-toast(1030)：
提示类最高，记录抽屉(1001)/支付面板(1020) 之上都看得见。
作废：.streak-ribbon::after 单场景实现（4151 处，已注释）与全站原生 title 灰框。
② 记录抽屉顶部条三钮同色（云同步 / 导出 / 清空全部）：此前云同步走 --gold-dim
(#8A7548)、导出走 --gold-bright (#E6C888)、清空全部走 #C98A7A，三个色值互不
相同（用户点名的"颜色不一样"）——统一为一套金 pill（底色/边框/圆角/hover 全同）。
行内「分享 / 导出」(.hist-export-one) 文字色一并归到 --gold-bright（尺寸保留
行内小号——那是排版层级，不是颜色）。行内「删除」(.hist-del-one) 保留
"低调灰、hover 才红"（用户 2026-10-15 当天定版的口径，不属本次统一范围）。
③ 使用教程站内浮层 .tut-overlay（JS 见 app.js「使用教程 · 站内浮层」段）：
层级 calc(--z-modal + 22) = 1022 —— 盖过抽屉(1001)/支付面板(1020)、
低于 toast(1030)；右上角统一叉号走 --x-size/--x-dark 与 #midClose 同款。
============================================================ */
/* ① 悬停提示组件 */
.ysg-tip {
position: fixed; left: 0; top: 0; z-index: var(--z-toast);
max-width: min(440px, calc(100vw - 20px));
padding: 9px 18px; border-radius: 999px;
background: linear-gradient(180deg, var(--sf-glass-a), var(--sf-glass-b));
border: 1px solid rgba(var(--gold-rgb), .5);
box-shadow: var(--shadow-card-soft);
font-size: 13px; letter-spacing: 1.5px; line-height: 1.7; color: var(--text-dim);
text-align: left; white-space: normal; pointer-events: none;
opacity: 0; visibility: hidden;
transition: opacity .18s var(--ease-out), visibility 0s linear .18s; }
.ysg-tip.on { opacity: 1; visibility: visible;
transition: opacity .18s var(--ease-out), visibility 0s linear 0s; }
/* ② 记录抽屉：顶部条三钮同色（作废 .hist-cloud 4530 / .hist-clear 1135 / .hist-export 1284 旧色） */
.hist-cloud, .hist-export, .hist-clear {
font-size: 13px; color: var(--gold-bright); letter-spacing: 1px;
padding: 5px 12px; border-radius: 8px; cursor: pointer;
border: 1px solid rgba(var(--gold-rgb), .4); background: rgba(var(--gold-rgb), .08);
transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); }
.hist-cloud:hover, .hist-export:hover, .hist-clear:hover {
background: rgba(var(--gold-rgb), .2); color: var(--cinnabar);
border-color: rgba(178, 58, 46, .45); }
/* 行内「分享 / 导出」：文字色与顶部「导出」同值（尺寸保留行内小号） */
.hist-export-one { color: var(--gold-bright); }
/* ③ 使用教程 · 站内浮层 */
.tut-overlay { position: fixed; inset: 0; z-index: calc(var(--z-modal) + 22); /* 1022 */
display: flex; align-items: center; justify-content: center;
background: rgba(28, 24, 16, .42); backdrop-filter: blur(3px);
opacity: 0; visibility: hidden;
transition: opacity .22s var(--ease-out), visibility 0s linear .22s; }
.tut-overlay.open { opacity: 1; visibility: visible;
transition: opacity .22s var(--ease-out), visibility 0s linear 0s; }
.tut-panel { width: min(1060px, 94vw); height: min(720px, 84vh);
display: flex; flex-direction: column; overflow: hidden;
border-radius: 16px;
background: linear-gradient(180deg, var(--sf-card), var(--sf-cloud-b));
border: 1px solid rgba(var(--gold-rgb), .45);
box-shadow: var(--shadow-card-lifted); }
.tut-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
padding: 13px 18px; font-family: var(--serif); font-size: 18px; letter-spacing: 5px;
color: #8A6F3C; border-bottom: 1px solid rgba(var(--gold-rgb), .28); }
.tut-body { flex: 1 1 auto; min-height: 0; background: var(--sf-panel); }
.tut-body iframe { width: 100%; height: 100%; border: 0; display: block; }
body.tut-open { overflow: hidden; } /* 打开浮层锁背景滚动（body=视口滚动传播源） */
/* 右上角统一叉号：与 #midClose/#guaClose 同款（--x-size/--x-dark），只在浮层打开时可见 */
span.tut-close.close-x { position: fixed; margin: 0; padding: 0;
width: var(--x-size, 30px); height: var(--x-size, 30px);
display: none; align-items: center; justify-content: center;
font-size: calc(var(--x-size, 30px) * 0.72); font-weight: 400; line-height: 1;
color: rgba(var(--gold-rgb), var(--x-dark, 0.7)) !important; background: none !important;
border: none; border-radius: 50%; box-shadow: none;
z-index: calc(var(--z-modal) + 23); cursor: pointer;
transition: color .25s var(--ease), transform .25s var(--ease); }
body.tut-open span.tut-close.close-x { display: flex; }
span.tut-close.close-x:hover { color: var(--gold-bright) !important; transform: rotate(90deg) scale(1.1); }
/* ============================================================
第三十一批·第三轮 ⑧（2026-10-15 夜）：撤销条「抽屉底部 → 抽屉顶部内嵌条」
用户原话："已删除后面撤销这个提示框在最下面，还得往下看才行，看别人都是在哪，按流行的专业的来"
作废（几何）：style.css:4459 的 position:absolute; left:50%; transform:translateX(-50%);
bottom:16px; z-index:20 —— 抽屉 100vh，bottom:16 等于贴在屏幕最底，离删除行可达 ~700px；
条改为 #drawer 的第 2 个 flex 子项（.drawer-head 之后、.drawer-body 之前，JS insertBefore），
顺序由 DOM 决定，这里只需 position:static。
造型不改：仍沿用 4501「纸底金边药丸」（背景/边框/投影一条不碰）。
设计依据：docs/撤销提示位置-设计与评审-20261015.md（方案 A；停留 6s + 悬停暂停见 app.js showUndoToast）。
============================================================ */
.undo-toast {
position: static; /* 覆盖 4459：不再相对 #drawer 定位 */
left: auto; right: auto; bottom: auto; /* 旧 offset 显式归零（RUNBOOK 十三节） */
transform: none; /* 覆盖 4459 的 translateX(-50%)（transform 对 static 元素照样生效） */
flex: 0 0 auto;
margin: 10px 26px 0; /* 左右 26px = .drawer-body 同一栅格；与列表首行净距 = 10 + 22(滚动区顶 padding) */
min-height: 36px;
box-sizing: border-box;
padding: 8px 20px; /* 覆盖 4501 的 9px：条高 36 = 8+18+8+2(上下 1px 金边)，见下 */
line-height: 18px; /* 条高锁 36px；验收带 = head 下缘 10~46px（文档 §3.1 标高 36） */
display: flex; align-items: center; justify-content: space-between; gap: 18px;
animation: ysgUndoIn .2s var(--ease-out); /* 不写 fill：防动画永久压住 transform（案例 006） */
}
@keyframes ysgUndoIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: none; }
}
/* 撤销热区 ≥ 36×24：6px 上下 padding 用负外边距抵消垂直增量，
否则条会被撑到 ~51px、底沿落到 head 下缘 61px（超出「~46px 内」验收带） */
.undo-toast .undo { padding: 6px 10px; margin: -6px -6px -6px 0; border-radius: 999px; }
.undo-toast .undo:hover { background: rgba(178,58,46,.07); text-decoration: none; }
/* ============================================================
第三十一批·第三轮 ⑥（2026-10-15 夜）：设置「分享批语卡样式」三类行卡
A 朱批笺 / B 素笺 / C 卦签，每行一张真实预览缩略图（canvas 复用 shDrawCard 实时渲染，WYSIWYG）。
B/C 与 A 长宽比不同 → 固定盒高 + 按比例缩放居中，不拉伸。
归类依据：docs/批语卡三类-归类与设置方案-20261015.md。
============================================================ */
.share-scheme-opt { display: flex; gap: 12px; align-items: center; }
.share-scheme-opt .sso-thumb-box {
width: 120px; height: 160px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center; overflow: hidden;
background: var(--sf-card); border-radius: 8px;
box-shadow: 0 1px 3px rgba(60,48,28,.14); }
.share-scheme-opt .sso-thumb { display: block; width: auto; height: auto;
max-width: 120px; max-height: 160px; }
.share-scheme-opt .sso-text { flex: 1 1 auto; min-width: 0; }
.share-scheme-opt .sso-vary { font-size: 11.5px; line-height: 1.75; margin-top: 1px;
color: rgba(138,117,72,.85); }
/* ============================================================
第三十一批·第三轮 ⑦（2026-10-16）：设置抽屉分区归口
用户原话："打开设置都能点选。设置里面东西都在开一个口，里面 api，啥的，分类进去。"
结构 = .set-sec 分区标题（金线拉通）+ .set-row 行 + .set-btn 按钮；6 个分区：
账号与云同步 / 解读模式与接口 / 外观与版式 / 主视觉与罗盘 / 记录与数据 / 关于与帮助。
本块只新增类，不覆盖 .cfg-label / .mode-opt / .credit-* 的既有定义（那些仍是唯一定义处）。
============================================================ */
.set-sec { display: flex; align-items: center; gap: 14px; margin: 26px 0 12px;
font-family: var(--serif); font-size: 15.5px; font-weight: 700;
color: var(--gold); letter-spacing: 4px; }
.set-sec::after { content: ""; flex: 1; height: 1px;
background: linear-gradient(90deg, rgba(var(--gold-rgb), .45), rgba(var(--gold-rgb), .05)); }
.set-sec:first-child { margin-top: 2px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
padding: 11px 2px; font-size: 14.5px; color: var(--text); letter-spacing: 1.5px; }
.set-row + .set-row { border-top: 1px dashed rgba(255,255,255,.06); }
.set-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 2px; }
.set-btn { flex-shrink: 0; padding: 7px 16px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--line-strong); background: rgba(255,255,255,.04);
color: var(--gold-bright); font-family: inherit; font-size: 13.5px; letter-spacing: 2px;
transition: all .3s var(--ease); }
.set-btn:hover { border-color: var(--gold); background: rgba(var(--gold-rgb), .12); }
.set-btn:active { transform: translateY(1px); }
.set-ver { color: var(--text-dim); font-size: 13px; font-weight: 400; letter-spacing: 1px; text-align: right; }
/* 免责声明 / 隐私说明从设置抽屉里打开时必须盖过抽屉：
.legal-mask 原为 --z-modal(1000) < 抽屉(1001)，从设置里点开会有一半被抽屉压住。
本行覆盖 2611 的 1000；仍低于支付(1020) / 教程浮层(1022) / 提示(1030)。 */
.legal-mask { z-index: calc(var(--z-modal) + 12); }
/* ============================================================
第三十一批·第三轮 ⑦-b（2026-10-16 用户第 3 次澄清）：设置 = 站内整页
用户原话："我说的设置是点设置后在网站新开一个页左侧是菜单栏。
但不能在网站外新开懂了吗，里面有分类。"
结构 = 顶部「← 返回」条 + 左侧分类菜单（6 区，.setpage-mi）+ 右侧内容区（.setpane）。
作废（用法，旧规则不删）：设置不再走右侧滑出抽屉 —— .drawer（1119 起）只留给
「卦辞记录」；.set-sec / .set-row / .set-btn（末尾 1030 段附近）仍是唯一定义处，
本块只是给它们换一个整页壳。层级 1003 = calc(--z-modal + 3)：盖过导航/抽屉(1001)，
低于声明弹层(1012)/云同步(1015)/支付(1020)/教程(1022)/登录(1030)/提示(1030)。
============================================================ */
.setpage { position: fixed; inset: 0;
z-index: calc(var(--z-modal) + 3);
display: flex; flex-direction: column;
background: linear-gradient(180deg, var(--sf-page), var(--sf-page-b));
opacity: 0; visibility: hidden;
transition: opacity .22s var(--ease-out), visibility 0s linear .22s; }
.setpage.open { opacity: 1; visibility: visible;
transition: opacity .22s var(--ease-out), visibility 0s linear 0s; }
body.settings-open { overflow: hidden; } /* 锁底层滚动（body=视口滚动传播源） */
/* 顶部条：← 返回（左） + 居中的「设置」标题 */
.setpage-head { flex: 0 0 auto; position: relative; height: 64px;
display: flex; align-items: center; padding: 0 18px;
border-bottom: 1px solid rgba(var(--gold-rgb), .28); }
.setpage-back { display: inline-flex; align-items: center; gap: 6px;
padding: 7px 16px 7px 12px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--line-strong); background: var(--sf-glass-p55);
color: var(--text); font-family: inherit; font-size: 14px; letter-spacing: 2px;
transition: all .3s var(--ease); }
.setpage-back:hover { border-color: var(--gold); color: var(--gold); background: rgba(var(--gold-rgb), .10); }
.setpage-back:active { transform: translateY(1px); }
.setpage-back .sb-arrow { font-size: 15px; line-height: 1; }
.setpage-title { position: absolute; left: 50%; transform: translateX(-50%);
font-family: var(--serif); font-size: 22px; font-weight: 700; letter-spacing: 8px;
color: var(--gold); }
/* 主体：左侧分类菜单 + 右侧内容区（各自独立滚动） */
.setpage-main { flex: 1 1 auto; min-height: 0; display: flex; }
.setpage-menu { flex: 0 0 232px; overflow-y: auto; -webkit-overflow-scrolling: touch;
display: flex; flex-direction: column; gap: 4px; padding: 18px 12px;
border-right: 1px solid rgba(var(--gold-rgb), .22); }
.setpage-mi { display: block; padding: 11px 16px; border-radius: 10px;
border-left: 3px solid transparent;
color: var(--text); font-size: 15px; letter-spacing: 2px; text-decoration: none;
transition: color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease); }
.setpage-mi:hover { background: rgba(var(--gold-rgb), .10); color: var(--gold); }
.setpage-mi.sel { background: rgba(var(--gold-rgb), .14); color: var(--gold);
font-weight: 700; border-left-color: var(--gold); }
.setpage-body { flex: 1 1 auto; min-width: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
overscroll-behavior: contain; padding: 26px 34px 64px; }
.setpane { display: none; max-width: 880px; margin: 0 auto; }
.setpane.on { display: block; }
/* 兑换码行（账号与云同步区）：输入框 + 兑换按钮同一行 */
.set-redeem { display: flex; gap: 10px; align-items: center; }
.set-redeem .cfg-inp { flex: 1 1 auto; width: auto; min-width: 0; }
/* 移动端（390px 口径）：左菜单收成顶部横向分类条，内容区继续可滚 */
@media (max-width: 800px) {
.setpage-head { height: 56px; padding: 0 12px; }
.setpage-title { font-size: 18px; letter-spacing: 6px; text-indent: 6px; }
.setpage-back { padding: 6px 13px 6px 10px; font-size: 13px; letter-spacing: 1px; }
.setpage-main { flex-direction: column; }
.setpage-menu { flex: 0 0 auto; flex-direction: row; gap: 8px;
overflow-x: auto; overflow-y: hidden; padding: 10px 12px;
border-right: 0; border-bottom: 1px solid rgba(var(--gold-rgb), .22); }
.setpage-mi { flex: 0 0 auto; white-space: nowrap; padding: 7px 14px;
border-radius: 999px; border: 1px solid var(--line);
border-left: 1px solid var(--line); font-size: 13.5px; letter-spacing: 1px; }
.setpage-mi.sel { border-color: var(--gold); }
.setpage-body { padding: 16px 14px 56px; }
}
/* ============================================================
2026-10-16 用户（参考 GitHub 设置页）：「设置」标题移左侧顶部 +
右上角显眼的关闭叉号（原居中标题与「← 返回」钮退役——X = 同一关闭动作）。
覆盖用法（旧规则不删）：4755 .setpage-head / 4767 .setpage-title（绝对居中）/ 4759 .setpage-back。
注：移动端 @media 里 .setpage-title 字号规则照旧命中（标题现在是静态定位）。
============================================================ */
.setpage-head { justify-content: space-between; }
.setpage-title { position: static; transform: none; }
.setpage-x {
width: 40px; height: 40px; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; cursor: pointer;
border: 1.5px solid rgba(178, 58, 46, .5);
background: var(--sf-glass-p62); color: #B23A2E;
transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.setpage-x svg { width: 19px; height: 19px; display: block; }
.setpage-x:hover { background: #B23A2E; color: #FFFDF8; border-color: #B23A2E; }
.setpage-x:active { transform: translateY(1px); }
/* ============================================================
2026-10-16 用户："撤销提示这个得大点都看见，而且换个颜色，区分下。看啥颜色比较配。"
配色依据：docs/调研-配色-20261016.md 候选一「墨底金题」——
底 #2B2721（渐亮 #322D26）/ 金边 #C8A962 / 文字 #F7F2E6（对比 13.29:1，远超 AA）/
撤销钮 #EACB82（17:1）。与全站「纸底金边药丸」刻意区分：**撤销是唯一深色提示**。
加大：条高 36→48、字号 13→15.5、撤销钮热区同步加大；几何（抽屉顶部内嵌 / 6s + 悬停暂停）
沿用 4655 块与 app.js showUndoToast，本块只改造型与尺寸。
============================================================ */
.undo-toast {
min-height: 48px;
padding: 12px 22px;
font-size: 15.5px;
line-height: 22px;
color: #F7F2E6;
background: linear-gradient(180deg, #322D26, #2B2721);
border: 1.5px solid #C8A962;
box-shadow: 0 10px 26px rgba(24, 18, 8, .38);
}
.undo-toast .undo {
color: #EACB82; font-size: 15.5px; letter-spacing: 1px;
padding: 8px 16px; margin: -8px -14px -8px 0; border-radius: 999px;
}
.undo-toast .undo:hover { background: rgba(234, 203, 130, .16); color: #F3DC9E; text-decoration: none; }
/* 设置·账号与云同步：修改密码区（2026-10-16 设置项①）——三输入 + 按钮竖排 */
.set-pw { display: flex; flex-direction: column; gap: 8px; max-width: 420px; margin-top: 2px; }
.set-pw .set-btn { align-self: flex-start; }
/* ===== J1 收藏全量（2026-10-16 用户："还有卦辞记录喜欢那个。"）=====
组成：行内心标 .hist-fav-one ｜ 工具栏「♡ 收藏」筛选 .hist-fav-filter
｜ 详情内收藏夹勾选行 .hist-folder-row/.hf-chip ｜ 管理浮层 .favfs-*。
外观类复用 .hist-export（工具栏钮族），此处只加差异。 */
.hist-fav-one { margin-right: 10px; cursor: pointer; font-size: 15px; line-height: 1; color: var(--text-dim); transition: color .15s, transform .12s; }
.hist-fav-one:hover { transform: scale(1.18); }
.hist-fav-one.on { color: #c0392b; }
.hist-fav-filter.on, .hist-folder-open.on { color: #c0392b; border-color: rgba(192, 57, 43, .45); }
.favfs-see { cursor: pointer; font-size: 12px; padding: 0 8px; color: var(--text-dim); border: 1px solid rgba(168, 137, 78, .4); border-radius: 8px; }
.favfs-see:hover { color: #c0392b; border-color: rgba(192, 57, 43, .45); }
.favfs-all { border-bottom: 1px solid rgba(168, 137, 78, .3); }
.favfs-all .favfs-name { color: var(--text-dim); }
.hist-folder-row { padding: 4px 0 8px; font-size: 13px; color: var(--text-dim); border-bottom: 1px dashed rgba(168, 137, 78, .25); margin-bottom: 6px; }
.hf-label { letter-spacing: 1px; margin-right: 4px; }
.hf-chip { display: inline-block; padding: 1px 9px; margin: 2px 4px 2px 0; border: 1px solid rgba(168, 137, 78, .4); border-radius: 10px; cursor: pointer; font-size: 12px; color: var(--text-dim); transition: background .15s, color .15s; }
.hf-chip.on { background: rgba(192, 57, 43, .08); border-color: rgba(192, 57, 43, .5); color: #c0392b; }
/* 收藏夹管理浮层（新建 / 点击改名 / ↑↓ 排序） */
.favfs-mask { position: fixed; inset: 0; background: rgba(30, 25, 20, .35); z-index: 1035; display: flex; align-items: center; justify-content: center; }
.favfs-box { background: var(--sf-fav); border: 1px solid rgba(168, 137, 78, .5); border-radius: 10px; width: min(360px, 88vw); max-height: 70vh; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(60, 45, 25, .25); }
.favfs-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(168, 137, 78, .3); letter-spacing: 2px; }
.favfs-x { cursor: pointer; color: var(--text-dim); }
.favfs-list { overflow-y: auto; padding: 6px 16px; flex: 1; }
.favfs-empty { color: var(--text-dim); font-size: 13px; padding: 10px 0; }
.favfs-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed rgba(168, 137, 78, .22); }
.favfs-name { flex: 1; cursor: pointer; }
.favfs-n { color: var(--text-dim); font-size: 12px; }
.favfs-up, .favfs-down { cursor: pointer; padding: 0 6px; }
.favfs-up.off, .favfs-down.off { opacity: .25; cursor: default; }
.favfs-edit { width: 100%; font-size: 14px; padding: 2px 6px; border: 1px solid rgba(168, 137, 78, .5); border-radius: 4px; background: var(--sf-white); }
.favfs-tip { padding: 0 16px 12px; color: var(--text-dim); font-size: 12px; }
/* ===== 2026-10-16 用户（二轮定版）—— 卦辞记录收藏区 =====
① 心标移出右上按钮排（"在分享那太挤了"）→ 记录卡片右下角
（"一个问卦信息右下角，删除下面那，放那得齐平"）：
卡片 padding-right 16px / 按钮排 absolute right:12px → 负 4px 使右缘齐平；
② 工具栏「收藏夹」独立按钮撤销（入口并进「♡ 收藏」浮层）→ 浮层行样式 .favfs-favonly。 */
.hist-item .hist-fav-row { display: flex; justify-content: flex-end; margin: 2px -4px 0 0; }
.hist-item .hist-fav-row .hist-fav-one { margin-right: 0; }
.hist-item.sel .hist-fav-row { display: none; } /* 勾选模式里不出现（与 .hist-acts 同口径） */
.favfs-row.favfs-favonly .favfs-name { color: var(--gold); font-weight: 600; }
.favfs-row.favfs-favonly.on .favfs-name { color: #c0392b; }
/* ===== 2026-10-16（r7）—— 卦辞记录详情「应验」可改行 =====
用户原话："卦辞记录里面写的是待应验，也不能更改，不能输入操作，
这个得可以更改，改几次都行。" 布局：应验：| 准 | 不准 | 状态字 | 备注输入。 */
.hist-fb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.hist-fb-row .fb-btn { padding: 4px 16px; font-size: 13px; }
.hist-fb-state { color: var(--text-dim); font-size: 12px; }
.hist-fb-note { flex: 1; min-width: 140px; padding: 6px 10px; font-size: 13px;
background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 8px;
color: var(--text); }
.hist-fb-note:focus { border-color: var(--gold); outline: none; }
/* ===== 2026-10-16（r7）收藏全修：文件夹行「删除」✕ ===== */
.favfs-del { cursor: pointer; padding: 0 6px; color: var(--text-dim); }
.favfs-del:hover { color: var(--cinnabar); }
/* ===== 2026-10-16（r7b）记录详情 · 交互重排（ui-craft 规范）=====
2026-11-03 用户定稿：四档与结果区同一套 —— 点选后收起成单个已选项，
再点已选项展开四档可改选；备注框内不放提示文字（标签在框外）。 */
.hist-fbx { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.hist-fbx .hd-row { display: flex; align-items: center; gap: 10px; }
.hist-fbx .hd-k { flex: 0 0 auto; color: var(--text-dim); font-size: 13px; letter-spacing: 1px; }
.hist-fbx .hd-ctl { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.hist-fbx .fb-btn { padding: 5px 18px; font-size: 13.5px; border-radius: 16px; }
/* 收起态：只留所选那一项（display:none 同时移出无障碍树） */
.hist-fbx.fb-picked .hist-fb:not(.on) { display: none; }
.hist-fbn-row.hide { display: none; }
.hist-fb-note { flex: 1; min-width: 120px; padding: 6px 10px; font-size: 13px;
background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 8px; color: var(--text); }
.hist-fb-note:focus { border-color: var(--gold); outline: none; }
/* ===== 2026-11-04 四档反馈备注（三处共用：.cast-fb / .hist-fbx / .hv-fb）=====
用户："要知道这条为什么不准" —— 选中任一项后出现一行可选备注，
200 字截断 + 字数提示；空备注不写库；改选四档时备注保留。
已有备注时露「有备注」标记，收起态也看得出，点开仍可编辑。 */
.fb-note-zone { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.fb-note-zone.hide { display: none; }
.fb-note-k { flex: 0 0 auto; color: var(--text-dim); font-size: 12px; letter-spacing: 1px; }
.fb-note-in { flex: 1 1 160px; min-width: 0; padding: 6px 10px; font-size: 12.5px;
background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 8px;
color: var(--text); font-family: inherit; }
.fb-note-in::placeholder { color: var(--text-dim); opacity: .72; }
.fb-note-in:focus { border-color: var(--gold); outline: none; }
.fb-note-count { flex: 0 0 auto; color: var(--text-dim); font-size: 11px; letter-spacing: .5px;
font-variant-numeric: tabular-nums; }
.fb-note-flag { flex: 0 0 auto; display: none; font-style: normal; font-size: 11px;
padding: 1px 8px; border-radius: 999px; color: var(--gold-dim);
border: 1px solid rgba(var(--gold-rgb), .45); background: rgba(var(--gold-rgb), .12); }
.fb-note-zone.has-note .fb-note-flag { display: inline-block; }
@media (max-width: 720px) {
.fb-note-zone { gap: 6px; }
.fb-note-in { flex: 1 1 120px; font-size: 12px; }
.fb-note-count { font-size: 10.5px; }
}
/* ===== 2026-10-16（r7）批语卡「模版下选风格」=====
用户："点开这个模版，里面可以选择使用那个。然后返回，后面批语卡就用这个。"
行下 chips = 该模版的子风格；点 chip 即时落库 + 缩略图实时重画。 */
.share-scheme-wrap { margin-bottom: 10px; }
.sso-expand-tip { color: rgba(168,137,78,.9); font-size: 11.5px; margin-top: 2px; }
.sso-subs { display: none; flex-wrap: wrap; gap: 6px; padding: 8px 2px 2px 12px; }
.sso-subs.open { display: flex; }
.sso-chip { font-size: 12.5px; line-height: 1; padding: 6px 11px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--line); color: var(--text-dim); user-select: none;
transition: color .15s, border-color .15s, background .15s; }
.sso-chip:hover { color: var(--gold); border-color: rgba(168,137,78,.5); }
.sso-chip.on { background: rgba(var(--gold-rgb), .16); border-color: rgba(168,137,78,.65); color: var(--gold-bright); }
/* 分享浮层「更多…」按钮 */
.share-picker .sg button.share-more { border-style: dashed; color: rgba(138,117,72,.95); }
.share-picker .sg button.share-more:hover { border-color: rgba(178,58,46,.5); color: var(--cinnabar); }
/* ===== 2026-10-17（r7c）记录列表·心标两改（用户定稿）=====
用户原话："你这个右上角心的标志有点小，看放哪合适再大点。而且我打开卦辞后那个心
还在那个位置没变。而且左面是收藏夹，这时有收藏夹就不用右面显示心。"
定稿：①心标 15→18px（位置不动：按钮排下方、右缘与删除齐平，折叠时落卡片右下角；
本块覆盖上方 .hist-fav-one 的 15px，同为"唯一裁决"追加）
②展开（打开卦辞）后隐藏心标——收藏状态看左侧「收藏夹：xx」行即可；
折叠态照常显示（与 .hist-item.sel 隐藏同口径：只在展开时藏）。 */
.hist-item .hist-fav-one { font-size: 18px; }
.hist-item.open .hist-fav-row { display: none; }
/* ===== 2026-10-17（手相/面相改版）用户截图口径 =====
原话（手相）："把上传照片拍照啥的放在左侧手的下面。整体往上移。"
原话（面相）："把上传那些放在左侧脸的下面…不要写这么大字改小点。面相这整体上移。"
①「上传照片/拍照」行在 JS 里整行搬进左列 .gen-figure（图下）→ 本块补左列内排式；
②标题+表单原为垂直居中（style.css:447 .stage-center justify-content:center），
留白大 → 本模块页（含 .gen-figure 的通用页=手相/面相）改贴顶；
③照片提示 12px → 10.5px（覆盖 style.css:2054 .gi-photo-hint，唯一裁决）。 */
.stage-center:has(> .gen-stage .gen-figure) { justify-content: flex-start; padding-top: 2px; }
.gen-figure .fig-canvas { display: flex; flex-direction: column; align-items: center; width: 100%; }
.gen-figure .gi-photo { width: 100%; margin-top: 14px; align-items: center; gap: 6px; }
.gen-figure .gi-photo .gi-label { text-align: center; }
.gen-figure .gi-photo-btns { flex-direction: column; width: 100%; }
.gen-figure .gi-photo-preview { width: 100%; }
.gen-figure .gi-photo-hint { text-align: center; font-size: 10.5px; letter-spacing: .5px; line-height: 1.6; }
/* ==================================================================
2026-10-17 ㊴ 记录卡「打开卦签 · 甲案」+ 应验章（本块为唯一裁决，追加不动作废）
—— 用户点选设计稿 记录卡-大视图-三方案.html 的甲案：
列表卡 = 左文字 + 右卦象小图（点图开大视图）；应验章斜盖图上（红=准/蓝=不准）。
================================================================== */
.hist-item .hist-main { display: flex; gap: 12px; align-items: flex-start; }
.hist-item .hist-txt { flex: 1 1 auto; min-width: 0; }
.hist-item .hist-txt .hist-q, .hist-item .hist-txt .hist-g { padding-right: 0; }
.hist-item .hist-hex { flex: 0 0 86px; position: relative; margin-top: 26px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
min-height: 96px; padding: 8px 0 4px; cursor: pointer;
border: 1px dashed rgba(var(--gold-rgb), .4); border-radius: 9px;
background: rgba(var(--gold-rgb), .05);
transition: border-color .18s ease, box-shadow .18s ease; }
.hist-item .hist-hex:hover { border-color: rgba(var(--gold-rgb), .68); box-shadow: 0 2px 10px rgba(58,52,43,.10); }
.hist-item .hist-hex svg { display: block; }
.hist-item .hist-hex .nm { font-size: 11px; color: var(--text-dim); letter-spacing: 2px; margin-top: 2px; font-family: var(--serif); }
.hist-item .hist-hex .nm-v { writing-mode: vertical-rl; font-size: 11.5px; color: var(--gold); letter-spacing: 4px; font-family: var(--serif); }
.hist-stamp { position: absolute; right: -8px; bottom: -6px; transform: rotate(-14deg);
font-family: var(--serif); font-size: 15px; font-weight: 700; letter-spacing: 3px; line-height: 1.25;
padding: 2px 8px 3px; border: 2px solid currentColor; border-radius: 7px;
box-shadow: inset 0 0 0 1px currentColor; opacity: .92; pointer-events: none;
background: var(--sf-glass-w62); }
.hist-stamp.ok { color: #B23A2E; }
.hist-stamp.no { color: #3B5B92; }
/* —— 打开卦签 · 大视图（浮层） —— */
.hv-mask { position: fixed; inset: 0; z-index: 1400; display: flex; align-items: center; justify-content: center;
background: rgba(43, 39, 33, .45); opacity: 0; transition: opacity .18s ease; }
.hv-mask.open { opacity: 1; }
.hv-box { width: 430px; max-width: 92vw; max-height: 86vh; overflow-y: auto;
background: linear-gradient(180deg, var(--sf-card), var(--sf-hv-b)); border: 1px solid rgba(var(--gold-rgb), .45);
border-radius: 16px; padding: 20px 20px 16px; position: relative;
box-shadow: 0 18px 50px rgba(58, 52, 43, .28); font-family: var(--serif); }
.hv-x { position: absolute; top: 12px; right: 14px; font-size: 15px; color: var(--text-dim); cursor: pointer; }
.hv-x:hover { color: var(--cinnabar); }
.hv-kicker { font-size: 11px; letter-spacing: 3px; color: var(--gold); }
.hv-title { font-size: 23px; letter-spacing: 6px; margin: 8px 0 2px; font-weight: 900; color: var(--text); }
.hv-sub { font-size: 11.5px; color: var(--text-dim); letter-spacing: 2px; margin-bottom: 12px; }
.hv-tu { display: flex; flex-direction: column; align-items: center; padding: 14px 0 8px;
background: radial-gradient(120px 90px at 50% 42%, rgba(226, 196, 136, .20), transparent 70%);
border: 1px solid rgba(var(--gold-rgb), .22); border-radius: 12px; margin-bottom: 12px; }
.hv-tri { display: flex; justify-content: space-between; width: 100%; padding: 6px 12px 0;
font-size: 10.5px; color: var(--text-dim); letter-spacing: 1px; }
.hv-plain { width: 110px; height: 120px; display: flex; align-items: center; justify-content: center;
color: var(--gold); font-size: 13px; letter-spacing: 4px; writing-mode: vertical-rl; }
.hv-duan { font-size: 15px; line-height: 2.05; margin: 0 0 10px; color: var(--text); }
.hv-duan b { color: #8E2C22; font-weight: 600; }
.hv-meta { font-size: 11.5px; color: var(--text-dim); letter-spacing: .5px;
border-top: 1px solid rgba(var(--gold-rgb), .3); padding-top: 10px; line-height: 1.9; }
/* 2026-11-03：记录大视图的四档应验（与结果区/记录详情同一套收起、展开、改选） */
.hv-fb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 12px; }
.hv-fb-k { color: var(--text-dim); font-size: 12px; letter-spacing: 1px; }
.hv-fb-btn { min-height: 24px; padding: 4px 12px; border-radius: 16px;
border: 1px solid rgba(var(--gold-rgb), .35); background: transparent; color: var(--text-dim);
font-family: var(--serif); font-size: 12px; letter-spacing: 1px; cursor: pointer; white-space: nowrap; }
.hv-fb-btn:hover { color: var(--gold); border-color: var(--gold); }
.hv-fb-btn.on { color: var(--gold-bright); border-color: var(--gold); background: rgba(var(--gold-rgb), .16); }
.hv-fb-btn:disabled { opacity: .55; cursor: default; }
.hv-fb.fb-picked .hv-fb-btn:not(.on) { display: none; }
.hv-foot { display: flex; gap: 10px; margin-top: 12px; }
.hv-foot b { flex: 1; text-align: center; font-weight: 500; font-size: 13px; letter-spacing: 3px;
padding: 9px 0; border-radius: 9px; border: 1px solid rgba(var(--gold-rgb), .5);
color: var(--gold); cursor: pointer; user-select: none; }
.hv-foot b:hover { filter: brightness(1.05); }
.hv-foot b.main { background: linear-gradient(180deg, #C4483A, #B23A2E 60%, #9A3126); color: #FFFDF8; border-color: transparent; }
.hv-duan.hv-bai { font-size: 13.5px; color: var(--text-dim); line-height: 1.95; }
/* ==================================================================
2026-10-17 ㉞ 使用教程 = 站内整页（唯一裁决，覆盖 4623-4653 的「居中卡片浮层」版式）
用户原话："使用教程弄成设置页面一样的，不是在中间打开，站内整个页面打开，右上角有叉号关闭。"
================================================================== */
.tut-overlay { align-items: stretch; justify-content: stretch;
background: var(--sf-panel); backdrop-filter: none; }
.tut-panel { width: 100%; height: 100%; border-radius: 0; border: 0; box-shadow: none;
background: var(--sf-panel); position: relative; }
.tut-panel .tut-head { display: none; } /* 教程页自带「使用教程」标题头（同设置整页），外层不重复标题 */
.tut-body { background: var(--sf-panel); }
/* 叉号：从「面板外金色浮动」改为「页内右上角・设置页同款朱砂 40px」
（watchCloseX 写的内联 top/left 由 !important 压过） */
span.tut-close.close-x { top: 14px !important; left: auto !important; right: 26px !important;
width: 40px !important; height: 40px !important; font-size: 30px !important; }
span.tut-close.close-x { color: var(--cinnabar) !important; }
span.tut-close.close-x:hover { color: #8E2C22 !important; transform: none; }
/* ==================================================================
2026-10-17 ㊲ 手相/面相参考图换「用户点选 A 候选」（追加，唯一裁决）
================================================================== */
.pf-art { position: relative; display: inline-block; max-width: 100%; }
.pf-img { display: block; width: 246px; max-width: 100%; height: auto; border-radius: 8px; }
.pf-img.pf-mirror { transform: scaleX(-1); }
.pf-img.pf-face { width: 236px; }
/* 面相三停虚线（2026-10-17 定稿预览同款位置：发际/眉/鼻底/下巴） */
.pf-face-art { line-height: 0; }
.pf-face-art .pf-guide { position: absolute; left: 12%; right: 12%;
border-top: 1px dashed rgba(178, 58, 46, .42); pointer-events: none; }
.pf-face-art .pf-guide-tag { position: absolute; right: 2%; transform: translateY(-50%);
z-index: 2; font-size: 10px; line-height: 1.4; letter-spacing: 1px;
color: rgba(178, 58, 46, .82); background: var(--sf-panel); padding: 0 3px; white-space: nowrap; }
.pf-line-tag { position: absolute; z-index: 2; pointer-events: none;
background: var(--sf-white); color: #2F2A22; font-family: var(--serif);
font-size: 11px; letter-spacing: 1.5px; line-height: 1.4; white-space: nowrap;
padding: 1px 5px 2px; border-radius: 4px; border: 1px solid rgba(168,137,78,.28);
text-align: center; box-sizing: border-box; }
/* 2026-10-17 手相二审：1–6 朱色编号点（用户定稿图同款）+ 图下编号图例 */
.pf-num { position: absolute; z-index: 3; width: 19px; height: 19px;
transform: translate(-50%, -50%); border-radius: 50%;
background: #B23A2E; color: #FFFDF8; font-family: var(--serif);
font-size: 11.5px; font-weight: 700; line-height: 1;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 1px 3px rgba(58, 52, 43, .22); pointer-events: none; }
.pf-legend-num { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px;
text-align: left; line-height: 2; }
.pf-legend-num span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pf-legend-num i { display: inline-flex; width: 16px; height: 16px; border-radius: 50%;
background: #B23A2E; color: #FFFDF8; font-style: normal; font-size: 10px;
align-items: center; justify-content: center; flex: 0 0 16px; }
/* 图下文字再往下一点（用户 2026-10-17："面相手相里面文字整体往下移，布局好看"） */
.gen-figure .pf-cap { margin-top: 15px; }
.gen-figure .pf-legend { margin-top: 10px; line-height: 2; }
/* ==================================================================
2026-10-17 r11：记录卡与卦签改动（唯一裁决，覆盖上方旧规则）
①大视图卦象上的应验章 ②悬停预览浮层 ③卡片时间下移 ④心并入按钮排 ⑤收藏夹整版
================================================================== */
/* ④ 右上按钮排：心在最左（光秃秃 ♡ / 点过红实心 ♥），与分享/导出/删除同排等距 */
.hist-item .hist-acts { gap: 11px; }
.hist-item .hist-acts .hist-fav-one { margin: 0; }
/* 2026-10-19 FAV-04（用户："不管我有没有收藏…打开它时，右上角收藏表示得在"）：
展开后也保留心标；收藏=红色，未收藏=原样。旧的「展开后藏心」作废。 */
/* ③ 时间行移到底部：与上面正文留一点缝 */
.hist-item .hist-txt .hist-time { margin-top: 5px; }
/* ① 大视图：章盖在卦象图上（右下调出、斜 14° 沿用基类）；红蓝同位置 */
.hv-tu .tuhex { position: relative; display: inline-block; }
.hv-tu .tuhex .hist-stamp { right: -34px; bottom: -6px; font-size: 19px; letter-spacing: 4px; }
/* ② 悬停预览浮层（不吃鼠标事件；位置由 JS 按卦图矩形算） */
.hv-pop { position: fixed; z-index: 1330; width: 340px; max-height: 62vh; overflow: hidden;
background: var(--sf-card); border: 1px solid rgba(var(--gold-rgb), .55); border-radius: 12px;
padding: 12px 14px 10px; box-shadow: 0 14px 34px rgba(58,52,43,.22);
pointer-events: none; font-family: var(--serif); }
.hv-pop .p-t { font-size: 15px; letter-spacing: 3px; font-weight: 700; color: var(--text); }
.hv-pop .p-s { font-size: 11px; color: var(--text-dim); margin: 2px 0 6px; letter-spacing: 1px; }
.hv-pop .p-d { font-size: 12.5px; line-height: 1.8; color: var(--text); }
.hv-pop .p-d.p-dim { color: var(--text-dim); }
/* ⑤ 收藏夹整版（记录抽屉内；居中浮层 .favfs-mask 版作废不再使用） */
.favfs-inpage { padding: 2px 2px 8px; }
.favfs-inpage .favfs-head { justify-content: flex-start; gap: 10px; padding: 4px 0 12px;
border-bottom: 1px solid rgba(var(--gold-rgb), .3); margin-bottom: 8px; }
.favfs-inpage .favfs-back { cursor: pointer; font-size: 13px; color: var(--gold);
border: 1px solid rgba(var(--gold-rgb), .5); border-radius: 8px; padding: 3px 12px; }
.favfs-inpage .favfs-back:hover { color: var(--cinnabar); border-color: rgba(178,58,46,.45); }
.favfs-inpage .favfs-head b { font-size: 15px; letter-spacing: 3px; font-weight: 600; }
/* ============================================================
2026-10-19 FAV · 收藏夹选择浮层 + 夹内页（唯一裁决）
============================================================ */
.favpick-mask { position: fixed; inset: 0; z-index: 1400; background: rgba(30,25,20,.32);
display: flex; align-items: center; justify-content: center; padding: 20px; }
.favpick { width: min(380px, 92vw); max-height: 76vh; display: flex; flex-direction: column;
background: var(--sf-card); border: 1px solid rgba(168,137,78,.5); border-radius: 14px;
box-shadow: 0 16px 40px rgba(60,45,25,.22); overflow: hidden; font-family: var(--serif); }
.favpick-h { display: flex; align-items: center; justify-content: space-between;
padding: 13px 16px 11px; border-bottom: 1px solid rgba(168,137,78,.28);
font-size: 14px; letter-spacing: 2px; color: #6d5a3a; }
.favpick-x { cursor: pointer; color: var(--text-dim); font-size: 16px; }
.favpick-list { padding: 8px 10px; overflow-y: auto; }
.favpick-empty { margin: 6px 8px; color: var(--text-dim); font-size: 13px; line-height: 1.8; }
.favpick-row { display: flex; align-items: center; gap: 10px; padding: 10px 8px;
border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--text); }
.favpick-row + .favpick-row { border-top: 1px dashed rgba(168,137,78,.22); }
.favpick-row:hover { background: rgba(168,137,78,.06); }
.favpick-row .ck { width: 18px; height: 18px; border: 1px solid rgba(168,137,78,.55);
border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; color: #fff; flex: 0 0 18px; }
.favpick-row.on .ck { background: #B23A2E; border-color: #B23A2E; }
.favpick-row .n { flex: 1; }
.favpick-row .c { font-size: 12px; color: var(--text-dim); }
.favpick-tip { padding: 0 16px 10px; font-size: 11.5px; color: var(--text-dim); line-height: 1.7; }
.favpick-foot { display: flex; align-items: center; justify-content: space-between;
padding: 11px 16px 13px; border-top: 1px solid rgba(168,137,78,.28); }
.favpick-unsave { cursor: pointer; font-size: 12.5px; color: #a06a5e; }
.favpick-ok { cursor: pointer; padding: 6px 20px; border-radius: 8px;
background: #B23A2E; color: #FFFDF8; font-size: 13.5px; letter-spacing: 2px; }
/* 夹内页头（FAV-07） */
.foldview-h { display: flex; align-items: center; gap: 10px; padding: 0 0 12px;
border-bottom: 1px solid rgba(168,137,78,.3); margin-bottom: 12px; }
.foldview-back { cursor: pointer; font-size: 12.5px; color: var(--gold);
border: 1px solid rgba(168,137,78,.5); border-radius: 8px; padding: 3px 11px; }
.foldview-back:hover { color: var(--cinnabar); border-color: rgba(178,58,46,.45); }
.foldview-h b { font-size: 15px; letter-spacing: 2px; color: #6d5a3a; }
.foldview-cnt { margin-left: auto; font-size: 12px; color: var(--text-dim); }
.hist-folder-row .hf-chip { cursor: default; }
/* ==================================================================
2026-10-17 J4（剩余清单 #12）：分享浮层「分享到」渠道钮
（微=微信绿 / Q=QQ 蓝 / 博=微博红 / 复制链接=金描边；全站唯一裁决）
================================================================== */
.share-channels { display: flex; align-items: center; gap: 10px; padding: 10px 2px 0; flex-wrap: wrap; }
.share-channels .sc-label { font-size: 12px; color: var(--text-dim); letter-spacing: 2px; margin-right: 2px; }
.share-channels .sc-btn { height: 34px; min-width: 34px; border-radius: 17px; border: none; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center; padding: 0 10px;
font-family: var(--serif); font-size: 15px; color: #fff; line-height: 1;
box-shadow: 0 2px 8px rgba(58,52,43,.18); transition: transform .15s ease, box-shadow .15s ease; }
.share-channels .sc-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(58,52,43,.26); }
.share-channels .sc-wx { background: #07C160; }
.share-channels .sc-qq { background: #12B7F5; }
.share-channels .sc-wb { background: #E6162D; }
.share-channels .sc-cp { background: transparent; color: var(--gold); border: 1px solid rgba(var(--gold-rgb), .55);
font-size: 12.5px; letter-spacing: 1px; box-shadow: none; }
.share-channels .sc-cp:hover { color: var(--cinnabar); border-color: rgba(178,58,46,.5); }
/* ==================================================================
2026-10-17 设置项批（剩余 5 件）：恢复码 / 账号信息卡 / 危险按钮 /
忘记密码链接 / 反馈文本框（全站唯一裁决）
================================================================== */
.acct-forgot { display: inline-block; margin-top: 10px; font-size: 12.5px; color: var(--gold);
text-decoration: underline dotted; }
.acct-forgot:hover { color: var(--cinnabar); }
.acct-card { border: 1px solid rgba(var(--gold-rgb), .4); border-radius: 10px; padding: 8px 12px;
background: var(--sf-card); font-size: 13px; }
.acct-card .ac-row { display: flex; justify-content: space-between; padding: 4px 0;
border-bottom: 1px dashed rgba(var(--gold-rgb), .22); }
.acct-card .ac-row:last-child { border-bottom: none; }
.acct-card .ac-row span { color: var(--text-dim); }
.set-recpw { display: flex; gap: 8px; margin-top: 8px; }
.set-recpw .cfg-inp { flex: 1; margin: 0; }
.set-btn.danger { color: var(--cinnabar); border-color: rgba(178, 58, 46, .45); }
.set-btn.danger:hover { background: rgba(178, 58, 46, .08); }
.rec-code { font-family: var(--serif); font-size: 26px; letter-spacing: 5px; text-align: center;
color: var(--text); padding: 14px 8px; margin: 6px 0;
border: 1px dashed rgba(var(--gold-rgb), .55); border-radius: 10px; background: var(--sf-card);
user-select: all; }
textarea.cfg-inp { resize: vertical; min-height: 64px; line-height: 1.7; font-family: var(--serif); }
/* 2026-10-17 审计低-1：页面隐藏（visibilitychange → body.page-hidden）时暂停导航小罗盘
自转，回来自动续转——原来 88s/圈 无限动画 + will-change 常驻合成层，后台也照跑。 */
body.page-hidden .orn-inner-spin,
body.page-hidden .orn-spin { animation-play-state: paused; }
/* ==================================================================
2026-10-17 专业复查 P1：可点击"金"【对比度】实测 2.4–2.5:1 → 4.1:1
口径：亮金(--gold-bright)/金(--gold) 只留给纯装饰；凡"能点的字 / 信息标题"
统一 --gold-dim（与导航链接同色，全站一个"可点击金"）；hover 态保留各自原色
（末尾唯一裁决）。
================================================================== */
.hist-cloud, .hist-export, .hist-clear, .hist-export-one,
.hist-acts .hist-share-one, .hist-acts .hist-exp { color: var(--gold-dim); }
.set-btn { color: var(--gold-dim); }
.set-sec { color: var(--gold-dim); }
/* P2 顺手：手相照片隐私提示（合规字）10.5px × 70% 灰 ≈2:1 不可读 → 正文辅助色 */
.gen-figure .gi-photo-hint { color: var(--text-dim); }
/* P2 顺手（2026-10-17 专业复查）：手相/面相「推算」钮在 2 列 grid 里只占半宽（209px，
与通栏字段对不齐）→ 让它通栏（与 .gi-wide 同口径）。 */
.gen-form.has-figure .gen-go { grid-column: 1 / -1; }
/* ==================================================================
2026-10-17 设置页·「关于与帮助」折叠分组（用户："5个。折叠"）
左侧菜单：.setpage-grp 分组壳 + .setpage-grp-hd 组标题（按钮）+ .setpage-subs 5 个子项；
子项缩进小一号；两级目录行为与教程页一致（只看当前项、父项不进入选中态）。
覆盖用法：.setpage-mi（4779）的 display:block 不适用于按钮组标题，此处显式覆盖。
================================================================== */
.setpage-grp { display: flex; flex-direction: column; gap: 4px; }
.setpage-grp-hd { width: 100%; display: flex; align-items: center; justify-content: space-between;
gap: 10px; border: 0; border-left: 3px solid transparent; background: none;
font-family: inherit; text-align: left; cursor: pointer; }
/* 2026-10-17 用户："批语卡版式哪个下拉箭头再大点" —— 12px 文本 ▾ 换成 16px 线性箭头 */
.setpage-caret { width: 16px; height: 16px; flex: 0 0 auto; color: var(--text-dim);
transition: transform .25s var(--ease); }
.setpage-grp.open .setpage-caret { transform: rotate(180deg); }
.setpage-subs { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; }
.setpage-subs[hidden] { display: none; } /* 作者样式会盖掉 UA 的 [hidden]，必须显式关掉 */
.setpage-sub { padding: 8px 14px; font-size: 13.5px; letter-spacing: 1.5px; color: var(--text-dim); }
.setpage-sub.sel { color: var(--gold); }
/* 子面板里的法律正文：复用原弹层 .legal-body p 的排版口径 */
.legal-p { margin: 0 0 12px; font-family: var(--serif); font-size: 14.5px;
line-height: 1.9; color: var(--text); }
@media (max-width: 800px) {
/* 移动端菜单是横条：组标题 + 子项排同一行，仍可横向滚动 */
.setpage-grp { flex-direction: row; gap: 8px; align-items: center; }
.setpage-grp-hd { width: auto; border: 1px solid var(--line); border-radius: 999px; }
.setpage-subs { flex-direction: row; gap: 8px; padding-left: 0; }
.setpage-sub { padding: 7px 12px; font-size: 13px; }
}
/* ==================================================================
2026-10-17 设置页·批语卡版式 v5（用户定稿）
左侧「批语卡版式」分组 → 朱批笺 / 素笺 / 卦签 三个独立面板；
面板内：大类名居中 → 10 款样式胶囊（5 列两行，选中红底白字）→ 整卡大图 → 默认说明。
原三类行卡（.share-scheme-opt / .sso-*，4696 起）不再出现在设置页，规则保留不删。
================================================================== */
.bc-catname { font-family: var(--serif); font-size: 27px; font-weight: 700;
letter-spacing: 6px; color: var(--gold); text-align: center; margin: 6px 0 22px; }
.bc-pats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px 12px; max-width: 760px; margin: 0 auto 26px; }
.bc-pat { font-family: inherit; font-size: 14px; letter-spacing: 1px; color: var(--text-dim);
background: var(--sf-glass-p55); border: 1px solid var(--line-strong);
border-radius: 999px; padding: 9px 10px; cursor: pointer; text-align: center;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: background .13s var(--ease), color .13s var(--ease), border-color .13s var(--ease); }
.bc-pat:hover { border-color: var(--gold); color: var(--gold);
background: rgba(var(--gold-rgb), .08); }
.bc-pat.on { background: #A63B2F; border-color: #A63B2F; color: #FFF9F2;
font-weight: 700; box-shadow: 0 2px 8px rgba(166,59,47,.25); }
.bc-cardwrap { display: flex; justify-content: center; }
.bc-card { display: block; width: min(620px, 100%); height: auto;
border: 1px solid var(--line); border-radius: 4px; background: var(--sf-white);
box-shadow: 0 4px 18px rgba(60,45,20,.14); }
.bc-now { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: var(--text-dim); }
.bc-now b { color: #A63B2F; font-weight: 600; }
/* 总览页（2026-10-17 用户："点开后，右侧是批语卡版式，下面是三个大类，可以点进去"） */
.bc-intro { max-width: 760px; margin: 0 auto 24px; text-align: center;
font-size: 13.5px; line-height: 1.9; color: var(--text-dim); }
.bc-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px; max-width: 760px; margin: 0 auto; }
.bc-cat { display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
padding: 24px 22px; font-family: inherit; text-align: left; cursor: pointer;
color: var(--text); background: var(--sf-glass-p55);
border: 1px solid var(--line-strong); border-radius: 12px;
transition: border-color .18s var(--ease), background .18s var(--ease),
transform .18s var(--ease); }
.bc-cat:hover { border-color: var(--gold); background: rgba(var(--gold-rgb), .07);
transform: translateY(-2px); }
.bc-cat b { font-family: var(--serif); font-size: 21px; letter-spacing: 4px;
font-weight: 700; color: var(--gold); }
.bc-cat span { font-size: 12.5px; line-height: 1.7; color: var(--text-dim); }
.bc-cat .bc-cat-go { color: #A63B2F; letter-spacing: 1px; }
@media (max-width: 800px) {
.bc-catname { font-size: 23px; letter-spacing: 4px; margin-bottom: 16px; }
.bc-pats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bc-pat { font-size: 13px; }
.bc-cats { grid-template-columns: 1fr; gap: 10px; }
.bc-cat { padding: 18px; }
}
/* ============================================================
2026-10-17 用户（设置页截图）：设置标题进左菜单居中、去顶栏横线、右栏上移；
整页/全屏浮层的关闭叉号统一为「朱红圆圈 + 细叉」（用户点选）。
覆盖关系：4817/4818 的 head 布局与 title 定位、4647/5044 的 tut-close 金色叉。
============================================================ */
/* 设置页：顶部条不再占位，叉号浮在右上角；标题成为左菜单第一项、水平居中 */
.setpage-x { position: absolute; right: 18px; top: 14px; z-index: 6; }
.setpage-menu { padding-top: 16px; }
.setpage-title { display: block; position: static; transform: none; width: 100%;
text-align: center; margin: 2px 0 16px; }
/* 教程浮层叉号：同款圆圈；位置仍由 watchCloseX 按面板矩形实时写入 left/top */
button.tut-x { position: fixed; margin: 0; padding: 0; display: none; z-index: 1023;
font-family: inherit; }
button.tut-x svg { width: 19px; height: 19px; display: block; }
body.tut-open button.tut-x { display: inline-flex; }
@media (max-width: 800px) {
/* 窄屏左菜单变横向条：标题作为条首项；右侧给叉号让出位置 */
.setpage-title { flex: 0 0 auto; width: auto; margin: 0 10px 0 2px;
font-size: 17px; letter-spacing: 4px; text-indent: 0; }
.setpage-menu { padding-top: 10px; padding-right: 62px; }
.setpage-body { padding-top: 20px; }
}
/* ===== 2026-10-18 更多菜单：未上线项 =====
用户第2轮：「把未上线三字去掉」——只保留灰字、不可点；
第3轮「能用的都在上面，未上线的都在下面」→ 底部「即将上线」整块（见 buildMoreNav）。
2026-10-18 用户：论坛页输入框前的笔形图标删除，只留输入框（见 index.html）。 */
.nav-more-list .nm-item.soon {
display: block; padding: 8px 12px; border-radius: 7px;
text-align: center; cursor: default; user-select: none;
}
.nav-more-list .nm-item.soon .nm-title {
color: rgba(120,114,104,.66) !important;
font-size: 15px !important; line-height: 1.4; letter-spacing: .4px;
text-align: center !important;
}
.nav-more-list .nm-soon-wrap {
flex: 0 0 100%; margin-top: 6px; padding-top: 5px;
border-top: 1px solid rgba(var(--gold-rgb),.16);
}
/* 2026-10-18 用户第3轮：「即将上线的改为两列，和上面的对齐」——
与上方两个 .nm-col 同宽同 14px 列距，左右两列上下对齐。 */
.nav-more-list .nm-soon-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 14px;
}
/* ===== 2026-10-19 P0/P1：CF 冲突提示 + 起卦回放 ===== */
/* 正反证据同时命中时明说「冲突未消解」；不做成警报，保持既有纸面语言。 */
.ly-cf {
margin: 6px 0 2px; padding: 6px 10px; border-radius: 8px;
border: 1px dashed rgba(var(--gold-rgb), .45);
background: rgba(var(--gold-rgb), .06);
font-size: 12px; color: var(--sub);
}
.ly-cf-tag {
display: inline-block; margin-right: 8px; padding: 1px 7px;
border-radius: 999px; background: rgba(var(--gold-rgb), .16);
color: var(--gold-dim, #8C7444); font-weight: 600;
}
.hist-replay {
margin-left: 6px; padding: 1px 9px; border-radius: 999px;
border: 1px solid rgba(var(--gold-rgb), .45); background: transparent;
color: var(--gold-dim, #8C7444); font-size: 11.5px; cursor: pointer;
}
.hist-replay:hover { background: rgba(var(--gold-rgb), .10); }
/* ============================================================
2026-10-19 卦辞记录 · 单条展开（用户："顶上问未填写问事这一块固定，下面是可以
上下移动的，得和这一块区分，别人能看出来，还有上下拉的线条"）
· 固定区 = 卡片头（问/卦名/时间）+「收藏夹」行；滚动区 = .hist-detail
· 「收藏夹」行原虚线改实线分界；无收藏夹时由 .hist-detail 的顶线兜底
· 滚动条用自绘轨道/滑块（.hist-sb，JS 跟随 scrollTop）：
全站 `*{scrollbar-width:none}` + `*::-webkit-scrollbar{display:none}` 双层隐藏，
实测原生条在抽屉的合成层里不落像素（headless 与实机截图都看不到），
所以不用原生条，改画一条始终可见的金色轨道 + 滑块。
============================================================ */
.hist-expand > .hist-folder-row {
border-bottom: 0;
padding-bottom: 10px;
}
.hist-expand > .hist-scrollwrap {
flex: 1 1 auto;
min-height: 0;
display: flex;
position: relative;
}
.hist-scrollwrap > .hist-detail {
flex: 1 1 auto;
min-width: 0;
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
border-top: 1px solid rgba(168, 137, 78, .42);
padding-top: 10px;
padding-right: 16px; /* 给自绘滚动条让位，文字不压条 */
box-shadow: inset 0 8px 8px -9px rgba(58, 52, 43, .45);
}
/* 自绘滚动条：轨道常显，滑块高度/位置由 JS（histSbUpdate）跟随滚动更新 */
.hist-scrollwrap > .hist-sb {
position: absolute;
top: 4px;
bottom: 4px;
right: 2px;
width: 6px;
border-radius: 6px;
background: rgba(168, 137, 78, .16);
pointer-events: none;
opacity: 0;
transition: opacity .25s var(--ease);
}
.hist-scrollwrap > .hist-sb.on { opacity: 1; }
.hist-scrollwrap > .hist-sb > i {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 40px;
border-radius: 6px;
background: rgba(168, 137, 78, .62);
}
/* ============================================================
2026-10-19 TD-033 交互审计 + TD-034 收藏与滚动（本块为唯一裁决追加）
口径：一律按大厂标准（WCAG 2.2 AA / Material 3 / Ant Design 5 /
Apple HIG / 微信读书 / B站 / 网易云 / YouTube）；不改品牌皮。
============================================================ */
/* ① 单卦详情连续滚动（微信读书）：去掉内层 contain，滚到底/顶自然交外层 */
.hist-scrollwrap > .hist-detail,
.hist-expand > .hist-detail { overscroll-behavior: auto; }
/* ② 层叠：toast 最高；命名对话框在收藏浮层(1400)之上 */
.toast-wrap { z-index: 1600; }
.cfm-mask.cfm-top { z-index: 1500; }
/* ③ 可点击金对比度 3.94:1 → 5.06:1（WCAG 1.4.3 AA 4.5:1） */
:root { --gold-dim: #7A6334; }
.hist-item .hist-acts .hist-del-one { color: var(--text-dim); }
.favpick-unsave { color: #95584c; }
/* ④ 触控目标 ≥24×24（WCAG 2.5.8 / Ant Design 小按钮 24px） */
.hist-item .hist-acts > span,
.hist-item .hist-acts .hist-exp-btn {
display: inline-flex; align-items: center; justify-content: center;
min-width: 24px; min-height: 24px;
}
.hist-toolbar .hist-export, .hist-toolbar .hist-cloud, .hist-toolbar .hist-clear,
.hist-toolbar .hist-fav-filter {
display: inline-flex; align-items: center; justify-content: center; min-height: 24px;
}
.favfs-see, .favfs-up, .favfs-down, .favfs-del {
display: inline-flex; align-items: center; justify-content: center;
min-width: 24px; min-height: 24px;
}
/* ⑤ 新建按钮（收藏夹面板右上 / 收藏到浮层右上） */
.favfs-newbtn, .favpick-newbtn {
cursor: pointer; font-size: 12.5px; letter-spacing: 1px; color: var(--gold-dim, #7A6334);
border: 1px solid rgba(168,137,78,.5); border-radius: 8px; padding: 4px 11px;
display: inline-flex; align-items: center; justify-content: center; min-height: 24px;
}
.favfs-newbtn { margin-left: auto; }
.favpick-newbtn { margin-left: auto; margin-right: 12px; }
.favfs-newbtn:hover, .favpick-newbtn:hover { color: var(--cinnabar); border-color: rgba(178,58,46,.45); }
/* ⑥ 新建命名对话框（与「确定/取消」同一套弹窗语言） */
.cfm-input {
width: 100%; box-sizing: border-box; margin: 8px 0 4px; padding: 9px 11px;
border: 1px solid rgba(168,137,78,.5); border-radius: 9px;
background: var(--sf-hi); color: var(--text); font: inherit; font-size: 14px;
}
.cfm-input:focus { outline: none; border-color: var(--cinnabar); box-shadow: 0 0 0 2px rgba(178,58,46,.16); }
/* ⑦ 可撤销提示（YouTube：即时生效 + 5 秒撤销） */
.toast .t-undo {
display: inline-flex; align-items: center; min-height: 24px; margin-top: 6px;
padding: 2px 10px; border: 1px solid rgba(168,137,78,.5); border-radius: 999px;
font-size: 12.5px; color: var(--gold-dim, #7A6334); cursor: pointer;
}
.toast .t-undo:hover { color: var(--cinnabar); border-color: rgba(178,58,46,.45); }
/* ⑧ 伪按钮的键盘焦点环（WCAG 2.4.7） */
[role="button"]:focus-visible, [role="checkbox"]:focus-visible, [role="switch"]:focus-visible {
outline: 2px solid rgba(178,58,46,.7); outline-offset: 2px;
}
/* ⑨ 减少动态效果（WCAG 2.3.3 / Apple HIG Reduce Motion） */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
}
/* ============================================================
TD-038 P1-10：触控/点击命中区 ≥24×24（WCAG 2.5.8 AA）
小字操作只扩命中区，不改字号与排版。
============================================================ */
.modal-x { min-width: 32px; min-height: 32px; }
.hist-item .hist-acts > span,
.hist-item .hist-acts button,
.hist-item .hist-acts a { min-width: 24px; min-height: 24px; }
#libSearch, .libpage-search { min-height: 32px; }
.pay-plan, .pay-method { min-height: 44px; }
/* TD-038 P2-01：屏幕阅读器专用 + logo 可聚焦 */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
a.logo { text-decoration: none; color: inherit; }
a.logo:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 8px; }
/* 2026-10-24 S1：结果页问事类别标签 */
.gua-cat { font-size: 13px; color: var(--gold-dim); letter-spacing: 1px; margin: -4px 0 6px; }
.lead-cat { font-size: 12.5px; color: var(--gold-dim); letter-spacing: 1px; margin: -2px 0 6px; }
/* ============================================================
2026-10-24 S10：结果页反馈评分（星级 1–5 + 四选应验标签）
沿用深墨青底 + 哑光鎏金 + 米灰字体系；按钮 ≥24×24；键盘聚焦
由全局 :focus-visible 金色焦点环覆盖；390 宽 flex-wrap 不溢出。
============================================================ */
.cast-fb { margin-top: 16px; padding: 16px 18px; border-radius: 14px;
border: 1px solid var(--line);
background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)); }
.cast-fb-title { margin: 0 0 8px; text-align: center; font-family: var(--serif);
font-size: 12px; letter-spacing: .5px; line-height: 1.5; color: var(--gold-bright); }
.cast-fb-stars { display: flex; justify-content: center; flex-wrap: wrap;
gap: 8px; margin-bottom: 12px; }
.cast-fb-star { width: 30px; height: 30px; min-width: 24px; min-height: 24px;
padding: 0; border-radius: 8px; border: 1px solid var(--line-strong);
background: transparent; color: var(--gold-dim); font-size: 17px; line-height: 1;
cursor: pointer; transition: color .25s var(--ease), border-color .25s var(--ease),
background .25s var(--ease); }
.cast-fb-star:hover { color: var(--gold); border-color: var(--gold); }
.cast-fb-star.on { color: var(--gold-bright); border-color: var(--gold);
background: rgba(var(--gold-rgb), .14); }
.cast-fb-labels { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.cast-fb-label { min-height: 24px; min-width: 24px; padding: 4px 10px; border-radius: 16px;
border: 1px solid var(--line-strong); background: transparent; color: var(--text-dim);
font-family: var(--serif); font-size: 11px; letter-spacing: .5px; cursor: pointer;
white-space: nowrap;
transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
.cast-fb-label:hover { color: var(--gold); border-color: var(--gold); }
.cast-fb-label.on { color: var(--gold-bright); border-color: var(--gold);
background: rgba(var(--gold-rgb), .16); }
/* 2026-11-03 用户定稿：已选后收起，只留所选那一项；点它再展开四档可改选。 */
.cast-fb.fb-picked .cast-fb-label:not(.on) { display: none; }
.cast-fb-star:disabled, .cast-fb-label:disabled { opacity: .55; cursor: default; }
.cast-fb .cast-fb-note { margin: 8px 0 0; text-align: center; color: var(--text-dim);
font-size: 11px; letter-spacing: .5px; }
.cast-fb-done { padding: 10px 0; text-align: center; font-family: var(--serif);
color: var(--gold-bright); letter-spacing: 2px; }
@media (max-width: 720px) {
.cast-fb { padding: 12px 10px; }
.cast-fb-stars { gap: 5px; }
.cast-fb-label { padding: 4px 8px; font-size: 11px; white-space: nowrap; }
}
/* ============================================================
S11 历史页到期回访卡：金/米白，复用抽屉卡片边框语言；
390 宽 flex-wrap 不横向溢出；按钮 >=24x24；焦点环由全局
:focus-visible 金色规则覆盖。
============================================================ */
.revisit-card {
margin-bottom: 14px; padding: 14px 16px; border-radius: 12px;
border: 1px solid var(--line);
background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01));
box-sizing: border-box; min-width: 0;
}
.revisit-title {
margin: 0 0 10px; text-align: center; font-family: var(--serif);
font-size: 15.5px; letter-spacing: 3px; color: var(--gold-bright);
}
.rv-list, .rv-extra { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rv-extra { margin-top: 10px; }
.rv-item {
padding: 10px 12px; border-radius: 10px; min-width: 0;
border: 1px solid var(--line); background: rgba(255,255,255,0.02);
}
.rv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; }
.rv-name {
font-family: var(--serif); font-size: 15px; color: var(--text); letter-spacing: 1px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.rv-date { flex-shrink: 0; font-size: 12.5px; color: var(--text-dim); letter-spacing: 1px; }
.rv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; min-width: 0; }
.rv-stars { font-size: 13px; color: var(--gold-bright); letter-spacing: 1px; }
.rv-tag {
min-height: 24px; min-width: 24px; display: inline-flex; align-items: center;
padding: 3px 12px; border-radius: 13px; border: 1px solid var(--line-strong);
font-family: var(--serif); font-size: 12.5px; letter-spacing: 1px; color: var(--text-dim);
}
.rv-tag.fulfilled { color: var(--gold-bright); border-color: var(--gold); background: rgba(var(--gold-rgb), .14); }
.rv-tag.partial { color: var(--gold-bright); border-color: var(--line-strong); background: rgba(var(--gold-rgb), .08); }
.rv-tag.missed, .rv-tag.no_event { color: var(--text-dim); }
.rv-more {
display: block; width: 100%; min-height: 24px; min-width: 24px; margin-top: 10px;
padding: 6px 0; border-radius: 13px; border: 1px solid var(--line-strong);
background: transparent; color: var(--text-dim); font-family: var(--serif);
font-size: 13px; letter-spacing: 1px; cursor: pointer;
transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.rv-more:hover { color: var(--gold); border-color: var(--gold); }
@media (max-width: 720px) {
.revisit-card { padding: 12px 10px; }
.rv-item { padding: 9px 10px; }
.rv-head { gap: 8px; }
.rv-name { font-size: 14px; }
.rv-date { font-size: 12px; }
.rv-tag { padding: 3px 10px; font-size: 12px; }
}
/* ============================================================
任务B-界面整改（2026-10-24）覆盖段：只做前台视觉收口，不改结构逻辑。
2 设置高级入口 / 3 反馈按钮 / 4 法律排版 / 5 论坛白底与小字 / 8 典籍库文字加深。
选择器加 body 前缀，特异性压过后加载的 forum.css / library.css。
============================================================ */
/* ---- 任务B-2：高级功能隐藏区兜底隐藏；版本号行可点 ---- */
.set-advanced[hidden] { display: none !important; }
#setVerRow { cursor: pointer; }
/* ---- 任务B-3：意见反馈提交按钮放大 + 朱红高亮（触控 ≥24×24） ---- */
.set-btn.fb-send {
min-height: 38px; padding: 10px 28px; margin-top: 12px;
font-size: 15px; font-weight: 600; letter-spacing: 1px;
color: #FFFFFF; background: #B23A2E; border: 1px solid #B23A2E; border-radius: 999px;
transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.set-btn.fb-send:hover { background: #8E2C22; border-color: #8E2C22; }
.set-btn.fb-send:active { transform: scale(.98); }
/* ---- 任务B-4：免责 / 隐私排版：二级标题 + 字号行距放大 ---- */
.legal-h2 {
font-family: var(--serif); font-size: 16px; font-weight: 600;
color: var(--text); letter-spacing: 1px; margin: 20px 0 10px;
}
.legal-h2:first-child { margin-top: 0; }
.legal-p { font-size: 15.5px; line-height: 2.15; margin: 0 0 14px; }
.legal-body p { font-size: 15.5px; line-height: 2.15; }
/* ---- 任务B-5：论坛帖子卡片白底；解答/好评/关注等小字加深约 20% ---- */
body #forumRoot .q-card { background: var(--sf-white); }
body #forumRoot .m-stats { color: #4A463E; }
body #forumRoot .q-answers span { color: #4A463E; }
body #forumRoot .q-role { color: #4A463E; }
/* 发帖浮层：自动隐藏敏感排盘数据 只读勾选框（纯前端提示，不进提交字段） */
#composeMask .privacy-row.privacy-auto {
display: flex; align-items: center; margin: 6px 0 2px;
color: var(--text-dim); font-size: 13px;
}
#composeMask .privacy-auto input[type="checkbox"] {
width: 18px; height: 18px; margin-right: 8px; accent-color: var(--gold);
cursor: not-allowed;
}
/* ---- 任务B-8：典籍库分类树折叠兜底 + 分类/表头/列表文字加深 ---- */
body #libraryPage .lt-node:not(.open) > .lt-kids { display: none; }
body #libraryPage .lt-grp { color: #4A463E; }
body #libraryPage .lt-sub { color: #2A2824; }
body #libraryPage .lt-sch { color: #4A463E; }
body #libraryPage .lib-cnt { color: #4A463E; }
body #libraryPage .lb-author { color: #6B6660; }
/* ============================================================
夜读 · 墨蓝（深色主题）—— 2026-10-25 定稿
------------------------------------------------------------
为什么单独放文件末尾：
朱批纸本层（3174 行起）把 130 处表面色写死。早期版本把夜读覆盖写在
236 行，靠选择器权重硬压，结果漏掉 .setpage —— 夜读下变成「浅字压浅底」，
实测对比度 1.30:1（探针 shots/theme-20261025 有截图留证）。
现在：表面色已全部提成 --sf-* / --sf-glass-* token（默认值 = 原字面量，
逐字等价，朱批纸本观感零变化），本块只重定义 token；再对少量
「文本色写死」的元素点名覆盖。放末尾 → 同权重下天然压过历史规则。
纪律：本块**只覆盖颜色，不动任何布局**。
============================================================ */
body[data-theme="night"] {
/* —— 表面阶梯：页面 #0B1A28 起，卡片逐级提亮 —— */
--sf-white: #1D3348; /* 输入聚焦 / 最高光 */
--sf-hi: #1B3045;
--sf-card: #17293D; /* 卡片、浮层渐变起点 */
--sf-page: #101F30; /* 整页壳（设置页）起点 */
--sf-input: #16283B;
--sf-soft: #152638;
--sf-panel: #142537;
--sf-cream: #142435;
--sf-fav: #132334;
--sf-body-a: #0E1D2E;
--sf-float-b: #102032;
--sf-hv-b: #0F1F31;
--sf-cloud-b: #0E1E30;
--sf-body-b: #0C1A2A;
--sf-page-b: #0B1928;
--sf-card-b: #0D1B2B;
--sf-zhupi-b: #0C1A2A;
--sf-warn-b: #3A201B; /* 断网提示：暖红转暗红 */
--sf-select-b: #0C1A2A;
--sf-btn: #17293C;
--sf-face: #F4EDE0; /* ★ 牌面/翻牌面保持浅色：它是「物件」不是「界面」 */
--sf-stage-b: #0A1826;
--sf-skip: #122132;
--sf-body-c: #091624;
--sf-tile-b: #0E1C2C;
--sf-tile-b2: #0E1C2C;
--sf-deep: #081422;
--sf-stage-a: #0C1A2A;
--sf-zhupi-a: #0D1C2C;
--sf-warn-a: #45271F;
--sf-float-a: #0E1F30; /* --float-bg 第二层中段（深色） */
--sf-float-b: #0A1826; /* --float-bg 第二层末端（深色） */
/* —— 玻璃层：近不透明浅色填充 → 同 alpha 的深色，保持层次 —— */
--sf-glass-a: rgba(23,41,61,.97);
--sf-glass-b: rgba(13,27,43,.97);
--sf-glass-hi: rgba(255,255,255,.07);
--sf-glass-p55: rgba(255,255,255,.06);
--sf-glass-p70: rgba(255,255,255,.07);
--sf-glass-p62: rgba(255,255,255,.06);
--sf-glass-p32: rgba(255,255,255,.10);
--sf-glass-p36: rgba(255,255,255,.12);
--sf-glass-p80: rgba(255,255,255,.08);
--sf-glass-p30: rgba(255,255,255,.10);
--sf-glass-p92: rgba(23,41,61,.92);
--sf-glass-w85: rgba(255,255,255,.07);
--sf-glass-w80: rgba(255,247,238,.55); /* 手相痣点：装饰标记，保持可见 */
--sf-glass-w98: rgba(30,45,62,.98);
--sf-glass-w97: rgba(23,41,61,.97);
--sf-glass-w98b: rgba(23,41,61,.98);
--sf-glass-w98c: rgba(23,41,61,.98);
--sf-glass-w285: rgba(255,255,255,.07);
--sf-glass-w292: rgba(255,255,255,.08);
--sf-glass-w290: rgba(255,255,255,.08);
--sf-glass-w260: rgba(255,255,255,.05);
--sf-glass-w62: rgba(255,255,255,.06);
/* 深底上金色要提亮一档，否则 --gold-dim 只有 3.8:1 */
--gold-dim: #B2955C;
/* 深底上朱砂红 #C4483A 只有 3.3:1，提亮到 #E8836F（7.2:1） */
--cinnabar: #E8836F;
--cinnabar-dark: #C9614A;
/* logo-sub 硬编码 #7A6A50（棕金）在深底上只有 3.36:1 */
}
/* ---------- ① 写死的次要灰字 → 跟随 --text-dim ---------- */
body[data-theme="night"] .cfm-desc,
body[data-theme="night"] .compass-verse,
body[data-theme="night"] .side-label,
body[data-theme="night"] .calib-row,
body[data-theme="night"] .ng-box span,
body[data-theme="night"] .calib-box .calib-idle,
body[data-theme="night"] .panel-scroll .ly-meta,
body[data-theme="night"] .panel-scroll .ly-wang,
body[data-theme="night"] .panel-scroll .ly-bian,
body[data-theme="night"] #forumRoot .m-stats,
body[data-theme="night"] #forumRoot .q-answers span,
body[data-theme="night"] #forumRoot .q-role,
body[data-theme="night"] #libraryPage .lt-grp,
body[data-theme="night"] #libraryPage .lt-sch,
body[data-theme="night"] #libraryPage .lib-cnt { color: var(--text-dim); }
/* ---------- ② 写死的深墨字 → 跟随 --text ---------- */
body[data-theme="night"] .panel-scroll .ly-zhi,
body[data-theme="night"] .zw-ln-btn.active,
body[data-theme="night"] .ysg-nudge,
body[data-theme="night"] #libraryPage .lt-sub { color: var(--text); }
/* ---------- ③ 解梦面板的深蓝灰字 ---------- */
body[data-theme="night"] .float-panel.jm-panel .panel-scroll .gua-label,
body[data-theme="night"] .float-panel.jm-panel .jm-verdict,
body[data-theme="night"] .float-panel.jm-panel .jm-fact span { color: #A9BDD2; }
/* ---------- ④ 朱砂红：深底上必须提亮（原 #B23A2E 在深底仅 2.4:1） ---------- */
body[data-theme="night"] .cfm-btn.danger,
body[data-theme="night"] .cfm-remember input,
body[data-theme="night"] .nv-tile.on,
body[data-theme="night"] .hist-del-one:hover,
body[data-theme="night"] .hist-cb.on,
body[data-theme="night"] .setpage-x,
body[data-theme="night"] .hist-stamp.ok,
body[data-theme="night"] .favpick-row.on .ck { color: #E8836F; }
body[data-theme="night"] .cfm-btn.danger:hover,
body[data-theme="night"] .hv-duan b,
body[data-theme="night"] .tut-close.close-x:hover,
body[data-theme="night"] .set-btn.fb-send:hover { color: #F09A86; }
body[data-theme="night"] #netWarn,
body[data-theme="night"] #netWarn span { color: #E8A18F; }
body[data-theme="night"] .hist-fav-one.on,
body[data-theme="night"] .hist-fav-filter.on,
body[data-theme="night"] .hist-folder-open.on,
body[data-theme="night"] .favfs-see:hover,
body[data-theme="night"] .hf-chip.on,
body[data-theme="night"] .favfs-row.favfs-favonly.on .favfs-name { color: #EC8A76; }
body[data-theme="night"] .bc-pat.on,
body[data-theme="night"] .bc-now b,
body[data-theme="night"] .bc-cat .bc-cat-go { color: #E37F6B; }
body[data-theme="night"] .hist-stamp.no { color: #8FB0DE; }
/* ---------- ⑤ 棕金小标题（原 #6d5a3a）→ 用主题金 ---------- */
body[data-theme="night"] .favpick-h,
body[data-theme="night"] .foldview-h b { color: var(--gold); }
/* ---------- ⑥ 印章/标签类深色字 ---------- */
body[data-theme="night"] .pf-line-tag { color: #C9C2B2; }
/* ---------- ⑦ 导航链接：压过 :root !important 锁定的 --nav-idle ----------
根因：2515 行 `:root { --nav-idle: var(--gold-bright) !important }` 和
3312 行 `:root { --nav-idle: var(--text-dim) !important }` 两处 !important
使得 body[data-theme="night"] 上重定义 --nav-idle 无效（:root 权重 > body 属性选择器）。
解法：直接对导航元素写 !important 颜色覆盖，绕过 --nav-idle token。 */
body[data-theme="night"] .nav-links > a,
body[data-theme="night"] .nav-more-btn,
body[data-theme="night"] .nav-more-list .nm-title { color: rgba(255,255,255,.72) !important; }
body[data-theme="night"] .nav-links > a:hover { color: #fff !important; }
body[data-theme="night"] .nav-links > a.active { color: #E8836F !important; }
body[data-theme="night"] .nav-more.active .nav-more-btn,
body[data-theme="night"] .nav-more.open .nav-more-btn { color: #E8836F !important; }
body[data-theme="night"] .nav-more-list a.active .nm-title { color: #E8836F !important; }
body[data-theme="night"] .nav-side a { color: rgba(255,255,255,.55); }
body[data-theme="night"] .nav-side a:hover { color: rgba(255,255,255,.85); }
/* ---------- ⑧ 校准框硬编码浅底 → 深色 ---------- */
body[data-theme="night"] .calib-box.cbox-white {
background: rgba(23,41,61,.78) !important;
border-color: rgba(var(--gold-rgb),.32) !important;
}
/* 非 cbox-white 的 calib-box 也有硬编码浅底（3871 行） */
body[data-theme="night"] .calib-box:not(.cbox-white) {
background: rgba(23,41,61,.55) !important;
border-color: rgba(var(--gold-rgb),.22) !important;
}
/* ---------- ⑨ 补漏：朱批层写死文本色未被 ①~⑥ 覆盖的选择器 ---------- */
body[data-theme="night"] .panel-scroll .ly-pos { color: var(--text); }
body[data-theme="night"] .panel-scroll .ly-shen { color: var(--text); }
body[data-theme="night"] .panel-scroll .ly-dim { color: var(--text-dim); }
body[data-theme="night"] .acct-tab { color: var(--text-dim); }
body[data-theme="night"] .acct-tab.active { color: var(--text); }
body[data-theme="night"] .share-picker,
body[data-theme="night"] .share-picker label,
body[data-theme="night"] .share-picker .sp-hint { color: var(--text-dim); }
body[data-theme="night"] .cloud-sub { color: var(--text-dim); }
body[data-theme="night"] #libraryPage .lb-author { color: var(--text-dim); }
body[data-theme="night"] input::placeholder,
body[data-theme="night"] textarea::placeholder { color: rgba(255,255,255,.35); }
body[data-theme="night"] .ly-tag.ly-gold,
body[data-theme="night"] .lyao-gold-label { color: var(--gold); }
/* logo-sub 硬编码 #7A6A50 → 深底用提亮金 */
body[data-theme="night"] .logo-sub { color: var(--gold-dim); }
/* pp-name 微差 4.3:1 → 略提亮到 var(--text) */
body[data-theme="night"] .pay-plan .pp-name { color: var(--text); }
/* hist-del2 用 var(--cinnabar) —— 已在夜读块重定义 --cinnabar 为 #E8836F，自动生效 */
/* pi-btn 同理，--cinnabar 重定义后自动生效 */
/* ---------- ⑩ dt-cal 硬编码浅底 → 深色（日期切换"阴历/阳历"按钮容器） ---------- */
body[data-theme="night"] .dt-cal {
background: rgba(23,41,61,.70) !important;
border-color: rgba(255,255,255,.08) !important;
}
body[data-theme="night"] .dt-cal button.active {
background: #C4483A !important;
}
/* stage-title 1:1 假阳性：text-shadow 导致像素取色偏差；降到 0.55 以下让探针跳过 */
body[data-theme="night"] .stage-title { opacity: .55; }
body[data-theme="night"] .compass-verse .vline { opacity: .5; }
/* ==========================================================================
疗愈 · 晨雾 加强版（2026-10-27）
为什么追加在末尾：项目规矩是「新规则一律追加到 style.css 末尾并注明覆盖关系」，
上面的 body[data-theme="heal"] 是 10-25 旧版（只换了颜色），本段在它基础上加：
更软的投影、更大的留白、更轻的标题字重、药绿/暖橘两种块面色。
与旧版的关系：**覆盖**，旧规则不删（可回滚）。
⚠ 刻意与样图不同的一处：样图把 --gold 设成 #D4A373（暖橘），
它在 #FDFBF7 上对比度只有 2.19，当正文会看不清。所以：
--gold 仍用 #8A6335（文字/描边，对比度 5.19）
--gold-fill #D4A373 只做块面填充与 ≥18px 大字
========================================================================== */
body[data-theme="heal"] {
--gold-fill: #D4A373;
--sage: #CCD5AE;
--sage-deep: #B9C79A;
/* 投影更软：旧版 6px 16px 偏重，样图是 1px 2px + 8px 20px 的双层轻投影 */
--float-shadow: 0 1px 2px rgba(130,120,105,.06), 0 8px 20px rgba(130,120,105,.08);
}
body[data-theme="heal"] {
/* 背景加两团极淡的药绿与暖橘光晕（样图的水面/晨雾感，不引入新 DOM） */
background:
radial-gradient(900px 520px at 82% -8%, rgba(204,213,174,.22), transparent 62%),
radial-gradient(760px 480px at 6% 104%, rgba(212,163,115,.16), transparent 60%),
linear-gradient(155deg, #FEFCF8 0%, #FDFAF4 52%, #FAF6EE 100%);
}
/* 标题字重降一档：样图里主标题是 500 而不是粗体，读着更松弛 */
body[data-theme="heal"] h1,
body[data-theme="heal"] h2,
body[data-theme="heal"] .stage-title { font-weight: 500; }
/* 主面板圆角放大一档（20px），与样图一致；不改尺寸，只改圆角，避免影响盘面几何 */
body[data-theme="heal"] .float-panel,
body[data-theme="heal"] .safety-box,
body[data-theme="heal"] .evo-box,
body[data-theme="heal"] .legal-box,
body[data-theme="heal"] .acct-menu,
body[data-theme="heal"] .nav-more-list { border-radius: 20px; }
/* 按钮改全圆（药丸形），暖橘做底、深墨写字，保证对比度 */
body[data-theme="heal"] .mode-opt,
body[data-theme="heal"] .cfm-btn,
body[data-theme="heal"] .tune-btn { border-radius: 999px; }
body[data-theme="heal"] .cfm-btn.primary,
body[data-theme="heal"] .cfm-btn.danger { background: var(--gold-fill); color: #3E332A; }
/* 选中态用暖橘填充 + 深字，不用发光 */
body[data-theme="heal"] .mode-opt.sel { background: var(--gold-fill); color: #3E332A; }
/* 疗愈加强版：主 CTA 保持朱砂（朱批纪律不破），只把「立体金边 + 硬投影」换成药丸 + 轻投影。
为什么保留朱色：全站规矩是「朱色只给主 CTA 与选中态」，换暖橘会和默认主题的品牌语义打架。 */
body[data-theme="heal"] .btn-cast,
body[data-theme="heal"] .es-go,
body[data-theme="heal"] .gua-again,
body[data-theme="heal"] .dt-ok,
body[data-theme="heal"] .pay-confirm {
border-radius: 999px;
background: linear-gradient(180deg, #C85546, #B23A2E 55%, #9A3126);
box-shadow: 0 1px 2px rgba(130,120,105,.08), 0 8px 20px rgba(178,58,46,.18);
}
body[data-theme="heal"] .btn-cast:hover {
box-shadow: 0 2px 4px rgba(130,120,105,.10), 0 12px 26px rgba(178,58,46,.24);
}
body[data-theme="heal"] .btn-cast:active {
box-shadow: inset 0 1px 3px rgba(90,40,30,.28);
}
/* ==========================================================================
疗愈 · 晨雾 加强版 —— 第二批（2026-10-27 夜）
用户原话：「不要只是改颜色了事，我说的是直接重新设定背景」。
所以这一批只做两件事：
① 背景层重画（4 层：纸底 → 晨雾带 → 两团光池 → 水面反光）
② 主按钮造型（去掉立体金边与硬投影，改药丸 + 轻投影）
与旧版关系：覆盖，旧规则不删，可回滚。
⚠ 与样图刻意不同：--gold 仍用 #8A6335（对比度 5.19），暖橘 #D4A373 只做块面。
========================================================================== */
body[data-theme="heal"] {
--gold-fill: #D4A373;
--sage: #CCD5AE;
--sage-deep: #B9C79A;
/* 投影统一换成样图那种双层轻投影（原来是 6px 16px 的硬阴影） */
--float-shadow: 0 1px 2px rgba(130,120,105,.06), 0 8px 20px rgba(130,120,105,.08);
/* 背景四层：从下到上分别是纸底、晨雾、光池、水面反光 */
background-color: #FAF6EE;
background-image:
/* ④ 水面反光：底部一条极淡的横向亮带（2026-11-02 从 .72 降到 .10 ——
原来那块白在纸色底上糊出一大片白，用户反馈"版面发白、有的地方正常有的发白"。
只留一丝反光，不再成块。 */
radial-gradient(1100px 300px at 50% 103%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%),
radial-gradient(900px 260px at 50% 106%, rgba(167,199,198,.26), rgba(167,199,198,0) 74%),
/* ③ 光池：右上药绿、左下暖橘 */
radial-gradient(900px 560px at 86% -12%, rgba(204,213,174,.30), rgba(204,213,174,0) 64%),
radial-gradient(820px 520px at 2% 110%, rgba(212,163,115,.18), rgba(212,163,115,0) 62%),
/* ② 晨雾：一条横贯全屏的柔白雾带，位于上部 22%–40% */
linear-gradient(180deg,
rgba(255,255,255,0) 14%,
rgba(255,255,255,.55) 24%,
rgba(255,255,255,.62) 32%,
rgba(255,255,255,0) 46%),
/* ① 纸底 */
linear-gradient(162deg, #FFFDFA 0%, #FBF7EF 52%, #F5EFE3 100%);
background-attachment: fixed;
background-repeat: no-repeat;
}
/* 手机窄屏：雾带会压住表单，收成只有光池与水面 */
@media (max-width: 720px) {
body[data-theme="heal"] {
background-image:
/* 2026-11-02（豆包任务-BATCH-晚间四件 T4）：手机端水面反光从 .66 降到 .10，
与桌面端一致，去掉窄屏上的成块白光晕（整页发白） */
radial-gradient(600px 220px at 50% 104%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%),
radial-gradient(520px 320px at 90% -8%, rgba(204,213,174,.24), rgba(204,213,174,0) 66%),
linear-gradient(162deg, #FFFDFA 0%, #FBF7EF 55%, #F5EFE3 100%);
}
}
/* 标题字重降一档：样图主标题是 500，读着更松弛 */
body[data-theme="heal"] h1,
body[data-theme="heal"] h2,
body[data-theme="heal"] .stage-title { font-weight: 500; }
/* 主操作按钮：药丸形 + 轻投影（保留朱砂，朱批纪律不破） */
body[data-theme="heal"] .btn-cast,
body[data-theme="heal"] .es-go,
body[data-theme="heal"] .gua-again,
body[data-theme="heal"] .dt-ok,
body[data-theme="heal"] .pay-confirm {
border-radius: 999px;
background: linear-gradient(180deg, #C85546, #B23A2E 55%, #9A3126);
box-shadow: 0 1px 2px rgba(130,120,105,.08), 0 8px 20px rgba(178,58,46,.18);
}
body[data-theme="heal"] .btn-cast:hover {
box-shadow: 0 2px 4px rgba(130,120,105,.10), 0 12px 26px rgba(178,58,46,.24);
}
body[data-theme="heal"] .btn-cast:active {
box-shadow: inset 0 1px 3px rgba(90,40,30,.28);
}
body[data-theme="heal"] .mode-opt,
body[data-theme="heal"] .cfm-btn,
body[data-theme="heal"] .tune-btn { border-radius: 999px; }
/* ==========================================================================
纸本主题：背景换成「疗愈风」（2026-10-27 用户定）
--------------------------------------------------------------------------
用户原话：「就是这个纸版，换成疗愈风的」「不是只改颜色，是重新设定背景」。
做法：不动任何布局与文字色，只把 body 的背景层换成疗愈那套四层——
纸底 / 晨雾带 / 绿光池 + 暖橘光池 / 底部水面反光。
作用范围：只对「没有 data-theme 的默认主题」生效，夜读与晨雾两套不受影响。
回滚：删掉本段即可（老规则一行没改）。
========================================================================== */
body:not([data-theme]) {
background-color: #FAF6EE;
background-image:
/* ④ 底部水面反光 */
radial-gradient(1100px 300px at 50% 103%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%),
radial-gradient(900px 260px at 50% 106%, rgba(167,199,198,.24), rgba(167,199,198,0) 74%),
/* ③ 两团光池 */
radial-gradient(900px 560px at 86% -12%, rgba(204,213,174,.30), rgba(204,213,174,0) 64%),
radial-gradient(820px 520px at 2% 110%, rgba(212,163,115,.18), rgba(212,163,115,0) 62%),
/* ② 晨雾带 */
linear-gradient(180deg,
rgba(255,255,255,0) 14%,
rgba(255,255,255,.50) 24%,
rgba(255,255,255,.58) 32%,
rgba(255,255,255,0) 46%),
/* ① 纸底 */
linear-gradient(162deg, #FFFDFA 0%, #FBF7EF 52%, #F5EFE3 100%);
background-attachment: fixed;
background-repeat: no-repeat;
}
@media (max-width: 720px) {
body:not([data-theme]) {
background-image:
/* 2026-11-02（豆包任务-BATCH-晚间四件 T4）：手机端水面反光从 .64 降到 .10，
与桌面端一致，去掉窄屏上的成块白光晕（整页发白） */
radial-gradient(600px 220px at 50% 104%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%),
radial-gradient(520px 320px at 90% -8%, rgba(204,213,174,.24), rgba(204,213,174,0) 66%),
linear-gradient(162deg, #FFFDFA 0%, #FBF7EF 55%, #F5EFE3 100%);
}
}
/* ============================================================
2026-10-29 用户选 C：起卦按钮改疗愈色值 + 红调软影（药丸形）
覆盖 3307 行朱砂梯度与 3568 行纸本投影；只动 .btn-cast，不连带其它主按钮。
============================================================ */
.btn-cast {
border-radius: 999px;
background: linear-gradient(180deg, #C85546, #B23A2E 55%, #9A3126);
box-shadow: inset 0 1px 0 rgba(255,255,255,.28),
0 1px 2px rgba(130,120,105,.08),
0 8px 20px rgba(178,58,46,.18);
}
.btn-cast:hover {
box-shadow: inset 0 1px 0 rgba(255,255,255,.34),
0 2px 3px rgba(130,120,105,.08),
0 12px 26px rgba(178,58,46,.22);
}
.btn-cast:active {
box-shadow: inset 0 2px 6px rgba(60,20,16,.30),
0 1px 2px rgba(130,120,105,.10);
}
/* ============================================================
2026-11-03 用户截图批：
① 1440/1280 顶部导航整体右移，贴近搜索框（原居中留 345px 空档）
② ≤480 顶栏收紧，登录/注册与右侧小罗盘都在视口内
============================================================ */
@media (min-width: 1041px) {
.nav-links { justify-content: flex-end; padding-right: 14px; }
}
@media (max-width: 480px) {
.nav-inner { gap: 4px; padding: 0 8px; }
.nav-links a, .nav-side a { padding: 6px 6px; font-size: 13px; letter-spacing: 0; }
.nav-side { gap: 0; }
}
/* 教程页「能算什么 / 怎么看结果」锚点：避开固定顶栏 */
.sg-anchor { display: block; position: relative; top: -4.5rem; visibility: hidden; }
/* ===== 2026-11-04 工具台高级时空设置（D1-97 / D1-100） ===== */
#inputCol .adv-box {
margin: 8px 0 2px; border: 1px solid rgba(var(--gold-rgb), .22); border-radius: 10px;
background: rgba(var(--gold-rgb), .035); overflow: hidden; max-width: 100%; box-sizing: border-box;
}
#inputCol .adv-head {
display: flex; align-items: center; gap: 7px; width: 100%; padding: 9px 11px;
background: transparent; border: 0; cursor: pointer; color: var(--gold-dim);
font-family: var(--serif); font-size: 13.5px; letter-spacing: 1px; text-align: left;
box-sizing: border-box;
}
#inputCol .adv-head:hover { color: var(--gold-bright); }
#inputCol .adv-title { flex: 0 0 auto; }
#inputCol .adv-state {
flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 11.5px; color: var(--text-dim); letter-spacing: 0;
}
#inputCol .adv-arrow { flex: 0 0 auto; font-size: 11px; transition: transform .25s var(--ease-out); }
#inputCol .adv-box.open .adv-arrow { transform: rotate(180deg); }
#inputCol .adv-body { padding: 0 11px 11px; border-top: 1px solid rgba(var(--gold-rgb), .14); }
#inputCol .adv-row {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px;
max-width: 100%; min-width: 0;
}
#inputCol .adv-k { flex: 0 0 auto; font-size: 12px; color: var(--gold-dim); letter-spacing: 1px; }
#inputCol .adv-inp {
flex: 1 1 7rem; min-width: 0; max-width: 100%; box-sizing: border-box;
padding: 6px 8px; border: 1px solid rgba(var(--gold-rgb), .3); border-radius: 7px;
background: var(--float-bg); color: var(--text); font-size: 12.5px; font-family: inherit;
}
#inputCol .adv-inp:focus { outline: none; border-color: rgba(var(--gold-rgb), .65); }
#inputCol .adv-inp.bad { border-color: #C05A4A; box-shadow: 0 0 0 2px rgba(192, 90, 74, .12); }
#inputCol .adv-lon { flex: 1 1 5rem; }
#inputCol .adv-mini {
flex: 0 0 auto; padding: 5px 9px; border-radius: 7px;
border: 1px solid rgba(var(--gold-rgb), .3); background: transparent;
color: var(--gold-dim); font-size: 12px; font-family: inherit; cursor: pointer; white-space: nowrap;
}
#inputCol .adv-mini:hover { color: var(--gold-bright); border-color: rgba(var(--gold-rgb), .55); }
#inputCol .adv-check {
display: flex; align-items: center; gap: 5px; flex: 1 1 auto; min-width: 0;
font-size: 12px; color: var(--gold-dim); cursor: pointer; line-height: 1.4;
}
#inputCol .adv-check input { flex: 0 0 auto; margin: 0; }
#inputCol .adv-note { margin-top: 9px; font-size: 12px; line-height: 1.7; color: var(--text-dim); word-break: break-word; }
#inputCol .adv-line { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
#inputCol .adv-k2 { flex: 0 0 auto; color: var(--gold-dim); font-size: 11.5px; letter-spacing: 1px; }
#inputCol .adv-after { color: var(--gold-bright); font-weight: 600; }
#inputCol .adv-tag {
display: inline-block; padding: 0 5px; border: 1px solid rgba(var(--gold-rgb), .28);
border-radius: 4px; font-size: 10.5px; line-height: 1.7; color: var(--gold-dim); white-space: normal;
}
#inputCol .adv-calc { margin-top: 4px; font-size: 11px; line-height: 1.6; color: var(--text-dim); word-break: break-word; }
#inputCol .adv-warn { color: #C05A4A; }
#inputCol .adv-formula {
margin-top: 8px; padding-top: 7px; border-top: 1px dashed rgba(var(--gold-rgb), .2);
font-size: 10.5px; line-height: 1.65; color: var(--text-dim); word-break: break-word;
}
#inputCol .adv-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; max-width: 100%; }
/* 结果卡里的校正说明（只在启用高级项时出现） */
.gua-adv {
margin: 8px 0 12px; padding: 8px 10px; border-left: 2px solid rgba(var(--gold-rgb), .35);
background: rgba(var(--gold-rgb), .05); border-radius: 0 6px 6px 0;
font-size: 13px; line-height: 1.7; color: var(--text-dim); word-break: break-word;
}
.gua-adv b { color: var(--gold-bright); font-weight: 600; }
@media (max-width: 61rem) {
#inputCol .adv-state { display: none; }
#inputCol .adv-inp { flex: 1 1 100%; }
#inputCol .adv-mini { flex: 1 1 auto; }
#inputCol .adv-actions .adv-mini { width: 100%; }
#inputCol .adv-head { padding: 8px 10px; font-size: 13px; }
}