/* ============================================================
心元界面活化层 v1（2026-09-14）
挂在 demo-ui.css 之后使用：
要解决的问题（王总原话）：
· 页面"死气沉沉、没有生命力、像表格不像画"
· "主标题、副标题、内容标题要按照顺序加粗加大"
· "重点内容要用变字体颜色＋加粗区隔"
· "数据都要活，每个数据都要精准溯源"
三条铁律：
1. 只用 demo-ui.css 里已有的颜色/字号变量，**不新造色值**
（新色 = 全站又要漂移一次，这正是"九个字号各自为政"的老毛病）
2. 层级靠 **尺寸 + 字重**，不靠铺金（金用多了=老气）
3. 动效一律 `prefers-reduced-motion` 让路
============================================================ */
:root {
/* ── 标题层级：一眼看出谁大谁小 ────────────────────── */
--v-h1: 28px; --v-h1-w: 800; /* 主标题（页面名） */
--v-h2: 20px; --v-h2-w: 700; /* 副标题（分区） */
--v-h3: 17px; --v-h3-w: 700; /* 内容标题（卡片） */
--v-body: 16px; --v-note: 13px; /* 正文 / 说明 */
/* ── 呼吸感：卡片之间必须留得出气 ──────────────────── */
--v-gap: 14px;
--v-pad: 16px;
--v-radius: 14px;
/* ── 活的节奏（动效时长统一，避免各页快慢不一）────── */
--v-t-fast: .18s;
--v-t: .32s;
}
/* ══ 一、标题层级：依次变小变轻，形成秩序 ══════════════ */
/* 主标题：页面叫什么。小字眉 + 大标题，是最省的"画感"来源 */
.xyv-h1 {
font-size: var(--v-h1);
font-weight: var(--v-h1-w);
color: var(--ink);
letter-spacing: -.4px;
line-height: 1.24;
margin: 0 0 2px;
}
/* 主标题下面那行：三五个词点题，用金色（但比主标题小一大截，不抢戏） */
.xyv-h1-sub {
font-size: 16px;
font-weight: 700;
color: var(--gold-deep);
letter-spacing: .6px;
line-height: 1.5;
margin: 4px 0 6px;
}
.xyv-h1-note { /* 主标题下面那行小字：说清这页是干什么的 */
font-size: var(--v-note);
color: var(--ink-2);
font-weight: 400;
line-height: 1.6;
margin: 0 0 var(--v-gap);
}
/* 副标题：分区名字。左边一道金线，站得住 */
.xyv-h2 {
font-size: var(--v-h2);
font-weight: var(--v-h2-w);
color: var(--ink);
line-height: 1.35;
margin: var(--v-gap) 0 10px;
padding-left: 11px;
border-left: 3px solid var(--gold);
}
/* 内容标题：卡片标题。比正文重一档就够，不用再加尺寸 */
.xyv-h3 {
font-size: var(--v-h3);
font-weight: var(--v-h3-w);
color: var(--ink);
line-height: 1.4;
margin: 0 0 6px;
}
/* ══ 二、重点区隔：颜色只用来分"轻重"，不用来装饰 ══════ */
/* 金：钱、价值、值得看的数 */
.xyv-key { color: var(--gold-deep); font-weight: 800; }
/* 绿：通过、增长、好事 */
.xyv-good { color: var(--bud); font-weight: 800; }
/* 红：异常、风险、要拦 */
.xyv-bad { color: var(--red); font-weight: 800; }
/* 黄：提醒（注意：黄=提醒，不是红=错误） */
.xyv-warn { color: var(--yellow); font-weight: 800; }
/* 重点行：整行加粗 + 左边一道色条，用于"这条最重要" */
.xyv-em {
font-weight: 700;
color: var(--ink);
border-left: 3px solid var(--gold);
padding-left: 10px;
}
.xyv-em.is-bad { border-left-color: var(--red); }
.xyv-em.is-good { border-left-color: var(--bud); }
/* 标签：短词定性（"已结""营业中""待核实"），一律带底色 */
.xyv-pill {
display: inline-block;
font-size: 12px;
font-weight: 700;
padding: 3px 9px;
border-radius: 999px;
background: var(--gold-soft, #f7efdc);
color: var(--gold-deep);
border: 1px solid var(--gold-line);
line-height: 1.5;
vertical-align: middle;
}
.xyv-pill.is-good { background: var(--bud-soft); color: var(--bud); border-color: rgba(29,122,79,.28); }
.xyv-pill.is-bad { background: var(--red-soft); color: var(--red); border-color: rgba(192,57,43,.28); }
.xyv-pill.is-warn { background: var(--yellow-soft); color: var(--yellow); border-color: rgba(138,109,36,.3); }
/* ══ 三、数据要"活"：数字有分量，单位退后，来源点得动 ═══ */
/* 活数字：大、重、带颜色；单位小字退后，不抢戏 */
.xyv-num {
display: inline-flex;
align-items: baseline;
gap: 3px;
font-weight: 800;
color: var(--ink);
font-variant-numeric: tabular-nums; /* 数字等宽：跳动时不左右抖 */
letter-spacing: -.5px;
line-height: 1.1;
}
.xyv-num .u { /* 单位 */
font-size: .42em;
font-weight: 600;
color: var(--ink-2);
letter-spacing: 0;
}
.xyv-num .c { /* 货币/前缀 */
font-size: .5em;
font-weight: 700;
color: var(--gold);
letter-spacing: 0;
}
.xyv-num.is-key { color: var(--gold-deep); }
.xyv-num.is-bad { color: var(--red); }
.xyv-num.is-good { color: var(--bud); }
.xyv-num.is-big { font-size: var(--fs-num); } /* 一屏一个主角时用 */
.xyv-num.is-mid { font-size: 26px; }
/* 溯源点：每个数都能点开看"这个数从哪来的"。
一个空心小金点，点开是来源说明 —— 不占版面，但一定看得见。 */
.xyv-src {
display: inline-block;
margin-left: 5px;
width: 15px; height: 15px;
line-height: 15px;
text-align: center;
font-size: 10px;
font-weight: 700;
color: var(--gold-deep);
border: 1px solid var(--gold-line);
border-radius: 50%;
background: transparent;
cursor: pointer;
vertical-align: middle;
transition: background var(--v-t-fast), transform var(--v-t-fast);
-webkit-tap-highlight-color: transparent;
}
.xyv-src:hover, .xyv-src:active { background: var(--gold-soft, #f7efdc); transform: scale(1.12); }
/* 来源说明：默认收起来，点开才出 —— 版面干净，但一查就有 */
.xyv-src-box {
display: none;
margin: 8px 0 0;
padding: 10px 12px;
background: var(--paper-2);
border-radius: 10px;
font-size: 12.5px;
line-height: 1.65;
color: var(--ink-2);
}
.xyv-src-box.on { display: block; }
.xyv-src-box b { color: var(--ink); font-weight: 700; }
/* ══ 四、活的气息：一个会呼吸的点，代表"这里在跑" ══════ */
.xyv-live {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 700; color: var(--bud);
}
.xyv-live::before {
content: "";
width: 7px; height: 7px; border-radius: 50%;
background: var(--bud);
box-shadow: 0 0 0 0 rgba(29,122,79,.55);
animation: xyv-breath 2.1s ease-out infinite;
}
@keyframes xyv-breath {
0% { box-shadow: 0 0 0 0 rgba(29,122,79,.5); }
70% { box-shadow: 0 0 0 9px rgba(29,122,79,0); }
100% { box-shadow: 0 0 0 0 rgba(29,122,79,0); }
}
/* 数字入场：轻轻往上一托就位，不弹跳、不炫技 */
.xyv-rise { animation: xyv-rise var(--v-t) both; }
@keyframes xyv-rise {
from { opacity: 0; transform: translateY(7px); }
to { opacity: 1; transform: none; }
}
/* 同屏多个卡片依次入场，产生"铺开"的节奏 */
.xyv-rise.d1 { animation-delay: .04s; }
.xyv-rise.d2 { animation-delay: .08s; }
.xyv-rise.d3 { animation-delay: .12s; }
.xyv-rise.d4 { animation-delay: .16s; }
/* ══ 五、卡片：留白、细金线、圆角（呼吸感靠间距不靠装饰）══ */
.xyv-card {
background: var(--card);
border: 1px solid var(--gold-line);
border-radius: var(--v-radius);
padding: var(--v-pad);
margin-bottom: var(--v-gap);
}
.xyv-card.is-flat { background: transparent; border-color: var(--line); }
/* 一行一格：左标题右数值，数值用活数字 */
.xyv-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 9px 0;
border-bottom: 1px solid var(--line);
}
.xyv-row:last-child { border-bottom: 0; padding-bottom: 0; }
.xyv-row .t { font-size: var(--v-body); color: var(--ink); }
.xyv-row .t small { display: block; font-size: 12px; color: var(--ink-2); font-weight: 400; margin-top: 3px; }
/* 留痕行：谁什么时候改的。信息要留着（可查），但不该抢视线 */
.xyv-audit {
font-size: 12.5px;
color: var(--ink-3, var(--ink-2));
line-height: 1.55;
margin: 0 0 var(--v-gap);
}
/* 入口按钮：主标题一行就够，说明降成小字垫在下面
（原来把说明塞进括号，17 个字必然折行，按钮被撑成两行高） */
.xyv-entry-sub {
display: block;
font-size: 12px;
font-weight: 400;
color: var(--ink-2);
margin-top: 4px;
letter-spacing: 0;
}
/* ══ 七、排版细节：不许出现"孤字掉行" ══════════════ */
/* 实测踩到：入口按钮上的「（老板拍板沉成的规矩）」被拆成「规矩）」单独一行。
浏览器默认换行是"填满为止"，遇到中文括号就会掉出半截。用 balance 均衡分配。 */
.xyv-balance, .xyw-wrap a, .xyw-wrap .xyv-card > a, .xyv-card p, .xyv-card li {
text-wrap: balance;
}
/* 中文括号、引号不许落在行首（掉字最难看的地方） */
body { line-break: strict; }
/* ══ 七、可点的钮：从灰扑扑变成一看就想按 ════════════ */
/* 加减/上下这些钮原来是默认灰样式，跟"未完成"的观感一样（王总看出来了）。
改成金边小圆钮：有边界、有反馈，但不用填色（填色=抢戏）。 */
.g0-row .wt button, .g0-row .ord button, .g0-row .ck {
min-width: 32px;
height: 32px;
padding: 0 8px;
border-radius: 10px;
border: 1px solid var(--gold-line);
background: var(--card);
color: var(--gold-deep);
font-size: 16px;
font-weight: 800;
line-height: 1;
cursor: pointer;
transition: transform var(--v-t-fast), background var(--v-t-fast), border-color var(--v-t-fast);
-webkit-tap-highlight-color: transparent;
}
.g0-row .wt button:active, .g0-row .ord button:active, .g0-row .ck:active {
transform: scale(.9);
background: var(--paper-2);
}
.g0-row .wt button:disabled, .g0-row .ord button:disabled {
opacity: .3;
border-color: var(--line);
color: var(--ink-2);
}
/* ══ 七、说明收进折叠：版面清爽，想看再点 ══════════════ */
/* 说明文字一多就变成"公文墙"，是页面显呆板的主要来源之一。
一律收进 details：默认一行摘要，点开才铺开。 */
.xyv-help { margin: 0 0 var(--v-gap); }
.xyv-help > summary {
list-style: none;
cursor: pointer;
font-size: var(--v-note);
font-weight: 700;
color: var(--gold-deep);
padding: 7px 12px;
background: var(--paper-2);
border: 1px solid var(--gold-line);
border-radius: 10px;
display: inline-block;
-webkit-tap-highlight-color: transparent;
}
.xyv-help > summary::-webkit-details-marker { display: none; }
.xyv-help > summary::before { content: "▸ "; }
.xyv-help[open] > summary::before { content: "▾ "; }
.xyv-help[open] > summary { margin-bottom: 8px; }
.xyv-help /* 主标题下面那行：三五个词点题，用金色（但比主标题小一大截，不抢戏） */
.xyv-h1-sub {
font-size: 16px;
font-weight: 700;
color: var(--gold-deep);
letter-spacing: .6px;
line-height: 1.5;
margin: 4px 0 6px;
}
.xyv-h1-note { margin: 0; }
/* 底栏留白：底栏是固定的，最后一屏内容不许被它压住（老毛病，反复出现过） */
.xyw-wrap { padding-bottom: 156px; } /* 底栏 + 语音条 合计约 130px，留够才不被压 */
/* ══ 七、让路：用户设了"减少动态效果"就全部静止 ════════ */
@media (prefers-reduced-motion: reduce) {
.xyv-rise, .xyv-live::before { animation: none !important; }
.xyv-src { transition: none; }
}
/* ══ 七、压过页面自带的标题规则 ══════════════════════════
踩到的坑：ops.css 写的是 `.ops-head h1{24px}`、`.ops-card h2{18px}`，
生长报告写的是 `.g-head h1{21px}` —— 都比我的 `.xyv-h2` **更具体**，
所以活化层的字号根本没生效（实测分区还是 18px、报告标题还是 21px）。
必须用**同样具体**的选择器才赢得下来（同权重下后加载的赢）。 */
.ops-head h1 { font-size: var(--v-h1); font-weight: var(--v-h1-w); letter-spacing: -.4px; }
.ops-head .sub { font-size: var(--v-note); }
.ops-card h2, .ops-card .hd h2 { font-size: var(--v-h2); font-weight: var(--v-h2-w); letter-spacing: 0; }
/* 生长报告的大标题保留衬线（品牌：衬线只给大标题），但尺寸字号归活化层统管 */
.g-head h1 { font-size: var(--v-h1); font-weight: var(--v-h1-w); letter-spacing: -.4px; }
/* 不用 .xyw-wrap 的页（如收账会）单独留白 —— 底栏固定，最后一屏不许被压 */
body.xyv-pad { padding-bottom: 156px; }
/* 页内