/* —— 手写体问候语：霞鹜文楷（用户 2026-09-26 从 14 款候选中选定 1 号）—— @font-face 内嵌的是 GB2312 一级常用字（3755 字）+ 常用标点子集（woff2 约 840KB）， 覆盖日常问候语所需字符；用户以后自定义问候语（lw_greet）只要用常用字就不会缺字。 回退栈接系统楷体：缺字时降级到设备楷体，不破版、不混淆风格。 */ @font-face{font-family:'LXGW WenKai';src:url(../fonts/lxgw-wenkai.woff2) format('woff2'); font-weight:400;font-display:swap} .wel-greet{font-family:'LXGW WenKai','Kaiti SC','STKaiti','KaiTi','楷体',cursive} :root{ /* 卡片标题左内边距基准 —— 让「案件统计」能和「律师费收支总计」左对齐 （用户 2026-09-17 指定）。 为什么需要一个变量而不是直接写数字：两者的外框结构不同。 · .kpi-merged：元素自身带 1px 边框 + 4px 内边距，标题 .kpi-head 再给 18px → 图标起点 = 卡片外边界 + 1 + 4 + 18 = 偏移 23px · .st-card： 元素自身 1px 边框，标题 .card-head 直接给 14px → 图标起点 = 卡片外边界 + 1 + 14 = 偏移 15px 差 8px，这就是标题肉眼看着偏左的原因（430px 实测：图标差 8px、文字差 9.25px）。 变量取值 = 「kpi 那边图标距卡片外边缘的距离」减去「本卡片自身 1px 边框」： · 宽屏：kpi 偏移 23px（1 边框 + 4 padding + 18 head）→ 本值 22px · 窄屏：kpi 偏移 19px（.kpi-head padding 降到 14） → 本值 18px 用变量而不是两边各写数字：任一侧以后改了间距，对齐会静默失效且很难发现， 变量至少把「这两个数必须同步」的约束显式留在了同一个地方。 */ --card-head-pad-l:22px; /* 标题图标的固定盒宽 —— 让「案件统计」与「律师费收支总计」的**文字起点**也对齐。 光把图标左边界对齐还不够：🏛️ 渲染宽度 17.47px、🪙 18.72px（同为 15px 字号， 不同 emoji 字形宽度本就不同），图标占了不同宽度后面的文字自然差 1.25px。 把两侧图标都套进同一个定宽盒并居中，文字起点就与字形宽窄无关了。 取 19px ≈ 🪙 的实测宽度，这样参照那侧的标题只位移 0.28px（看不出来）， 换来的是两边严格对齐、且以后换 emoji 也不跑偏。 */ --card-head-ico-box:19px; --bg:#f3f8fb; --card:#ffffff; --card-2:#f7f9fd; --border:#eef1f7; --border-strong:#e0e6f0; --border-stronger:#c9d2e0; --card-grad:var(--card-grad2); --fg:#1e2433; --muted:#66708a; --muted-2:#98a2ba; --emerald:#4c6b9e; --emerald-d:#3a5480; --emerald-l:#5677ac; /* 压在品牌色（--emerald 渐变）上的前景色 + 品牌色 rgb 分量。 默认是浅底浅色主色的组合 → 白字没问题（#fff on #4c6b9e ≈ 5.5:1）。 ⚠ pine 的 --emerald 是荧光黄绿，白字会失效，必须覆盖这两个（见 .btn-primary）。 */ --on-emerald:#fff; --em-rgb:76,107,158; /* 正文强调色的提亮版（深底用得到；浅底一并给全，避免跨主题继承） */ --em-text-hi:#3a5480; --em-text-hi-d:#2f4668; /* 「低于全省」的灰线专用色：三通道接近的纯灰，不随蓝紫调主题偏移。 用户明确要求"灰色的横线"，所以不能复用 --muted-2（#98a2ba 偏蓝紫）。 */ --sw-strike:#919191; --nav-idle:#3a5480; --tb-icon:#3A4658; --nav-active:#eef3f9; --card-grad2:linear-gradient(155deg,#ffffff 0%,#f3f8fb 38%,#d9ecf5 80%,#c9e3f0 100%); --doc-tint:#c9e3f0; --doc-tint-base:#ffffff; --doc-tint-on:1; --rose:#f0617e; --violet:#8f7ae0; --sky:#3aa8e8; --amber:#e6a23c; --cyan:#2ab7c9; --teal:#22b49e; /* 支出专用的正红（用户 2026-09-19：「支出金额用红色」）。 为什么不复用 --rose：--rose #f0617e 偏粉，用户明确要「红色」。 #e8354f 与 --rose 同色相族（约 350°），只是饱和度更高、明度更低， 放在浅底上依然是清晰的「红」而不是「粉」。暗色模式另给更亮的 #ff6b81。 */ --expense-red:#e8354f; /* 案件统计卡：纯蓝底「蓝色版指标卡」（用户 2026-09-16 指定）。 参照顶部紫色指标卡 .kpi-merged 的实现逻辑 —— 同样是「纯卡片底 + :before 彩色渐变叠加」， 只是把紫换成蓝（--violet #8f7ae0 → --sky #3aa8e8）。 关键差别：.st-card 不用 --card-grad2（那是「上白下蓝」的通用卡片渐变， 用户明确说「卡片不做上白下蓝」），改用 --card 纯色打底。 --st-tint-a/b 是叠加层渐变的起止色，浅色/暗色各一套（见 body.theme-dim）。 浓度演进（用户三次反馈，别再调淡回去）： ① .13/.045 —— 太淡，用户反馈「这个卡片蓝色太淡了点」； ② .22/.10 —— 明显加深，在 #ffffff 上合成后约 #dbe9fa 量级； ③ .30/.16（现在）—— 用户又反馈「案件统计 这个卡片 颜色浅了」。 这个方向被反悔过两次，所以把量也记下来：合成后约 #cddff9， 比 ① 深约 40%、比 ② 深约 15%，与页面底色 --bg(#f3f8fb) 拉开到 肉眼一眼能分辨的程度，仍不抢内容（标题 15px/800、数字 800 的 对比度远高于底色与背景之差）。 再往上走要警惕：a 值到 .40 以上时蓝色会开始盖过卡片里的分隔线 （--border 是 #e2e8f0，与深蓝底的明度差被压缩），那时得连边框一起调。 注意这是**半透明叠加**，实际观感随底层 --card 变化： 浅色底是 #ffffff，暗色底是 #182234，所以暗色单独给了更高透明度。 */ --st-tint-a:rgba(58,168,232,.30); --st-tint-b:rgba(42,140,214,.16); /* 通用卡片蓝：把案件统计那套蓝底推广到其它卡片 （用户 2026-09-17：「今日元气满满 / 今日待办 / 近期事项 / 案件类型分布 / 案件卡片 / 甘特图 / 通讯管理 / 日历 / 日程列表 / 文档中心第一个卡片 这些卡片颜色深浅参照案件统计卡片的颜色」）。 为什么另开一套变量而不是直接复用 --st-tint-*：**改一处能一次调全**。 用户的原话是「颜色深浅**参照**案件统计卡片的颜色」，所以取值上就是**同一个值**： 浅色 .30/.16、暗色 .44/.24，与 --st-tint-* 严格相等。 曾按「大卡/中卡/小卡」分过三档（担心列表页成排的卡片会整屏发蓝）， 实测各档合成色与案件统计差 0.03~0.07 明度，肉眼能看出"不是同一个蓝"， 与"参照"的要求不符 —— 所以三档全部拉平到同一个值。 保留三个变量名是为了**将来**需要微调时有抓手，现在三者相等： --card-tint-* （大卡：案件列表、甘特图、日历、文档类型卡） --card-tint-*-sm （小卡：今日待办/近期事项/案件类型分布、日程条目） --card-tint-*-mid （条目：案件卡片、客户行、文档条目） ⚠ 改其中任何一个都要考虑另外两个是否同步，否则又会出现"深浅不一"。 与 --st-tint-* 一样，浅色/暗色各一套，改一个必须同步改另一个。 */ --card-tint-a:rgba(58,168,232,.30); --card-tint-b:rgba(42,140,214,.16); --card-tint-a-sm:rgba(58,168,232,.30); --card-tint-b-sm:rgba(42,140,214,.16); /* 中档：成排出现的条目（案件卡片、客户行、文档条目）。现值与上面两档相等。 */ --card-tint-a-mid:rgba(58,168,232,.30); --card-tint-b-mid:rgba(42,140,214,.16); --shadow:0 1px 2px rgba(30,36,51,.05),0 10px 26px -10px rgba(30,36,51,.10); --shadow-soft:0 1px 2px rgba(30,36,51,.04),0 6px 18px -8px rgba(30,36,51,.07); --radius:20px; --radius-sm:12px; --nav-bg:#171f31; --cal-sel:#93aed2; /* 输入框统一底色/描边：此前用 --card-2(#f7f9fd) 与页面底色 --bg(#f3f8fb) 几乎同色， 搜索框等看起来像「没有框」，这里改为白底 + 更深的描边，从底色中明确分离。 */ --field-bg:#ffffff; --field-bd-hover:#b9c6d8; /* 条件展开的二级输入框（如自定义案件类型）：靠描边与强调线突出，底色保持与普通输入框一致 */ --type-custom-bd:#9fb4d4; --type-custom-accent:#4c6b9e; --type-custom-ring:rgba(76,107,158,.16); --nav-hl:linear-gradient(132deg,rgba(140,180,224,.65) 0%,rgba(160,195,235,.3) 26%,rgba(160,195,235,.12) 44%,rgba(160,195,235,0) 62%); --nav-ring:rgba(150,188,228,.9); /* ---------- 顶栏天光 / 底栏玻璃 / kpi-home 卡底（浅底默认 = light） ---------- 2026-09-21 变量化：这三处此前是**写死的渐变**，每个新主题都得复制一整条 `body.theme-X .topbar{...}` 覆盖（上一版 4 主题就已有 12 条这种特例）。 扩到 6 主题会变成 30+ 条重复，且改一处结构要在 6 个地方同步 —— 必然漏改。 现统一提成变量，CSS 里只留**一条**通用规则，主题块只给颜色值。 ⚠ 下面 --top-dim / --top-fade 是「一个值铺满多段」的写法，原因见 .topbar 处注释。 */ --top-dim:rgba(255,255,255,0); --top-glow-1:#a9d5e8; --top-glow-2:#aed8ea; --top-glow-3:#b6dcec; --top-glow-4:#c2e2ef; --top-glow-5:#d0e8f2; --top-glow-6:#ddeef6; --top-glow-7:#e9f4f9; --top-glow-8:#f3f8fb; --top-fade:rgba(243,248,251,0); --nav-glass:linear-gradient(180deg,rgba(214,240,247,.21),rgba(178,214,235,.11)); --nav-bd:rgba(84,136,166,.27); --nav-shadow:0 8px 22px -14px rgba(52,96,124,.50); --nav-ind:linear-gradient(135deg,#9fd0e8,#6fc0dd); --kpi-home-1:#cfe6f4; --kpi-home-2:#e2f0f8; --kpi-home-3:#f7fbfd; --wel-bg:linear-gradient(180deg,var(--kpi-home-1) 0%,var(--kpi-home-2) 46%,var(--kpi-home-3) 100%); /* 工伤待遇计算器顶部条 / LPR 卡： ⚠⚠⚠ 2026-09-21 第九版（用户：「把工伤待遇计算器的颜色 还有LPR 卡片的颜色 都修改一下 按照问候语卡片来。一定万参照！」） —— 不再自己调色，改为**与问候卡完全同源**：三处共用同一组变量拼出同一公式： 卡底 linear-gradient(180deg, --kpi-home-1 0%, --kpi-home-2 46%, --kpi-home-3 100%) 叠加层 淡色系 = 纵向 rgba(--tint-rgb,.06/.03/0) + 135deg(--card-tint-a,--card-tint-b) 深色系 = 纵向 rgba(--kpi-dark-rgb,.30/.14/0) ⚠ 停靠点统一为 **0 / 46 / 100**（原 --wi-top 与 --lpr 都是 55%）， 与问候卡/第2张卡的 46% 对齐，否则「同公式」不严格成立。 ⚠ 变量复用策略：--wi-top 直接内联整条公式（它只被 .wi-top 用）； LPR 拆成 --lpr-a/m/b（卡底三色）+ --lpr-overlay（叠加层）， 由 .calc-lpr-card 用 `background: var(--lpr-overlay), <卡底>` 合成 —— 与 .welcome 的「卡底 + ::before 叠加」渲染结果等价，但不需要新增伪元素 （少一个可能失效的环节，见第八版那条被提前闭合的注释教训）。 ⚠ 文字色 --wi-top-fg / --lpr-fg 保持不变（各主题品牌深档）； 对比度已重算：淡色系 4.55~6.49:1、深色系 9.16~13.96:1，全部达标。 */ --wi-top:linear-gradient(180deg,rgba(var(--tint-rgb),.06) 0%,rgba(var(--tint-rgb),.03) 46%,rgba(var(--tint-rgb),0) 100%),linear-gradient(135deg,var(--card-tint-a),var(--card-tint-b)),linear-gradient(180deg,var(--kpi-home-1) 0%,var(--kpi-home-2) 46%,var(--kpi-home-3) 100%); --wi-top-fg:#3a5480; --wi-top-ov:rgba(0,0,0,.06); --lpr-a:var(--kpi-home-1); --lpr-m:var(--kpi-home-2); --lpr-b:var(--kpi-home-3); --lpr-overlay:linear-gradient(180deg,rgba(var(--tint-rgb),.06) 0%,rgba(var(--tint-rgb),.03) 46%,rgba(var(--tint-rgb),0) 100%),linear-gradient(135deg,var(--card-tint-a),var(--card-tint-b)); --lpr-fg:#3a5480; /* 卡片叠加层基色 = --card-tint-a 的同色三元组（见 --tint-rgb 说明） */ --tint-rgb:58,168,232; --kpi-tint-rgb:58,168,232; --kpi-tint-rgb-d:42,140,214; --kpi-tint-rgb:58,168,232; --kpi-tint-rgb-d:42,140,214; } /* ============================================================ 深色模式（dark）—— 原有深蓝底主题，本轮**保持原样不变** ------------------------------------------------------------ 它与 ink/pine 共享 61 条 .theme-dim 深底补偿规则，这里只覆盖颜色变量。 ⚠ --emerald 三兄弟**刻意不覆盖**：dark 是蓝调主题，:root 的 #4c6b9e 就是它的品牌色（浅底用 #4c6b9e 深值、深底文字用途由 body.theme-dim .em-text{color:#7fb8e8} 接管）。这是 dark 与 其它新主题的**关键差异** —— 新主题必须覆盖，dark 不能。 */ body.dark::before,html.dark::before{background:var(--bg)} body.dark,html.dark{ --bg:#0f1524; --card:#182234; --card-2:#141d2e; --border:#22304a; --border-strong:#2e3f5e; --border-stronger:#43567c; --card-grad:var(--card-grad2); --fg:#e6ebf5; --muted:#94a3bd; --muted-2:#5f6c88; --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 28px -12px rgba(0,0,0,.5); /* 暗色下灰线要亮一些才看得见（亮色的 #8b93a3 压在深底上偏暗） */ --sw-strike:#a3a3a3; --shadow-soft:0 1px 2px rgba(0,0,0,.35),0 6px 18px -10px rgba(0,0,0,.4); --nav-bg:#0d1420; --cal-sel:#456692; --wel-bg:linear-gradient(180deg,var(--kpi-home-1) 0%,var(--kpi-home-2) 46%,var(--kpi-home-3) 100%); /* 费用计算首页 LPR 卡：同色系三停渐变（与改动前同值，视觉不变） */ --lpr-a:var(--kpi-home-1); --lpr-m:var(--kpi-home-2); --lpr-b:var(--kpi-home-3); --lpr-overlay:linear-gradient(180deg,rgba(var(--kpi-dark-rgb),.30) 0%,rgba(var(--kpi-dark-rgb),.14) 34%,rgba(var(--kpi-dark-rgb),0) 100%); --lpr-fg:#fff; /* --wi-top / --lpr-*：与问候卡同源公式（完整说明见 :root 处第九版注释） */ --wi-top:linear-gradient(180deg,rgba(var(--kpi-dark-rgb),.30) 0%,rgba(var(--kpi-dark-rgb),.14) 34%,rgba(var(--kpi-dark-rgb),0) 100%),linear-gradient(180deg,var(--kpi-home-1) 0%,var(--kpi-home-2) 46%,var(--kpi-home-3) 100%); --wi-top-fg:#e6ebf5; --wi-top-ov:rgba(255,255,255,.14); --nav-idle:#eef3f9; --tb-icon:#B4C0D2; --nav-active:#4a5567; --nav-hl:linear-gradient(132deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.42) 24%,rgba(255,255,255,.16) 42%,rgba(255,255,255,0) 60%); --nav-ring:rgba(255,255,255,.9); /* 暗色：输入框比卡片底略亮，描边更清楚，避免与背景糊在一起 */ --field-bg:#1c2740; --field-bd-hover:#43567a; --type-custom-bd:#5a7099; --type-custom-accent:#8fb0dd; --type-custom-ring:rgba(143,176,221,.18); --card-grad2:linear-gradient(155deg,#19233a 0%,#1a2c44 45%,#15374f 100%); /* 暗色模式：文档卡片不跟随浅色渐变，统一用卡片底色 */ --doc-tint:#182234; --doc-tint-base:#182234; --doc-tint-on:0; /* 案件统计卡蓝色叠加层（暗色）：透明度比浅色更高， 因为深色底 --card(#182234) 上同样的 alpha 观感会弱很多。 浅色 .30/.16 → 暗色 .44/.24（浅色那边每次加深，这里同步 +.10/+.08 保持比例）。 ⚠ 两套值要一起改 —— 只改浅色不改暗色，暗色下就比浅色淡一档。 */ --st-tint-a:rgba(58,168,232,.44); --st-tint-b:rgba(42,140,214,.24); /* 通用卡片蓝（暗色）：与 --st-tint-* 同步加深，比例保持一致。 深底 --card(#182234) 上同样的 alpha 观感弱很多，所以暗色的值一律更高。 */ --card-tint-a:rgba(58,168,232,.44); --card-tint-b:rgba(42,140,214,.24); --card-tint-a-sm:rgba(58,168,232,.44); --card-tint-b-sm:rgba(42,140,214,.24); --card-tint-a-mid:rgba(58,168,232,.44); --card-tint-b-mid:rgba(42,140,214,.24); /* 正文强调色的提亮版（dark 不覆盖 --emerald，但文字用途需提亮） */ --em-text-hi:#7fb8e8; --em-text-hi-d:#6a9fe0; /* 顶栏天光 / 底栏玻璃 / kpi-home 卡底（深底默认 = dark，变量化见 :root 处说明） */ --top-dim:rgba(6,14,24,.72); --top-glow-1:#2c5f7d; --top-glow-2:#326888; --top-glow-3:#3a7291; --top-glow-4:#457f9c; --top-glow-5:#548da8; --top-glow-6:#6699b2; --top-glow-7:#7aa6bd; --top-glow-8:#8fb2c7; --top-fade:rgba(15,21,36,0); --nav-glass:rgba(26,34,46,.23); --nav-bd:rgba(255,255,255,.72); --nav-shadow:0 8px 22px -14px rgba(0,0,0,.50); --nav-ind:linear-gradient(135deg,#a8cfe8,#6fa8cc); --kpi-home-1:#16294a; --kpi-home-2:#1d3355; --kpi-home-3:#24405f; --tint-rgb:58,168,232; /* 深底压暗层的「近黑」基色：dark=近黑蓝，要与蓝色卡底同族 */ --kpi-dark-rgb:0,4,12; } /* ============================================================ 主题变量块 · 浅底二（苔原 moss / 暮云 dusk） ------------------------------------------------------------ 2026-09-21 重构：原「暖阳模式（米杏+琥珀）」「墨玉模式（深青绿+亮青）」 经用户反馈「不好看」，连同新增 4 个一起重做，共 6 主题： 浅底：light(原有) / moss 苔原 / dusk 暮云 深底：dark(原有) / ink 玄墨 / pine 松烟 风格依据（用户选：莫兰迪低饱和 + 自然绿系/森系）： · 莫兰迪色 = 所有颜色都掺了灰度，饱和度压低、明度靠中间， 彼此有共同基调，所以放在一起天然和谐（这也是它「高级」的来源）。 参考取色：灰豆绿 #a5b4a6 / 灰橄榄 #969687 / 深灰紫 #6D6875 / 淡灰紫 #d6c6d6 / 雾霾蓝 #96a7c7。（来源：莫兰迪色卡） · 森系取色参考 Fernwood 与 Rainforest Canopy 两套自然色板： 森林阴影 #1A3A2A / 深蕨 #2D5A3D / 苔藓 #7FAF7A / 地衣 #C2D9B8 / 晨光 #E8F0E4。这两套是**成体系**的（shadow → mid → light 六级递进）， 比单点取色更适合做主题 —— 底色、卡片、边框可以直接落在不同级上。 ⚠⚠ 每个主题都必须显式覆盖 --emerald 三兄弟 ！ :root 里 --emerald 是蓝调（#4c6b9e），而深底那套（body.dark）**从未覆盖它** —— 它驱动着全站最显眼的品牌色：.btn-primary 渐变、.brand .logo、 .mobile-nav button 默认色、.set-avatar 描边、:focus-visible 描边、 .pg.on 分页高亮 ……（styles.css 共 39 处 var(--emerald)）。 不覆盖的话新主题的按钮/图标/导航仍是蓝的，主题名不副实。 ⚠⚠ 凡是把 --emerald 换成**浅亮色**的主题，还必须同时给 --on-emerald （压在品牌色上的前景色）。 原因见 .btn-primary 的注释：品牌色亮到一定程度后，写死的白字会 对比度不足（例如浅亮绿 #C6F24E 上白字仅 1.30:1，几乎看不见）。 ⚠⚠ 深底主题（dark/ink/plum）还必须覆盖语义色（--rose/--violet/--sky/--amber/ --cyan/--teal/--expense-red）：:root 那套是给浅底调的， 压在深底上会发闷（实测 --expense-red #e8354f 在 ink 底上仅 4.36:1）。 注：--emerald 本身在深底上偏低（如 #4c6b9e 压在 #182234 上 2.96:1）， 但文字用途早已由 body.theme-dim .em-text{color:#7fb8e8}（7.53:1）接管， --emerald 在深底只承担「填充」，故不受影响。 ⚠ 只覆盖**颜色**变量，公共布局变量（--radius / --card-head-pad-l / --card-head-ico-box）一律不动 —— dark 也只覆盖颜色，保持一致。 ⚠ 顶栏天光 / 底栏玻璃 / kpi-home 卡底现在都是**变量驱动**（见后文）， 所以每个主题要把 --top-* / --nav-glass* / --kpi-home-* 一整套给全， 否则会继承上一主题的色相（这就是上一版「墨玉顶栏是深蓝天光」的病根）。 */ /* ---------- 苔原模式（moss）—— 灰豆绿浅底 + 苔藓绿点缀 ---------- */ body.moss,html.moss{ --bg:#EFF3EA; --card:#FBFCF8; --card-2:#F4F7EF; --border:#E2E9D9; --border-strong:#D2DCC5; --border-stronger:#B9C7A8; --card-grad:var(--card-grad2); --card-grad2:linear-gradient(155deg,#FBFCF8 0%,#F4F7EF 38%,#E4EBD8 80%,#D6E2C6 100%); --fg:#222B1E; --muted:#616B58; --muted-2:#8A9583; --sw-strike:#949494; /* 侧栏保持深色（全站侧栏/底栏本就是「深底 + 浅字」， 浅底主题不该把侧栏也变浅 —— 会与 .brand .t1 的 #fff 写死浅字打架）。 */ --nav-bg:#232B1E; --nav-idle:#CBD4C2; --tb-icon:#3F4A36; --nav-active:#E8EEDD; --nav-hl:linear-gradient(132deg,rgba(190,212,160,.65) 0%,rgba(190,212,160,.30) 26%,rgba(190,212,160,.12) 44%,rgba(190,212,160,0) 62%); --nav-ring:rgba(184,208,152,.9); --cal-sel:#A5BA8C; --field-bg:#FBFCF8; --field-bd-hover:#B9C7A8; --type-custom-bd:#A8B894; --type-custom-accent:#5E7A4A; --type-custom-ring:rgba(94,122,74,.16); /* 品牌主色：蓝 → 苔藓绿（莫兰迪灰豆绿压深后仍保有绿色相） */ --emerald:#5E7A4A; --emerald-d:#3D5230; --emerald-l:#5A7548; --on-emerald:#fff; --em-rgb:94,122,74; /* 正文强调色的提亮版（深底用得到；浅底一并给全，避免跨主题继承） */ --em-text-hi:#4A6239; --em-text-hi-d:#3D5230; --doc-tint:#D6E2C6; --doc-tint-base:#FBFCF8; --doc-tint-on:1; /* 卡片叠加层：蓝 → 苔藓绿同族，避免「绿底飘蓝」 */ --st-tint-a:rgba(122,155,98,.30); --st-tint-b:rgba(104,136,82,.16); --card-tint-a:rgba(122,155,98,.30); --card-tint-b:rgba(104,136,82,.16); --card-tint-a-sm:rgba(122,155,98,.30); --card-tint-b-sm:rgba(104,136,82,.16); --card-tint-a-mid:rgba(122,155,98,.30); --card-tint-b-mid:rgba(104,136,82,.16); --shadow:0 1px 2px rgba(40,52,32,.06),0 10px 26px -10px rgba(40,52,32,.12); --shadow-soft:0 1px 2px rgba(40,52,32,.05),0 6px 18px -8px rgba(40,52,32,.09); /* 顶栏天光（浅底：从稍深的绿灰渐变到 --bg，8 个 stop 与原版同结构） */ --top-dim:rgba(255,255,255,0); --top-glow-1:#E3EAD6; --top-glow-2:#E6ECD9; --top-glow-3:#E9EEDE; --top-glow-4:#EBF0E2; --top-glow-5:#EDF1E4; --top-glow-6:#EEF2E6; --top-glow-7:#EFF2E8; --top-glow-8:#EFF3EA; --top-fade:rgba(239,243,234,0); /* 底栏玻璃 */ --nav-glass:linear-gradient(180deg,rgba(228,238,214,.21),rgba(214,228,196,.11)); --nav-bd:rgba(132,156,102,.27); --nav-shadow:0 8px 22px -14px rgba(90,116,66,.50); --nav-ind:linear-gradient(135deg,#A9C48E,#7E9C64); /* kpi-home 卡底三段 */ --kpi-home-1:#DCE7CB; --kpi-home-2:#EEF3E4; --kpi-home-3:#F8FAF2; --wel-bg:linear-gradient(180deg,var(--kpi-home-1) 0%,var(--kpi-home-2) 46%,var(--kpi-home-3) 100%); /* --wi-top / --lpr-*：与问候卡同源公式（完整说明见 :root 处第九版注释） */ --wi-top:linear-gradient(180deg,rgba(var(--tint-rgb),.06) 0%,rgba(var(--tint-rgb),.03) 46%,rgba(var(--tint-rgb),0) 100%),linear-gradient(135deg,var(--card-tint-a),var(--card-tint-b)),linear-gradient(180deg,var(--kpi-home-1) 0%,var(--kpi-home-2) 46%,var(--kpi-home-3) 100%); --wi-top-fg:#3D5230; --wi-top-ov:rgba(0,0,0,.06); --lpr-a:var(--kpi-home-1); --lpr-m:var(--kpi-home-2); --lpr-b:var(--kpi-home-3); --lpr-overlay:linear-gradient(180deg,rgba(var(--tint-rgb),.06) 0%,rgba(var(--tint-rgb),.03) 46%,rgba(var(--tint-rgb),0) 100%),linear-gradient(135deg,var(--card-tint-a),var(--card-tint-b)); --lpr-fg:#3D5230; --tint-rgb:122,155,98; --kpi-tint-rgb:122,155,98; --kpi-tint-rgb-d:104,136,82; } /* ---------- 暮云模式（dusk）—— 淡灰紫浅底 + 灰紫点缀 ---------- */ body.dusk,html.dusk{ --bg:#F2EEF4; --card:#FCFAFD; --card-2:#F7F3F9; --border:#E9E2EE; --border-strong:#DBD1E3; --border-stronger:#C3B5CF; --card-grad:var(--card-grad2); --card-grad2:linear-gradient(155deg,#FCFAFD 0%,#F7F3F9 38%,#EBE3F0 80%,#DED3E7 100%); --fg:#26212E; --muted:#675F73; --muted-2:#918AA0; --sw-strike:#949494; --nav-bg:#2A2431; --nav-idle:#D3CCDB; --tb-icon:#453C50; --nav-active:#EFEAF3; --nav-hl:linear-gradient(132deg,rgba(200,180,220,.65) 0%,rgba(200,180,220,.30) 26%,rgba(200,180,220,.12) 44%,rgba(200,180,220,0) 62%); --nav-ring:rgba(196,176,218,.9); --cal-sel:#B8A5CB; --field-bg:#FCFAFD; --field-bd-hover:#C3B5CF; --type-custom-bd:#B4A4C4; --type-custom-accent:#66587A; --type-custom-ring:rgba(102,88,122,.16); /* 品牌主色：蓝 → 灰紫（莫兰迪「深灰紫」压深，保住紫调又不艳） */ --emerald:#66587A; --emerald-d:#524668; --emerald-l:#7C6B8E; --on-emerald:#FFFFFF; --em-rgb:102,88,122; /* 正文强调色的提亮版（深底用得到；浅底一并给全，避免跨主题继承） */ --em-text-hi:#524668; --em-text-hi-d:#453A58; --doc-tint:#DED3E7; --doc-tint-base:#FCFAFD; --doc-tint-on:1; --st-tint-a:rgba(140,120,160,.30); --st-tint-b:rgba(122,104,142,.16); --card-tint-a:rgba(140,120,160,.30); --card-tint-b:rgba(122,104,142,.16); --card-tint-a-sm:rgba(140,120,160,.30); --card-tint-b-sm:rgba(122,104,142,.16); --card-tint-a-mid:rgba(140,120,160,.30); --card-tint-b-mid:rgba(122,104,142,.16); --shadow:0 1px 2px rgba(44,36,52,.06),0 10px 26px -10px rgba(44,36,52,.12); --shadow-soft:0 1px 2px rgba(44,36,52,.05),0 6px 18px -8px rgba(44,36,52,.09); --top-dim:rgba(255,255,255,0); --top-glow-1:#E7DFEE; --top-glow-2:#E9E2F0; --top-glow-3:#ECE5F1; --top-glow-4:#EEE8F3; --top-glow-5:#F0EAF4; --top-glow-6:#F1ECF5; --top-glow-7:#F2EDF5; --top-glow-8:#F2EEF4; --top-fade:rgba(242,238,244,0); --nav-glass:linear-gradient(180deg,rgba(240,232,246,.21),rgba(226,214,236,.11)); --nav-bd:rgba(158,130,176,.27); --nav-shadow:0 8px 22px -14px rgba(112,88,130,.50); --nav-ind:linear-gradient(135deg,#C2AED4,#9A85AE); --kpi-home-1:#E2D6EA; --kpi-home-2:#F2ECF6; --kpi-home-3:#FBF9FC; --wel-bg:linear-gradient(180deg,var(--kpi-home-1) 0%,var(--kpi-home-2) 46%,var(--kpi-home-3) 100%); /* --wi-top / --lpr-*：与问候卡同源公式（完整说明见 :root 处第九版注释） */ --wi-top:linear-gradient(180deg,rgba(var(--tint-rgb),.06) 0%,rgba(var(--tint-rgb),.03) 46%,rgba(var(--tint-rgb),0) 100%),linear-gradient(135deg,var(--card-tint-a),var(--card-tint-b)),linear-gradient(180deg,var(--kpi-home-1) 0%,var(--kpi-home-2) 46%,var(--kpi-home-3) 100%); --wi-top-fg:#524668; --wi-top-ov:rgba(0,0,0,.06); --lpr-a:var(--kpi-home-1); --lpr-m:var(--kpi-home-2); --lpr-b:var(--kpi-home-3); --lpr-overlay:linear-gradient(180deg,rgba(var(--tint-rgb),.06) 0%,rgba(var(--tint-rgb),.03) 46%,rgba(var(--tint-rgb),0) 100%),linear-gradient(135deg,var(--card-tint-a),var(--card-tint-b)); --lpr-fg:#524668; --tint-rgb:140,120,160; --kpi-tint-rgb:140,120,160; --kpi-tint-rgb-d:122,104,142; } /* ---------- 暖沙模式（sand）—— 米杏暖白底 + 陶土棕点缀 ---------- 2026-09-21 用户「再增加三个主题」新增。 定位：补齐 6 主题缺失的**暖色相** —— 浅底三款（light 蓝 / moss 绿 / dusk 紫） 全是冷色或中性，没有一个「暖光」档。 取色依据：暖沙色板（沙丘 #F6F1E8 / 陶土 #9A5B33 / 亚麻 #EDE4D5）。 注意：陶土棕压深到 #7A4525 才够承载白字（6.45 / 7.64:1）； 最初的 #C67B4E 白字仅 3.4:1，不达标。 */ body.sand,html.sand{ --bg:#F6F1E8; --card:#FFFDF9; --card-2:#FBF6EE; --border:#EDE4D5; --border-strong:#DFD2BC; --border-stronger:#C6B49A; --card-grad:var(--card-grad2); --card-grad2:linear-gradient(155deg,#FFFDF9 0%,#FBF6EE 38%,#F2E9DA 80%,#E8DCC7 100%); --fg:#2A2016; --muted:#6B5B4A; --muted-2:#948370; --sw-strike:#949494; --nav-bg:#6B4526; --nav-idle:#E0D2BE; --tb-icon:#4A3A28; --nav-active:#F7F1E6; --nav-hl:linear-gradient(132deg,rgba(220,196,160,.65) 0%,rgba(220,196,160,.30) 26%,rgba(220,196,160,.12) 44%,rgba(220,196,160,0) 62%); --nav-ring:rgba(214,188,150,.9); --cal-sel:#C6A97E; --field-bg:#FFFDF9; --field-bd-hover:#C6B49A; --type-custom-bd:#C0AB8C; --type-custom-accent:#9A5B33; --type-custom-ring:rgba(154,91,51,.16); /* 品牌主色：蓝 → 陶土棕 */ --emerald:#9A5B33; --emerald-d:#7A4525; --emerald-l:#8A4E2A; --on-emerald:#FFFDF9; --em-rgb:154,91,51; --em-text-hi:#7A4525; --em-text-hi-d:#63371C; --doc-tint:#E8DCC7; --doc-tint-base:#FFFDF9; --doc-tint-on:1; --st-tint-a:rgba(178,132,88,.30); --st-tint-b:rgba(150,110,72,.16); --card-tint-a:rgba(178,132,88,.30); --card-tint-b:rgba(150,110,72,.16); --card-tint-a-sm:rgba(178,132,88,.30); --card-tint-b-sm:rgba(150,110,72,.16); --card-tint-a-mid:rgba(178,132,88,.30); --card-tint-b-mid:rgba(150,110,72,.16); --shadow:0 1px 2px rgba(72,52,32,.06),0 10px 26px -10px rgba(72,52,32,.12); --shadow-soft:0 1px 2px rgba(72,52,32,.05),0 6px 18px -8px rgba(72,52,32,.09); --top-dim:rgba(255,255,255,0); --top-glow-1:#E8DCC8; --top-glow-2:#EADFD0; --top-glow-3:#EDE3D6; --top-glow-4:#EFE7DC; --top-glow-5:#F1EAE1; --top-glow-6:#F3EDE5; --top-glow-7:#F4EFE7; --top-glow-8:#F6F1E8; --top-fade:rgba(246,241,232,0); --nav-glass:linear-gradient(180deg,rgba(246,236,220,.21),rgba(236,222,200,.11)); --nav-bd:rgba(160,120,80,.27); --nav-shadow:0 8px 22px -14px rgba(120,86,52,.50); --nav-ind:linear-gradient(135deg,#D9A87A,#B8825A); --kpi-home-1:#EFE3CF; --kpi-home-2:#F8F2E7; --kpi-home-3:#FDFBF6; --wel-bg:linear-gradient(180deg,var(--kpi-home-1) 0%,var(--kpi-home-2) 46%,var(--kpi-home-3) 100%); /* --wi-top / --lpr-*：与问候卡同源公式（完整说明见 :root 处第九版注释） */ --wi-top:linear-gradient(180deg,rgba(var(--tint-rgb),.06) 0%,rgba(var(--tint-rgb),.03) 46%,rgba(var(--tint-rgb),0) 100%),linear-gradient(135deg,var(--card-tint-a),var(--card-tint-b)),linear-gradient(180deg,var(--kpi-home-1) 0%,var(--kpi-home-2) 46%,var(--kpi-home-3) 100%); --wi-top-fg:#7A4525; --wi-top-ov:rgba(0,0,0,.06); --lpr-a:var(--kpi-home-1); --lpr-m:var(--kpi-home-2); --lpr-b:var(--kpi-home-3); --lpr-overlay:linear-gradient(180deg,rgba(var(--tint-rgb),.06) 0%,rgba(var(--tint-rgb),.03) 46%,rgba(var(--tint-rgb),0) 100%),linear-gradient(135deg,var(--card-tint-a),var(--card-tint-b)); --lpr-fg:#7A4525; --tint-rgb:178,132,88; --kpi-tint-rgb:178,132,88; --kpi-tint-rgb-d:150,110,72; } /* ============================================================ 主题变量块 · 深底二（玄墨 ink / 绛紫 plum） ------------------------------------------------------------ ⚠⚠ 变更沿革（2026-09-21，供后续维护对照）： 本区块标题原为「玄墨 ink / 松烟 pine」。**pine（松烟/暗黑荧光绿） 已于本轮整体移除**，名额先后由 mist（雾灰）与 sakura（樱花）顶替； 随后又新增 plum（绛紫）补齐暗紫档。 故正文注释里凡是提到 pine 的地方，都属于**当轮的历史叙述** （例如「现有深底三款 dark 深蓝 / ink 中性 / pine 荧光绿」）， 不代表 pine 仍在应用中 —— 当前实际生效的主题恒为下列 9 个： 浅底 6：light 淡色 / moss 苔原 / dusk 暮云 / sand 暖沙 / mist 雾灰 / sakura 樱花 深底 3：dark 深色 / ink 玄墨 / plum 绛紫 （唯一事实来源是 js/app-shell.js 的 THEMES 数组。） 均与 dark 共享 61 条 .theme-dim 深底补偿规则（挂 theme-dim 基调类）， 这里只覆盖颜色变量。 ⚠ 深底主题的卡片叠加层 alpha 一律取高值（.42）： 深底 --card 上同样的 alpha 观感弱很多，浅底用 .30、深底用 .42。 这是项目既有约定（见 :root 与 body.dark 的 --st-tint-* 注释）。 */ /* ---------- 玄墨模式（ink）—— 中性冷灰近黑底 + 银灰点缀 ---------- */ body.ink,html.ink{ --bg:#14161A; --card:#1E2126; --card-2:#191C21; --border:#282C33; --border-strong:#363B44; --border-stronger:#4C535E; --card-grad:var(--card-grad2); --card-grad2:linear-gradient(155deg,#1F2227 0%,#23272E 45%,#2A2F37 100%); --fg:#E6E8EC; --muted:#9BA3AE; --muted-2:#6E7681; --sw-strike:#A3A3A3; --nav-bg:#0E1013; --nav-idle:#E2E5EA; --tb-icon:#C3CAD4; --nav-active:#3A3F47; --nav-hl:linear-gradient(132deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.42) 24%,rgba(255,255,255,.16) 42%,rgba(255,255,255,0) 60%); --nav-ring:rgba(255,255,255,.9); --cal-sel:#AAB6C6; --wel-bg:linear-gradient(180deg,var(--kpi-home-1) 0%,var(--kpi-home-2) 46%,var(--kpi-home-3) 100%); /* 费用计算首页 LPR 卡：同色系三停渐变（与改动前同值，视觉不变） */ --lpr-a:var(--kpi-home-1); --lpr-m:var(--kpi-home-2); --lpr-b:var(--kpi-home-3); --lpr-overlay:linear-gradient(180deg,rgba(var(--kpi-dark-rgb),.30) 0%,rgba(var(--kpi-dark-rgb),.14) 34%,rgba(var(--kpi-dark-rgb),0) 100%); --lpr-fg:#AAB6C6; /* --wi-top / --lpr-*：与问候卡同源公式（完整说明见 :root 处第九版注释） */ --wi-top:linear-gradient(180deg,rgba(var(--kpi-dark-rgb),.30) 0%,rgba(var(--kpi-dark-rgb),.14) 34%,rgba(var(--kpi-dark-rgb),0) 100%),linear-gradient(180deg,var(--kpi-home-1) 0%,var(--kpi-home-2) 46%,var(--kpi-home-3) 100%); --wi-top-fg:#AAB6C6; --wi-top-ov:rgba(255,255,255,.14); --field-bg:#22262C; --field-bd-hover:#4C535E; --type-custom-bd:#5C6470; --type-custom-accent:#AAB6C6; --type-custom-ring:rgba(170,182,198,.18); /* 品牌主色：蓝 → 银灰（中性色，与冷灰底同一族，克制不抢内容） */ --emerald:#9AA6B8; --emerald-d:#7A8595; --emerald-l:#AAB6C6; --on-emerald:#15181C; --em-rgb:154,166,184; /* 正文强调色的提亮版（深底用得到；浅底一并给全，避免跨主题继承） */ --em-text-hi:#B8C2D0; --em-text-hi-d:#94A0B0; --doc-tint:#1E2126; --doc-tint-base:#1E2126; --doc-tint-on:0; /* 卡片叠加层：蓝 → 冷银灰。中性色叠加不会「飘色」，观感最干净。 */ --st-tint-a:rgba(150,163,182,.42); --st-tint-b:rgba(120,132,150,.24); --card-tint-a:rgba(150,163,182,.42); --card-tint-b:rgba(120,132,150,.24); --card-tint-a-sm:rgba(150,163,182,.42); --card-tint-b-sm:rgba(120,132,150,.24); --card-tint-a-mid:rgba(150,163,182,.42); --card-tint-b-mid:rgba(120,132,150,.24); --shadow:0 1px 2px rgba(0,0,0,.44),0 12px 28px -12px rgba(0,0,0,.54); --shadow-soft:0 1px 2px rgba(0,0,0,.39),0 6px 18px -10px rgba(0,0,0,.44); --top-dim:rgba(10,12,15,.72); --top-glow-1:#2B3038; --top-glow-2:#2E333C; --top-glow-3:#333841; --top-glow-4:#373D47; --top-glow-5:#3D434D; --top-glow-6:#454B56; --top-glow-7:#4E5561; --top-glow-8:#5A6270; --top-fade:rgba(20,22,26,0); --nav-glass:rgba(28,32,38,.23); --nav-bd:rgba(255,255,255,.72); --nav-shadow:0 8px 22px -14px rgba(0,0,0,.50); --nav-ind:linear-gradient(135deg,#AEB9C8,#7E8794); --kpi-home-1:#1A1D22; --kpi-home-2:#23272D; --kpi-home-3:#2D323A; --tint-rgb:150,163,182; --kpi-tint-rgb:150,163,182; --kpi-tint-rgb-d:120,132,150; /* 深底压暗层的近黑基色：ink 是中性冷灰，用近黑灰而非近黑蓝 */ --kpi-dark-rgb:10,12,15; /* 语义色提亮（:root 那套给浅底调的，深底发闷） */ --rose:#F07C93; --violet:#AE9BEC; --sky:#5FBCF5; --amber:#E8AC55; --cyan:#45D3E0; --teal:#57CFB4; --expense-red:#FF6B81; } /* ---------- 樱花模式（sakura）—— 淡粉白底 + 玫红点缀 ---------- 2026-09-21 用户「把松烟模式去掉，增加一个淡色模式，看看有没有合适的粉色系」。 pine（松烟/暗黑荧光绿）已整体移除，名额由 sakura 顶替。 定位：全站唯一的**暖粉**浅色主题。 与既有浅色主题的色相区分（H 值）： · light 淡色 —— 202° 冷蓝 · moss 苔原 —— 87° 灰绿 · dusk 暮云 —— 280° 灰紫 · sand 暖沙 —— 39° 暖黄 · mist 雾灰 —— 210° 中性灰（S 仅 0.077） · sakura 樱花 —— 342° **暖粉** ← 唯一落在红紫区间的 sakura 与 dusk 最近（dH=62°）也足够分开：dusk 是冷紫（280°）， sakura 是暖粉（342°），观感一个是"薰衣草紫"一个是"樱花粉"，不会混。 取色依据：樱花粉底 #FBF1F4 / 玫红 #B04A6E。 品牌色属深色调（白字 5.18:1）→ 配白字前景，与 sand/moss 同策略。 */ body.sakura,html.sakura{ --bg:#FBF1F4; --card:#FFFFFF; --card-2:#FDF6F8; --border:#F3E2E8; --border-strong:#E8D0DA; --border-stronger:#D4B0C0; --card-grad:var(--card-grad2); --card-grad2:linear-gradient(155deg,#FFFFFF 0%,#FDF5F7 38%,#F8E9EE 80%,#F2DCE4 100%); --fg:#33232A; --muted:#7A5C66; --muted-2:#927B84; --sw-strike:#949494; --nav-bg:#7A3550; --nav-idle:#EBD8DF; --tb-icon:#4A3038; --nav-active:#FDF6F8; --nav-hl:linear-gradient(132deg,rgba(232,196,212,.65) 0%,rgba(232,196,212,.30) 26%,rgba(232,196,212,.12) 44%,rgba(232,196,212,0) 62%); --nav-ring:rgba(226,188,204,.9); --cal-sel:#D8A8BD; --field-bg:#FFFFFF; --field-bd-hover:#D4B0C0; --type-custom-bd:#D0ADBB; --type-custom-accent:#B04A6E; --type-custom-ring:rgba(176,74,110,.16); /* 品牌主色：玫红 */ --emerald:#B04A6E; --emerald-d:#8E3A58; --emerald-l:#B85475; --on-emerald:#FFFFFF; --em-rgb:176,74,110; --em-text-hi:#8E3A58; --em-text-hi-d:#74304A; --doc-tint:#F2DCE4; --doc-tint-base:#FFFFFF; --doc-tint-on:1; --st-tint-a:rgba(196,130,158,.30); --st-tint-b:rgba(168,104,132,.16); --card-tint-a:rgba(196,130,158,.30); --card-tint-b:rgba(168,104,132,.16); --card-tint-a-sm:rgba(196,130,158,.30); --card-tint-b-sm:rgba(168,104,132,.16); --card-tint-a-mid:rgba(196,130,158,.30); --card-tint-b-mid:rgba(168,104,132,.16); --shadow:0 1px 2px rgba(70,40,52,.06),0 10px 26px -10px rgba(70,40,52,.12); --shadow-soft:0 1px 2px rgba(70,40,52,.05),0 6px 18px -8px rgba(70,40,52,.09); --top-dim:rgba(255,255,255,0); --top-glow-1:#F2DCE4; --top-glow-2:#F4E0E7; --top-glow-3:#F6E4EA; --top-glow-4:#F7E8ED; --top-glow-5:#F9ECF0; --top-glow-6:#FAEFF2; --top-glow-7:#FAF0F3; --top-glow-8:#FBF1F4; --top-fade:rgba(251,241,244,0); --nav-glass:linear-gradient(180deg,rgba(250,236,241,.21),rgba(244,224,232,.11)); --nav-bd:rgba(176,110,140,.27); --nav-shadow:0 8px 22px -14px rgba(122,53,80,.50); --nav-ind:linear-gradient(135deg,#D98CA8,#B8608A); --kpi-home-1:#F2DCE4; --kpi-home-2:#FAF0F3; --kpi-home-3:#FEFBFC; --wel-bg:linear-gradient(180deg,var(--kpi-home-1) 0%,var(--kpi-home-2) 46%,var(--kpi-home-3) 100%); /* --wi-top / --lpr-*：与问候卡同源公式（完整说明见 :root 处第九版注释） */ --wi-top:linear-gradient(180deg,rgba(var(--tint-rgb),.06) 0%,rgba(var(--tint-rgb),.03) 46%,rgba(var(--tint-rgb),0) 100%),linear-gradient(135deg,var(--card-tint-a),var(--card-tint-b)),linear-gradient(180deg,var(--kpi-home-1) 0%,var(--kpi-home-2) 46%,var(--kpi-home-3) 100%); --wi-top-fg:#8E3A58; --wi-top-ov:rgba(0,0,0,.06); --lpr-a:var(--kpi-home-1); --lpr-m:var(--kpi-home-2); --lpr-b:var(--kpi-home-3); --lpr-overlay:linear-gradient(180deg,rgba(var(--tint-rgb),.06) 0%,rgba(var(--tint-rgb),.03) 46%,rgba(var(--tint-rgb),0) 100%),linear-gradient(135deg,var(--card-tint-a),var(--card-tint-b)); --lpr-fg:#8E3A58; --tint-rgb:196,130,158; --kpi-tint-rgb:196,130,158; --kpi-tint-rgb-d:168,104,132; } /* ---------- 绛紫模式（plum）—— 暗紫罗兰底 + 兰紫点缀 ---------- 2026-09-21 用户「再增加三个主题」新增。 定位：暗紫档。现有深底三款（dark 深蓝 / ink 中性 / pine 荧光绿）没有紫色， dusk 虽是紫但为浅底，暗紫场景缺失。 取色依据：暗紫罗兰 #14101C / 兰紫 #C4A8F0。 品牌色 #C4A8F0 偏亮 → 必须配近黑前景 #1A1424（10.56 / 5.92:1）； 配白字只有 1.9:1，会完全看不清（详见 .btn-primary 注释）。 */ body.plum,html.plum{ --bg:#14101C; --card:#1E1929; --card-2:#191423; --border:#2B2438; --border-strong:#3A3149; --border-stronger:#524665; --card-grad:var(--card-grad2); --card-grad2:linear-gradient(155deg,#1E1929 0%,#231D31 45%,#2A2340 100%); --fg:#E9E4F2; --muted:#A79EBA; --muted-2:#7A718C; --sw-strike:#A3A3A3; --nav-bg:#0E0A14; --nav-idle:#E2DCEF; --tb-icon:#C9BFDC; --nav-active:#3B3150; --nav-hl:linear-gradient(132deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.42) 24%,rgba(255,255,255,.16) 42%,rgba(255,255,255,0) 60%); --nav-ring:rgba(255,255,255,.9); --cal-sel:#D4BCF8; --wel-bg:linear-gradient(180deg,var(--kpi-home-1) 0%,var(--kpi-home-2) 46%,var(--kpi-home-3) 100%); /* 费用计算首页 LPR 卡：同色系三停渐变（与改动前同值，视觉不变） */ --lpr-a:var(--kpi-home-1); --lpr-m:var(--kpi-home-2); --lpr-b:var(--kpi-home-3); --lpr-overlay:linear-gradient(180deg,rgba(var(--kpi-dark-rgb),.30) 0%,rgba(var(--kpi-dark-rgb),.14) 34%,rgba(var(--kpi-dark-rgb),0) 100%); --lpr-fg:#D4BCF8; /* --wi-top / --lpr-*：与问候卡同源公式（完整说明见 :root 处第九版注释） */ --wi-top:linear-gradient(180deg,rgba(var(--kpi-dark-rgb),.30) 0%,rgba(var(--kpi-dark-rgb),.14) 34%,rgba(var(--kpi-dark-rgb),0) 100%),linear-gradient(180deg,var(--kpi-home-1) 0%,var(--kpi-home-2) 46%,var(--kpi-home-3) 100%); --wi-top-fg:#D4BCF8; --wi-top-ov:rgba(255,255,255,.14); --field-bg:#231D31; --field-bd-hover:#524665; --type-custom-bd:#5F5375; --type-custom-accent:#C4A8F0; --type-custom-ring:rgba(196,168,240,.18); --emerald:#C4A8F0; --emerald-d:#A585D6; --emerald-l:#D4BCF8; --on-emerald:#1A1424; --em-rgb:196,168,240; --em-text-hi:#D4BCF8; --em-text-hi-d:#BCA2EE; --doc-tint:#1E1929; --doc-tint-base:#1E1929; --doc-tint-on:0; --st-tint-a:rgba(180,150,230,.42); --st-tint-b:rgba(140,115,190,.24); --card-tint-a:rgba(180,150,230,.42); --card-tint-b:rgba(140,115,190,.24); --card-tint-a-sm:rgba(180,150,230,.42); --card-tint-b-sm:rgba(140,115,190,.24); --card-tint-a-mid:rgba(180,150,230,.42); --card-tint-b-mid:rgba(140,115,190,.24); --shadow:0 1px 2px rgba(0,0,0,.48),0 12px 28px -12px rgba(0,0,0,.58); --shadow-soft:0 1px 2px rgba(0,0,0,.42),0 6px 18px -10px rgba(0,0,0,.48); --top-dim:rgba(9,6,14,.74); --top-glow-1:#231B33; --top-glow-2:#281F3A; --top-glow-3:#2E2441; --top-glow-4:#342949; --top-glow-5:#3B2F52; --top-glow-6:#44375D; --top-glow-7:#4E4069; --top-glow-8:#5A4A79; --top-fade:rgba(20,16,28,0); --nav-glass:rgba(26,20,36,.23); --nav-bd:rgba(255,255,255,.72); --nav-shadow:0 8px 22px -14px rgba(0,0,0,.55); --nav-ind:linear-gradient(135deg,#D4BCF8,#A585D6); --kpi-home-1:#1B1526; --kpi-home-2:#241D32; --kpi-home-3:#2E2540; --tint-rgb:180,150,230; --kpi-tint-rgb:180,150,230; --kpi-tint-rgb-d:140,115,190; --kpi-dark-rgb:9,6,14; --rose:#FF8FB0; --violet:#C4A8F0; --sky:#7AC0FF; --amber:#F5C169; --cyan:#5FE0E0; --teal:#63D6B0; --expense-red:#FF7A95; } /* ==================================================================== ink / plum 专属修复（2026-09-22） -------------------------------------------------------------------- 仅对玄墨（ink）与绛紫（plum）两套深底主题生效；其余 7 套主题的 LPR 卡 / 工伤顶栏卡逻辑一律不动。 背景：这两套深底主题里，LPR 卡文字原用近黑（#15181C / #1A1424） 落在暗渐变卡底上 → 完全不可读；工伤计算器顶栏卡（.wi-top）文字虽 为浅色，但整卡与深底页面同色、无边界 → 视觉上"融"进背景。 修法：文字改用各自主题点缀色（ink 银灰 / plum 兰紫，即 --emerald-l）， 并加同色低透明度描边，使两张卡在深底中凸显且明确"主题色"。 ==================================================================== */ body.ink .calc-lpr-card, body.plum .calc-lpr-card{border:1px solid color-mix(in srgb,var(--emerald-l) 42%,transparent)} body.ink .wi-top, body.plum .wi-top{border:1px solid color-mix(in srgb,var(--emerald-l) 50%,transparent)} /* ---------- 雾灰模式（mist）—— 淡灰底 + 深青灰点缀 ---------- 2026-09-21 用户「靛蓝模式取消，换一个，看有没有淡灰色」—— 用 mist 顶替原 cobalt 的名额（cobalt 已整体移除，key 不复用）。 定位：全站唯一的**中性冷灰**浅色主题。 与既有浅色主题的区分： · light 淡色 —— 冷蓝白（#f3f8fb，蓝相） · moss 苔原 —— 灰绿白（#EFF3EA，绿相） · dusk 暮云 —— 灰紫白（#F2EEF4，紫相） · sand 暖沙 —— 米杏白（#F6F1E8，暖黄相） · mist 雾灰 —— 中性灰（#F1F2F3，**无彩色相**）← 唯一一个不带色相的 用户说「淡灰色」，所以底色刻意做到 HLS 饱和度仅 0.077（其余浅色主题 都在 0.21~0.50），是真正的「灰」而不是「带一点颜色的白」。 取色依据：雾灰 #F1F2F3 / 深青灰 #4A6478（品牌色）。 品牌色走**低饱和青灰**而非纯灰 —— 纯灰品牌色在灰底上会糊成一片， 压一点青相才能在灰底上「立」起来（/card 6.20:1）。 品牌色属深色调 → 配白字前景（6.20 / 5.27:1）。 */ body.mist,html.mist{ --bg:#F1F2F3; --card:#FFFFFF; --card-2:#F8F9FA; --border:#E5E7E9; --border-strong:#D6D9DD; --border-stronger:#B8BDC3; --card-grad:var(--card-grad2); --card-grad2:linear-gradient(155deg,#FFFFFF 0%,#F9FAFB 38%,#EFF1F3 80%,#E6E8EB 100%); --fg:#25282B; --muted:#5E6469; --muted-2:#7E858C; --sw-strike:#949494; --nav-bg:#2B3034; --nav-idle:#D6DAE0; --tb-icon:#3B4046; --nav-active:#F3F4F6; --nav-hl:linear-gradient(132deg,rgba(196,204,212,.65) 0%,rgba(196,204,212,.30) 26%,rgba(196,204,212,.12) 44%,rgba(196,204,212,0) 62%); --nav-ring:rgba(190,198,208,.9); --cal-sel:#A8B2BD; --field-bg:#FFFFFF; --field-bd-hover:#B8BDC3; --type-custom-bd:#B0B6BD; --type-custom-accent:#4A6478; --type-custom-ring:rgba(74,100,120,.16); /* 品牌主色：低饱和深青灰 */ --emerald:#4A6478; --emerald-d:#39505F; --emerald-l:#546F84; --on-emerald:#FFFFFF; --em-rgb:74,100,120; --em-text-hi:#39505F; --em-text-hi-d:#2C3E4A; --doc-tint:#E6E8EB; --doc-tint-base:#FFFFFF; --doc-tint-on:1; --st-tint-a:rgba(120,138,156,.30); --st-tint-b:rgba(100,118,136,.16); --card-tint-a:rgba(120,138,156,.30); --card-tint-b:rgba(100,118,136,.16); --card-tint-a-sm:rgba(120,138,156,.30); --card-tint-b-sm:rgba(100,118,136,.16); --card-tint-a-mid:rgba(120,138,156,.30); --card-tint-b-mid:rgba(100,118,136,.16); --shadow:0 1px 2px rgba(42,48,54,.06),0 10px 26px -10px rgba(42,48,54,.12); --shadow-soft:0 1px 2px rgba(42,48,54,.05),0 6px 18px -8px rgba(42,48,54,.09); --top-dim:rgba(255,255,255,0); --top-glow-1:#E6E8EA; --top-glow-2:#E9EBED; --top-glow-3:#ECEEEF; --top-glow-4:#EEEFF1; --top-glow-5:#EFF1F2; --top-glow-6:#F0F1F3; --top-glow-7:#F1F2F3; --top-glow-8:#F1F2F3; --top-fade:rgba(241,242,243,0); --nav-glass:linear-gradient(180deg,rgba(228,232,236,.21),rgba(214,220,226,.11)); --nav-bd:rgba(120,128,138,.27); --nav-shadow:0 8px 22px -14px rgba(40,46,52,.50); --nav-ind:linear-gradient(135deg,#7E93A6,#5A7183); --kpi-home-1:#E2E5E8; --kpi-home-2:#F4F5F6; --kpi-home-3:#FCFCFD; --wel-bg:linear-gradient(180deg,var(--kpi-home-1) 0%,var(--kpi-home-2) 46%,var(--kpi-home-3) 100%); /* --wi-top / --lpr-*：与问候卡同源公式（完整说明见 :root 处第九版注释） */ --wi-top:linear-gradient(180deg,rgba(var(--tint-rgb),.06) 0%,rgba(var(--tint-rgb),.03) 46%,rgba(var(--tint-rgb),0) 100%),linear-gradient(135deg,var(--card-tint-a),var(--card-tint-b)),linear-gradient(180deg,var(--kpi-home-1) 0%,var(--kpi-home-2) 46%,var(--kpi-home-3) 100%); --wi-top-fg:#39505F; --wi-top-ov:rgba(0,0,0,.06); --lpr-a:var(--kpi-home-1); --lpr-m:var(--kpi-home-2); --lpr-b:var(--kpi-home-3); --lpr-overlay:linear-gradient(180deg,rgba(var(--tint-rgb),.06) 0%,rgba(var(--tint-rgb),.03) 46%,rgba(var(--tint-rgb),0) 100%),linear-gradient(135deg,var(--card-tint-a),var(--card-tint-b)); --lpr-fg:#39505F; --tint-rgb:120,138,156; --kpi-tint-rgb:120,138,156; --kpi-tint-rgb-d:100,118,136; } *{box-sizing:border-box} html,body{margin:0;padding:0;height:100%} body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased; font-size:14px; -webkit-text-size-adjust:100%; text-size-adjust:100%; -webkit-tap-highlight-color:transparent; touch-action:manipulation; } body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--bg)} button{font-family:inherit;cursor:pointer} input,textarea,select{font-family:inherit} a{color:inherit;text-decoration:none} *{scrollbar-width:none;-ms-overflow-style:none} *::-webkit-scrollbar{width:0;height:0;display:none} ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px} .hidden{display:none!important} /* ===== 布局 ===== */ #app{min-height:100vh;display:flex} .sidebar{ width:230px;flex-shrink:0;background:var(--nav-bg);color:#cbd5e1;display:none;flex-direction:column; padding:18px 12px;position:sticky;top:0;height:100vh;height:100dvh; } .brand{display:flex;align-items:center;gap:10px;padding:6px 10px 18px;color:#fff} .brand .logo{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--emerald-l),var(--emerald-d));display:flex;align-items:center;justify-content:center;color:var(--on-emerald);box-shadow:0 6px 16px -5px rgba(var(--em-rgb),.55)} .brand .t1{font-size:15px;font-weight:700;color:#fff;line-height:1.1} .brand .t2{font-size:11px;color:#64748b} .nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:#cbd5e1;font-size:14px;margin-bottom:4px;border:none;background:none;width:100%;text-align:left;transition:.15s} .nav-item:hover{background:rgba(255,255,255,.06);color:#fff} .nav-item.active{background:linear-gradient(135deg,rgba(76,107,158,.28),rgba(58,168,232,.22));color:#fff;font-weight:600;position:relative;overflow:hidden} .nav-item.active::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.3),rgba(255,255,255,.10) 34%,rgba(255,255,255,0) 58%)} .nav-item svg{width:19px;height:19px;flex-shrink:0} .nav-spacer{flex:1} .nav-foot{padding:8px 10px;font-size:11px;color:#475569;border-top:1px solid rgba(255,255,255,.06);margin-top:8px} .nav-foot button{background:none;border:none;color:#94a3b8;font-size:12px;padding:6px 0;display:flex;align-items:center;gap:8px;width:100%} .nav-foot button:hover{color:#fff} .main{flex:1;min-width:0;display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden} /* 顶栏：图片背景 + 底部向页面底色渐隐，避免与内容区硬切 */ .topbar{box-sizing:border-box;padding:calc(94px + env(safe-area-inset-top)) 20px 0;flex-shrink:0;display:flex;align-items:flex-end;justify-content:space-between;position:sticky;top:0;z-index:30;overflow:hidden;background-origin:border-box;background-clip:border-box; background-image:linear-gradient(180deg,var(--top-dim) 0%,var(--top-dim) 30%,var(--top-dim) 62%,var(--top-dim) 88%,var(--top-dim) 100%),linear-gradient(180deg,var(--top-glow-1) 0%,var(--top-glow-2) 16%,var(--top-glow-3) 32%,var(--top-glow-4) 48%,var(--top-glow-5) 62%,var(--top-glow-6) 74%,var(--top-glow-7) 85%,var(--top-glow-8) 100%); background-size:100% 100%; background-position:center; background-repeat:no-repeat} /* ⚠ 上面 --top-dim 出现 5 次是**故意的**：light/dark 的压暗层需要 alpha 逐段 递减（.72→.68→.62→.56→.50）才能做出「上重下轻」的天光层次，单一亮色主题 （moss/dusk）则给 rgba(...,0) 全透明，于是这两条渐变退化成只有天光那层。 不用「多个变量」是为了让主题块只给一个 --top-dim，取值少一处不一致风险。 */ /* 底部渐隐：把图片下缘平滑融入页面底色 --bg */ .topbar::after{content:'';position:absolute;left:0;right:0;bottom:0;height:46px;pointer-events:none; background:linear-gradient(180deg,var(--top-fade) 0%,var(--top-fade) 16%,var(--top-fade) 32%,var(--top-fade) 48%,var(--top-fade) 64%,var(--top-fade) 80%,var(--top-fade) 94%,var(--bg) 100%)} /* ⚠ --top-fade 同样是「一个变量铺满多段」的写法：它必须与主题的 --bg 同色但 全透明，否则渐隐到最后一段（var(--bg) 不透明）会从「别的颜色」跳变过来。 light 的 rgba(243,248,251,·) 就是 --bg #f3f8fb 的同色透明版。 */ .topbar .tb-brand{transform:translateY(-20px);position:relative;z-index:2} /* 顶栏品牌块的左对齐（用户 2026-09-19 最终口径： 「律界移动到和下面面包折叠三横对齐，时间也是」）。 实测：品牌块原本因 margin-left:-2px 落在 14px，而下方汉堡按钮在 16px，差 2px。 去掉这个负 margin → 品牌块回到 16px，与汉堡按钮**严格左对齐**。 ⚠ 这轮把前几轮的 -12 / -6 / -2 全部归零。别再重新加负 margin —— 顶栏自身 padding 给的 16px 就是基准线，「与汉堡按钮对齐」这个目标天然等于 margin:0。 ⚠ 移动的是 .tb-brand 整体（标题 + 时钟两行一起走），单动一行会让两行错开。 */ .topbar .tb-brand{margin-left:0} .topbar .tb-tools{transform:none;position:relative;z-index:2} .topbar .tb-titlebox{transform:translateY(-5px);position:relative;z-index:2} .topbar .title{font-size:19px;font-weight:600;color:var(--fg);text-shadow:0 1px 2px rgba(255,255,255,.55)} /* NOTE(2026-09-21): 原先这里有一条 body.theme-dim .topbar{...} 深蓝专属渐变。 顶栏已改为「变量驱动」（--top-dim / --top-glow-* / --top-fade）， dark 的值写在 body.dark 变量块，ink/pine 写在各自块。故删除该特例。 */ body.theme-dim .topbar .title{color:#f2f6fd;text-shadow:0 1px 3px rgba(0,0,0,.45)} /* ============================================================ 顶栏配色 —— 已变量化（2026-09-21） ------------------------------------------------------------ 原先这里有 4 条 body.theme-{jade,warm} .topbar / ::after 特例。 病根：顶栏是**写死的两段渐变**（压暗层 + 天光层），不随主题走， 所以每加一个主题就得复制一整条；上一版 4 主题已积累 12 条这类特例， 扩到 6 主题会变成 30+ 条重复，改结构必然漏改。 现全部提成变量（--top-dim / --top-glow-1..8 / --top-fade）， 值分别写在 :root（浅底默认）、body.dark、各主题变量块里。 ⚠ 新增主题只需在变量块里给这 10 个值，不要再来这里加特例。 */ .topbar .sub{font-size:12px;color:var(--muted);font-weight:600;text-shadow:0 1px 2px rgba(255,255,255,.5)} body.theme-dim .topbar .sub{color:var(--muted);text-shadow:0 1px 3px rgba(0,0,0,.4)} .topbar .icons{display:flex;align-items:center;gap:4px} .tb-left{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;overflow:visible;flex:1 1 auto} .tb-brand{display:flex;align-items:center;gap:10px;min-width:0;overflow:hidden} .tb-brand-txt{text-align:left;min-width:0;flex:1 1 auto;overflow:hidden} .topbar .tb-brand-txt .title{white-space:nowrap;font-size:24px;line-height:1.2;font-weight:700} /* 时钟光学对齐（用户 2026-09-19：「时间在视觉上和律界没对齐，往右移一小点」）。 ⚠ 这是**光学对齐**，不是盒模型对齐 —— 两者的排版盒左边界本来就都是 16px（已实测确认）， 但「律」是汉字，笔画顶到字面左缘；时钟首位是数字「2」，字形自带左侧内槽， 所以看着比「律」更靠左。加 2px 左内边距把「2」推到与「律」的**视觉**起笔位置齐平。 ⚠ 别为了对齐去动 .tb-brand 的 margin —— 那会连带把标题一起挪走，标题就又偏了。 要动的只有时钟这一个元素。 */ .topbar .tb-brand-txt .sub{padding-left:2px} .tb-tools{display:flex;align-items:center;gap:4px} .tb-left .icon-btn{width:34px;height:34px;flex-shrink:0;border-color:transparent;background:transparent;box-shadow:none} /* 顶栏折叠工具栏图标：hover / active / focus 一律保持透明底 + 无描边 + 无焦点框。 背景：用户反馈「图标点击后会出现一个正方圆角框框」，要求取消变透明。 根因是下面这行原本给了 hover 底色 —— .tb-left .icon-btn:hover{background:var(--bg);color:var(--fg)} --bg 在浅色是 #f3f8fb、暗色另有取值，配上 .icon-btn 的 10px 圆角， 鼠标点完停留在原位（触屏是长按残留 :hover）就留下一个可见的圆角方块。 ⚠ 注意是 :hover 不是 :focus —— 实测点击后 :focus 为 true 但 focus 态本身不设背景， 把鼠标移开底色才消失，据此定位到 hover 规则，排查时别被 :focus 带偏。 颜色反馈只在 :hover / :active 给（--fg 变亮）； ⚠ :focus 刻意**不给 color**：点击后按钮会一直保持 :focus，若在这里上色， 图标会永久停在亮色（实测点完移开鼠标颜色仍是 --fg），等于把方块换成了残留高亮， 与「点击后恢复原状」的诉求相悖。 */ .tb-left .icon-btn:hover,.tb-left .icon-btn:active{background:transparent;color:var(--fg)} .tb-left .icon-btn:focus,.tb-left .icon-btn:focus-visible{background:transparent;outline:none;box-shadow:none} .tb-left .hamburger,.tb-left .hamburger:hover,.tb-left .hamburger:active, .tb-left .hamburger:focus,.tb-left .hamburger:focus-visible{background:transparent;border:none;box-shadow:none;outline:none} .tb-left .hamburger svg{width:17px;height:17px} .tb-titlebox{position:absolute;right:20px;bottom:0;text-align:right;min-width:0;z-index:2} .tb-titlebox .title{white-space:nowrap} .tb-titlebox .sub{white-space:nowrap} .tb-icons{display:flex;align-items:center;gap:2px;overflow:hidden;white-space:nowrap;max-width:0;opacity:0;transition:max-width .28s ease,opacity .2s ease} .tb-icons.open{max-width:230px;opacity:1} .icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--muted)} .icon-btn:hover{color:var(--fg);background:var(--bg)} /* 顶栏工具栏图标 / 汉堡：颜色对齐底部导航未选中色 */ /* ⚠⚠ 这里**不能**直接用 --nav-idle。 --nav-idle 的设计语境是「深色侧栏/底栏上的浅字」——它每套主题都取值很浅 （light #CBD4C2 系、mist #D6DAE0、sakura #EBD8DF …），压在 --nav-bg 上 对比度 6~18:1 完全没问题。 但顶栏折叠工具栏所在的 .topbar 背景是**天光 --top-glow-\*** —— 浅底主题的天光是 #E6E8EA ~ #FBF1F4 这类浅色，再压浅色的 --nav-idle 就糊成一片（实测 moss/dusk/sand/mist 只有 1.10~1.24:1，基本看不见）。 所以单独抽一个 --tb-icon：浅底主题给深色（贴近 --fg），深底主题沿用 --nav-idle。 2026-09-21 用户反馈「有些主题 折叠导航栏图标看不清楚」，即此问题。 */ .tb-left .icon-btn,.tb-left .hamburger{color:var(--tb-icon)} .tb-left .hamburger:hover{color:var(--tb-icon)} /* 折叠工具栏面板内图标整体缩小一点 */ .tb-icons .icon-btn svg{width:21px;height:21px} /* 顶栏圆形头像 */ .tb-avatar{width:50px;height:50px;border-radius:17px;border:1px solid rgba(255,255,255,.55);background-size:cover;background-position:center;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;position:relative;box-shadow:0 2px 8px -3px rgba(23,49,77,.28)} .tb-avatar input[type=file]{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;overflow:hidden;border:0;padding:0;margin:0} .tb-avatar svg{width:24px;height:24px;color:#fff;opacity:.95} .tb-avatar.no-img{background:linear-gradient(135deg,#7ea5cf,#4c6b9e)} .tb-avatar:not(.no-img) svg{display:none} /* 设置页头像 */ .set-avatar{width:56px;height:56px;border-radius:18px;border:1px solid var(--emerald-l);background-size:cover;background-position:center;flex-shrink:0;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;color:var(--bg);box-shadow:0 3px 10px -2px rgba(23,49,77,.3);position:relative} .set-avatar input[type=file]{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;overflow:hidden;border:0;padding:0;margin:0} .set-avatar.no-img{background:linear-gradient(135deg,#7ea5cf,#4c6b9e)} .set-avatar svg{color:#fff;opacity:.95} .set-avatar:not(.no-img) svg{display:none} .content{flex:1;overflow-y:auto;overflow-x:hidden;padding:22px 20px 96px;scrollbar-width:none} .content::-webkit-scrollbar{display:none} @media(min-width:768px){.content{padding:26px 30px 110px}} /* 移动端底部导航（悬浮液态玻璃） */ .mobile-nav{ display:flex;position:fixed;bottom:14px;left:14px;right:14px;margin:0 auto; width:fit-content;max-width:min(540px,calc(100% - 28px)); align-items:center;justify-content:space-between;gap:5.5px; background:var(--nav-glass); border:1px solid var(--nav-bd); border-radius:999px;z-index:40;padding:5px 3px calc(5px + env(safe-area-inset-bottom)); box-shadow:var(--nav-shadow); -webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px); overflow:hidden; transition:transform .22s ease,opacity .22s ease,visibility .22s ease; } .mobile-nav.kb-hidden{transform:translateY(170%)!important;opacity:0;visibility:hidden;pointer-events:none} .mobile-nav::before{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:transparent; } .mobile-nav::after{ content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit; background:transparent; } .mobile-nav button{position:relative;z-index:1;flex:0 0 auto;width:48px;height:44px;padding:0;background:none;border:none;color:var(--emerald);display:flex;align-items:center;justify-content:center;border-radius:50%;transition:color .2s,transform .15s,box-shadow .22s ease} .mobile-nav button svg{width:24px;height:24px;transform-box:fill-box;transform-origin:center;flex-shrink:0;color:inherit} .mobile-nav button:active{transform:scale(.92)} .mobile-nav button:hover:not(.active){color:var(--emerald-d)} .mobile-nav button.active{color:var(--nav-active);font-weight:700;transition:color var(--ind-dur,.85s) cubic-bezier(.34,.72,.26,.98)} .mobile-nav .mn-ind{position:absolute;top:1.5px;height:calc(100% - 3px);border-radius:50%;left:0;width:0;background:var(--nav-ind);box-shadow:0 8px 18px -8px rgba(122,162,205,.4);opacity:0;pointer-events:none;z-index:0;transform:scale(.92);transform-origin:center;transition:left .22s cubic-bezier(.34,.72,.26,.98),width .22s cubic-bezier(.34,.72,.26,.98),opacity .18s ease} /* NOTE(2026-09-21): 原先这里是 body.theme-dim .mobile-nav 的冷蓝玻璃 （background/border-color）+ 深底专属阴影。现底栏背景/描边已变量化 （--nav-glass / --nav-bd / --nav-shadow），值由各主题变量块提供，故删除。 */ body.theme-dim .mobile-nav{box-shadow:0 8px 24px -14px rgba(0,0,0,.44)} body.theme-dim .mobile-nav::before{ background:linear-gradient(180deg,rgba(255,255,255,.19),rgba(255,255,255,.05) 36%,transparent 68%); } body.theme-dim .mobile-nav::after{background:transparent} body.theme-dim .mobile-nav button{color:#eef3f9} body.theme-dim .mobile-nav button:hover:not(.active){color:#ffffff} body.theme-dim .mobile-nav button.active{color:#4a5567;font-weight:700} /* ============================================================ 底栏（.mobile-nav）配色 —— 已变量化（2026-09-21） ------------------------------------------------------------ 原先这里有 4 条 body.theme-{jade,warm} .mobile-nav / ::before / .mn-ind 特例。 与顶栏同病：底栏玻璃拟态是**写死的色相**，每加主题就要复制一条。 现提成变量 --nav-glass / --nav-bd / --nav-shadow / --nav-ind， 值写在 :root（浅底默认）、body.dark、各主题变量块里。 ⚠ 玻璃的 alpha 与结构（blur、渐变方向、stop 位置）是调过的， 新主题只换色相、不要动 alpha 结构，否则玻璃质感会变。 ⚠ 另：原先 body.theme-warm 还单独写了 .mobile-nav button{color:var(--emerald)}， 那只是因为暖阳把 --emerald 换成了琥珀；现在所有非 dark 主题都在 自己的变量块里覆盖了 --emerald，基础规则 .mobile-nav button{color:var(--emerald)} 已自动生效，不需要每条特例。 */ @media(min-width:860px){.sidebar{display:flex}.mobile-nav{display:none}.content{padding-bottom:28px}} /* ===== 通用组件 ===== */ .card{background:var(--card-grad2);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-soft);min-width:0} /* ——— 卡片蓝底（用户 2026-09-17 指定，深浅参照案件统计卡）——— 与 .st-card 完全同构：纯 --card 打底 + :before 铺一层 135° 蓝叠加。 分两档，按卡片体量选（取值与理由见 :root 里 --card-tint-* 注释）： .card-tint —— 大卡：案件列表卡、甘特图卡、日历卡、文档类型卡 .card-tint-sm —— 小卡：今日待办、近期事项、案件类型分布 两档都用 .card-tint 作前缀类，只是辅类不同，便于以后整体调一处。 ⚠ :before 是 absolute，会被同级文字的层叠顺序影响，所以下面统一把 直接子元素提上来（z-index:1）。但**只提直接子元素**—— 子元素一旦自己 position:relative 开了层叠上下文，内部元素就压不出去了； 这里是纯视觉叠加、不涉及交互层级，够用。 ⚠ 不能用 overflow:hidden 裁 :before（日历卡里有 absolute 的日程气泡， 甘特图卡也明确依赖 overflow:visible），所以 :before 自带同值圆角。 这一点与 .st-card 踩过的坑一致，别改成 overflow:hidden。 */ /* ⚠ 圆角必须**继承宿主元素**的值，绝不能硬写 var(--radius)。 踩过的坑（用户 2026-09-17 截图反馈「日程这个页面 卡片四角是怎么回事？」）： 日程条目的圆角是内联的 12px，而这里 ::before 写死了 --radius(20px)， 于是前景 12px、蓝色叠加层 20px，四个角各错开约 8px， 露出一圈蓝色台阶 —— 看着就像"四角有问题"。 用 border-radius:inherit 让蓝层永远跟着宿主走，宿主改成多少都不会再错开。 （.card / .case-card / .client-row 等宿主都是 20px，inherit 后与原来一致； .card-tint::before 也不会继承到 .card 的 border-radius:var(--radius)， 因为 ::before 的 inherit 取的是宿主元素计算值，正是我们要的那个值。） */ .card-tint{background:var(--card);position:relative;overflow:visible} .card-tint::before{content:"";position:absolute;inset:0;pointer-events:none; border-radius:inherit; background:linear-gradient(135deg,var(--card-tint-a),var(--card-tint-b))} .card-tint-sm{background:var(--card);position:relative;overflow:visible} .card-tint-sm::before{content:"";position:absolute;inset:0;pointer-events:none; border-radius:inherit; background:linear-gradient(135deg,var(--card-tint-a-sm),var(--card-tint-b-sm))} /* 只提"直接子元素"的层叠顺序。⚠ 这条对日程条目是**空转**的： 它内部是裸
，外面没包 .card， 所以内容全靠自身 padding 撑位置，没有子元素需要提层。 之所以仍然安全：::before 是 inset:0 铺满、pointer-events:none， 且内容不依赖 z-index 也不会被它盖住（同级、::before 在文档流前）。 ⚠ 唯一的例外是 opacity:.75 的已到期条目 —— 见下方专门那条。 */ .card-tint>*,.card-tint-sm>*{position:relative;z-index:1} .card-pad{padding:18px} .card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;position:relative} .card-head::after{content:"";position:absolute;left:18px;right:18px;bottom:0;border-bottom:1px dashed var(--muted-2)} .card-head .h{font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px} .card-head .h svg{width:17px;height:17px} .card-head .dash-head-btn{height:20px;padding:0 9px;font-size:11.5px;line-height:18px} .btn{display:inline-flex;align-items:center;gap:6px;justify-content:center;padding:6px 12px;border-radius:10px;border:1px solid var(--border-strong);background:var(--card);color:var(--fg);font-size:13px;font-weight:500;transition:.15s;box-shadow:var(--shadow-soft)} .btn:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--emerald) 35%,var(--border-strong))} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none} /* 主按钮：渐变底 + --on-emerald 前景色。 ⚠ 前景色**必须**走变量，不能写死 #fff —— 一旦某主题的 --emerald 是浅亮色（如荧光黄绿 #C6F24E），白字压上去 只有 1.30:1（几乎不可见）。:root 默认给 #fff（深调品牌色上 4.5:1+ 没问题）；若将来加浅亮品牌色的主题，把它覆盖成近黑即可（荧光绿上 近黑字可达 15.15:1）。 box-shadow 的发光色同理走 --em-rgb，让品牌色主题有「辉光」。 */ .btn-primary{background:linear-gradient(135deg,var(--emerald-l),var(--emerald-d));border-color:transparent;color:var(--on-emerald);box-shadow:0 6px 16px -6px rgba(var(--em-rgb),.55)} .btn-primary:hover{background:linear-gradient(135deg,var(--emerald),var(--emerald-d));border-color:transparent;color:var(--on-emerald)} .btn-ghost{background:none;border:none;color:var(--muted);box-shadow:none} .btn-ghost:hover{background:var(--bg);color:var(--fg)} /* 工伤待遇底部操作按钮：图标大小归一 */ #wi-log svg{width:22px;height:22px} #wi-run svg{width:16px;height:16px} /* 计算器各选项卡主按钮：图标缩小 */ #cl-run svg,#cp-run svg,#dl-run svg,#lf-run svg,#ls-run svg,#cc-run svg{width:13px;height:13px} .btn-danger{color:var(--rose);background:none;border:none;box-shadow:none} .btn-danger:hover{background:rgba(240,97,126,.1)} .btn-sm{padding:6px 10px;font-size:12px;border-radius:10px;white-space:nowrap} .btn-sm svg{width:14px;height:14px;flex-shrink:0;display:inline-block;vertical-align:-0.15em} /* 行内图标按钮（分享 / 预览 / 下载）。 2026-09-18 用户要求「分享按钮也不要框框，案件详情也同步不要」。 原样式是 32px 方块：1px 边框 + 卡片底 + 10px 圆角，一排三个并排时 像三个小方章，视觉重量盖过了文件名本身。改为**裸图标**： · border/background 全去掉； · 尺寸收到 28px（只是点击区，没有可见边界，从 32 收到 28 不会难点到， 因为实际可点区域仍由 flex 布局撑开，且 hover 底色会给出边界提示）； · hover 给一个**圆形**淡底而不是圆角方块 —— 圆底和图标形状同构， 不会在无框状态下突然冒出一个方形色块。 ⚠ 别把 hover 的 border-radius 去掉：没有圆角就是方块底， 正好违背"不要框框"的诉求。 */ .btn-icon{width:28px;height:28px;padding:0;border:none;background:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--muted);transition:.15s} .btn-icon:hover{color:var(--fg);background:var(--bg)} .btn-icon:active{background:var(--border)} .btn-icon svg{width:16px;height:16px} /* 删除按钮：本来就无边框，只需与 .btn-icon 对齐 —— 同排两个按钮尺寸/圆角不一致会看出"一个是方块一个是圆"的割裂感。 */ .btn-del{width:28px;height:28px;padding:0;border:none;background:none;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--rose);transition:.15s} .btn-del:hover{background:rgba(240,97,126,.1);color:var(--rose)} .btn-del svg{width:16px;height:16px} .wi-tbl-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:none;color:var(--muted);border-radius:8px;cursor:pointer;padding:0;transition:.15s;flex-shrink:0} .wi-tbl-btn:hover{background:rgba(38,56,92,.09);color:var(--fg)} .wi-tbl-btn.danger{color:var(--rose)} .wi-tbl-btn.danger:hover{background:rgba(240,97,126,.12);color:var(--rose)} .wi-tbl-btn svg{width:19px;height:19px} /* 案件详情「工伤赔偿表格」的横向滚动壳（2026-09-20 新增）。 仅作用于案件详情 modal 里的这张表；桌面端宽度富余不出现滚动条，视觉无变化。 */ .modal .wi-tbl-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} .modal .wi-tbl-scroll table{margin:0} .modal .wi-tbl-scroll::-webkit-scrollbar{height:4px} /* ⚠⚠ 修「金额被吞」的关键（用户 2026-09-20：「低于10万的显示很全，高于的一直被吞掉很多」）。 实测证据：金额列的格宽**永远恰好等于内容所需宽度**（88,600→84px、886,600→104px、 1,288,000.50→114px），一点余量都没有。这就是「刚好塞满」的临界态： 一旦可用宽度少几个像素，auto 布局就从这一列扣，而 nowrap 的金额不会换行 → 右侧被裁。 金额越长临界宽度越大，所以现象恰好卡在「10 万」这条线上。 修法： ① table-layout:fixed —— 列宽由首行与下面的 width 决定，不再随内容抖动； ② 金额列给足固定宽度 132px（容得下最长的「12,880,000.50 元」= 114px 并留余量）， 它是硬约束，浏览器不会再压缩它； ③ 左列 width:auto 吃掉剩余宽度；它的说明小字本来就有 text-overflow:ellipsis， 压缩左列无信息损失（本来就截断显示、完整内容在行内可查）。 */ .modal .wi-tbl-scroll .wi-tbl{table-layout:fixed} .modal .wi-tbl-scroll .wi-tbl td:first-child{width:auto;overflow:hidden} .modal .wi-tbl-scroll .wi-tbl-amt, .modal .wi-tbl-scroll .wi-cn-amt{width:132px;overflow:visible} /* 金额列内部统一右对齐（各行金额、赔偿合计、大写、按月长期都落在这条列上） */ .modal .wi-tbl-scroll .wi-tbl-amt .wi-total-num{font-size:13.5px;font-weight:800} /* 极端兜底：金额列宽度是有限的 126px，若金额本身超过这个宽度 （实测需「8.9 亿」这种量级的大写才会有 —— 「捌亿捌仟…捌分」宽 218px）， 不让它溢出到格线外，改为在列内省略号截断，完整数字仍可通过导出文档查看。 正常业务金额（≤ 千万）用不到这条。 */ .modal .wi-tbl-scroll .wi-tbl-amt, .modal .wi-tbl-scroll .wi-cn-amt{text-overflow:ellipsis} .modal .wi-tbl-scroll .wi-cn-amt{overflow:hidden} .btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 10px;border:none;background:none;color:var(--muted);border-radius:8px;transition:.15s} .btn-ghost:hover{background:rgba(38,56,92,.09);color:var(--fg)} .btn-ghost svg{width:15px;height:15px;flex-shrink:0} /* ---- 案件详情页(cd-modal)：卡片边框与虚线分隔加深、文档卡片留缝 ---- */ .cd-modal .modal-body [style*="1px solid var(--border)"]{border-color:#b7c1d4!important} .cd-modal .modal-body [style*="border-top:1px dashed"],[style*="border-bottom:1px dashed"]{border-color:#b7c1d4!important} body.theme-dim .cd-modal .modal-body [style*="1px solid var(--border)"]{border-color:#5a6d92!important} body.theme-dim .cd-modal .modal-body [style*="border-top:1px dashed"],[style*="border-bottom:1px dashed"]{border-color:#5a6d92!important} .cd-modal [style*="#DFE3EC"]{background:#b6c2d4!important} .cd-modal #cd-docs{display:flex;flex-direction:column;gap:0} .cd-modal #cd-docs .li{padding:10px 0;border:none;border-radius:0;background:none;box-shadow:none} .cd-modal #cd-docs .li:hover,.cd-modal #cd-docs .li:active,.cd-modal #cd-docs .li:focus{background:none!important;transform:none;box-shadow:none} .cd-modal #cd-docs.dash-list .li+.li{border-top:1px dashed #b7c1d4!important} body.theme-dim .cd-modal #cd-docs.dash-list .li+.li{border-top:1px dashed #5a6d92!important} .cd-modal .sh-ic{width:18px;height:18px;flex-shrink:0} /* ---- 案件详情 · 案件进度 · 右侧事项时间（用户 2026-09-21 需求） ---- 用户原话：「后面时间 因为不同数字占位不一样导致参差不齐。」 根因：时间文本用的数字是「比例数字」（proportional numerals）， `1` 比 `8` 窄、`0` 又不同宽，所以 "01-05 09:05" 与 "11-18 18:18" 渲染宽度不等，右缘参差。注意 padStart(2,'0') 只解决了「位数」， 解决不了「同一字号的数字本身宽度不同」。 修法：①tabular-nums 让所有数字等宽（同一字符列宽恒定）； ②再给一个够放最长日期串的最小宽度并右对齐， 即使字体缺 tnum 特性，右侧仍然严格对齐。 【2026-09-24】日期格式由 "MM-DD HH:MM" 改为 "YYYY.MM.DD HH:MM" （用户：「原格式08-21 15:00 改成 2025.07.03 15:30 这种格式」）。 实测新格式在 11px 下宽 86.3px，旧的 74px min-width 已不够， 故提到 88px —— 保证各行右缘仍然严格对齐。 */ .cd-evt-time{font-size:11px;font-weight:700;color:var(--rose);white-space:nowrap; flex-shrink:0;text-align:right;min-width:88px; font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1} /* ---- 「记律师费」弹窗的「添加一笔收费」行（用户 2026-09-16 需求） ---- 三栏：实收金额 | 收费时间 | 收费方式。窄屏 3 栏会把金额框挤成窄条（320px 实测约 38px）， 故 ≤559px 改为两行（金额+时间 / 备注+添加）。 */ .cf-add-row{display:grid;grid-template-columns:1fr 132px 110px;gap:8px;margin-bottom:8px} .cf-note-row{display:grid;grid-template-columns:1fr 96px;gap:8px} /* ⚠ .modal select 全局设了 appearance:none 且 background-image:none， 原生下拉箭头被抹掉。本控件没有 label，只靠占位文案会看不出是下拉， 故外套 .cf-sel 并自绘一个箭头（与全站 searchSelect 的 ss-caret 同一套做法）。 */ .cf-sel{position:relative;min-width:0} .cf-sel select{padding-right:26px} .cf-sel-caret{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:14px;height:14px; color:var(--muted);pointer-events:none;flex-shrink:0} @media(max-width:559px){ /* 窄屏：金额与时间各占一半，方式换到第二行与备注并排 */ .cf-add-row{grid-template-columns:1fr 1fr} .cf-sel{grid-column:1 / -1} .cf-note-row{grid-template-columns:1fr 88px} } /* 已收明细行可点击编辑（用户 2026-09-16：「还做一个点击可编辑」）。 行本身是 div，不是按钮，靠 hover/focus 给出可点提示； ⚠ 删除按钮在行内，所以 hover 只轻微变色、不整行高亮，避免误以为整行是删除。 */ .fee-row{cursor:pointer;transition:background .14s;-webkit-tap-highlight-color:transparent} .fee-row:hover{background:var(--bg-soft)} .fee-row:hover .btn-del{opacity:1} .fee-row .btn-del{opacity:.75;transition:opacity .14s} .fee-row:focus-visible{outline:2px solid var(--violet);outline-offset:-2px;border-radius:8px} /* 「应收计划」占位行（无已收明细时）右侧的铅笔提示图标：平时半透明， hover 时变实 —— 与 .btn-del 同一套「悬停才显形」的语言，暗示可点 */ .fee-row-edit{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px; border-radius:8px;color:var(--muted);opacity:.55;flex-shrink:0;transition:opacity .14s,color .14s} .fee-row:hover .fee-row-edit{opacity:1;color:var(--emerald-d)} .fee-row-edit svg{width:15px;height:15px} /* 来自回款工作台的到账行（用户 2026-09-16：「以前已收点编辑后里面是空数据」的根因）。 它不是案件内登记的收费，只能去回款工作台改，故箭头用普通色、不套 emerald， 与「可在此就地编辑」的铅笔行在视觉上区分开。 */ .fee-row[data-fee-pay]:hover .fee-row-edit{color:var(--muted)} .input,.select,.textarea{width:100%;padding:11px 13px;border:1px solid var(--border-stronger);border-radius:12px;background:var(--field-bg);color:var(--fg);font-size:14px;outline:none;transition:.15s} .input:hover,.select:hover,.textarea:hover{border-color:var(--field-bd-hover)} .input:focus,.select:focus,.textarea:focus{border-color:var(--emerald-l);box-shadow:0 0 0 3px rgba(76,107,158,.13);background:var(--card)} .input::placeholder,.textarea::placeholder{color:var(--muted);opacity:.75} .textarea{resize:vertical;min-height:70px} /* 自定义类型输入框：紧跟在「类型」下拉下方，属于条件展开的二级输入。 要点一：底色必须和其他输入框完全一致（白/深卡），否则会被误读成「禁用」状态。 要点二：它所在的栏位窄（表单过半宽约 187px），不能用 3px 左侧粗线—— 那会同时造成两个问题：① 左右圆角不对称、边框看起来「缺了一角」； ② 挤掉可用宽度导致 placeholder 从中间被硬切（实测可用 163px，全文案需 196px）。 所以最终方案：边框宽度与普通输入框一致（1px），只把「描边色」换成主题强调色， 并收窄左右内边距把空间让给文字。视觉上靠「颜色」区分，不靠「粗细/填色」。 */ .input.type-custom{ background:var(--field-bg); border-color:var(--type-custom-bd); padding-left:10px; padding-right:10px; } .input.type-custom:hover{border-color:var(--type-custom-accent)} .input.type-custom:focus{ background:var(--card); border-color:var(--type-custom-accent); box-shadow:0 0 0 3px var(--type-custom-ring); } .input.type-custom::placeholder{color:var(--muted);opacity:.8} .label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px} /* 可搜索下拉 */ .ssearch,.ssearch.select{padding:0;position:relative;width:100%;border:1px solid var(--border-stronger);border-radius:12px;background:var(--field-bg);transition:.15s} .ssearch:focus-within{border-color:var(--emerald-l);box-shadow:0 0 0 3px rgba(76,107,158,.13);background:var(--card)} .ssearch .ss-input{padding:11px 34px 11px 13px;border:none;box-shadow:none;background:transparent;border-radius:0} .ssearch .ss-input:focus{border:none;box-shadow:none;background:transparent} .ssearch.nb{position:relative;width:100%;display:block;border:none;box-shadow:none;background:transparent;padding:0;border-radius:0} .ssearch.nb .ss-input{border:none;box-shadow:none;background:transparent;padding-left:2px} .ssearch.nb .ss-input:focus{border:none;box-shadow:none;background:transparent} .ssearch .ss-caret{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;pointer-events:auto;transition:transform .15s,color .15s;flex-shrink:0} .ssearch .ss-caret svg{width:15px;height:15px;stroke-width:2.2} .ssearch .ss-caret:hover{color:var(--fg)} .ssearch.ss-open .ss-caret{transform:translateY(-50%) rotate(180deg);color:var(--emerald-l)} .ssearch .ss-input::placeholder{color:var(--muted);opacity:.75} .ssearch .ss-input:focus::placeholder{color:var(--muted);opacity:.55} .ssearch .ss-panel{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:80;max-height:240px;overflow:auto;border:1px solid var(--border-strong);border-radius:12px;background:var(--card);box-shadow:0 12px 32px rgba(0,0,0,.18);display:none} .ssearch .ss-panel.open{display:block} .ssearch .ss-item{display:flex;flex-direction:column;gap:2px;padding:10px 13px;cursor:pointer;} .ssearch .ss-item+.ss-item{border-top:1px solid var(--line, rgba(128,128,128,.12))} .ssearch .ss-item:hover,.ssearch .ss-item.sel{background:var(--emerald-l);color:var(--on-emerald)} .ssearch .ss-t{font-size:14px;font-weight:600} .ssearch .ss-item em{font-style:normal;font-size:11px;color:var(--muted)} .ssearch .ss-item:hover em,.ssearch .ss-item.sel em{color:rgba(255,255,255,.7)} .ssearch .ss-empty{padding:12px 13px;font-size:13px;color:var(--muted)} /* 徽标（胶囊标签）—— 全工程统一尺寸，基准是案件卡片的做法。 ⚠ line-height 必须写死，不能靠继承： 不写时是 normal（≈1.2×继承字号），父容器行高一变，胶囊高度就跟着变。 实测过同一套 font-size/padding 在不同页面渲染出 18 / 22 / 38px 三种高度， 而案件卡片是 20px —— 视觉上「日程列表的类型框比案件卡片大」就是这么来的。 line-height:14px 是反推出来的：11px 字 + 上下各 2px 内边距 + 2px 边框 = 需要 14px 行盒才能落到 20px，与案件卡片逐像素一致。 white-space:nowrap 也是必须的：不写时窄容器会把「已推进 255 天」这类 较长的徽标折成两行，高度翻到 34px、形状从胶囊变成圆角块。 案件卡片的徽标都是单行，这里保持一致。 */ .badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:999px;font-size:11px;line-height:13px;font-weight:600;white-space:nowrap;border:1px solid transparent} .badge-outline{border-color:var(--border-strong);color:var(--muted)} .badge-sec{background:var(--bg);color:var(--muted)} /* 事项类型徽标：底色/文字色由 evTypeStyle() 内联给出（预设软色 / 自定义哈希彩色）。 这里只负责形状与非预设色的可读性——彩色胶囊的浅底是固定浅色， 暗色模式下必须保住它自己的深色文字，否则会被 .badge 的浅色文字规则冲掉。 */ .badge.ev-badge{padding:1px 6px;letter-spacing:.2px} .badge.ev-badge[style*="background:#"]{color:inherit} .chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--border);background:var(--card);color:var(--muted);transition:.15s} .chip:hover{border-color:color-mix(in srgb,var(--emerald) 40%,var(--border));color:var(--fg)} .chip.active{background:linear-gradient(135deg,var(--emerald-l),var(--emerald-d));color:var(--on-emerald);border-color:transparent;box-shadow:0 4px 12px -4px rgba(var(--em-rgb),.5)} .search-wrap{position:relative} .search-wrap svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--muted-2)} .search-wrap .input{padding-left:34px} .tb-actions{display:flex;align-items:center;gap:8px;min-width:0} .tb-actions .search-wrap{flex:1;min-width:0} .ico-sm{width:16px;height:16px;flex-shrink:0} .sep{height:1px;background:var(--border);margin:14px 0} /* 通用 loading 旋转动画（与下方 @keyframes spin 配套；虽当前无引用，属基础设施保留） */ .spin{animation:spin 1s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .empty{padding:48px 16px;text-align:center;color:var(--muted);font-size:14px} .progress{height:7px;background:var(--border);border-radius:999px;overflow:hidden} .progress > i{display:block;height:100%;background:linear-gradient(90deg,var(--emerald-d),var(--emerald));border-radius:999px} /* 卡片上的小进度条（用户 2026-09-19：「把前面进度条缩短」）—— 卡片第三行现在有「进度条 + N% + 类型徽标 + 阶段徽标」四样东西， 原来进度条是 flex:1 独占剩余宽度，加上第二个徽标后会把它们挤出卡片， 所以收成约 56px 的一小段（已在 JS 里内联 flex 控制，这里只管高度）。 */ .progress-sm{height:6px} /* 进度百分比文字（用户 2026-09-19：「暗色模式 进度条 和N% 看不清」）。 ⚠ 两个问题，分开治： ① N% 原来内联写 color:var(--emerald-d) —— 暗色下 --emerald-d 仍是 浅色模式的值 #3a5480（暗色变量块里没重定义 emerald 系列）， 深蓝压在 --card(#182234) 上对比度约 1.6，几乎不可见。 这里改用类选择器，暗色下换亮青 #4fd6c0（与「净收」的暗色处理同款）。 ② 进度条底槽是 --border(#22304a)，与卡片底 #182234 只有 1.3 左右的对比， 填充色又是暗蓝渐变 —— 整条几乎看不见。暗色下把底槽调亮一档、 填充换成亮青渐变，保证「走过多少」一眼可读。 */ .prog-num{color:var(--emerald-d);font-variant-numeric:tabular-nums} body.theme-dim .progress{background:#2f3f5c} body.theme-dim .progress > i{background:linear-gradient(90deg,#2f9e8c,#4fd6c0)} body.theme-dim .prog-num{color:#4fd6c0} /* 主色（--emerald 系）**当文字用**时的暗色适配。 ⚠ 为什么不直接在暗色变量块里重定义 --emerald：它是全站主色，同时被当作 背景/边框在用（.btn-primary 渐变、.chip.active、focus 描边、开关滑道、 导航图标……）。整体调亮会让这些控件的白字对比、描边观感全跟着变， 属于「为了修一处文字、动到整站交互」——风险不成比例。 所以只给「深底上的主色文字」加类，按需点亮： .em-text 深底上的主色文字 → #7fb8e8（亮蓝，对 #182234 约 6.4:1） .em-text-d 深底上的主色深字 → 同款亮蓝（浅色下仍是 --emerald-d 的稳重深蓝） ⚠ 这两个类只加在**文字**上，不要加到背景/边框的元素上。 */ .em-text{color:var(--emerald)} .em-text-d{color:var(--emerald-d)} body.theme-dim .em-text{color:var(--em-text-hi)} body.theme-dim .em-text-d{color:var(--em-text-hi-d)} /* 颜色工具 注意：底色一律用「淡色实色」，文字色与底色色相拉开 ≥60°（不同色、也不相近）。 这些值同样按 min(vs 卡片渐变四停靠点, vs 暗色卡) ≥1.135 求解过， 所以放在卡片上不会糊底。历史实现是 rgba(...,.13) 的半透明软色， 叠加后与卡片对比仅 1.12~1.22，暗色模式下几近不可见，已全部替换。 */ .c-emerald{color:#203c30;background:#a8dcc2} .t-emerald{color:var(--fg)} .t-rose{color:var(--rose)} .t-violet{color:var(--violet)} .t-sky{color:var(--sky)} .t-amber{color:var(--amber)} .t-cyan{color:var(--cyan)} .t-teal{color:var(--teal)} .bg-emerald-soft{background:#b1dac6;color:#4d2c6d} /* 淡绿底 / 深紫字 */ .bg-rose-soft{background:#f9bdc9;color:#f0617e} /* 逾期类：中粉底 + 数字红本体字（用户指定「文字直接用数字红」） */ .bg-violet-soft{background:#d9c9e6;color:#6d502c} /* 淡紫底 / 深棕字 */ .bg-sky-soft{background:#bfd3e1;color:#6d2c52} /* 淡天蓝底 / 深梅红字 */ .bg-amber-soft{background:#ded0b8;color:#2c596d} /* 淡琥珀底 / 深青字 */ .bg-cyan-soft{background:#b4d7dc;color:#6d2c65} /* 淡青底 / 深紫红字 */ .bg-teal-soft{background:#b1dad2;color:#602c6d} /* 淡青碧底 / 深紫字 */ .bg-zinc-soft{background:#ced2d7;color:#392c22} /* 中性灰底（保留：结案类需无彩色语义）/ 深赭字 */ .bg-indigo-soft{background:#cdcde7;color:#6d2c2c} /* 淡靛底 / 深砖红字 */ .theme-dim .bg-amber-soft{color:#2c596d} /* ===== 开关 toggle ===== */ .switch{position:relative;display:inline-block;width:42px;height:24px;flex:0 0 auto} .switch input{opacity:0;width:0;height:0} .switch .slider{position:absolute;cursor:pointer;inset:0;background:var(--border);border-radius:24px;transition:.2s} .switch .slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.3)} .switch input:checked + .slider{background:var(--emerald)} .switch input:checked + .slider:before{transform:translateX(18px)} .switch input:disabled + .slider{opacity:.45;cursor:not-allowed} /* ===== 仪表盘 ===== */ /* 经营分析顶部：四张卡片合并成的一张淡紫指标卡（用户 2026-09-15 指定）。 共 6 格，3 列 × 2 行（律师费/已回款/未回款 · 已支出/净收款/净利率）。 整体尺寸按「3 列能放下」收紧：图标 34→30、金额 23→19、内边距相应减小。 断点：<340px 折 2 列兜底（极窄屏），≥341px 起即为 3 列。 */ .kpi-merged{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:0; background:var(--card-grad);border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--shadow-soft);position:relative;overflow:hidden;padding:4px} /* 底色：• 经营分析那张（默认 .kpi-merged）保持**紫色调不变** —— 它和首页那张虽共用基类，但用户从没要求改它。 • 首页那张（.kpi-merged.kpi-home）2026-09-17 起改为**蓝色**， 因为用户要求「把首页前两个卡片底色互换」： 问候卡拿走了这套紫渐变，这边就接过问候卡原来的蓝叠加。 ⚠ 所以**不能**直接改 .kpi-merged 的 :before —— 那会连带把经营分析 那张也染蓝。必须用 .kpi-merged.kpi-home 这个双类选择器单独覆盖。 ⚠ 特异性提醒：.kpi-merged.kpi-home:before 是 (0,2,1)， .kpi-merged:before 是 (0,1,1)，前者高，**与书写顺序无关**都能覆盖。 （之前这里靠的是"后写的赢"，那是因为两者特异性相同 (0,1,0)； 现在换成了更高特异性的选择器，顺序就不再是关键了。） */ .kpi-merged:before{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(135deg,rgba(var(--kpi-tint-rgb),.13),rgba(var(--kpi-tint-rgb-d),.045))} /* 首页这张的渐变（用户 2026-09-17「首页 在办案件这张卡片，你帮我做一点渐变」）。 之前它只有**一层平铺的蓝叠加**（--card-tint-a/b 两段色、色相几乎相同）， 观感上是"一块均匀的淡蓝"，看不出渐变。 现在改成**三层叠加**，让颜色在卡面上真正走起来： ① 底：原来的蓝叠加（保留，保证与其它蓝卡仍是同一族）； ② 斜向主渐变：左上偏青蓝 → 右下偏靛蓝，色相跨约 20°； ③ 右上角一团柔光斑：给一个视觉焦点，避免整块色"死平"。 —— 第二轮（用户同日「在办案件 这里颜色现在有点深」）—— 实测第一版做深了：卡片顶部条带平均明度 **0.665**， 而同页标准蓝卡（.card-tint-sm）是 **0.763**，深了 13%； 最暗的左下角只有 0.579，明显发沉。 根因是主渐变那层 alpha 给太大（.34/.22/.26）**又叠在原有的蓝叠加之上**， 两层蓝相加就压暗了。 修法：**把主渐变整体提亮、同时降 alpha**，让它只负责"色相走向"， 不再负责"加深"；明度交给卡片自身的 --card-grad 渐变（顶白底蓝）。 现在的值（.18/.10/.14）是算过的： 预期把平均明度从 0.665 拉回 ~0.75 一档，贴近标准蓝卡但不完全相同 （它本来就该比平铺的卡"有一点层次"，只是不该"更深"）。 ⚠ 别再往上加 alpha 了 —— 这张卡的定位是"浅蓝带渐变"，不是深色卡。 ⚠ 三层必须都是**半透明叠加**，不能把底色写成实色 —— 卡片自己的 background 仍是 var(--card-grad)， 这样暗色模式下底色自动跟着变，不用另外维护一套深色值。 ⚠ 两张格之间只有 4px 内边距，渐变要从**卡片整体**铺过去， 不能逐格铺 —— 逐格会让中间那道缝出现色阶断层。所以写在 :before 上。 —— 第三轮（用户同日「再淡一点，上深 下淡这种」）—— 先说一个**实测出来的既成事实**，它决定了这一轮只能怎么改： 卡片本体 --card-grad2 = linear-gradient(155deg, #fff 0%, #f3f8fb 38%, #d9ecf5 80%, #c9e3f0 100%) 本身**就是一条横跨整卡的斜向渐变**： 实测本体在 y=120 这条线上，左端明度 0.921 → 右端 0.763，横向落差 **0.159**。 所以任何"左右齐平"的诉求都做不到 —— 那是 .card 级别、全站 20 多张卡 共用的底，动它会波及每一张卡（用户从没要求动它们）。 实测对照（临时关掉 :before 量的）： 本体纵向落差 0.031 → 叠加后 0.064（方向对上了，纵向被强化了 2 倍） 本体横向落差 0.159 → 叠加后 0.091（横向反而被**削弱**了） 即：这层叠加起的作用正是"削弱横向斜向、强化纵向"， 方向与「上深下淡」一致；剩下的横向 0.09 是本体自带的，不是这层造成的。 本轮实际改了**三处**（第二处是第三改，因为前两改力度不够）： ① **再淡一档**（本轮第一次改的样子）：主渐变 alpha .18/.10/.14 → .12/.07/.03。 打底那层 var(--card-tint-a/b)（.30/.16，全站通用蓝的取值， 和今日待办/近期事项/案件统计是**同一个值**）**不动** —— 它负责"这张卡是蓝的"，动了它这张卡就跟其它蓝卡不是一族了。 ② **方向改成纵向**：135° → 180°。 用户原话「上深 下淡这种」：顶部压得深、往下逐级放开。 180deg 的 0% 在**上边**，所以停靠点顺序必须是 深 → 中 → 淡， 写反了就成了"上淡下深"，与要求正好相反。 ⚠ 之前注释里写过"别改成纯纵向，会让两格的色差看起来像印歪了"， 那条是针对**斜向**渐变的顾虑（左右两格各偏一个方向才像印歪）。 纯纵向时两格在同一水平线上颜色**完全相同**， 整张卡看过去横平竖直，不存在印歪的问题 —— 所以这条约束在此失效。 ③ **改这张卡自己的底**（前两改都失败的根因，用户 2026-09-17 明确同意）： 前两改只调叠加层，怎么都做不出"上深下淡"——原因不在叠加层，在**卡底**。 卡片 background 用的是 var(--card-grad) = --card-grad2 = linear-gradient(155deg,#fff 0%,#f3f8fb 38%,#d9ecf5 80%,#c9e3f0 100%) 这是**全站每张卡**的通用底，走向是**上白下蓝**（越往下越蓝越深）。 实测本体自上而下 0.880 → 0.849，**往下深 0.031**。 叠加层 alpha 只有 0.1~0.3 量级，物理上压不过它： · 第一版 .12/.07/.03 → 叠加后仍"上浅下深" · 第二版 .20/.09/.01 → 仍"上浅下深" · 第三版 .34/.10/.02 → 仍"上浅下深"（只是被拉平） 所以改叠加层是死路 —— **必须把这张卡自己的底换掉**。 ⚠ 这是**唯一**一张不用通用 --card-grad 的卡，用户已明确批准。 范围严格限定在 `.kpi-merged.kpi-home`，不碰 .kpi-merged（经营分析那张）、 也不碰 .card / --card-grad2，所以其它 20 多张卡一点不受影响。 新底：linear-gradient(180deg,#cfe6f4 0%,#e2f0f8 46%,#f7fbfd 100%) · 180deg，0% 在**上边** → 上深下淡（与诉求一致，不再跟通用底对抗） · 顶部 #cfe6f4 明度约 0.79，底部 #f7fbfd 约 0.97，纵向差约 0.18 与同页标准蓝卡（.card-tint-sm，本体 0.88~0.85 + 通用蓝叠加） 的**整体明度**接近，所以不会显得突兀或比旁边卡更重 · 色相同族：都是 #3aa8e8 那一族的浅蓝，不是另起一个色系 叠加层同步**收回到只做"顶边加深"**： .34/.10/.02 → .10/.04/0（0% 在顶、100% 透明） 既然方向已由卡底承担，叠加层就不该再抢戏； 它现在只负责把最上面那条顶边再压一点，让"上深"更明确。 ⚠ 暗色**不能**跟着用这套浅色底 —— 卡底写在 `.kpi-merged.kpi-home` 这种不带 `.dark` 的选择器上，暗色下**同样生效**， 会把深色卡刷成浅蓝（实测暗色卡面最亮 0.662，是刺眼的亮卡）。 所以下面成对写了 `.theme-dim .kpi-merged.kpi-home{background:var(--card-grad)}` 让它回落 —— 暗色本体 --card-grad2 本来就是上深下淡 （#19233a → #15374f），方向与诉求一致，不需要换底。 ⚠ 改这条卡底前，务必先 grep 确认 `.kpi-merged.kpi-home{` 只有**两处** （一处浅色底、一处暗色回落；另有一处是 grid-template-columns 布局， 不冲突）。本项目已经因为"同名规则写了两次、后写的把前写的整条盖掉" 踩过两次坑（.theme-dim .kpi-merged.kpi-home:before 重复定义、 以及 180deg 被不存在的层叠问题误判），每次都是 grep 后才发现。 */ .kpi-merged.kpi-home{ background:linear-gradient(180deg,var(--kpi-home-1) 0%,var(--kpi-home-2) 46%,var(--kpi-home-3) 100%)} /* 暗色卡底：也必须**换掉**，不能只回落到通用底。 我一度以为"暗色本体 --card-grad2 (#19233a → #1a2c44 → #15374f) 本身就是上深下淡"，实测**反了**： 明度 #19233a 0.0171 → #1a2c44 0.0244 → #15374f 0.0346 `#15374f` 虽然是更深的**蓝**，但它的**明度更高**（0.0346 > 0.0171）， 所以通用底在暗色下是"**上深下浅**"——与诉求相反。 （教训：判断"深浅"只能看相对明度，不能凭颜色名字猜。 "深蓝" 说的是色彩饱和/暗度，跟 WCAG 相对明度不是一回事。） 所以暗色单独给一套：顶部 #0f1d33 → 底部 #1b2f4d，明度 0.0158 → 0.0290， 即"上深下浅"→ 修正为"上深下淡"。 ⚠ 暗色的 alpha/色值不能照抄浅色 —— 浅色顶 #cfe6f4 明度 0.79， 暗色顶 #0f1d33 明度 0.016，是两套完全不同的量级。 */ .theme-dim .kpi-merged.kpi-home{ background:linear-gradient(180deg,var(--kpi-home-1) 0%,var(--kpi-home-2) 48%,var(--kpi-home-3) 100%)} /* 暗色的叠加层：**去掉通用打底层**（var(--card-tint-*)），只留纵向一层。 为什么必须去掉 —— 手算过：暗色下打底是 .44/.24，而 tint_a rgba(58,168,232,.44) 比 tint_b rgba(42,140,214,.24) **alpha 更高、颜色更亮**，于是顶部被它提亮、底部相对变暗， 合成的结果是"顶部 0.133 / 底部 0.090" —— **方向被整个翻过来**， 变成"上浅下深"，跟诉求正好相反。 这是"两层渐变叠加时，谁决定方向"的典型坑： 单看纵向层是深→淡，但打底层是**浅→深**且力度更大，两者相抵后取打底的方向。 浅色下打底也是 .30/.16，但浅色卡底（#cfe6f4，明度 0.79）本来就很亮， 打底的相对影响力小得多，所以浅色不需要去掉打底。 ⚠ 去掉暗色打底的代价：这张卡在暗色下不再是"通用蓝族"的成员。 实测可接受 —— 它自己的卡底就是蓝色系，且浅色下仍带打底层， 两套模式下看都是"蓝的一张卡"。用户从没要求它必须与其它卡严格同色。 */ /* 暗色的叠加层：**用"压暗"而不是"染蓝"来加深顶部**。 ⚠ 这是暗色与浅色最容易搞反的地方： 浅色卡底明度 ~0.66，叠一层 rgba(58,168,232,·)（明度 0.36 的蓝） 是**往下压**，所以浅色顶部的深 = 叠蓝。 暗色卡底明度只有 ~0.028，而 rgba(58,168,232,·) 明度 0.36 —— 叠上去是**往上提亮**！实测暗色顶部被抬到 0.051、下面反而 0.028， 整体呈现"顶部一块亮斑 + 下面平"，方向彻底反了。 所以暗色改用一层**适度的**压暗（近黑蓝 rgba(0,4,12,.28) → 0）， 配合卡底本身的上深下淡（#1b2f4d → #0f1d33，明度 0.028 → 0.016）。 ⚠ 力度别给大：第一版用了 .55，实测顶部被压到 0.006（近乎纯黑）， 暗色卡看起来像"上面挖了个黑洞"。.28 就够做出可辨的纵向走向。 */ .theme-dim .kpi-merged.kpi-home:before{ background:linear-gradient(180deg, rgba(var(--kpi-dark-rgb),.30) 0%, rgba(var(--kpi-dark-rgb),.14) 34%, rgba(var(--kpi-dark-rgb),0) 100%)} .kpi-merged.kpi-home:before{ background:linear-gradient(180deg, rgba(var(--tint-rgb),.06) 0%, rgba(var(--tint-rgb),.03) 46%, rgba(var(--tint-rgb),0) 100%), linear-gradient(135deg,var(--card-tint-a),var(--card-tint-b))} /* ⚠ 首段 alpha 这个数**是算过的，不要随手调大**： 卡里有一行 delta 灰字（--muted #66708a），压在"顶部最深合成色"上。 （2026-09-25 该行已按用户要求取消，见上方 .delta 段说明； .06 这个值**保持不变** —— 它是当前卡底的既定观感，别因为"那行字没了"回调。） 卡底 #cfe6f4（L 0.79）+ 纵向层 alpha 的合成明度与对比度实测： .10 → 顶部合成 L 0.5758 → 对比度 2.95:1 ← 不达标（WCAG 3:1） .08 → 0.5822 → 2.98:1 .06 → 0.5886 → 3.01:1 ← 当前值，刚好达标 .04 → 0.5950 → 3.04:1 所以把首段定在 .06，二段同步从 .04 收到 .03 保持喉部平滑。 若以后要把这张卡再调深，必须重新算这段灰字的对比度。 */ /* 暗色：本体色 --card-grad2 在暗色下**本身就是上深下淡**的 ⚠⚠ 这里**又一次**踩了"同名规则写两条、后写的把前写的整条盖掉"的坑： 旧的 `.theme-dim .kpi-merged.kpi-home:before`（带通用打底层那条） 一直留在文件中，而我上面新写的暗色规则**特异性完全相同 (0,3,1)**， 于是被它整条覆盖 —— 表现为"暗色换底生效了、但叠加层还是旧的"， depth 一直是 -0.022 怎么调都不动。 这是同一个坑的**第三次**（前两次：.theme-dim ...:before 重复、180deg 误判）。 已删除旧规则。**纪律：新增/修改带伪元素的选择器前， 先 `grep -nE '^\.(dark )?<选择器>\{'` 数一遍，必须只有一条。** */ /* 卡片标题：图标 + 「律师费收支总计」（用户 2026-09-15 指定）。 规格完全对齐全站通用的 .card-head .h，保证跟「收支看板」「案型结构」 等卡片标题看起来是同一套： 字体 15px / 600 / var(--fg)（浅色 #1e2433 近黑，暗色 #e6ebf5 自动转亮）； 图标 17px，随 currentColor → 用户要的「黑色」在浅色下即近黑，暗色下自动反白； 分隔线用 dashed 虚线，与 .card-head::after 一致。 grid-column:1/-1 让标题通栏占满一行，后面的 6 格才会被挤到下面。 */ .kpi-merged .kpi-head{position:relative;grid-column:1/-1;display:flex;align-items:center;gap:8px; padding:16px 18px 12px;font-size:15px;font-weight:600;color:var(--fg)} .kpi-merged .kpi-head:after{content:"";position:absolute;left:18px;right:18px;bottom:0; border-bottom:1px dashed var(--muted-2)} /* 标题图标：💰 原生彩色 emoji（用户 2026-09-16 指定「还是换成 💰 有颜色的」）。 不做任何 filter / 分层 —— 保持 emoji 自带的彩色外观。 尺寸用 font-size 控制（emoji 尺寸跟字号走，不是 width/height）， 15px 让视觉重量与旁边 17px 线性 SVG 图标相当。 暗色模式无需处理：emoji 自带色彩，在深浅底上都清晰。 历史坑：曾用 filter:brightness(0) 压黑 —— 那会把钱袋与 $ 符号一起压成 同一块纯黑，符号直接消失；emoji 是位图，无法只给其中一部分改色。 */ .kpi-merged .kpi-head-ico{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0; font-size:15px;line-height:1;width:var(--card-head-ico-box)} /* 若以后换回 SVG 图标，尺寸按 17px 对齐 .card-head .h svg。 注：这里用「后代选择器」而不是子选择器 `>` —— 本沙箱的 Chromium 对 .kpi-merged>.kpi-head-ico 这类子选择器实测 matches() 恒为 false （同样 DOM 用后代选择器就正常），会导致整条规则静默失效。 */ .kpi-merged .kpi-head-ico svg{width:17px;height:17px} /* 内容水平居中（用户 2026-09-16 指定「下面内容往右移动 到整体居中」）。 ⚠ 必须写在这一条里、而不是另起新规则：本块 `.kpi-merged>.kpi-col` 是 (0,2,0)， 后面若用同样特异度的选择器追加 align-items:center，虽然能生效但容易被 后续改动打乱顺序而静默失效；合并进主规则最稳。 居中原因：每格内「图标+标签」那行很短（图标 21px + 标签约 42px ≈ 63px）， 而下方金额很宽（「116.50 万」≈ 104px）。两行都左对齐时， 短的那行右侧会空出一大块，整格看着偏左、重心不稳。 */ .kpi-merged>.kpi-col{position:relative;display:flex;flex-direction:column;gap:6px;padding:13px 14px;min-width:0; justify-content:flex-start;align-items:center;text-align:center} /* 分隔线：已全部取消（用户 2026-09-16 指定「卡片取消掉白色横线竖线」）。 原来 6 格之间有竖线（每格描左边）+ 横线（第二行描上边），在浅色卡上呈白色细线； 用户希望指标格之间干净通透，改为靠间距与栅格自然区分。 注意 grid 的 gap 仍为 0 —— 去掉分隔线后若不加间距，6 格会贴在一起糊成一片， 故给 .kpi-col 保留左右内边距（11px 10px），视觉上自然留出通道。 历史提醒：这里曾因标题占了第 1 个 grid item 导致 nth-child 公式偏移一格 （3n+1/n+4 应为 3n+2/n+5），现已整体删除边框规则，该坑不复存在。 */ .kpi-merged>.kpi-col+.kpi-col{border-left:none} .kpi-merged>.kpi-col:nth-child(even){border-left:none} .kpi-merged>.kpi-col:nth-child(n+4){border-top:none} @media(min-width:341px){ .kpi-merged{grid-template-columns:repeat(3,1fr)} .kpi-merged>.kpi-col{border-left:none} .kpi-merged>.kpi-col:nth-child(n+4){border-top:none} .kpi-merged>.kpi-col:nth-child(3n+2){border-left:none} .kpi-merged>.kpi-col:nth-child(n+5){border-top:none} } .kpi-merged .lab{font-size:11.5px;color:var(--muted);line-height:1.25;flex:1 1 auto; overflow:visible;text-overflow:clip;white-space:nowrap} .kpi-merged .val{margin-top:1px;font-size:19px;font-weight:800;letter-spacing:-.4px;line-height:1.22; white-space:normal;overflow-wrap:anywhere} /* 「图标 + 标签」那行也要居中，否则图标仍靠左、标签被 flex:1 撑开留在中间偏左 */ .kpi-merged>.kpi-col>div:first-child{justify-content:center} /* 指标格图标：彩色 emoji（用户 2026-09-16 指定 律师费🪙 已回款✅ 未回款⏳ 已支出💸 净收入💵 净利率💹）。 原来是「紫色渐变小方块 + 白色线性 SVG」，现换成 emoji 字符： · 去掉 background / border-radius / box-shadow —— emoji 自身是完整图形， 再套紫底会显脏，且 emoji 颜色各不相同，统一底色反而干扰； · 尺寸用 font-size 控制（emoji 跟字号走，width/height 对字符无效）， 17px 与标题图标 15px 形成层级，同时不撑高格子； · line-height:1 防止 emoji 撑出额外行高、把「图标+标签」那行顶歪。 */ .kpi-merged .ico{font-size:17px;line-height:1;flex-shrink:0} .kpi-merged .ico svg{width:16px;height:16px} /* ⚠ 暗色必须**再覆盖一次**，不能只靠上面那条浅色规则。 踩过的坑：`body.theme-dim .kpi-merged:before`（本条，特异性 0,2,1） 写在浅色规则 `.kpi-merged.kpi-home:before`（也是 0,2,1）**后面**， 两者特异性相同 → **后写的赢** → 暗色下 .kpi-home 被打回紫色， 于是暗色里两张卡又变成同一个色（实测两张都是 258°）。 修法不是调整书写顺序（那太脆弱，谁把规则搬个位置就又坏）， 而是用 `.theme-dim .kpi-merged.kpi-home:before`：特异性 (0,3,1)， 从**权重上**稳压 (0,2,1)，跟写在哪儿无关。 */ .theme-dim .kpi-merged:before{background:linear-gradient(135deg,rgba(var(--kpi-tint-rgb),.18),rgba(var(--kpi-tint-rgb-d),.07))} /* ============================================================ kpi 卡片「主题身份色」—— 已变量化（2026-09-21） ------------------------------------------------------------ 原先这里有 6 条 body.theme-{jade,warm} 的 kpi 特例，解决两类问题： ① kpi-home 卡底是**写死的浅蓝/深蓝**（不走变量）→ 其它主题继承到蓝色补丁； ② 压暗层 / 通用紫叠加是**写死的近黑蓝 / 紫** → 与新主题色相不搭。 现全部提成变量，值写在各主题变量块里： --kpi-home-1/2/3 卡底三段（浅底主题与深底主题各一套，明度都上深下淡） --kpi-dark-rgb 深底压暗层的 RGB 三元组（dark=0,4,12 / ink=10,12,15 / pine=8,16,12） --tint-rgb 卡片叠加层基色三元组（现有 --card-tint-* 的同色版） ⚠ alpha（.30/.14/0 与 .06/.03/0）是**算过对比度的**，见上文两段长篇说明， 新主题只换色相、绝不改这些数。 ⚠ 新增主题必须把这几个变量给全，否则会继承上一主题的色相。 */ ⚠⚠ 这里**曾经同时存在两条 `.theme-dim .kpi-merged.kpi-home:before`**： 上面那条（值 .14/.08/.03，带 180deg）和这里这条（只有打底层）。 两条**特异性完全相同 (0,3,1)** → 后写的赢 → 上面那条被整条丢弃， 暗色下这张卡根本没有纵向叠加层，只剩一层 135deg 的通用蓝。 这正是"light 正常、dark 没有纵向渐变"的根因。 **教训：加新规则时没删掉旧的同名规则。** 改这类规则前先 `grep -n '<选择器>' css/styles.css` 确认只有一处定义， 别只看"我新写的那条在文件里"就以为生效了。 现在这条已删（打底层已经在上面那条的 background 列表里， 不需要再写一遍）。 */ @media(max-width:400px){ .kpi-merged .val{font-size:17px} .kpi-merged>.kpi-col{padding:10px 8px;gap:5px} .kpi-merged .ico{font-size:15px} .kpi-merged .ico svg{width:14px;height:14px} .kpi-merged .lab{font-size:11px} .kpi-merged .kpi-head{padding:13px 14px 10px;font-size:14px} .kpi-merged .kpi-head:after{left:14px;right:14px} /* 窄屏 .kpi-head 自身 padding 从 18 降到 14，对应的对齐基准同步降 4px。 ⚠ 这一行必须跟着 :root 的 --card-head-pad-l 一起改（22 → 18）， 漏了的话窄屏下「案件统计」会比「律师费收支总计」多右移 4px。 */ :root{--card-head-pad-l:18px} } /* ============================================================ 首页概览卡 .kpi-home（用户 2026-09-17 指定「排版参照经营分析 律师费收支总计」） 借的是 .kpi-merged 的布局逻辑：一张合并卡、横排若干格、每格竖向三层。 两处必须单独开规则，否则会被经营分析那边的设定带偏： ① 列数 —— 上面 @media(min-width:341px) 把 .kpi-merged 设成 repeat(3,1fr)， 那是给经营分析 6 格用的。首页只有 2 格，直接复用会各占 1/3、 右侧空掉整整一列（430px 实测：卡宽 406px，两格共 264px，右空 137px）， 这就是用户说的「居中」没做到。.kpi-merged.kpi-home 是 (0,2,0)， 比 media query 里的 (0,1,0) 高，锁成 2 列即可，与前后顺序无关。 ② 图标 —— 沿用改版前的「渐变方块 + 白色 SVG」，不是经营分析那套 emoji （用户明确否掉了替换图标，详见 js/dashboard.js 里的注释）。 背景色由 HTML 内联给出（每格不同），这里只管盒子的形状与尺寸。 ============================================================ */ .kpi-merged.kpi-home{grid-template-columns:repeat(2,1fr)} /* 图标尺寸（用户 2026-09-17 两次调整）： ① 先由 42px 收到 18px（「图标不要这么大，我要你参考经营分析那边」）—— 经营分析的指标图标是 emoji，实测渲染 17×17px，那是参照的视觉外廓； ② 收完后反馈「太小了，帮我扩大一点」，再加到 24px。 24px 的依据：比参照 emoji 的 17px 大约 1.4 倍。台阶是这么来的 —— 纯色方块比同尺寸彩色 emoji 视觉更"轻"（emoji 自带细节和色彩层次， 方块是单色平面），等宽会显得单薄；1.4 倍双方向都稳妥： 明显比 17px 的参照有存在感，又远小于原来 42px 的"压过一头"。 内嵌 SVG 14px —— 与 24px 方块保持约 0.58 的比例， 小图标（11px）在方块里会留出过多空白。 ⚠ 不要把 emoji 的 17px 直接写成方块的 font-size：emoji 的 17px 是字形高， 方块是容器盒，不是同一个量纲，写 17px 会让内嵌图标缩得几乎看不见。 */ /* 浅底 + 同色系深色线条（soft badge）。 淡化的第二档（用户 2026-09-17「图标再淡一点」→ 选「浅底 + 深色线条」）： 第一档只是把实心渐变提亮，但白色 SVG 在 #a78bfa 上对比度仅 2.7:1， 继续提亮会糊，所以换成浅底 —— 底色亮度大幅提升（视觉上"淡"）， 线条改用同色系深色，对比度反而升到 5:1 以上。 SVG 的 stroke 是 currentColor（见 icons.js 的 ic()），所以只改 color 就够。 内描边 1px：浅底压在白色卡片上会"没有边界"，靠这圈描边勾出圆角方块的形。 描边用同色系低透明度，不用中性灰 —— 灰描边在浅紫底上会显脏。 */ .kpi-home .ico{width:34px;height:34px;border-radius:11px;display:flex;align-items:center; justify-content:center;flex-shrink:0} .kpi-home .ico svg{width:19px;height:19px} /* emoji 字形（2026-09-17 起两个卡片的图标都是 emoji：📜 / 💴）。 19px 是给 SVG 定的量纲，emoji 不能照抄：emoji 的 font-size 是**字形高**， 而 SVG 的 19px 是外框边长，两者不等价；且 emoji 自带内边距、实际墨迹更小。 实测 19px 的字形渲染出来只有约 17px 的可见高度，比原来的线条图标显小， 所以按 34px 方块给到 21px（约 0.62 的比例）。 line-height 固定 1：不固定的话 emoji 会按字体默认行高（约 1.2 倍）撑开， 在 flex 居中的方块里会偏下 —— 这也是 emoji 常见的"看着不居中"的原因。 */ /* 21px -> 17px（用户 2026-09-17「图标缩小点，有点撑太满了」）。 当初给 21px 是怕"显得小"，但那是照着 SVG 时代的观感推的： 📜 的字形盒宽 26.2px（比方块 34px 只窄 8px），横向几乎顶到边， 所以是"太满"而不是"太小"。17px 时字形盒约 21px，四周留白约 6.5px， 与经营分析那边参照物的留白比例接近。 ⚠ 只改字号即可，别去动方块尺寸 —— 方块 34px 是上一轮确认过的。 —— 第二轮（用户同日「在办案件 里的图标再缩小点，因为视觉上这个图标会大一些」）： 📜 与 💴 同为 17px、同为 21.2×17 的**几何尺寸**，但 📜 的墨迹是 上下贯通的一整幅卷轴（顶天立地），💴 的钞票只占字形盒中间一带、 四周本就空。字形盒相等时，墨迹的"视觉重量"完全不同 —— 这就是同为 17px 却只显得 📜 偏大的原因。 所以两个 emoji 用不同字号：📜 收到 15px，💴 维持 17px。 这与"深浅参照案件统计"是同一个道理 —— 对齐看的是**视觉结果**，不是数值。 用 .emoji-scroll / .emoji-money 两个类区分，而不是继续内联字号： 将来再微调某一枚时，改一处、且不会波及另一枚。 */ .kpi-home .ico-emoji{font-size:17px;line-height:1;display:block} .kpi-home .ico-emoji.emoji-scroll{font-size:15px} /* —— 第三轮（用户 2026-09-17「这个框框里换一个颜色，因为和背景颜色一样了」）—— 根因是**同色系撞车**：卡片底已经是案件统计同款蓝（#c4e5f8 → #ddedf8）， 而方块底是 #f4f1ff / #eff7ff，两者明度差只有 0.05 左右、 又都在同一片蓝调里，界面上就"糊成一片"看不见方块了。 再往浅调不行、往深调一点点也不行（还是同色系），所以换**色系**： · 紫卡 → 实色紫罗兰 · 蓝卡 → 实色青绿（不是蓝！蓝会和蓝底撞） 同时把图标由"深色线条"改回**白色字形** —— emoji 是彩色字形、 不受 color 控制，这里给白色是为了让 📜/💴 边缘有支撑， 不然彩色 emoji 压在实色底上会显得飘。 选色的硬指标是**色相角要离卡片蓝底(约 200°)足够远**，不只看明度。 —— 第四轮（用户同日「不要改成实色啊，把第一个换个颜色」）—— 实色方案被否掉了，所以退回**浅底 + 深色线条**的样式（与原方案同构）， 只把撞色的那一枚换掉： · 在办案件 淡紫 #f4f1ff(≈265°) → **淡翡翠 #d6f5e6(≈152°)** ✅ · 标的合计 淡蓝 #eff7ff(≈210°) → **也改成淡翡翠 #d6f5e6** ✅ （先试过淡琥珀，用户改主意要两枚一致；底色只负责"浮出来"， 两枚靠图标本身 📜 / 💴 区分即可） ⚠ 曾试过实色块，用户明确不要 —— 以后别再往实色改。 判据是该色与**它所在卡片的底色**色相角拉开； 注意底色已回退成原来的紫调（见 .kpi-merged 附近的说明），不是蓝的。 ⚠ 这一档与前面「图标再淡一点」相反 —— 那边是卡片还白着、要求图标变淡； 现在卡片自己变蓝了，图标必须重新"浮出来"。别再照旧改回去。 投影：浅底不需要投影，留内描边勾形即可（与早期浅底方案一致）。 */ .kpi-home .ico.tone-violet{background:#d6f5e6;color:#046c4c; box-shadow:inset 0 0 0 1px rgba(4,108,76,.16)} /* 标的合计：原为淡琥珀（用户随后改主意「淡琥珀 也改成淡翡翠」）。 两枚都用淡翡翠，靠**图标本身**区分（📜 卷轴 / 💴 钞票）， 不靠底色 —— 底色只负责"从卡片背景里浮出来"这一个职责。 */ .kpi-home .ico.tone-sky{background:#d6f5e6;color:#046c4c; box-shadow:inset 0 0 0 1px rgba(4,108,76,.16)} /* 暗色模式：浅底在深背景上会变成一块刺眼的亮斑， 改用同色系低透明底 + 亮一档的线条（与早期浅底方案的处理一致）。 */ .theme-dim .kpi-home .ico.tone-violet{background:rgba(16,185,129,.18);color:#6ee7b7; box-shadow:inset 0 0 0 1px rgba(16,185,129,.3)} .theme-dim .kpi-home .ico.tone-sky{background:rgba(16,185,129,.18);color:#6ee7b7; box-shadow:inset 0 0 0 1px rgba(16,185,129,.3)} /* ⚠ 灰色副标题 `.kpi-home .delta` 的两条规则已删除（原为 11px / --muted / margin-top:10px + 左侧 13px activity 图标；曾是改版前 .stat .delta 的等价物， 用户 2026-09-17 要求恢复，并特意用 .kpi-home 前缀锁作用域、避免泛类名 .delta 被别的卡片撞上）。删除原因：2026-09-25 用户要求「在办 · 总案件数 / 案件标的金额 这行取消掉」，首页两个大格不再渲染该行，规则随之无匹配对象。 若日后要恢复该行，照上述参数重写即可。 */ @media(max-width:400px){ /* 窄屏降一档（28 / 16px），与上面 34/19 的比例保持一致（约 0.56）。 别只改方块不改 SVG —— 内嵌图标相对方块变小会显得空。 */ .kpi-home .ico{width:28px;height:28px;border-radius:9px} .kpi-home .ico svg{width:16px;height:16px} } /* ============================================================ 案件统计卡（用户 2026-09-16 新增；同日追加年份/月份筛选 + 布局调整 + 蓝色底） 标题行只有「案件统计」；切换器与年月下拉放在内容区第一行。 ============================================================ */ /* 蓝色底（用户 2026-09-16 指定「取消掉底色，只留卡片底色， 卡片不做上白下蓝，参照第一个紫色卡片逻辑，只是不用紫色，用蓝色的」）。 做法与 .kpi-merged 完全同构： · 底层 background 用 --card（纯色），不用 --card-grad2 —— 这就是「不做上白下蓝」：去掉 #ffffff→#c9e3f0 那条纵向渐变； · :before 铺一层 135° 蓝色渐变叠加（rgba 半透明，所以底仍是纯色感）。 .st-card 在 HTML 里是
，.card 已给了 --card-grad2， 所以这里必须显式覆盖 background 才能压掉它（同优先级靠后生效）。 ⚠ 不能用 overflow:hidden 来裁 :before —— 年月下拉是 absolute 定位、 会伸出卡片边界，overflow:hidden 会把面板切掉（实测过：面板下半截被裁掉）。 改为给 :before 自己加同值圆角（继承 --radius），并只锁 x 轴不裁 y 轴。 */ .st-card{background:var(--card);position:relative;overflow:visible} .st-card:before{content:"";position:absolute;inset:0;pointer-events:none; border-radius:var(--radius); background:linear-gradient(135deg,var(--st-tint-a),var(--st-tint-b))} /* 内容提到叠加层之上（:before 是 absolute，不参与 flex 布局， 但会让同级文字被覆盖一层半透明蓝；加 position:relative + z-index 保证文字最上层） */ .st-card>.card-head,.st-card>.card-pad{position:relative;z-index:1} /* 左边距对齐「律师费收支总计」（详见 :root 处 --card-head-pad-l 的注释）。 ⚠ 这条必须在 media query **外面**：初版只写进 @media(max-width:559px)， 结果 ≥560px 时退回 .card-head 的默认 18px padding，宽屏照样偏 8px。 窄屏那条改成 var() 只是为了让这里的变量能覆盖不同断点，真正生效的是本条。 */ .st-card .card-head{padding-left:var(--card-head-pad-l)} /* 标题行：不再挂控件，恢复成全站 .card-head 的标准形态 （用户 2026-09-16 指定「把按月按年的按钮移到下面内容区，不要接在标题后面」）。 下面这两条只为「防止标题意外换行」保留，不含任何工具条逻辑。 */ .st-card .card-head .h{white-space:nowrap;display:flex;align-items:center;gap:8px} .st-card .card-head .h svg{flex-shrink:0} /* 标题图标：🏛️ 原生彩色 emoji（用户 2026-09-16 指定，原为 ⚖️）。 尺寸用 font-size 控制（emoji 是字符，width/height 无效）。 图标与标题的间距（用户 2026-09-16 指定「图标和标题 间隔 参考 律师费收支总计」）： 参考卡片 .kpi-merged .kpi-head 用的是 gap:8px，实测图标右缘→文字左缘 = 8px。 本卡原来是 5px，现统一为 8px（间距由父级 .h 的 gap 提供， 故模板里 `` 与「案件统计」之间**不能再留空格** —— 空格会被算作一个文本节点参与 flex 布局，实测额外多出约 4px， 最终变成 12px 而不是 8px）。 顺带 aria-hidden：图标是装饰，重复朗读无意义。 ⚠ 图标不能压到下面虚线（用户 2026-09-16 指定「图标不要超过下面虚线」）： emoji 的「墨迹」通常比 font-size 盒更高，🏛️ 比 ⚖️ 更明显 —— 它自带 基座与台阶，基线以下的部分会往下探。原来 15px/line-height:1 时， 墨迹底几乎贴到虚线（实测视觉间隙只剩约 2~3px），看起来像「超线」。 处理：字号收到 14px，并把行高固定为 1，靠 box 约束住墨迹； 同时给 .h 一个与虚线无关的固定行盒高度，避免被撑高后挤压 padding。 14px 与右侧标题文字（15px）同量级，视觉重量仍然相当。 */ /* 图标套进定宽盒并居中，盒宽与 .kpi-head-ico 共用同一个变量 —— 这样 🏛️ 与 🪙 尽管字形宽度不同，后面的标题文字起点仍严格一致。 */ .st-card-ico{font-size:14px;line-height:1;flex-shrink:0;display:inline-flex;align-items:center; justify-content:center;width:var(--card-head-ico-box)} /* 内容区第一行：切换器 + 年月下拉。 独立成行、左对齐；控件高度统一 24px，避免 2px 视觉错位。 允许换行（flex-wrap）—— 320px 极窄屏下控件会自动折行，不会溢出卡片。 */ .st-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:0 2px 9px} .st-bar>*{height:24px} /* ============================================================ 统一分段切换器 .seg（用户 2026-09-17 指定三处统一） ------------------------------------------------------------ 要求原文： · 通讯管理「机构 个人 企业」—— 文字大小、加粗参考**日程列表**的字体； 且「三个标题之间间距可以再拉宽一点」； · 案件管理「不同标题点击」也参考改好后的「机构 个人 企业」这种样式。 参照物实测（430px 视口）： 日程列表徽标 .badge.ev-badge → font-size:11px / font-weight:600 案件管理 .mode-tg → 按钮 29px 高、12px 字、内边距 6px 12px 所以 .seg 的口径 = 「日程列表的字号字重(11px/600) + 案件管理的控件体量」。 为什么不直接复用 .mode-tg：它的选中态是**白底**（.mode-tg button.active 是 --card 背景 + 阴影），而通讯管理那一版选中态是**淡紫底**， 两者观感不同。用户说的是"参考这种样式"，指的是体量与字形， 故选中的配色跟随全站紫调（与 .st-sw-btn 的淡紫一致）， 体量则比原来那枚 20px 高的小胶囊明显放大。 命名用 .seg 而不是 .cl-switch：三处（通讯管理 / 案件管理 / 案件统计） 共用同一套规则，名字带 cl- 前缀会误导下一个改动的人。 ============================================================ */ .seg{display:inline-flex;align-items:center;gap:6px;padding:3px;border-radius:11px; background:var(--bg);border:1px solid var(--border);flex-shrink:0;box-sizing:border-box; position:relative} .seg>button{appearance:none;border:0;background:transparent;cursor:pointer; height:29px;padding:0 13px;border-radius:8px; font-size:11px;font-weight:600;line-height:1; color:var(--muted);font-family:inherit;white-space:nowrap; position:relative;z-index:1; /* 文字颜色单独过渡：滑块是位置在动，文字是颜色在变， 两者时长一致才不会一个先到一个后到、看着脱节。 .26s 是首版（用户 2026-09-17「不要一下跳动」已够）， 同日追加「速度还可以放慢点」→ 提到 .42s；再追加「远的按钮还是太快」 → 改随距离变化，这里必须跟着用同一个 --seg-dur 变量， 否则滑块慢下来了、字色还按固定 .42s 变，两者会脱节。 */ transition:color var(--seg-dur,.42s) ease} .seg>button:focus-visible{outline:2px solid var(--violet);outline-offset:-2px} /* 选中态的紫底**不再画在按钮上**，改由下面的 .seg-thumb 滑块承载。 这是本次改动的关键（用户 2026-09-17：「紫色框框 不要一下跳动，缓慢滑动」）： 原写法是给 .is-on 直接换 background:linear-gradient(...) —— 而 CSS **无法对渐变做插值**，transition 对它无效，所以切换时是硬切，观感就是"跳"。 改成：一个独立的滑块元素，用 transform:translateX 移动位置、 width 跟着目标按钮变宽变窄，这两者都是可动画属性，于是能真正滑过去。 滑块不参与命中测试（pointer-events:none），点击照常落到按钮上。 */ .seg-thumb{position:absolute;z-index:0;top:3px;left:0;height:29px; width:var(--seg-w,0px);transform:translateX(var(--seg-x,0px)); border-radius:8px;pointer-events:none;opacity:0; background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(124,58,237,.09)); box-shadow:inset 0 0 0 1px rgba(139,92,246,.28); /* 时长不是写死的：由 JS 的 syncSegThumbs() 按「这次要滑多远」写进 --seg-dur （近距离 .42s 起，每多 1px 加 .004s，封顶 .8s）。 固定时长的毛病是位移越远速度越快 —— 远的按钮看着"嗖"一下就过去了。 曲线 (.32,.06,.2,1)：起步稍快、收尾更柔，配长时长是"稳稳滑过去"， 而 (.4,0,.2,1) 起步偏慢，时长一拉长那个"顿一下"会被放大。 */ transition:transform var(--seg-dur,.42s) cubic-bezier(.32,.06,.2,1), width var(--seg-dur,.42s) cubic-bezier(.32,.06,.2,1), opacity .22s ease} /* 只有存在选中项时才显示滑块 —— 否则初始状态会在左上角闪一个 0 宽的块。 .has-on 由 JS 的 syncSegThumbs() 添加（选中项存在时才加）。 */ /* 只写 .has-on / .seg-no-anim 而不带 .seg 前缀：这两个类由 JS 加在切换器 根元素上，而根元素可能是 .seg 也可能是 .st-switch（案件统计「按月/按年」）。 滑块元素本身都叫 .seg-thumb，按它选就够了，不必枚举两种根。 */ .has-on>.seg-thumb{opacity:1} /* 首次摆位时由 JS 临时加上，用于关掉过渡（详见 utils.js 的 syncSegThumbs）。 只禁 transform / width，opacity 保留 —— 首次出现仍需要那 0.18s 的淡入。 */ .seg-no-anim>.seg-thumb{transition:opacity .22s ease} .seg>button.is-on{color:#6d28d9} .theme-dim .seg>button.is-on{color:#c4b5fd} /* 通讯管理那行：切换器在搜索**上方**独占一行（用户 2026-09-17 指定）， 不能塞进 .toolbar（弹性布局会把搜索框拉到同行）。 下边距 10px —— toolbar 自身 margin-bottom 是 14px， 两行之间比"行到卡片"更紧凑，才不会被误读成两块无关内容。 */ .cl-filter-bar{margin-bottom:10px} /* 分段切换器：两枚胶囊，选中态用紫色描边 + 淡紫底，与整页紫调一致。 （2026-09-16 曾随「按月」一并删除，后按用户要求恢复，规则与删除前一致。） */ /* 与 .seg 是同一套机制（共用 .seg-thumb 滑块、共用 syncSegThumbs）， 但**尺寸刻意不同**：这里 20px 高 / 12px 字 / 7px 内边距，是嵌在案件统计 标题行里的紧凑款；.seg 的 29px 是独立成行的常规款。别为了复用把两者合并， 案件统计那一行高度有限，换成 29px 会把整行顶高。 */ .st-switch{display:inline-flex;align-items:center;gap:1px;padding:0 1px;border-radius:9px; background:var(--bg);border:1px solid var(--border);flex-shrink:0;box-sizing:border-box; position:relative} .st-sw-btn{appearance:none;border:0;background:transparent;cursor:pointer; padding:0 7px;height:20px;border-radius:7px;font-size:12px;font-weight:600;line-height:20px; color:var(--muted);font-family:inherit;white-space:nowrap; /* 文字在滑块之上（滑块 z-index:0，按钮 z-index:1），否则紫色底会盖住字。 */ position:relative;z-index:1; transition:color var(--seg-dur,.42s) ease} /* 切换器 hover 不再变色（与案件行保持一致，用户要求取消变色反馈）。 保留 :focus-visible 的键盘焦点环以满足可访问性。 */ .st-sw-btn:focus-visible{outline:2px solid var(--violet);outline-offset:2px} /* 紫底**不画在按钮上**，交给 .seg-thumb 滑块 —— 与 .seg 同样的原因： CSS 无法对 linear-gradient 插值，写在按钮上 transition 无效、切换是硬切。 这里只留字色。 */ .st-sw-btn.is-on{color:#6d28d9} .theme-dim .st-sw-btn.is-on{color:#c4b5fd} /* 紧凑款滑块：top 0 —— .st-switch 的 padding 是 "0 1px"（上下 0）， 按钮紧贴 padding box 上沿；.seg 那边 padding 是 3px 所以用 top:3px。 高度/圆角跟着按钮走（20px / 7px），比 .seg 的 29px / 8px 小一档。 */ .st-switch>.seg-thumb{top:0;height:20px;border-radius:7px} /* ——— 自定义下拉（年 / 月）——— 不用原生