/* 希捷 ERP —— 样式全部走变量 (§8) 字号 5 级 / 圆角 4 级 / 断点 1024 920 720 金额显示: ¥ + 千分位 + 2 位小数 */ :root{ /* ★ 2026-09-16 换肤：对齐百草商贸通（色值从本机百草 swf + 官网截图提取） ★★ 2026-09-26（张总「界面美化对标百草」P0）：中性色换成**百草真机取样**的暖色系 —— 内容底 #F3F1E9（暖米）、分组灰字 #999999、顶栏 #373737。 ★ 只动"底/描边/文字"这些中性色：**主色与顶栏仍由官网皮肤注入** （张总拍板：ERP 继续跟随官网皮肤，这一条不学百草）。 */ --bg:#F3F1E9; /* 主背景 暖米（百草真机取样） */ --panel:#ffffff; /* 卡片 / 面板 */ --panel-2:#FAF7F0; /* 表头 / 悬停底（暖白） */ --line:#E6E0D2; /* 描边 暖灰（跟着暖底走，冷蓝灰会显脏） */ /* ★★ 2026-10-17（界面美化 2.0 · P2-a）：**补一档更深的线**。 起因是一次真 bug：我给看板图表写了 `background:var(--line-strong)`， 而本文件**从来没定义过这个令牌** ⇒ 声明在计算值阶段失效、回落到初始值 （`transparent`）—— 0 值灰条与日均虚线**整条看不见**，页面照样 200、判据全绿。 ⇒ 补上定义（值取暖灰更深一档，与 `--line` 同色系），并作为"图表/分隔"用的线。 */ --line-strong:#CFC8B4; /* 图表基线 / 0 值柱 / 更明确的分隔 */ --ink:#373737; /* 主文字（百草真机取样） */ --ink-2:#5c6670; /* 次要文字 */ --ink-3:#95a0ab; /* 弱文字 */ --brand:#3da7ff; /* 品牌 / 选中态 亮天蓝（被官网皮肤覆盖，见上） */ --brand-dk:#2d8fe0; /* 按下 / 悬停 深蓝 */ --brand-ink:#ffffff; /* 品牌上的文字 */ --brand-soft:#e6f4ff; /* 选中浅底 */ --ok:#5cb85c; /* 成功 / 库存充足 */ --warn:#f5a623; /* 预警 / 低于安全库存 */ --danger:#ff4d4f; /* 逾期应收 / 盘亏 / 负毛利 */ --topbar:#2f2f2f; /* 顶部栏深灰（百草同款；实际值由皮肤注入） */ --topbar-ink:#e8edf3; /* 顶部栏文字 */ --topbar-ink-2:#9aa5b1; /* 顶部栏弱文字 */ --fs-1:20px; --fs-2:16px; --fs-3:14px; --fs-4:13px; --fs-5:12px; /* ★★ 2026-10-17（张总「界面美化 2.0 · 超越百草」拍板 A 案「温润纸感」，方案 `02_方案…\20261017_方案_界面美化2.0_超越百草.md` §8.1）： 圆角与阴影**各放大/调柔一档**，是**刻意离开百草**的第一步（百草更"方"、阴影更硬）。 · 卡片 `--r-3` 6→**8**：原来那句"百草的卡片比我们方一点"是上一轮**对齐百草**的取舍， 本轮张总改口径为"可以超过它" ⇒ 这一档**主动学回现代的圆**； · 弹窗 `--r-4` 12→**14**；按钮/输入 `--r-2` 6px 不动（控件要"利落"，圆角越大越糊）； · 阴影换成**更淡、更散**的一档（暖色调 `rgba(60,50,30,…)`，不换色系）。 ★ 只动令牌值，**不动任何选择器、不动布局** ⇒ 结构零变化（改前/改后逐页真浏览器比对）。 ★ 判据 `tests/test_ui_baicao_p0.py` 那条「圆角收到 6px」已同步改成 8px 并写明理由。 */ --r-1:4px; --r-2:6px; --r-3:8px; --r-4:14px; --sp-1:var(--uik-sp-1, 4px); --sp-2:var(--uik-sp-2, 8px); --sp-3:var(--uik-sp-3, 12px); --sp-4:var(--uik-sp-4, 16px); --sp-5:var(--uik-sp-5, 24px); --sp-6:var(--uik-sp-6, 32px); /* ★★ 2026-09-29（张总「全部 字段拥挤 对不齐的都优化掉」）： 一行控件的**统一口径**。为什么必须有一个 token，而不是各处调 padding —— 本文件原来**没有任何一处**定义"一个控件有多高"：高度是 padding 加上各自 的行高碰出来的（`input/select` 走浏览器默认的 line-height:normal， `button` / `a.btnlike` 继承 body 的 1.6）。于是同一行里实测出五种高度： input 27.0 · select 29.0 · button 31.0 · a.btnlike 34.8 · 快捷药丸 27.2 （1440/1280/1024 三个宽度上真浏览器量出来的实数，不是估的）。 现在所有控件都吃 --ctl-h，所有相邻间距都吃 --ctl-gap，一处改全站改。 */ --ctl-h:32px; --ctl-gap:8px; /* ★★ 2026-10-17（界面美化 2.0 · P0-a）：阴影分三档、全部换暖色且**更淡更散**， 外加**动效令牌**（本仓原来没有任何时长/缓动令牌：全站 23 处 transition 各写各的 `.15s ease`、`.2s`、`.25s`，同一个"移上去"在不同页手感不同）。 --sh-1 卡片常态 · --sh-2 悬停/下拉 · --sh-3 弹窗 --dur-1 按压/悬停 · --dur-2 展开/切页 · --dur-3 弹窗 ★ 值与既有那两个**同一色系**（rgba(60,50,30,…)），只是变淡变散 ⇒ 不换观感基调。 */ --sh-1:0 1px 2px rgba(60,50,30,.05); --sh-2:0 6px 18px rgba(60,50,30,.09); --sh-3:0 16px 40px rgba(60,50,30,.14); --dur-1:var(--uik-dur-1, 120ms); --dur-2:var(--uik-dur-2, 180ms); --dur-3:var(--uik-dur-3, 260ms); --ease:var(--uik-ease, cubic-bezier(.2,.7,.3,1)); } *{box-sizing:border-box} /* ★ [hidden] 必须真的隐藏。 作者样式里的 display:flex/block 会盖掉浏览器默认样式表的 [hidden]{display:none} （.gate 就踩过这个坑：开单页上空的「门禁条」变成一根细黄条）。 这一条是全局兜底，别再逐类写 .xxx[hidden]。 2026-09-18 */ [hidden]{display:none!important} body{margin:0;background:var(--bg);color:var(--ink); font:var(--fs-3)/1.6 "Microsoft YaHei","Segoe UI",system-ui,sans-serif} a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline} /* ★★ 2026-10-17（界面美化 2.0 · P0-a）：**全站统一焦点环**。 改前：`:focus-visible` 全站只有 4 处 ⇒ 键盘 Tab 走一遍，多数控件"没有焦点提示" （而本仓 `static/js/keynav.js` 是支持 ↑↓ 选行、回车打开的 ⇒ 确实有人这么用）。 改后：一条全局兜底；`focus-visible` **只对键盘导航生效**，鼠标点击不出现 ⇒ 鼠标用户的观感零变化（不影响任何"点一下会渲染东西"的判据）。 */ :focus-visible{outline:2px solid var(--brand);outline-offset:2px} .top{height:52px;background:var(--topbar);color:var(--topbar-ink); border-bottom:none;box-shadow:var(--sh-1); display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-5);position:sticky;top:0;z-index:9} /* ★★ 2026-10-18（第 1588 批）：品牌名**不许折行** —— 原来它可折，于是顶栏一挤就把 「优秀者工作台」排成 6 行竖排（实测 721–1179 都这样，logo 高 154px、`display:flex` 让 24px 的 logo 图跟着拉高）。产品名被拆成竖排字是**最难看的一种坏**，而且它不报错、 HTML 也没坏 —— 只有真浏览器量高度才看得见。 ★ 代价（如实记）：它从"可折到 24px"变成"最少 110px"，顶栏最小宽因此 +86px。 所以同一批在 ≤1179 让搜索框能缩到 0（见下面「顶栏的中间空档」那段），两处一起来。 判据：`tests/test_viewport_bands.py` 判据 [2]（logo 高 ≤ 同一页 1440 基线 ×1.5）。 */ .top .logo{font-size:var(--fs-2);font-weight:600;letter-spacing:.5px;color:#fff; white-space:nowrap} .top .logo small{font-size:var(--fs-5);color:var(--topbar-ink-2);font-weight:400;margin-left:var(--sp-2)} .top .spacer{flex:1} .top .who{font-size:var(--fs-4);color:var(--topbar-ink-2)} .top .who b{color:#fff} .top .role{display:inline-block;padding:2px var(--sp-2);border-radius:var(--r-1); background:rgba(255,255,255,.16);color:#fff;font-size:var(--fs-5);margin-left:var(--sp-2)} .top a{color:var(--topbar-ink-2)} /* ★★ 2026-10-16（第 1285 批 · 桌面端按族收口 · **一处顶 54 页**）： 顶栏那颗「退出」原来没有类、热区只有 **28×22**；而它长在**每一页**上 （扫描器：`parent=top` **55 处 / 54 页**，桌面端最大的「可真改」族）。 ⇒ 撑到 **≥24×24**（★ 桌面用**指针**口径 WCAG 2.2 AA「Target Size (Minimum)」； 不是触屏的 44 —— 那个口径套到桌面会假红一片，理由见台账 §1874）。 */ /* ★★ 2026-10-18（第 1511 批 · 375 宽真截图抓到）：这颗「退出」在 375 宽下 **逐字换行**（「退」上「出」下）—— inline-flex 容器被挤小时文字会换行。 ⇒ 加 white-space:nowrap（两个字不该被拆开）；热区与高度一个字不动。 */ .top a.quit{display:inline-flex;align-items:center;min-height:24px;padding:0 var(--sp-2);white-space:nowrap} .top a:hover{color:#fff} .top .topnav{padding:4px var(--sp-3);border-radius:var(--r-1);font-size:var(--fs-4); text-decoration:none;margin-left:var(--sp-3)} .top .topnav:hover{background:rgba(255,255,255,.12)} .top .topnav.on{background:rgba(255,255,255,.2);color:#fff;font-weight:600} /* ★★★ 2026-10-13（第 1039 批 · 张总「后台活摆到设置齿轮图标按钮里面 不要影响大局 可以参考同行业美观度的放置方法」）：顶栏右上那颗**设置齿轮** ＋ 它的小面板。 · 零 JS：`
/` 原生开关（同行业后台那种"点齿轮弹一小片设置入口"）； · 面板**绝对定位、右边贴齐**、盖在内容之上 ⇒ 顶栏高度与排布一个像素都不动（"不影响大局"）； · 条目真源是 `settings_entries(role)`（`erp/app.py`，桌面与手机共用一份）， 面板里每一项都过权限、没落点的渲染成灰字（`.gear-it.off`，**不是链接**）； · **刻意不带 `.topnav` 类**：那一套在 ≤720px 会被媒体查询收起，而齿轮手机上也要用 （手机顶栏另有一颗同源的，见 `m/base.html` 的 `.mgear`）。 */ .top .gear{position:relative;margin-left:var(--sp-3)} .top .gear>summary{list-style:none;cursor:pointer;display:flex;align-items:center; padding:4px 6px;border-radius:var(--r-1);color:var(--topbar-ink-2)} .top .gear>summary::-webkit-details-marker{display:none} .top .gear>summary:hover,.top .gear[open]>summary{background:rgba(255,255,255,.12);color:#fff} .top .gear>summary .ic{width:18px;height:18px} .top .gear-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:20;width:290px; background:var(--panel);color:var(--ink);border:1px solid var(--line); border-radius:var(--r-3);box-shadow:var(--sh-2);padding:var(--sp-2) 0;text-align:left} .top .gear-hd{font-size:var(--fs-5);color:var(--ink-3);padding:4px var(--sp-4) 6px; border-bottom:1px solid var(--line);margin-bottom:4px} .top .gear-it{display:block;padding:8px var(--sp-4);text-decoration:none;color:var(--ink)} /* ★ 这一行的选择器必须比 `.top a:hover{color:#fff}` 更具体 —— 否则鼠标一停面板里的字变成白色（浅底白字＝看不见），而**不会报错**。 */ .top .gear-pop a.gear-it:hover{background:var(--bg);color:var(--ink); text-decoration:none} .top .gear-it b{display:block;font-size:var(--fs-4);font-weight:600} .top .gear-it small{display:block;font-size:var(--fs-5);color:var(--ink-3);margin-top:2px} .top .gear-it.off{color:var(--ink-3);cursor:default} .top .gear-it.off b{font-weight:400} /* ★★ 2026-10-10 第 588 批②（张总「一起干掉」）：**一级模块标签条**（顶栏下沿一条， 只有「所有」页会渲染 —— `layouts/base.html` 里由 `module_tabs` 变量把着）。 · 底色与顶栏同一档（观感上属于"chrome"，不是页内容）；自己可横向滚动， 模块再多也不挤顶栏已有一排入口（塞进 `.top` 试过：会把「求助/快捷键」挤成两行）。 · 当前那一格与 `.topnav.on` 同一档高亮；手机端在 ≤720px 段里 display:none。 */ .mtabs{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none; background:var(--topbar);color:var(--topbar-ink); padding:4px max(var(--sp-3), calc((100vw - 1400px) / 2 + var(--sp-3))) 6px} .mtabs::-webkit-scrollbar{display:none} .mtab{padding:3px var(--sp-2);border-radius:var(--r-1);font-size:var(--fs-5); color:var(--topbar-ink-2);white-space:nowrap;text-decoration:none;flex:0 0 auto} .mtab:hover{background:rgba(255,255,255,.12);color:#fff} .mtab.on{background:rgba(255,255,255,.2);color:#fff;font-weight:600} /* ★ 2026-10-16（第 1296 批 · 桌面按族收口；规格 §4.4：指针目标 24×24）： 「← 返回」是 base.html 里那**唯一一个** `.backlink` —— **独立一行的入口**， 不是句内链接（句内那种按 WCAG 2.2 AA 明文的「句内目标」豁免，见豁免登记表） ⇒ 按 Target Size 真改：它以前只有 43×21，矮 3px。 ★ 一处顶 **49 页**，是桌面剩下各族里杠杆最大的一条。 `min-height` 只加高盒、不动字号与行高 ⇒ 文字位置不变（量具： `tools/_m_tap_floor_sweep.py --scope desktop --floor 24`）。 */ .backlink{display:inline-block;min-height:24px;margin-bottom:var(--sp-4);font-size:var(--fs-4); color:var(--ink-2);text-decoration:none} .backlink:hover{color:var(--brand)} .wrap{display:flex;min-height:calc(100vh - 52px)} /* ★★★ 2026-10-20（张总「①A」）：左侧竖栏 → **顶栏下沿的入口条**。 为什么是横条：那 4 格是「待你处理的事」（带角标），不能删；但它们**不该占一列**—— 1440 下 132px 就是 9.2% 的内容区，而且窄屏时竖栏还要自己再变一次横排。 做成横条后：任何页都在、窄屏可横滑、角标照旧，内容区吃满宽度。 */ .entriesbar{display:flex;align-items:center;gap:6px;height:44px;padding:0 var(--sp-4); background:var(--panel);border-bottom:1px solid var(--line); overflow-x:auto;overflow-y:hidden;white-space:nowrap; scrollbar-width:thin} /* ★ 角色分支里既有 `

常用

` 这类分段标题 —— 结构一个字没改， 但横条里它不该占位（竖着排时的"分组"在横排里没有意义）⇒ 只在视觉上收掉。 */ .entriesbar h4{display:none} /* ★★★ 2026-10-20（收红 · 桌面 44px 下限）：原来这条是 `padding:6px 10px;min-height:32px` —— 4 颗入口在**每一页**都算「小可点」（`test_desktop_tap_floor` 实测 108 页 × 约 4 个 ＝ 430，门禁上限 2 ⇒ 当场红；全量 08:48 那次起红，正好对上批 A 落库的 08:33）。 ⇒ 入口颗本身给到 **44**（条高同步 40→44，那条线自己的 `test_viewport_bands` 允许 36~60）。 ★ 为什么不是"只登记不修"：这 4 颗是**每页都在**的主入口，比任何一处更该够手点； 登记表是给"改不动的历史遗留"用的，不是给"刚搬上来的新部件"用的。 */ .entriesbar a{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto; padding:0 10px;min-height:44px;border-radius:var(--r-2); font-size:var(--fs-4);color:var(--ink-2); transition:background .15s ease,color .15s ease} .entriesbar a:hover{background:var(--panel-2);text-decoration:none;color:var(--ink)} .entriesbar a.on{background:var(--brand-soft);color:var(--brand);font-weight:600; box-shadow:inset 0 -3px 0 var(--brand)} .main{flex:1;padding:var(--sp-5);min-width:0} h1{font-size:var(--fs-1);margin:0 0 var(--sp-4);font-weight:600} h2{font-size:var(--fs-2);margin:var(--sp-5) 0 var(--sp-3);font-weight:600} .cards{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-3); padding:var(--sp-4);box-shadow:var(--sh-1);transition:box-shadow .2s ease,transform .2s ease} .card .k{font-size:var(--fs-5);color:var(--ink-3)} .card .v{font-size:var(--fs-1);font-weight:600;margin-top:var(--sp-2)} .card .v.warn{color:var(--danger)} .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-3); overflow:hidden;box-shadow:var(--sh-1)} .panel .hd{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line); display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap} .panel .hd .t{font-size:var(--fs-2);font-weight:600} .panel .bd{padding:0} table{width:100%;border-collapse:collapse;font-size:13.5px;line-height:1.55} /* ★★ 2026-10-10 第 588 批④（张总「一起干掉」）：**放宽表格密度**。 改前：`th,td` 上下内边距 7px、字号 `var(--fs-4)`=13px、行高 42px、1540×960 一屏约 18 行。 改后：上下 10px ＋ `line-height:1.55` ＋ 表格字号 **13.5px**（真浏览器实测行高约 47px、一屏约 16 行）。 ★ 字号**只在 `table` 这一条里写死 13.5px**，不动全站令牌 `--fs-4` —— 令牌一动会连侧栏/按钮/表单一起动（方案 §2 第 6 条的取舍）；卡片区留白也一个字没动。 ★ 代价如实记：一屏少约 2 行（老板一屏看单量）；前后对照数据见第 588 批台账。 ★★ 横向内边距由 `--sp-3`(12px) 收到 `--sp-2`(8px)：字号放大后列会变宽， 真浏览器实测销售单的横向溢出从 559px 涨到 **589px**（**这是本批造成的退化**） ⇒ 收窄横向内边距把它抵回来（见台账的前后对照表，改完不许比 559 更差）。 */ th,td{padding:10px var(--sp-2);text-align:left;border-bottom:1px solid var(--line); white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis} th{background:var(--panel-2);color:var(--ink-2);font-weight:500;font-size:var(--fs-5)} /* ★ 允许换行的格子（A1-96，2026-09-29）：给「说明 / 备注 / 原因」这类长句列用。 上面那条 `th,td{…white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis}` 是列表页"一行一格、紧凑不换行"的口径（长列表靠它才不串行），**保留不动**； 但长句会被它**吃掉**：真浏览器实测 /payroll 的提成明细「说明」列 （`#cm_rows`）被压到 clientWidth=321px、文字 scrollWidth=1057px ⇒ 截掉 736px —— 张总截图里"说明列的长句被截断"就是这一类（单元格上写 `overflow-wrap:anywhere` 是**没用的**：`white-space:nowrap` 在，就根本没有换行机会）。 ⇒ 给一个**显式开关** ``：只对点了名的格子放开换行， 不动列表页的紧凑口径，也不靠"逐表打补丁"碰运气。 ★★ 名字**必须**是 `cellwrap` 这类新词 —— 第一版我叫它 `wrap`，**当场撞车**： main.css 第 75 行早有 `.wrap{display:flex;min-height:calc(100vh - 52px)}` （那是全站**页面外壳**的容器类），于是 `td.wrap` 也吃到 `min-height:948px` ⇒ 每一行数据都被撑成"一屏高"（实测 /payroll `#cm_rows` 48 行 = 46453px）。 真浏览器量到的证据：`.wrap { display:flex; min-height: calc(-52px + 100vh); }`。 ★ `min-width:220px` 是**必需的第二半**（第一版漏了它）： 表格是 auto 布局，`overflow-wrap:anywhere` 会把这一列的 min-content 压到 1 个字， 于是"要收缩就只收缩这一列" —— 给一个下限，收缩就不会全压到它身上。 实测：`#cm_rows` 说明列稳定落在 325px（两行文字），无横向滚动、行高 36→(换行后)≈36px。 */ td.cellwrap,th.cellwrap{white-space:normal;overflow-wrap:anywhere;max-width:none;min-width:220px} /* ★★ 2026-10-17（界面美化 2.0 · P1①）：**数字列右对齐 ＋ 等宽数字**。 改前（真浏览器量 /v/wholesale_grade）：12 列里 4 个纯数字列（折扣%／年采购额门槛／ 能看价／能下单）**全是 text-align:left**，只有「操作」列是右对齐 —— 于是 `0 / 10000 / 50000` 左对齐时个位、十位、百位各错一格，对账要一行一行数位。 改后：渲染时按**值**判出数字格加 `.num`，表头落地后回填（见 `pages/list.html`）， 这里只给 `.num` 两条规矩：右对齐 ＋ `tabular-nums`（数字等宽 ⇒ 小数点成一条竖线）。 ★ 为什么不是"给 table 全表右对齐"：名字/货号/备注必须左对齐 —— 一律右对齐同样难读。 ★ 为什么不是"按列名写死名单"：列名会变、视图有 40+ 个，写死就是第二份真源。 */ td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;letter-spacing:.2px} tbody tr:hover{background:var(--panel-2)} /* ★ #24 列表整行双击进编辑（老板 4 次截图 = 商品/客户/仓库同一个根因）。 ★ 为什么只给 .rowlink 加手型、不给所有 tr：只读视图 / 无详情页的行 双击没去处，光标变手型就是**骗人**（点了没反应比不点更糟）。 ★ 数量列逐格标单位那条也一并强化：hover 底色已是既有行为，这里只补 "这行能点"的视觉暗示（左侧 2px 品牌色条）+ 手型。 */ tbody tr.rowlink{cursor:pointer} tbody tr.rowlink:hover{background:var(--panel-2);box-shadow:inset 2px 0 0 var(--brand)} /* 行尾「编辑」入口。默认低调（它是"显式入口"，不是每行都要抢眼）， hover 到这一行时才变明显 —— 免得整张表一片蓝按钮。 */ th.editcol,td.editcol{width:1%;text-align:right;white-space:nowrap} a.rowedit{color:var(--ink-2);font-size:var(--fs-5);text-decoration:none; padding:2px 8px;border:1px solid var(--line);border-radius:var(--r-2)} tbody tr.rowlink:hover a.rowedit{color:var(--brand);border-color:var(--brand)} a.rowedit:hover{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)} /* ★ #24 键盘流的“当前行”高亮：↑/↓ 移动到哪一行，回车打开它。 ★ 为什么必须比 hover 更重：悬停的鼠标会离开，而“当前行”的高亮 要在手离开之后照旧在 —— 否则老板按一下↓就不知道自己选了哪一行。 ★ 左侧色条用 3px（比 .rowlink:hover 的 2px 粗一点点） —— 两者可能同时在（鼠标正停在这一行上），差一个像素才看得出“选中”更重。 */ tbody tr.sel{background:var(--panel-2);box-shadow:inset 3px 0 0 var(--brand)} tbody tr.sel a.rowedit{color:var(--brand);border-color:var(--brand)} td.num{text-align:right;font-variant-numeric:tabular-nums} td.money{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)} /* ★ 数字单元格的告警态。原来只写了 .tag.warn / .sub.warn，模板里 class="num warn" 是**没有任何样式**的 —— 锁定面板「可用库存不够」 的红字高亮一直不显示（2026-09-18 实机验收抓到）。 */ td.num.warn{color:var(--warn);font-weight:600} /* ★ M4 / A1-14：表单控件（下拉 / 输入框）的告警态。 与上面那条同一个毛病 —— 光加 class 不加规则等于没加： 过账面板「这一行还没选批次」要把那一格框成红的，员工才知道改哪里。 ★ 用 border + 阴影两条：只改 border 在浅色边框的表格里很不显眼。 */ select.warn,input.warn{border-color:var(--danger) !important; box-shadow:0 0 0 2px rgba(198,40,40,.14)} .empty{padding:var(--sp-6);text-align:center;color:var(--ink-3);font-size:var(--fs-4)} .tag{display:inline-block;padding:1px var(--sp-2);border-radius:var(--r-1); font-size:var(--fs-5);border:1px solid var(--line);color:var(--ink-2)} .tag.ok{color:var(--ok);border-color:var(--ok)} .tag.warn{color:var(--warn);border-color:var(--warn)} .tag.danger{color:var(--danger);border-color:var(--danger)} /* ★ A组 #37/#38（2026-09-22）：补两个色档。 原来只有 ok/warn/danger 三档，「中性」是靠"不加类"实现的 —— 但那样一来 .tag 和 .tag.mute 没法在模板里用同一个函数切出来。 补上 mute（不用管了）与 brand（进行中，用品牌蓝）。 一句话记法：橙＝要你做 · 蓝＝在做 · 绿＝做完了 · 灰＝不用做。 */ .tag.brand{color:var(--brand);border-color:var(--brand)} .tag.mute{color:var(--ink-3);border-color:var(--line)} /* ★ 2026-09-28（多租户平台控制台）：套餐里"基础必含"的功能点要一眼分得出来 —— 它们是**恒开**的（`is_core`），跟"可以买的增值项"不是一回事。 做成唯一一个**实心底**的档：其余四档都是描边彩字（同一张页面上第一眼就能扫到）。 颜色只用现成 token（brand-soft 底 + brand-dk 字），不引入新色 —— 与图标那套同一条纪律。 */ .tag.core{color:var(--brand-dk);border-color:var(--brand-soft);background:var(--brand-soft)} /* ★ 同上：状态按钮的四档色。用在不同状态的动作按钮上 —— 「当前所处的那个状态」实心打勾禁用，其余素色描边、hover 才预告颜色。 为什么不用现成的 .ok/.warn：按钮要的是**实心底 + 白字**， 跟标签的"描边 + 彩字"不是一回事，硬套会让按钮在白底上看不清。 */ .stbtn{transition:background .12s,color .12s,border-color .12s} .stbtn.is-warn{background:var(--warn);border-color:var(--warn);color:#fff} .stbtn.is-brand{background:var(--brand);border-color:var(--brand);color:#fff} .stbtn.is-ok{background:var(--ok);border-color:var(--ok);color:#fff} .stbtn.is-mute{background:var(--ink-3);border-color:var(--ink-3);color:#fff} .stbtn[disabled]{opacity:1;cursor:default} /* 素色按钮 hover 时预告自己的颜色（"标记才显示颜色"：没选中的不抢戏） */ .stbtn:not([disabled]):hover[data-hint="warn"]{border-color:var(--warn);color:var(--warn)} .stbtn:not([disabled]):hover[data-hint="brand"]{border-color:var(--brand);color:var(--brand)} .stbtn:not([disabled]):hover[data-hint="ok"]{border-color:var(--ok);color:var(--ok)} .stbtn:not([disabled]):hover[data-hint="mute"]{border-color:var(--ink-3);color:var(--ink-3)} /* ★ 工具栏一行内的**统一间距**。原来写死 var(--sp-2)，值一样（8px）， 但"这一行有多松"没有名字 —— 于是 .quicktime 自己又加了个 4px 的 margin-inline-end，实测出现 ['12.0','8.0','8.0'…]（张总说的"间距忽宽忽窄"）。 现在这一行只有一个间距变量。 */ .toolbar{display:flex;gap:var(--ctl-gap);align-items:center;flex-wrap:wrap} /* ★★ 工具条里的**裸
**（网站线索的筛选表单就是这种写法： `
` 是**非法 HTML** —— `