/* ============================================================ 心元引擎 · 演示系统共享设计系统 v1（2026-09-06 手机优先）用法：各页引入本文件，再写页内专属样式。铁律：正文≥15px / 标注≥13px / 禁用≤11px；金色≤5%只许三处出场（语音键/主角大数字/1px发丝线）；主按钮绿、次级金线描边。 ============================================================ */ :root{ /* 色板（米金纸感 × 墨蓝 × 沉金克制） */ --paper:#f6efe0; /* 米金纸感底 */ --paper-2:#ede3d0; /* 深一档米金：整块卡底 */ --card:#fffdf6; /* 卡片白米 */ --ink:#232c44; /* 墨蓝主字 */ --ink-2:#5c6478; /* 次级 */ --ink-3:#6a7284; /* 弱标注 */ --gold:#b08d3e; /* 标准金（点缀/描边） */ --gold-deep:#6f5317; /* 沉金：手机米金底上的主金（2026-09-10 加深保对比 4.8:1） */ --gold-line:rgba(165,131,47,.28); /* 发丝金线 */ --line:#e7dcc2; /* 分隔线（皮骨收口 2026-09-09 全站统一） */ --bud:#1d7a4f; /* 绿芽绿（在岗/主操作） */ --bud-soft:#e8f3ec; --red:#c0392b; /* 红（现在就要） */ --red-soft:#fdecec; --yellow:#8a6d24; /* 黄（今天内） */ --yellow-soft:#fbf3dd; --gray-soft:#efeadb; /* 灰（已完成） */ /* 字号阶梯（手机基准；桌面同值即可，不另行缩小） */ --fs-caption:13px; /* 标注/时间戳硬底线13 */ --fs-note:14px; /* 次级行 */ --fs-body:16px; /* 正文主行 */ --fs-sub:15px; /* 正文弱/列表副行 */ --fs-card-t:18px; /* 卡标题 */ --fs-sec-t:20px; /* 区块标题 */ /* 【2026-09-14 手机排版修复·王总报「数字超出边框」】原值 clamp(30px,10vw,52px) / clamp(40px,13vw,64px)： 13vw 在 390 视口算出 50.7px，「¥5,238.00」实宽 292px，而卡片内容区仅 302px → 每边只剩 5px，又是居中，看着就是贴框/冲出边框。这里把 vw 系数与上限同步收窄：390 下算出 44.8px → 两边各留约 28px 呼吸。 ⚠ 改这里必须同步改 mobile-frame.css 里 430 画布下的固定值，否则宽视口与手机端会拿到两个不同字号 —— 那正是「数字上蹦下跳」的来源。 */ --fs-num:clamp(28px,9vw,46px); /* 主角大数字（衬线） */ --fs-num-lg:clamp(34px,11.5vw,56px); /* 旗舰大数字 */ /* 间距（4px 网格） */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; /* 圆角 */ --r-card:16px; --r-sm:10px; --r-pill:999px; /* 阴影（全站仅此一种，禁彩色阴影） */ --shadow-1:0 1px 3px rgba(35,44,68,.06), 0 6px 16px rgba(35,44,68,.05); /* 触控 */ --tap:44px; /* 容器 */ --w-phone-safe:20px; /* 手机左右安全边(375)；430 可调 24 */ } /* ---------- 容器：手机全宽单列 → 平板720 → 桌面1120 居中 ---------- */ .xy-wrap{width:100%;max-width:1120px;margin-inline:auto; padding-inline:clamp(var(--w-phone-safe),4vw,32px); padding-bottom:calc(96px + env(safe-area-inset-bottom,0px));} .xy-wrap.narrow{max-width:720px;} /* 轻页(入口/会议/对账) */ /* 高密度页桌面双栏（≥1080 启用：主区+320 右栏） */ .xy-cols{display:block;} @media(min-width:1080px){ .xy-cols{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start;} .xy-cols .xy-main{min-width:0;} } /* ---------- 字号覆盖（旧页既有类，共享升级） ---------- */ /* 标注级 ≤11px → 13px 底线；正文 12-13 → 15-16；副行 14 → 16 */ @media(max-width:639px){ .sec-t{font-size:16px!important;} .sec-t .more{font-size:13px!important;} } /* ---------- 通用组件（新页直接复用） ---------- */ .xy-btn{display:flex;align-items:center;justify-content:center;gap:6px; min-height:var(--tap);padding:0 18px;border-radius:14px;border:none; font-size:var(--fs-body);font-weight:600;cursor:pointer;line-height:1.2;} .xy-btn-primary{background:var(--bud);color:#fff;} .xy-btn-primary:disabled{opacity:.4;} .xy-btn-line{background:transparent;border:1.5px solid var(--gold);color:var(--gold-deep);} /* 语音金键（唯一大面积金色；双底反色用 .on-dark 修饰键心） */ .xy-mic{width:56px;height:56px;border-radius:50%;display:flex;align-items:center; justify-content:center;background:#fff;border:1.5px solid var(--gold); box-shadow:0 0 0 6px rgba(165,131,47,.12);font-size:26px;color:var(--gold-deep);} .xy-mic.on-dark{background:var(--ink);color:#e6c979;border-color:rgba(230,201,121,.7);} /* ── 按压反馈（2026-09-09 生命体宪法V3·反馈像人点头：点按120ms轻反馈，禁"按石头"机械感）── */ .xy-btn,.xy-btn-primary,.xy-btn-line,.xy-mic{transition:transform .12s ease,filter .12s ease,box-shadow .12s ease,opacity .12s ease} .xy-btn:active,.xy-btn-primary:active,.xy-btn-line:active{transform:translateY(1px) scale(.985);filter:brightness(.95)} .xy-mic:active{transform:scale(.93);box-shadow:0 0 0 6px rgba(165,131,47,.22),inset 0 1px 3px rgba(35,44,68,.12)} /* 提醒条三态（红/黄/灰分级） */ .xy-alert{display:flex;align-items:center;gap:10px;min-height:48px; border-radius:12px;padding:9px 13px;font-size:var(--fs-body); line-height:1.45;margin:8px 0;} .xy-alert .go{margin-left:auto;flex:none;font-size:var(--fs-caption);font-weight:600;} .xy-alert.red{background:var(--red-soft);color:#a93226;} .xy-alert.yellow{background:var(--yellow-soft);color:var(--yellow);} .xy-alert.gray{background:var(--gray-soft);color:#7a7f8c;} /* 大数字（衬线）：字族 · 数字特性 · 字号档位 · 行高 · 默认字重由本令牌提供；页面只可覆盖「颜色/字重/间距」这类场景语气（例：红=漏、绿=省回） */ .xy-num{font-family:Georgia,"Songti SC","Times New Roman",serif; font-size:var(--fs-num);font-weight:700;letter-spacing:.5px; color:var(--ink);font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1} .xy-num.gold{color:var(--gold-deep);} .xy-num.unit{font-size:.38em;font-family:inherit;color:var(--ink-3);margin-left:4px;} /* 位名页眉（皮骨收口 2026-09-09 宪法六：五槽统一页眉 = 眉题金棕 + 主标题24 + 副题16 + 金线渐隐过渡） */ .ph{display:block;padding:6px 2px 0} .ph .ph-eyebrow{font-size:13px;font-weight:600;color:#8a6d2f;letter-spacing:1.5px;margin-bottom:6px;display:flex;align-items:center;gap:8px} .ph .ph-eyebrow::before{content:'';width:18px;height:1px;background:var(--gold);display:inline-block} .ph .ph-t{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:.5px;line-height:1.15;margin:0} .ph .ph-s{font-size:16px;color:var(--ink-2);margin-top:2px;line-height:1.5;font-weight:500} .ph::after{content:'';display:block;height:2px;margin-top:8px;border-radius:1px;background:linear-gradient(90deg,rgba(176,141,62,.55) 0%,rgba(176,141,62,.22) 55%,rgba(176,141,62,0) 96%)} .ph-gap{height:8px} /* 页眉与内容间的呼吸过渡 */ /* ── 「店的一天」dayband（活试点 2026-09-09：时间骨+器官骨+开口骨的最小可见面）── */ .dayband{margin:0 10px;padding-bottom:10px} .db-track{display:flex;align-items:flex-start;justify-content:center;background:#fffdf6;border:1px solid var(--gold-line);border-radius:14px;padding:10px 10px 6px} .db-seg{flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:42px} .db-seg .db-dot{width:11px;height:11px;border-radius:50%;flex:none;background:#efe7d5;border:1px solid #d6c9a3} .db-seg .db-lb{font-size:13px;color:#b0a37c;line-height:1} /* 【2026-09-14 修·类名撞车】时间轴段位原用 done/now/todo 作状态类，与页面卡片 .todo（深色底+padding）撞名 —— 手机上「收账」段被套上卡片样式，变成深色小方块里竖排两字。状态类统一加 db- 前缀，杜绝再次撞车。 */ .db-seg.db-done .db-dot{background:#c9b887;border-color:#b3a172} .db-seg.db-done .db-lb{color:#8b7f5f} .db-seg.db-now .db-dot{background:var(--bud);border-color:var(--bud);animation:dbPulse 2.2s ease-out infinite} .db-seg.db-now .db-lb{color:var(--ink);font-weight:800} .db-line{flex:none;width:13px;height:2px;background:rgba(176,141,62,.30);margin:5px 2px 0;border-radius:1px} .db-line.on{background:rgba(176,141,62,.55)} @keyframes dbPulse{0%{box-shadow:0 0 0 0 rgba(29,122,79,.40)}70%{box-shadow:0 0 0 8px rgba(29,122,79,0)}100%{box-shadow:0 0 0 0 rgba(29,122,79,0)}} .db-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding:0 2px} .db-tx{font-size:15px;color:var(--ink-2);line-height:1.6} .db-busy-zone{margin-top:8px} .db-busy{padding:10px 14px;background:#fffdf6;border:1px solid var(--gold-line);border-radius:14px;font-size:15px;color:#3a445c;line-height:1.8;display:flex;flex-wrap:wrap;gap:6px 16px} .db-busy::before{content:'此刻';flex:none;font-size:13px;font-weight:800;color:var(--bud);padding-top:2px} /* ── 页脚过渡（2026-09-09 王总指令：页头页脚都要有过渡）：金短线 + 收尾句 + 淡出 */ .foot-fade{text-align:center;padding:22px 0 8px;color:#6f6859;font-size:14.5px;line-height:1.8} .foot-fade .ff-demo{display:block;font-style:normal;font-size:13px;color:#7d7663;margin-top:5px;letter-spacing:.3px;line-height:1.6} /* ── 出生证行（骨②数据血缘·2026-09-09）：每笔数的小字出生证，孤儿挂黄 */ .lg-line{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;font-size:13px;color:#6a7284;line-height:1.7;padding:2px 0;border-top:1px solid rgba(176,141,62,.14)} .lg-line:first-child{border-top:none} .lg-by{font-weight:700;color:var(--ink-2,#5c6478)} .lg-at{color:#7d7663;font-variant-numeric:lining-nums tabular-nums} .lg-act{flex:1 1 150px;min-width:0} .lg-ref{font-style:normal;color:#3f7a56;background:rgba(63,122,86,.09);border-radius:6px;padding:1px 6px} .lg-orphan-tag,.lg-wait-tag{font-style:normal;border-radius:6px;padding:1px 6px;font-size:13px} .lg-orphan-tag{color:#8a6d2f;background:rgba(210,170,60,.16)} .lg-wait-tag{color:#7a6a4f;background:rgba(180,160,110,.13)} .lg-sum-ok{color:#3f7a56}.lg-sum-orphan{color:#8a6d2f;font-weight:700}.lg-sum-wait{color:#7a6a4f} .foot-fade::before{content:'';display:block;width:64px;height:1.5px;background:linear-gradient(90deg,transparent,rgba(176,141,62,.85),transparent);margin:0 auto 11px} .foot-fade b{color:var(--gold-deep);font-weight:700} .db-busy b{color:var(--ink);font-weight:700} .db-busy .db-gap{display:none} @media (max-width:374px){.db-tx{font-size:13.5px}} /* 手机单行防折（2026-09-09 王总拍板：宁可省略号不折两行） */ button{white-space:nowrap} .lg-line{flex-wrap:nowrap!important;white-space:nowrap!important} .lg-line .lg-by,.lg-line .lg-at,.lg-line .lg-ref,.lg-line .lg-orphan-tag,.lg-line .lg-wait-tag{flex:0 0 auto;white-space:nowrap} .lg-line .lg-act{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} /* ── 2026-09-10 专家审计 P1：全站按压反馈 + 触达下限（纯追加，不碰历史行） ── */ button:not(:disabled){cursor:pointer;min-height:32px} button:not(:disabled):active{transform:translateY(1px) scale(.98);filter:brightness(.94)} .xy-card:active,.act-card:active,.prop:active,.sup-card:active{transform:translateY(1px) scale(.995);filter:brightness(.97)} .back:active,.go:active,.btn:active,.ckm:active{transform:translateY(1px) scale(.97);filter:brightness(.93)} /* 2026-09-10 P1 续：lg-ref 长引用可收缩省略（原 nowrap 撑爆 390 视口，金喇叭残余 24px 溢出根治） */ .lg-line .lg-ref{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis} /* ── 2026-09-10 品牌雕琢·大标题衬线（王总基线：衬线只用于大标题；米金纸感×宋体大字=画册风）── */ .ph .ph-t{font-family:Georgia,"Times New Roman","Songti SC","STSong","SimSun",serif;font-weight:700;letter-spacing:1px;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1} .xy-num{font-family:Georgia,"Songti SC","Times New Roman",serif;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1} /* ── 2026-09-10 P1: 小钮触达精修——视觉不破,命中区≥40px(专家:返回钮27px¥4,926）。档位（对应真实用法，非拍脑袋）： .xs 卡内一笔数（收账会「四本账」凭据卡） .sm 次级大数字（队伍页五卡 / 岗位页 hero 省回多少钱）（无档）常规大数字 30–52 .lg 旗舰（财务台年漏/省回） .xl 一屏一主事（掌柜台主角：钱） ══════════════════════════════════════════════════════════════════════ */ .xy-num{line-height:1.15;white-space:nowrap} .xy-num.xs{font-size:21px} .xy-num.sm{font-size:clamp(30px,9vw,36px)} .xy-num.md{font-size:clamp(34px,10.5vw,46px)} .xy-num.lg{font-size:clamp(44px,12vw,52px)} .xy-num.xl{font-size:clamp(52px,13vw,72px)} .xy-num .u,.xy-num small{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; font-size:.42em;font-weight:400;color:var(--ink-3);margin-left:4px;letter-spacing:0} /* ════════════════════════════════════════════════════════════════════ 手机端抗挤压层（2026-09-14）通病：区块标题 `.sec-t` 是 flex 容器，「📗 底账明细」这类标题是里面的 **裸文本**——它在 CSS 里没有类名可挂规矩，会变成「匿名弹性项」，默认可被压到比一个字还窄，旁边的 chip/箭头一挤，标题就竖着往下掉。治法（必须成对给，实测只给一半无效）： · 容器 nowrap —— 裸文本继承后最小宽度=整句宽，从此不再被压 · 容器 wrap —— 整行放不下就把后面的 chip 整体挪到下一行 · 子元素写回 normal —— 保住 chip/说明自己的正常换行用 body 前缀提高权重（页内 `.sec-t{}` 同权重时页内晚加载会赢）。 ════════════════════════════════════════════════════════════════════ */ body .sec-t{flex-wrap:wrap;white-space:nowrap} body .sec-t > *{white-space:normal} /* ── 2026-09-17 晨巡·A级：展开钮 .tl-more 窄档收口（共享件，纯追加）──────────── 病根：全局 button{white-space:nowrap} + .tl-more 标签「展开其余 N 条明细 · 含 M 条异常已提前」16px，在 320px 视口下超框，连带整页横向出界（实测 customer/dianxiaoer.html +6px、store_ops/erlaoban.html +11px； fold-more.js 供 13 页使用，标签长度随条数变化 → 属家族隐患，故修在共享层）。治法：只在窄档（≤389px）字号收一档 + 收紧内边距 + 允许折行（带 balance 消孤字）。实测：320/360/375 三档仍为单行（标签 245px ≤ 可用 252px），折行仅作兜底； 390/430 两档媒体查询不生效＝几何零变化；按钮体高恒 52px（min-height 未动）。 */ @media (max-width:389px){button.tl-more{font-size:13.5px;letter-spacing:0;padding:0 10px;gap:7px;white-space:normal;text-wrap:balance;line-height:1.3}}