/* ============================================================ Klog 样式 1/5 · 令牌层 装：文件级 TOC / 自托管字体 @font-face / Design Tokens / 字号档位 / 暗色主题 本层不含任何组件规则；站内所有颜色、间距、圆角、缓动、字号都必须从这里取值， 禁止在下面的片里写裸 px 或裸色值（≥40px 的展示字号除外）。 ------------------------------------------------------------ 加载顺序契约：01 → 02 → 03 → 04 → 05，严格等于拆分前 workbench.css 的 行序。05-views 有上百个选择器二次定义本层与后续基座规则，靠的就是 「后面的覆盖前面的」——换顺序或合并文件都会让整站样式翻车。 由 index.php 的 WB_CSS 与出包脚本 mobile/scripts/build-web.cjs 共同锁定。 新增页面样式：进 05-views.css 对应视图段，不新开文件、不在前面几片里插页。 ─── 1008 拆分头结束 ─── */ /* ============================================================ Kezn Workbench 样式 来源：design-system.html（Kezn Design System V1.0）token 与组件移植 新增：暗色主题 / 弹窗 / 工作台业务组件 资源版本：index.php 按 filemtime 自动生成 ?v=，改样式无需手动改版本号 ============================================================ */ /* ===================== 自托管字体 ===================== JetBrains Mono（latin 子集 woff2，约 21KB/字重）： 等宽数字是本设计的灵魂，自托管保证 iOS/安卓/Windows 三端一致， 不再各自落到 SF Mono / Droid Sans Mono 等系统差异字体。 子集不含汉字，中文按栈自动回退到 sans 各代字体。 */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jetbrains-mono-latin-400.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jetbrains-mono-latin-500.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/jetbrains-mono-latin-600.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/jetbrains-mono-latin-700.woff2") format("woff2"); } /* KlogNum：同一批 woff2 的「数字专用」角色（unicode-range 只认领 0-9 : %）。 置于 --font-sans 栈首 → 全站任何文本里的阿拉伯数字自动统一为 JetBrains Mono 字形，中文/字母不受影响；新组件零成本继承，无需逐处点名 mono。 */ @font-face { font-family: "KlogNum"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jetbrains-mono-latin-400.woff2") format("woff2"); unicode-range: U+0030-0039, U+0025, U+003A; } @font-face { font-family: "KlogNum"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jetbrains-mono-latin-500.woff2") format("woff2"); unicode-range: U+0030-0039, U+0025, U+003A; } @font-face { font-family: "KlogNum"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/jetbrains-mono-latin-600.woff2") format("woff2"); unicode-range: U+0030-0039, U+0025, U+003A; } @font-face { font-family: "KlogNum"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/jetbrains-mono-latin-700.woff2") format("woff2"); unicode-range: U+0030-0039, U+0025, U+003A; } /* ===================== Design Tokens ===================== */ :root { /* ---- Color: Background ---- */ --bg-page: #F7F8FA; --bg-sidebar: #F0F1F3; --bg-sidebar-hover: #E8E9EB; /* 侧栏比画布深一档语境下的 hover（1025 从 02 裸值立档；暗档＝--bg-hover 同值） */ --bg-card: #FFFFFF; /* 白卡之上的「浅一档卡面」（1005）：一句话抽屉里的结果卡片不再靠底下铺一层灰画布分层， 改成抽屉保持纯白、卡片自己亮里带一档。这一档与 --bg-card 只差 1% 亮度， 真正撑住分层的是卡片那圈 1px --border——所以用它必须与描边成对出现，不许单独用。 */ --bg-inset: #FCFCFC; --rm-well: #EDEFF2; /* 小票机弹窗内衬（台面），让白纸与背景可区分 */ --bg-soft: #FAFBFC; --bg-header: #F7F7F9; --bg-hover: #F3F4F6; --bg-selected: #FFFFFF; --bg-disabled: #FAFAFA; --bg-count: #E5E7EB; --bg-count-active: #D1D5DB; --bg-muted: #F3F4F6; /* ---- 柔光玻璃材质（dock / 选中块 / 加号三个载体共用，只有 ≤768 消费）---- --glass-fill 一片真玻璃的纵向分布：顶部受光高光 → 中段透出页面 → 底部微沉压色， 最后叠一层低透底板（26% 比旧的 32% 更透，靠模糊与高光撑可读性） --glass-blur backdrop 通道：模糊 + 提饱和 + 轻微提亮，内容划过时才有「毛」而不是一片糊 --glass-rim 1px 玻璃沿（外描边环）；--glass-drop 托底投影写两段：近处压实、远处散开 */ --glass-fill: linear-gradient(180deg, color-mix(in srgb, #fff 26%, transparent) 0%, color-mix(in srgb, #fff 8%, transparent) 46%, transparent 62%, color-mix(in srgb, var(--text-1) 4%, transparent) 100%), color-mix(in srgb, var(--bg-card) 26%, transparent); --glass-blur: blur(34px) saturate(200%) brightness(1.04); --glass-rim: 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent); --glass-drop: 0 12px 30px rgba(17, 17, 17, .13), 0 2px 6px rgba(17, 17, 17, .06); /* 选中块=压在玻璃上的一枚软胶镜片：比 dock 更亮一档 + 一圈内高光， 不再靠嵌套重模糊（双层 blur 在小米 WebView 上只会糊成一团灰，看不出「选中」） */ --glass-sel-fill: linear-gradient(180deg, color-mix(in srgb, #fff 34%, transparent) 0%, transparent 58%), color-mix(in srgb, var(--text-1) 7%, transparent); --glass-sel-rim: inset 0 0 0 1px color-mix(in srgb, #fff 30%, transparent); /* ---- Color: Border ---- */ --border: #E5E7EB; --border-strong: #D1D5DB; /* ---- Color: Text ---- */ --text-1: #1A1A1A; --text-2: #333333; --text-3: #555555; --text-4: #5B6472; /* 加深：在灰底（well/count）上仍满足 AA 4.5:1 */ --text-disabled: #D1D5DB; --text-hint: #6E7787; /* 占位提示档：text-4 浅一档、白卡仍 ≥4.5:1（1011 立，仅占位用） */ /* ---- Color: Status ---- */ --status-good: #279E49; --status-bad: #E53E3E; --warning: #F59E0B; /* 小票机机身状态灯珠（焊在 --rm-well 机身上——机身翻面，灯必须跟着翻，非材质豁免）： 亮档＝琥珀/墨绿原值；暗档＝同色相提亮一档（与 --warning/--status-good 暗族同思路）。暗档值待真机核。 */ --rm-dot-busy: #EF9F27; --rm-dot-done: #639922; /* 简报图标点缀族（1026 站主「图标太墨」；bp-ico-* 挂在段落小图标上，正文仍墨灰）： 亮档＝低饱和墨彩；暗档＝同色相提亮一档（与 --rm-dot / --status 族同一思路）。 */ --bp-ico-green: #5F8A5A; --bp-ico-gold: #BD8A2E; --bp-ico-gold-2: #C79A3A; --bp-ico-blue: #5177B5; --bp-ico-rose: #C26565; --bp-ico-sky: #4187C4; --bp-ico-teal: #4F8F86; /* 简报寄语紫底（1107 参考图2 立）：洞察暖底不另立值、直接借 --tag-warn-bg 琥珀族翻面 */ --bp-quote-bg: rgba(124,93,188,.08); /* 心情四色＋内置事件色（1104 收编 app.js 裸 hex，让暗档实色样本翻面；边界与数据/hex 之分详见 DESIGN_SYSTEM.md §2.3）。 亮档＝原 hex（零视觉变化），暗档＝同色相提亮一档；--mood-good 与 --rm-dot-done 同值（暗档沿用 #8CC24D）。 */ --mood-good: #639922; --mood-ok: #6E6D66; --mood-low: #F3B94F; --mood-bad: #E97371; --evt-birthday: #FE2C55; --evt-anniversary: #10B981; --evt-neutral: #888780; /* 自定义事件无用户色时的中性兜底 */ /* ---- Color: Trend（红涨绿跌） ---- */ --trend-up: #EF4444; --trend-down: #10B981; /* ---- Color: Brand / Action ---- */ --primary: #111111; --primary-hover: #1F2937; --on-primary: #FFFFFF; --white: #FFFFFF; /* 品牌底板（logo-icon / ai-mark / ab-logo 共用）：刻意用「近黑 #111111」而非绝对黑 #000000—— 与 --primary 同值、与暗档反向的 #111111 呼应，全站不允许任何可见表面出现纯黑。 亮档黑底板 / 暗档翻白底板（反向由下面 [data-theme=dark] 自动完成，消费者不必各写 dark 行）。 */ --brand-plate: #111111; --brand-plate-ink: #F4F4F4; /* ---- Color: Badge Dots ---- */ --badge-dot-1: #FE2C55; --badge-dot-2: #EF4444; --badge-dot-3: #10B981; /* ---- Color: 扩展（组件原硬编码值 token 化，保证暗色可用） ---- */ --mask: rgba(17,17,17,.32); /* ---- Elevation（分层阴影：静态 / 悬浮 / 浮层 / 弹窗 / 轻提示） ---- */ --shadow-sm: 0 1px 2px rgba(17,17,17,.03); --shadow-card: 0 1px 2px rgba(17,17,17,.04); --shadow-hover: 0 4px 12px rgba(17,17,17,.07); --shadow-float: 0 10px 28px rgba(17,17,17,.09); --shadow-modal: 0 18px 44px rgba(17,17,17,.13); --shadow-toast: 0 4px 14px rgba(17,17,17,.07); --btn-2-bg: #FEFFFE; --btn-2-bg-hover: #FFFFFF; --btn-2-bg-active: #F3F4F6; --focus-ring: rgba(17,17,17,.16); --focus-ring-soft: rgba(17,17,17,.06); /* 聚焦实环档（1003 账户盒 B 定稿；1004b 后站内主要供 OTP 六宫格） */ --focus-glow: 0 0 12px rgba(17,17,17,.12); /* 聚焦柔光·渐隐档（1004b 定稿；1011 站主令减淡 .20→.12）：井族 / 登录盒 / 搜索框统一此枚 */ --switch-track: #D1D5DB; --tag-high-bg: rgba(229,62,62,.08); --tag-high-fg: #DC2626; /* 加深至 AA：原 #E53E3E 白底约 4.1:1 */ --tag-good-bg: rgba(16,185,129,.1); --tag-good-fg: #047857; /* 原 #10B981 白底约 2.5:1 不达标 */ --tag-warn-bg: rgba(245,158,11,.1); --tag-warn-fg: #B45309; /* 原 #F59E0B 白底约 2.2:1 不达标 */ --tag-bad-bg: rgba(229,62,62,.08); --tag-bad-fg: #DC2626; --tag-info-bg: rgba(37,99,235,.08); --tag-info-fg: #1D4ED8; /* 待定蓝：回执角标「待应用 / 保存中」档（2026-11-02 站主拍板语义三色：成功绿 / 待定蓝 / 失败红） */ /* ---- Color: 订阅档位徽章（role-ultra/max/pro） 1017 权限徽章重设计（方案 E）：五档统一「淡底 bg@16% + 同色相加深 1px 内描边 bg@38%」。 Ultra 不再是双金渐变，并入与 Max/Pro 同构的单色 --role-ultra-bg；字色压深到 #7A5B14， 淡底上约 6.5:1 过 AA（旧 #A67C00 在同一淡底上约 4.3:1，站主点名「看不清」）。 ---- */ --role-max-fg: #7C3AED; --role-max-bg: #8B5CF6; --role-pro-fg: #2B6CB0; --role-pro-bg: #378ADD; --role-ultra-fg: #7A5B14; --role-ultra-bg: #E3C878; /* ---- Color: 打卡热力（四档绿：空白 / 1 次 / 2 次 / 3 次以上） ---- */ --hm-0: #EEF0F2; --hm-1: #CFE7D6; --hm-2: #8CC79F; --hm-3: #279E49; --hm-line: rgba(17,17,17,.05); --hm-ink-0: #C2C7CE; --hm-ink-1: #2C6B41; --hm-ink-2: #10401F; --hm-ink-3: #FFFFFF; /* ---- Color: 账本支出热力（1005 新增，1014 与统计热力统一为一族墨档） ---- 站主点名「支出日历最深档太浅、参考统计页热力，但统计最深又太深，浅一些后统一」—— 于是账本与统计共用下面这三档：1017 站主点名「热力图色阶参考完成趋势」—— 三档直接引用统计的实心灰阶 --stg（少=stg-5 最浅、中=stg-3、多=stg-1 最深）， 不再用 --primary 透明度过台面。--stg 明暗两套各自定义，所以 --lgd 只此一处引用， 暗档自动反转、两页永远与完成趋势同深浅。仍刻意不套习惯那三档绿。 */ --lgd-1: var(--stg-5); --lgd-2: var(--stg-3); --lgd-3: var(--stg-1); --lgd-ink-1: var(--text-2); --lgd-ink-2: var(--text-1); --lgd-ink-3: var(--on-primary); /* ---- Color: 统计产出构成·五级墨（1011 统计 v2：堆叠柱与图例共用）---- 明档由深到浅、暗档反转（与热力族同一思路）；顺序固定： 待办 → 打卡 → 小记 → 备忘 → 账本。只给统计页趋势与图例消费。 */ --stg-1: #1A1A1A; --stg-2: #59606B; --stg-3: #8B929C; --stg-4: #B9BFC8; --stg-5: #E0E3E8; /* ===================== Border Radius · 阶梯 V1.0（1010 定稿）===================== 全站圆角只有六档，等差 4px，以参考图实测的 12 为锚（r-3）。规范见 dev/radius-spec.md。 档位由「元素角色」定，不由页面定；同族元素全站只许一档。 r-1 微 4 ≤24px 小件：勾选框 / 热力格 / 色点方角 / 滚动条 / kbd / 代码片 / 图片小格 r-2 件 8 25~32px：标签 / 徽章 / 计数 / 小钮 / 工具条 / 桌面卡 r-3 面 12 内容卡 / 输入字段 / 面板 r-4 凸 16 浮在卡或画布之上的一层：分段器 / 抽屉内行卡 / 搜索井 r-5 层 20 居中弹窗 / hero / 封面 / 大空态卡 r-6 屏 24 底部抽屉与整屏面板顶角 三条绑定规则（阶梯只管选档，这三条管谁该选哪档）： ① 同心：内层 = 外层 − 内衬。圆角面里再嵌圆角面必须成立，否则接缝读出一道台阶。 ② 圆只有两种写法：正圆 --r-circle 只给等宽高的元素；其余全圆端头一律 --r-pill。 禁裸 50% / 999px / 9999px（历史上四种写法并存，非方形元素吃 50% 会被拉成椭圆）。 ③ 禁裸数：新写 border-radius 只许吃本层令牌。闸门见 dev/lab/css-bloat-gate.cjs 的圆角棘轮。 `0` 不进阶梯——它只出现在「把圆角关掉」的复位语境，不是设计决定。 */ --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-5: 20px; --r-6: 24px; --r-pill: 9999px; --r-circle: 50%; /* 仅限 offsetWidth === offsetHeight 的真圆 */ /* ---- 角色令牌：全部保留，改成指向阶梯（186 处消费者一行不动）---- 唯一一处值变化 = --radius-badge 6 → 8：徽章族并入 r-2， 它原本是全站唯一一枚落在两档正中间的孤值（6），怎么挨着都不对。 */ --radius-btn: var(--r-1); --radius-badge: var(--r-2); --radius-card: var(--r-2); --radius-card-m: var(--r-3); /* 手机端内容卡档（1009 参考图定 12） */ --radius-lg: var(--r-3); --radius-sheet: var(--r-6) var(--r-6) 0 0; /* 底部抽屉顶角统一档 */ --radius-pill: var(--r-pill); /* ---- 分段器 seg-slide 专用三枚（1009 定色 · 1010 归档）---- 颜色是实测出来的具体值，所以给它们自己的名字，不借 --bg-muted / --text-3： 那两枚全站还有几十处消费者，为一只分段器把它们整体调深/调浅不值。 --seg-track 轨道 #E9EAEE：比手机端画布 #F1F2F5 再深一档冷灰，凸块的白才托得住 --seg-idle 未选中墨 #8A8A94：旧 --text-3(#555) 在浅灰轨上读起来像「选中了但没加粗」 --seg-pad 轨道内衬 4px 圆角吃 r-3（1012 定）；凸块 = r-3 − --seg-pad = 8，与轨道同心。 圆角史：12(r-3) → 1010 站主点名「再大一些」抬到 16(r-4) → 1012 看真机样板后收回 12—— 16 落在 42px 高的轨道上，跟内容卡放一起读成「这一段比卡还圆」，一眼出戏； 站主另否了 chip 的两档试作（胶囊 / 12），chip 落 r-2(8)，故凸块的 8 与 chip 同圆度。 */ --seg-track: #E9EAEE; --seg-idle: #8A8A94; --seg-pad: 4px; --seg-r: var(--r-3); /* ---- Spacing Tokens (4px 基准) ---- 1025 补 --sp-5：4px 阶梯在 16→24 间断档，导致新区（额度peek卡等）就地私造 --sp-5 且只造在 ≤768 媒体块里 → 桌面消费点整条 padding IACVT 丢弃。 规矩：sp 族必须在此连续定义（sp-1..sp-12），媒体块内只许重映射语义层，不许造新档。 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* ---- Spacing: Layout ---- */ --sidebar-w: 216px; --header-h: 72px; /* 状态栏安全区：App（Android 15+ 强制 edge-to-edge）里由 Capacitor 的 SystemBars 以 CSS env() 形式给出；浏览器里恒为 0，桌面与网页版无副作用。 顶栏 / 全屏弹窗头 / 整屏抽屉都必须吃这个值，否则内容被状态栏压住。 */ /* 安全区令牌：站内一律用这四个，不要再直接写 env()。 App 里 Capacitor（insetsHandling=css）把系统 inset 注入成 --safe-area-inset-*； Android WebView 的 env(safe-area-inset-*) 拿不到值，只写 env() 在 App 内恒为 0。 优先级：Capacitor 注入值 → 浏览器 env() → 0。 */ --sat: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)); --sar: var(--safe-area-inset-right, env(safe-area-inset-right, 0px)); --sab: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)); --sal: var(--safe-area-inset-left, env(safe-area-inset-left, 0px)); --safe-top: var(--sat); --content-px: var(--sp-8); --content-py: var(--sp-6); --module-gap: var(--sp-7); --card-gap: var(--sp-4); --logo-gap: 10px; --meta-icon-gap: 8px; /* ---- Spacing: Component ---- */ --card-pad: var(--sp-6); --control-h: 34px; --control-h-sm: 30px; --control-h-lg: 46px; /* 手机端弹窗底栏主操作档：收口历史裸 46px（.dd-modal .modal-foot / .bin-clear 共用） */ --control-px: 16px; /* ---- 账户认证页统一版式基准（1008，仅 ≤768 生效）---- 登录 / 改密 / 绑定 / 解绑七页共用两条线：大标题落在距弹窗内容顶 --auth-title-top 的基准线 （登录页顶部 logo 就占在这条线以上的预留位里，故向导页顶部也留等高空间——标题严格同线）， 主按钮落在距弹窗底 --auth-btn-bottom 的基准线，中间用弹性空隙拉开。 想整体上/下移标题与 logo 只调 --auth-title-top，想挪按钮只调 --auth-btn-bottom，一处改全站跟。 */ --auth-title-top: 120px; --auth-btn-bottom: calc(92px + var(--sab)); /* 输入框规范 v2 · 编辑表单族基因（2026-10-03）：一个家族一把尺子—— 材质 / 圆角 / 字号 / 光环全走令牌；样板与角色清单见 workbench.css 「输入框规范 v2 · 编辑表单族样板」块。 */ --fld-r: var(--r-3); /* 输入类控件圆角档（药丸 / 行内直改除外）：字段族 = r-3，与内容卡同档 */ --fld-fill: var(--bg-muted); /* 默认衬底：白卡上的软底「井」 */ --fld-fill-hover: var(--bg-count); /* 悬停加深一档（桌面） */ --fld-fs: var(--fs-body); /* 桌面端表单文本档（手机端由 --fs-input 16 地板接管） */ /* 1104 站主令（实拍「新增订阅」：同一张表单里字段标题有三档、已填内容与占位看不出差别）： · --fld-label-fs = 字段标题唯一字号。桌面 13、手机端在 06 的 :root 重映射成 16 （与 .fg-row 那档既有尺寸等值，不是新造一档）；字重/颜色不再各处各写， 统一 --fw-medium + --text-1，见 03「Form / Input」与 06「分组卡」。 · --fld-ink = 已填内容的墨色，刻意与占位同档（--text-hint）， 让「深粗的标题 / 灰的内容」成为整站的区分轴。暗档随 --text-hint 自动翻面。 代价（站主知情选定）：已填与未填不再靠颜色区分，靠文案本身（占位是提示语）。 */ --fld-ink: var(--text-hint); --fld-label-fs: calc(13px * var(--fs-scale)); /* 字段标题字号（手机端 06 重映射 16px） */ /* ---- 字号档位（1004 新增：个人中心 → 设置 → 更多设置 → 字号）---- 一把尺子管全站。两族令牌各走各路，但吃同一枚系数： · rem 族（阅读级 --fs-display ~ --fs-input、--fs-num-*）→ 靠 根字号整体缩放， ≤768 / ≤380 那几段重映射照旧写 rem 字面量，抬档位时它们自动跟着走，不必逐段补； · 固定 px 族（--fs-9 ~ --fs-12、--fs-ctrl-lg）→ 令牌里就地乘系数。 两族必须同步放大，否则「正文大了、计数角标和底栏标签还是老的」那种错位一眼就看出来。 为什么动根字号是安全的：全站除 --fs-* 之外没有任何一处 rem 用法（间距令牌一律 px）， 所以它只动字、绝不动版。档位封顶 +12%（见下方三档）：再往上底栏五列标签与两行标题开始挤。 */ --fs-scale: 1; /* ---- Typography ---- */ --fs-display: 1.75rem; --fs-h1: 1.375rem; --fs-h2: 1.125rem; --fs-h3: 1.0625rem; /* 17px，小票机日期行专用；补全历史 var(--fs-h3,17px) 幽灵引用，渲染不变 */ --fs-body: 0.875rem; --fs-caption: 0.8125rem; --fs-label: 0.75rem; --fs-micro: 0.6875rem; /* ---- Numeric scale（等宽「大数字」三档，跨页统一读数层级；≤768/≤380 只覆盖这三枚令牌）---- */ --fs-num-sm: 1.375rem; /* 22px 卡内 KPI 计数：.summary-value / .count-num 共用同一档 */ --fs-num-md: 1.5rem; /* 24px 概览问候标题：.ov-hi */ --fs-num-lg: 2.5rem; /* 40px 统计首屏 hero 巨数：.st-hero-n b */ --fs-input: 1rem; /* 16px 可输入字段字号地板（手机端统一，兼作 iOS 聚焦不缩放线；收口历史 15/16 并存） */ /* 固定微标签字号（刻意不随 ≤768 断点重映射）：把历史裸 px 微标签收口于此， 与上面会随手机端抬升的阅读级 --fs-* 区分开。当前与旧字面量逐字等值＝零视觉变化； 将来若要把这些也纳入手机端地板，只改这 4 个令牌即可，不必再翻几十处裸 px。 1004 补：这一族现在**吃字号档位**（乘 --fs-scale）——用户把字调大时，计数角标、 底栏标签这类「不随断点抬」的小字必须一起抬，不然屏幕上会出现两套字号。 小档 --fs-scale:1 时 calc 结果与旧字面量逐字等值，仍是零视觉变化。 */ --fs-9: calc(9px * var(--fs-scale)); --fs-10: calc(10px * var(--fs-scale)); --fs-11: calc(11px * var(--fs-scale)); --fs-12: calc(12px * var(--fs-scale)); --fs-ctrl-lg: calc(15px * var(--fs-scale)); /* 手机端底栏大按钮字号（配 --control-h-lg）。刻意不并入 --fs-body： ≤768 段把它重映射成 ≈15.2px，换过去会动真机字号——这里要的是逐字等值 */ --lh-display: 1.2; --lh-h1: 1.3; --lh-h2: 1.4; --lh-body: 1.6; --lh-caption: 1.5; --lh-label: 1.4; --lh-micro: 1.4; /* ---- Settings stack（pfg 家族堆叠节奏）---- 新增设置页的规矩：把 .pfg 组**直接**铺成弹窗 body 的子级（要条件显形就把 hidden 挂在 .pfg 本身，别再包一层素 div——包一层，:first-child 归零就会吃掉组距）。 五个令牌管完一页的纵向节奏，不许再写页面级的 magic number。 */ --pfg-gap: 22px; /* 组与组 */ --pfg-gap-page: 26px; /* 整页设置（ws-page / nt-page）的组节奏，比弹窗松半档 */ --pfg-label-gap: 8px; /* 组标 → 卡 */ --pfg-tip-gap: 10px; /* 卡 → 卡外灰说明 */ --pfg-row-h: 52px; /* 卡内标准行高（输入行 / 开关行 / 余额行同一档） */ --fw-regular: 400; --fw-normal: 400; /* --fw-regular 别名（1025 立：历史上两处误引未定义的 --fw-normal， IACVT 靠继承侥幸——与其禁引用不如把名字收编，杜绝再犯） */ --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---- Animation ---- 时长板 V1.0（1025 收口）：此前站内实测 42 种时长字面量 / 357 处——同一类微交互至少 5 种时长，动效「人格」不统一的根源。现定八档，新写的 transition/animation 时长只许吃 本表（≥1s 的场景级编排如秒表/光泽循环除外）；存量已按「就近 ≤60ms」归并进本表。 --d-micro .12 极微反馈（图标/勾选） --d-fast .15 常规快速档（别名 --transition-fast） --d-base .19 通用补间基线 --d-modal .22 弹层/展开/收合 --d-toast .28 轻提示入场 --d-push .30 dock 席位左右推（整页横位移） --d-med .32 形变中段（井族/宽度收放） --d-enter .35 页面/抽屉入场 --d-morph .45 大位移形变 --d-slow .60 签名慢镜头 归并规则：字面量距某档 ≤60ms 判「该档」；超出的（如 .7s/.05s stagger/≥1s）视为有意值， 保留字面量并须带注释说明理由。 */ --d-micro: .12s; --d-fast: .15s; --transition-fast: var(--d-fast); /* 历史别名，消费点不回改 */ --d-base: .19s; --d-modal: .22s; --d-toast: .28s; /* toast 桌面/移动共用一档入场时长 */ --d-push: .3s; /* dock 席位左右推：整页横向位移一档，比 --d-enter 略快，慢了读作「拖」 */ --d-med: .32s; /* 1025 收口：npg 井族两处 var(--d-med,.32s) 幽灵引用一直吃 fallback，作者意图坐实 */ --d-enter: .35s; --d-morph: .45s; --d-slow: .6s; --ease-enter: cubic-bezier(.16, 1, .3, 1); --ease-float: cubic-bezier(.22, .61, .36, 1); /* iOS 式从容曲线：起步略线性、尾段强减速——待办详情抽屉/展开形变照参考稿用它（区别于 --ease-enter 的急前突） */ --ease-ios: cubic-bezier(.32, .72, 0, 1); /* 过冲族收口：toast/滑动行的轻弹、dock/tab 的重回弹、AI 浮气泡的尾弹；日历缩放/btn-pop 归入 --ease-float */ --ease-pop: cubic-bezier(.22, 1.18, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-nl: cubic-bezier(.22, .9, .32, 1.28); /* 1025 从 toast 实测区升格的两条： --ease-lead (.10,.86,.16,1)「从容前突」——样板实测「单条弹簧过冲会被读成匀速」的产物； --ease-exit (.5,.05,.7,.25)「加速退场」——收尾族此前缺一条 exit 语义，裸写者必拍脑袋。 */ --ease-lead: cubic-bezier(.10, .86, .16, 1); --ease-exit: cubic-bezier(.5, .05, .7, .25); /* --ease-move (.4,0,.2,1)：位移标准缓动（起步稳、长尾减速，Material 标准曲线原值）—— 用在「整块元素搬家」语义：引导页 lockup 让位、morph 卡位移。与 ease-enter（入场急前突）、 ease-float（浮动收）性格不同，1025 复审从 04-shell 裸值升格立档（值逐字不变）。 */ --ease-move: cubic-bezier(.4, 0, .2, 1); /* ---- Font Family ---- */ /* KlogNum 居首：0-9 一律 JetBrains Mono 字形（unicode-range 限定），其余字符落到后面字体； sans：iOS/mac → 安卓主流 OEM 中文字体（命中用户系统所选，观感最佳）→ Noto/雅黑 兜底 */ --font-sans: "KlogNum", -apple-system, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "OPPO Sans 4.0", "vivo Sans SC", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", Roboto, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Consolas, monospace; } /* ===================== 手机端画布（≤768px 令牌重映射）===================== 参考图量的页面底是 #F1F2F5，比桌面那档 #F7F8FA 深约 2.5%（白卡终于浮得起来了）。 只压手机端、桌面不动：桌面左侧栏本来就是 #F0F1F3，画布再跟它对齐就看不出「栏 / 面」的分界。 这一枚令牌是「灰底画布 + 白圆角卡」那套载体的底（待办列表页、七个详情 .dd-modal、 账户 .acct-modal、小记表单…都吃它），所以一处改完全站跟深，不需要逐页补特例。 写在令牌层而不是 05-views：令牌只在这里定义，别处只消费。 暗色块在本块之后且同特异度 → 深色主题照样压得住，不会把暗档拉成浅灰。 */ /* ≤768 手机端样式 → 06-mobile.css */ /* ===================== 字号档位（小 / 中 / 大）===================== 档位只写在这一处，别到各页面补特例。 由 app.js 落（写档即生效）、 index.php 在首帧前按 localStorage 预置同一属性——预置漏了就是「开屏先闪一下小字」。 没有 data-fs 属性时（新用户 / 隐私模式读不到缓存）＝小档，与 1004 之前的全站逐字等值。 特异度：html[data-fs] (0,1,1) 压得住上面 :root 与 ≤768 段里那些 (0,1,0) 的 :root； 档位改的是 --fs-scale，令牌值本身一个都不用动。 1004 一并做的收口：全站 209 处「裸 px 字号」就地改写成 calc(Npx * var(--fs-scale))， 理由是这一档设置只放大令牌族会露馅——待办行标题 16px、概览时间线标题、详情那行 dd-k 全是历史裸 px，用户把字号调到「大」，正文没动、只有小字动了，比不调还糟。 小档系数＝1，calc(Npx * 1) 与旧的 Npx 逐字等值＝零视觉变化，可对照 diff 复核。 唯一的豁免：≥40px 的巨型读数（详情那枚 56px 日期、68px 热力巨数、40px 逾期数）不参与—— 它们是图形不是正文，再放大 12% 会把同行旁边的星期与月份挤到换行。 （另一条路 text-size-adjust 实测在桌面 Chrome 上是彻底空转：见 .workbuddy/textsizeadjust-repro.html 的量具，px 字号纹丝不动，所以没走它。） 上限刻意收到 +12%：手机正文 15.2→17.0px 已是「大字模式」的常见落点， 再往上底栏五列标签、两行标题和固定高度的徽章会开始互相挤。 */ html[data-fs="1"] { --fs-scale: 1.06; } /* 中 */ html[data-fs="2"] { --fs-scale: 1.12; } /* 大 */ /* rem 族的缩放入口。写在 px 上，避免「rem 依赖自身所定义的根字号」那种自指。 */ html { font-size: calc(16px * var(--fs-scale)); } /* ===================== 暗色主题 ===================== */ [data-theme="dark"] { --bg-page: #101114; --bg-sidebar: #141519; --bg-sidebar-hover: #202228; /* 与原 02 内 [data-theme=dark] .menu-item:hover 覆盖行同值，覆盖行随立档退役 */ --bg-card: #191B1F; --bg-inset: #1D1F24; /* 暗档反向：卡片比抽屉（--bg-card）亮一档，与亮色档同一方向 */ --rm-well: #141519; /* 暗色下用更深的「井」衬出白纸 */ --bg-soft: #1D1F24; --bg-header: #151619; --bg-hover: #202228; --bg-selected: #1B1D21; --bg-disabled: #1A1B1F; --bg-count: #2B2E35; --bg-count-active: #383C44; --bg-muted: #202228; /* 分段器暗档：轨道沿用旧 --bg-muted 那枚（比卡片 #191B1F 亮一档，凸白块才凸得出来）； 未选中墨沿用旧 --text-3——亮档 #8A8A94 直接搬到深底上会糊成一片，读不出「没选中」 */ --seg-track: #202228; --seg-idle: #B0B4BC; /* 暗色同一套玻璃语言，只是高光收狠一档、底板压深一档： 亮色那 26% 白高光直接搬到暗色会变成一块毛白雾，故 11%/3%，底部改压黑做厚度 */ --glass-fill: linear-gradient(180deg, color-mix(in srgb, #fff 11%, transparent) 0%, color-mix(in srgb, #fff 3%, transparent) 46%, transparent 62%, color-mix(in srgb, #000 22%, transparent) 100%), color-mix(in srgb, var(--bg-card) 34%, transparent); --glass-blur: blur(34px) saturate(190%) brightness(1.02); --glass-rim: 0 0 0 1px color-mix(in srgb, var(--border) 55%, transparent); --glass-drop: 0 12px 30px rgba(0, 0, 0, .50), 0 2px 6px rgba(0, 0, 0, .32); --glass-sel-fill: linear-gradient(180deg, color-mix(in srgb, #fff 10%, transparent) 0%, transparent 58%), color-mix(in srgb, var(--text-1) 13%, transparent); --glass-sel-rim: inset 0 0 0 1px color-mix(in srgb, #fff 10%, transparent); --border: #272A31; --border-strong: #363B44; --text-1: #F0F1F3; --text-2: #D3D6DB; --text-3: #B0B4BC; --text-4: #7E838D; --text-disabled: #3E424A; --text-hint: #6E737D; /* 提示档暗值：比 text-4 更收敛一档 */ --status-good: #2FBF6B; --status-bad: #F0655A; --rm-dot-busy: #F5B94A; --rm-dot-done: #8CC24D; /* 简报图标点缀·暗档：同色相提亮一档（低饱和色直接搬深底会发闷），与 --rm-dot 暗档同一思路 */ --bp-ico-green: #82B37B; --bp-ico-gold: #D9AB4E; --bp-ico-gold-2: #E2BC5F; --bp-ico-blue: #82ABE0; --bp-ico-rose: #DB8F8F; --bp-ico-sky: #6FB2EA; --bp-ico-teal: #74B8AD; /* 寄语紫底·暗档：同色相提亮、alpha 抬一档（与 --tag-warn-bg 暗档同思路） */ --bp-quote-bg: rgba(156,132,224,.14); /* 心情四色＋内置事件色·暗档：同色相提亮一档（与 --rm-dot/--bp-ico 暗族同思路） */ --mood-good: #8CC24D; --mood-ok: #8A8981; --mood-low: #FFCB63; --mood-bad: #FF8F8D; --evt-birthday: #FF5C7A; --evt-anniversary: #34D399; --evt-neutral: #9C9B93; /* 打卡热力：暗底下绿由暗到亮，格内数字墨色随之反转 */ --hm-0: #22252B; --hm-1: #1E4630; --hm-2: #2F7A4A; --hm-3: #57C070; --hm-line: rgba(255,255,255,.07); --hm-ink-0: #4A4F58; --hm-ink-1: #A6DCBB; --hm-ink-2: #E4F5E9; --hm-ink-3: #08160D; /* 账本支出热力暗档：1017 起 --lgd-* 引用 --stg-*，而 --stg 在暗档自带反转， 故此处不再单列 lgd——上面 var(--stg-1/3/5) 自动翻成「越花得多越亮」。 */ /* 统计构成·五级墨·暗档：明暗反转（越靠前的科越亮） */ --stg-1: #F0F1F3; --stg-2: #B9C0C9; --stg-3: #8B939D; --stg-4: #5A616B; --stg-5: #3A4048; --warning: #F5A623; --trend-up: #F0655A; --trend-down: #2FBF6B; --primary: #E8E9EC; --primary-hover: #FFFFFF; --on-primary: #101114; /* 品牌底板暗档反转：白底板 + 近黑字（与亮档黑底白字成对，全站统一，消费者无需各写 dark 行） */ --brand-plate: #F4F4F4; --brand-plate-ink: #111111; --mask: rgba(0,0,0,.62); --shadow-sm: 0 1px 2px rgba(0,0,0,.22); --shadow-card: 0 1px 2px rgba(0,0,0,.28); --shadow-hover: 0 4px 12px rgba(0,0,0,.38); --shadow-float: 0 10px 28px rgba(0,0,0,.46); --shadow-modal: 0 18px 44px rgba(0,0,0,.52); --shadow-toast: 0 4px 14px rgba(0,0,0,.38); --btn-2-bg: #1D2025; --btn-2-bg-hover: #24272D; --btn-2-bg-active: #17191D; --focus-ring: rgba(232,233,236,.28); --focus-ring-soft: rgba(240,241,243,.12); /* 暗档实环：修「聚焦光在暗底不可见」 */ --focus-glow: 0 0 12px rgba(240,241,243,.09); /* 暗档渐隐柔光（1004b；1011 同令减淡 .15→.09）：井族 / 登录盒 / 搜索框共用 */ --role-max-fg: #C4B5FD; --role-max-bg: #A78BFA; --role-pro-fg: #90C2F5; --role-pro-bg: #4D9DE0; --role-ultra-fg: #F5D079; --role-ultra-bg: #C9A24C; /* 暗档字色本够对比，不动；只把双金并成单色底 */ --switch-track: #3A3E46; --tag-high-bg: rgba(240,101,90,.14); --tag-high-fg: #F0655A; --tag-good-bg: rgba(47,191,107,.14); --tag-good-fg: #2FBF6B; --tag-warn-bg: rgba(245,166,35,.14); --tag-warn-fg: #F5A623; --tag-bad-bg: rgba(240,101,90,.14); --tag-bad-fg: #F0655A; --tag-info-bg: rgba(96,165,250,.14); --tag-info-fg: #60A5FA; /* 待定蓝暗档：同色相提亮一档（与 --tag-good/--tag-bad 暗族同思路） */ }