/* ========================================================================== V1.8 视觉规范收敛层（2026-09-26 实施） 本文件在 style18.css 之后加载，作为最终裁决层。 ① 设计令牌 ② 字号层级 ③ 间距基线 ④ 状态色（徽标 7 色 / 反馈 4 态） ⑤ 反馈通道 ⑥ 按钮体系 ⑦ 加载态 ⑧ 三态组件 ⑨ 弹窗三档 ⑩ 灰阶与窄窗 ========================================================================== */ /* ---------- ① 设计令牌 ---------- */ :root{ /* 文字 */ --c-text:#213d43; --c-text-strong:#173d42; --c-text-muted:#566e72; --c-text-subtle:#62777b; /* 表面与描边 */ --c-surface:#ffffff; --c-surface-sub:#fafcfb; --c-page:#f4f6f8; --c-border:#dfe6e5; --c-border-strong:#b8cbc7; --c-brand:#155f53; --c-brand-weak:#dcece7; --c-link:#126453; /* 间距五级 */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; /* 字号六档 */ --fs-h1:26px; --fs-h2:22px; --fs-h3:18px; --fs-body:15px; --fs-sub:13px; --fs-tag:12px; --lh-title:1.4; --lh-body:1.65; --lh-sub:1.5; /* 反馈语义色（四态） */ --fb-info-bg:#edf5fc; --fb-info-fg:#244a68; --fb-info-bd:#8cacc8; --fb-success-bg:#eaf6ef; --fb-success-fg:#20533a; --fb-success-bd:#77a58b; --fb-warning-bg:#fff4df; --fb-warning-fg:#774400; --fb-warning-bd:#c68621; --fb-error-bg:#fff0ee; --fb-error-fg:#9a3026; --fb-error-bd:#c9665c; /* 容器层级 */ --pad-panel:20px; --pad-panel-nested:16px; /* 按钮高度三档 */ --btn-h:40px; --btn-h-compact:36px; --btn-h-small:32px; } /* ---------- ② 字号层级（26 / 22 / 18 / 15 / 13，12 仅角标） ---------- */ #main h1{font-size:var(--fs-h1);line-height:var(--lh-title);font-weight:600;margin:16px 0} #main h2{font-size:var(--fs-h2);line-height:var(--lh-title);font-weight:600} #main h3{font-size:var(--fs-h3);line-height:var(--lh-title);font-weight:500} #main p{font-size:var(--fs-body);line-height:var(--lh-body)} #main small,#main dt{font-size:var(--fs-sub);line-height:var(--lh-sub)} #main .panel>h2{font-size:var(--fs-h2)} #main .panel>h2 .badge{font-size:var(--fs-sub);font-weight:500} /* 12px 仅允许角标；正文类一律不低于 13px */ header label{font-size:var(--fs-sub)} .environment{font-size:var(--fs-sub)} #main .task-dock-context small:last-child{font-size:var(--fs-sub)} #main .dock-material-progress button{font-size:var(--fs-sub)} #main .image-gallery button{font-size:var(--fs-sub)} #main .audit-progress p{font-size:14px} /* ---------- ③ 间距基线（4 / 8 / 12 / 16 / 24） ---------- */ #main .panel{padding:var(--pad-panel);margin:var(--s-4) 0} #main .panel .panel{padding:var(--pad-panel-nested);margin:var(--s-3) 0} #main .actions{gap:var(--s-2);margin:var(--s-3) 0} #main .row,#main .file{padding:var(--s-3) 0;gap:var(--s-2)} #main form label{margin:var(--s-3) 0} #main details{margin:var(--s-4) 0} #main .material-group{margin:var(--s-5) 0} #main .read-fields{gap:var(--s-3)} #main .material-status,#main .workflow-summary{margin:var(--s-4) 0} #main .empty{margin:var(--s-4) 0} /* ---------- ④ 状态色 ---------- */ /* 徽标：文字 + 符号 + 颜色 三重编码，颜色永不单独承载语义 */ #main .badge{border-radius:6px;font-size:var(--fs-sub);padding:3px 9px;line-height:1.5;white-space:nowrap} /* 反馈四态：替换原来“默认即警示色”的单一呈现 */ #main .feedback-info,#main .state-info{background:var(--fb-info-bg);border-color:var(--fb-info-bd);color:var(--fb-info-fg)} #main .feedback-success,#main .state-success{background:var(--fb-success-bg);border-color:var(--fb-success-bd);color:var(--fb-success-fg)} #main .feedback-warning,#main .state-warning{background:var(--fb-warning-bg);border-color:var(--fb-warning-bd);color:var(--fb-warning-fg)} #main .feedback-error,#main .state-error,.workflow-summary.feedback-error,.material-status.feedback-error{background:var(--fb-error-bg);border-color:var(--fb-error-bd);color:var(--fb-error-fg)} /* 去掉 !important：提高选择器权重即可覆盖基础底色（V18） */ .workflow-summary.feedback-info,.material-status.feedback-info,.state-info{background:var(--fb-info-bg);border-color:var(--fb-info-bd);color:var(--fb-info-fg)} .workflow-summary.feedback-success,.material-status.feedback-success,.state-success{background:var(--fb-success-bg);border-color:var(--fb-success-bd);color:var(--fb-success-fg)} .workflow-summary.feedback-warning,.material-status.feedback-warning,.state-warning{background:var(--fb-warning-bg);border-color:var(--fb-warning-bd);color:var(--fb-warning-fg)} .workflow-summary.feedback-error,.material-status.feedback-error,.state-error{background:var(--fb-error-bg);border-color:var(--fb-error-bd);color:var(--fb-error-fg)} /* 问题态：与反馈 warning 同源，浅色底 + 左侧强调条 + 符号位 */ #main .problem{background:var(--fb-warning-bg);border-left:4px solid var(--fb-warning-bd);border-radius:4px;padding:12px 16px;margin:var(--s-3) 0;color:var(--fb-warning-fg);line-height:var(--lh-body)} #main .problem::before{content:'! ';font-weight:700} /* ---------- ⑤ 反馈通道：顶部提示条四态 ---------- */ #notice{background:var(--fb-info-bg);color:var(--fb-info-fg);border:1px solid var(--fb-info-bd);font-size:var(--fs-body);line-height:var(--lh-body);pointer-events:auto} #notice[data-tone=success]{background:var(--fb-success-bg);color:var(--fb-success-fg);border-color:var(--fb-success-bd)} #notice[data-tone=warning]{background:var(--fb-warning-bg);color:var(--fb-warning-fg);border-color:var(--fb-warning-bd)} #notice[data-tone=error]{background:var(--fb-error-bg);color:var(--fb-error-fg);border-color:var(--fb-error-bd)} #notice.is-warning{background:var(--fb-warning-bg);color:var(--fb-warning-fg);border-color:var(--fb-warning-bd)} #notice.is-error{background:var(--fb-error-bg);color:var(--fb-error-fg);border-color:var(--fb-error-bd)} /* 颜色之外补符号，避免仅靠颜色传达语义 */ #notice[data-tone=success]::before{content:'✓ ';font-weight:700} #notice[data-tone=warning]::before,#notice.is-warning::before{content:'! ';font-weight:700} #notice[data-tone=error]::before,#notice.is-error::before{content:'✕ ';font-weight:700} #notice::after{content:'';position:absolute;right:10px;top:8px;font-size:12px;color:inherit;opacity:.65;pointer-events:none} #notice[data-tone=error]::after{content:'（点击关闭）';cursor:pointer} /* 表单内联与任务底栏同样按语义着色，三处只出现一处（V06） */ .form-feedback{background:var(--fb-warning-bg);border-left:3px solid var(--fb-warning-bd);color:var(--fb-warning-fg);border-radius:4px;padding:10px 14px;font-size:var(--fs-body);line-height:var(--lh-body)} #task-feedback{background:var(--fb-info-bg);border:1px solid var(--fb-info-bd);color:var(--fb-info-fg);border-radius:8px;padding:10px 14px;font-size:var(--fs-sub);line-height:var(--lh-body)} #task-feedback.feedback-warning{background:var(--fb-warning-bg);border-color:var(--fb-warning-bd);color:var(--fb-warning-fg)} #task-feedback.feedback-success{background:var(--fb-success-bg);border-color:var(--fb-success-bd);color:var(--fb-success-fg)} #task-feedback.feedback-error{background:var(--fb-error-bg);border-color:var(--fb-error-bd);color:var(--fb-error-fg)} .copy-feedback{background:var(--fb-success-bg);color:var(--fb-success-fg);padding:8px 12px;border-radius:6px} .attachment-feedback{font-size:var(--fs-sub);line-height:var(--lh-body)} .attachment-feedback.problem{background:var(--fb-warning-bg);border-left:3px solid var(--fb-warning-bd);color:var(--fb-warning-fg);padding:8px 12px;border-radius:4px} /* ---------- ⑥ 按钮体系（data-tone 五档 + 尺寸三档） ---------- */ #main button{min-height:var(--btn-h);padding:9px 15px;border-radius:7px;transition:background .12s,border-color .12s} button[data-tone=quiet]{--button-bg:#f1f3f4;--button-fg:#435159;--button-hover:#e5eaec;--button-active:#d9dfe2;--button-border:#b6c0c5} button[data-tone=neutral]{--button-bg:#ffffff;--button-fg:#174a42;--button-hover:#eef5f2;--button-active:#e2eee9;--button-border:#b6cac4} #main .task-dock-actions>button,#main .task-dock-more>summary{min-height:var(--btn-h-compact);padding:8px 12px;font-size:var(--fs-sub)} #main .task-dock:has(.audit-jump-label) .task-dock-actions>button{height:var(--btn-h-compact);min-height:var(--btn-h-compact)} #main .dock-material-progress button{min-height:var(--btn-h-small);padding:4px 10px;font-size:var(--fs-sub)} #main .task-dock .audit-jump-label select{min-height:var(--btn-h-compact)} /* 页面主操作唯一：同一视图内第二个 primary 降级为普通操作，避免“不知道点哪个” */ #main .panel .actions>button[data-tone=primary] ~ .actions>button[data-tone=primary]{--button-bg:#ffffff;--button-fg:#174a42} /* 禁用态给出原因提示位（V08） */ #main button:disabled{cursor:not-allowed} #main .disabled-hint{font-size:var(--fs-sub);color:var(--c-text-muted);margin:var(--s-1) 0 0;line-height:var(--lh-sub)} /* ---------- ⑦ 加载态（V07 / V29） ---------- */ @keyframes v18-spin{to{transform:rotate(360deg)}} @keyframes v18-shimmer{0%{background-position:100% 0}100%{background-position:0 0}} button[data-busy]{pointer-events:none;opacity:.72;position:relative} button[data-busy]::after{content:'';display:inline-block;width:13px;height:13px;margin-left:8px;vertical-align:-2px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:v18-spin .7s linear infinite} .skeleton{background:linear-gradient(90deg,#eef2f4 25%,#e3e9ec 37%,#eef2f4 63%);background-size:400% 100%;animation:v18-shimmer 1.2s ease-in-out infinite;border-radius:6px;height:14px} #main [aria-busy=true]{cursor:progress} /* ---------- ⑧ 三态组件：空 / 加载 / 异常（V27 / V28 / V29 / V30） ---------- */ .state-panel{display:grid;justify-items:center;gap:var(--s-2);text-align:center;padding:32px 24px;margin:var(--s-4) 0;background:#f7f9fa;border:1px dashed #d7e0e3;border-radius:12px} .state-panel .state-icon{font-size:24px;line-height:1;color:var(--c-text-subtle)} .state-panel .state-title{font-size:var(--fs-body);font-weight:600;color:#3d5359} .state-panel .state-desc{font-size:var(--fs-sub);color:var(--c-text-muted);max-width:52ch;line-height:var(--lh-body)} .state-panel .state-panel-actions{margin:var(--s-2) 0 0;display:flex;gap:var(--s-2);flex-wrap:wrap;justify-content:center} .state-panel[data-type=error]{background:var(--fb-error-bg);border:1px solid var(--fb-error-bd)} .state-panel[data-type=error] .state-icon,.state-panel[data-type=error] .state-title{color:var(--fb-error-fg)} .state-panel[data-type=empty]{background:#f7f9fa} /* 既有 .empty 文案升级为可见的空状态块 */ #main p.empty{text-align:center;color:var(--c-text-muted);background:#f7f9fa;border:1px dashed #d7e0e3;border-radius:10px;padding:20px;margin:var(--s-4) 0;font-size:var(--fs-body)} /* 错误页（V30） */ .error-page{max-width:640px;margin:40px auto;text-align:center} .error-page .error-icon{font-size:40px;line-height:1;color:var(--fb-error-fg)} .error-page h1{font-size:var(--fs-h2);margin:var(--s-3) 0} .error-page p{font-size:var(--fs-body);color:var(--c-text-muted);line-height:var(--lh-body)} /* ---------- ⑨ 弹窗三档（V31 / V32） ---------- */ #dialog{width:min(720px,94vw);max-height:88vh;padding:var(--s-5);border-radius:12px;overflow:auto} #dialog[open]:has(.dialog-body){display:flex;flex-direction:column;overflow:hidden} #dialog .dialog-head{flex-shrink:0;gap:var(--s-4);margin-bottom:var(--s-3)} #dialog .dialog-body{overflow:auto;min-height:0;flex:1 1 auto;padding-right:var(--s-1)} #dialog .dialog-foot{flex-shrink:0;display:flex;gap:var(--s-2);justify-content:flex-end;margin-top:var(--s-3);padding-top:var(--s-3);border-top:1px solid var(--c-border)} #dialog .dialog-head h2{font-size:20px;margin:0} .rich-note-dialog{width:min(920px,94vw);max-height:88vh} .detail-import-dialog{width:min(1000px,94vw);max-height:88vh} .cargo-import-dialog{width:min(1280px,96vw);max-height:92vh} #dialog .close-x{position:absolute;top:12px;right:14px;min-height:32px;padding:4px 10px;font-size:var(--fs-sub)} /* ---------- ⑩ 灰阶合并与窄窗兜底（V16 / V22） ---------- */ #main .muted,#main .empty{color:var(--c-text-muted)} #main dt{color:var(--c-text-subtle)} #main .empty-cover{color:var(--c-text-muted)} nav button{white-space:normal;line-height:1.45;word-break:break-word} #main .audit-jump-label{white-space:normal} /* 返回入口（V12） */ .page-back{display:inline-flex;align-items:center;gap:6px;margin:0 0 var(--s-4);min-height:var(--btn-h-small);padding:6px 12px} /* 企宣二级页签改为分段控件，避免与主操作撞色（V10） */ .segmented{display:inline-flex;gap:0;border:1px solid var(--c-border-strong);border-radius:8px;overflow:hidden;background:#fff;margin:var(--s-3) 0} .segmented>button{border:0;border-radius:0;background:transparent;color:var(--c-text-muted);min-height:var(--btn-h-compact);padding:8px 18px} .segmented>button+button{border-left:1px solid var(--c-border)} .segmented>button[aria-pressed=true]{background:var(--c-brand-weak);color:#164e3e;font-weight:600;box-shadow:inset 0 -2px 0 var(--c-brand)} .segmented>button:hover:not([aria-pressed=true]){background:#f1f5f3} /* 面包屑（V12） */ .breadcrumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-sub);color:var(--c-text-muted);margin:0 0 var(--s-2)} .breadcrumb span+span::before{content:'／';margin-right:6px;color:#a9b7b4} .breadcrumb .current{color:var(--c-text-strong);font-weight:600} /* ========================================================================== ⑪ 全新界面落地层（2026-09-26） 依据「商品协同平台_全新界面原型」落地：深绿侧栏 + 白顶栏 + 待办工作台 + 详情左右分栏（取代底部浮层堆叠）。仅新增/覆盖，不删改旧规则。 ========================================================================== */ :root{ --surface:#FFFFFF; --surface-sub:#FAFCFB; /* 本层引用但此前未定义，缺失会导致卡片透明露出深底 */ --brand:#0F6E52; --brand-hover:#0B5942; --brand-weak:#E6F4EF; --brand-line:#BFE0D4; --side:#0A4D3A; --side-hover:#0E6650; --side-active:#12795C; --bg:#F5F8F6; --line:#DFE7E3; --line-strong:#C8D6CF; --surface-sunk:#EEF3F0; --ok:#12805C; --ok-bg:#E6F4EF; --doing:#1668B3; --doing-bg:#E7F0FA; --warn:#965800; --warn-bg:#FDF3E3; /* --warn 原 #B26A00 白底对比度仅 4.24，未过 AA 正文 4.5；加深后 5.69 */ --err:#B4232A; --err-bg:#FDECEC; --idle:#5A6B65; --idle-bg:#EEF3F0; --r-card:10px; --r-ctl:8px; --r-pill:999px; --sh-1:0 1px 2px rgba(16,48,42,.06); --sh-2:0 2px 8px rgba(16,48,42,.08); --sh-3:0 8px 24px rgba(16,48,42,.14); --side-w:236px; --top-h:58px; } /* ---------- 页面底与顶栏 ---------- */ :root,body{background:var(--bg)} header{ background:var(--surface);color:var(--c-text-strong);border-bottom:1px solid var(--line); padding:0 24px;height:var(--top-h);min-height:var(--top-h);gap:16px;flex-wrap:nowrap; position:sticky;top:0;z-index:30;box-shadow:var(--sh-1); } header>div:first-child{display:flex;flex-direction:column;gap:1px} header strong{font-size:16px;letter-spacing:.3px;color:var(--c-text-strong)} header small{font-size:var(--fs-tag);color:var(--c-text-muted)} header .fields{gap:12px;flex-wrap:nowrap} header label{font-size:var(--fs-tag);color:var(--c-text-muted);flex-direction:column;align-items:flex-start;gap:2px} header select{min-width:150px;padding:6px 8px;border:1px solid var(--line-strong);border-radius:var(--r-ctl);font-size:var(--fs-sub);background:var(--surface)} header #refresh18{ background:var(--surface);color:var(--brand);border:1px solid var(--brand-line); border-radius:var(--r-ctl);padding:8px 14px;font-size:var(--fs-sub);min-height:36px; } header #refresh18:hover{background:var(--brand-weak)} .environment{background:var(--brand-weak);color:#33655A;border-bottom:1px solid var(--brand-line);padding:6px 24px;font-size:var(--fs-tag)} /* ---------- 骨架：深绿侧栏 + 内容区 ---------- */ .shell{grid-template-columns:var(--side-w) minmax(0,1fr);max-width:none;margin:0;align-items:stretch} aside{ background:var(--side);padding:0;border-right:0;align-self:stretch; position:sticky;top:var(--top-h);height:calc(100vh - var(--top-h));display:flex;flex-direction:column; } #nav{ display:flex;flex-direction:column;gap:2px;position:static;padding:12px 0;overflow-y:auto;flex:1; } #nav button{ border:0;background:transparent;color:rgba(255,255,255,.78);text-align:left; padding:9px 20px;font-size:var(--fs-sub);border-left:3px solid transparent;border-radius:0; min-height:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;box-shadow:none; } #nav button:hover{background:var(--side-hover);color:#fff} #nav button[aria-current]{ background:var(--side-active);color:#fff;font-weight:600;border-left-color:#fff; } main{padding:24px 28px 40px;min-width:0} main.has-task-dock{padding-bottom:24px} html{scroll-padding-bottom:0} @media(max-width:900px){ .shell{grid-template-columns:1fr} aside{display:none} } /* ---------- 卡片与面板统一 ---------- */ main .panel,main .card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card); box-shadow:var(--sh-1);padding:16px 18px;margin:12px 0; } main .panel>summary,main h2{font-size:var(--fs-h3);font-weight:600} main h1{font-size:var(--fs-h1);font-weight:600;margin:0 0 4px} main>h1+p{color:var(--c-text-muted);font-size:var(--fs-sub);margin:0 0 16px} /* ---------- 工作台：先办提示条 ---------- */ .wb-lead{ display:flex;align-items:center;gap:12px;background:var(--brand-weak); border:1px solid var(--brand-line);border-left:4px solid var(--brand); border-radius:var(--r-ctl);padding:12px 16px;margin:0 0 16px; } .wb-lead b{color:#0B5942;font-size:var(--fs-body)} .wb-lead span{color:#33655A;font-size:var(--fs-sub)} /* ---------- 工作台：四张状态卡 ---------- */ .wb-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:0 0 16px} .wb-stat{ background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--line-strong); border-radius:var(--r-card);padding:14px 16px;box-shadow:var(--sh-1); display:flex;flex-direction:column;gap:2px;text-align:left;cursor:pointer;transition:box-shadow .18s,transform .18s; } .wb-stat:hover{box-shadow:var(--sh-2);transform:translateY(-1px)} .wb-stat .n{font-size:26px;font-weight:650;line-height:1.15} .wb-stat .l{font-size:var(--fs-sub);color:var(--c-text-muted)} .wb-stat[data-tone=warn]{border-top-color:var(--warn)} .wb-stat[data-tone=warn] .n{color:var(--warn)} .wb-stat[data-tone=doing]{border-top-color:var(--doing)} .wb-stat[data-tone=doing] .n{color:var(--doing)} .wb-stat[data-tone=ok]{border-top-color:var(--ok)} .wb-stat[data-tone=ok] .n{color:var(--ok)} .wb-stat[data-tone=err]{border-top-color:var(--err)} .wb-stat[data-tone=err] .n{color:var(--err)} /* ---------- 工作台：待办清单 ---------- */ .wb-todos{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1);overflow:hidden} .wb-todos>h2{margin:0;padding:14px 18px;border-bottom:1px solid var(--line);font-size:var(--fs-h3);font-weight:600} .wb-todo{ display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--line); border-left:3px solid transparent; } .wb-todo:last-child{border-bottom:0} .wb-todo:hover{background:var(--surface-sunk);border-left-color:var(--brand-line)} .wb-todo .t-main{flex:1 1 auto;min-width:0} .wb-todo .t-main b{display:block;font-size:var(--fs-body);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wb-todo .t-main small{display:block;color:var(--c-text-muted);font-size:var(--fs-sub);margin-top:2px} .wb-todo .t-next{flex:0 0 auto;font-size:var(--fs-sub);color:var(--doing);background:var(--doing-bg);border-radius:var(--r-pill);padding:3px 10px;white-space:nowrap} .wb-todo .t-act{flex:0 0 auto;display:flex;gap:8px} /* ---------- 详情：左右分栏 ---------- */ .dv-wrap{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:16px;align-items:start;margin-top:12px} .dv-main{min-width:0;display:flex;flex-direction:column;gap:12px} .dv-main>main .panel,.dv-main>.panel{margin:0} .dv-side{position:sticky;top:calc(var(--top-h) + 24px);display:flex;flex-direction:column;gap:12px;min-width:0} .dv-side .dv-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card); box-shadow:var(--sh-1);padding:14px 16px; } .dv-side .dv-card>h3{margin:0 0 10px;font-size:var(--fs-h3);font-weight:600} .dv-side .task-dock-context strong{display:block;font-size:var(--fs-body);overflow-wrap:anywhere} .dv-side .task-dock-context small{display:block;color:var(--c-text-muted);margin-top:2px} .dv-side .task-dock-actions{display:flex;flex-direction:column;gap:8px;align-items:stretch;margin-top:10px} .dv-side .task-dock-actions button{width:100%;justify-content:center} .dv-side .task-dock-more>div{position:static;width:auto;box-shadow:none;border:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:none} .dv-side .dock-material-progress{display:flex;flex-direction:column;gap:8px;margin-top:10px;font-size:var(--fs-sub)} .dv-side #task-feedback{position:static;margin:10px 0 0;font-size:var(--fs-sub);line-height:1.6} @media(max-width:1100px){ .dv-wrap{grid-template-columns:1fr} .dv-side{position:static} } /* ---------- 流程步骤条 ---------- */ .steps{display:flex;align-items:center;gap:0;margin:2px 0 6px} .steps .step{display:flex;align-items:center;gap:6px;font-size:var(--fs-tag);color:var(--c-text-subtle);white-space:nowrap} .steps .step .dot{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;background:var(--idle-bg);color:var(--idle);flex:0 0 auto} .steps .step.done{color:var(--ok)} .steps .step.done .dot{background:var(--ok-bg);color:var(--ok)} .steps .step.now{color:var(--doing);font-weight:600} .steps .step.now .dot{background:var(--doing);color:#fff} .steps .line{flex:1 1 auto;height:1px;background:var(--line);min-width:10px} .steps .line.done{background:var(--brand-line)} /* ---------- 列表：状态 chips ---------- */ .chips{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:12px 0} .chip{ padding:5px 13px;border-radius:var(--r-pill);border:1px solid var(--line-strong); background:var(--surface);font-size:var(--fs-sub);cursor:pointer;color:var(--c-text-muted); display:inline-flex;align-items:center;gap:6px;box-shadow:none;min-height:auto; } .chip:hover{border-color:var(--c-text-subtle)} .chip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600} .chip .c{font-size:11px;opacity:.75} /* ---------- 表格 ---------- */ .table-wrap,.tbl-wrap{border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--sh-1);overflow:auto} main table{border-collapse:collapse;width:100%} main table th{ background:var(--surface-sunk);text-align:left;font-size:var(--fs-sub);font-weight:600; color:var(--c-text-muted);padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap; } main table td{padding:11px 14px;border-bottom:1px solid var(--line);font-size:var(--fs-body);vertical-align:middle} main table tbody tr:last-child td{border-bottom:0} main table tbody tr:hover{background:var(--surface-sunk)} /* ---------- 右栏专用：步骤条改为五列紧凑排（336px 放不下横排） ---------- */ .dv-side .steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin:0} .dv-side .steps .line{display:none} .dv-side .steps .step{ display:flex;flex-direction:column;align-items:center;gap:3px; font-size:10px;white-space:normal;text-align:center;line-height:1.3; } .dv-side .steps .step .dot{width:20px;height:20px;font-size:11px} .dv-main,.dv-side{min-width:0} .dv-main>*{max-width:100%} /* ---------- 右栏是