/**
 * 客户版网站样式。
 *
 * 取值来源：《客户版设计基准 V1》（从内部工作台 5177 提取）。所有颜色/字号/间距/圆角/阴影
 * 一律引用 styles/tokens.css 里的变量，本文件不出现十六进制色值（可用 `npm run check:design` 自查）。
 *
 * 类名沿用客户版既有命名（.card / .btn / .badge …），取值按基准对应条目：
 *   .card      ← 基准 §3.2 页面面板 .section（01-todo.css:2026-2035）
 *   .btn       ← 基准 §2.1（10-shell-base-2.css:899-918 + 焦点/禁用按 §6 C3/C4 收敛）
 *   .badge     ← 基准 §2.5 状态胶囊
 *
 * 2026-10-01：复刻 5177 的板块内容缩放（业务方实机反馈"报价合同字体太大"）：
 *   :root 默认 --workbench-section-scale: 0.70（01-todo.css:32），
 *   作用根 = `main > .view > .card > *`（对应 5177 `main > .section > *`，01-todo.css:2037-2039），
 *   当前视图的档位由 public/app/ui/workbench-scale.js 写在 .view 元素上。
 */

/* ============================================================
 * 0. 基础层（基准 §1.2 排版、§1.1 背景、§1.3 滚动条）
 * ============================================================ */

/* 板块内容缩放档位（2026-10-01 照 5177 搬回；业务方实机对照拍板）。
 * 默认 100% ↔ 0.70（5177 01-todo.css:32、app.js:174-179/5230-5232），
 * 变量本身定义在 tokens.css（客户版的唯一常量源）；
 * 当前视图的档位由 ui/workbench-scale.js 以行内变量写在 .view 上。 */

/* 板块内容缩放：5177 是 `main > .section > * { zoom: var(--workbench-section-scale) }`
 * （01-todo.css:2037-2039）。客户版的面板是 .card（基准 §3.2 的 .section 对应物），
 * 所以作用根 = 视图下每张卡片的内容；卡片外壳（边框/内边距/最大宽度）不缩放，
 * 与 5177 的 section 外壳口径一致。
 * 副作用与补偿（逐处）：
 *   · 卡片内容里的 position:fixed 菜单/弹窗要 `zoom: calc(1 / var(--workbench-section-scale, 1))`
 *     （5177 同款，见 invoice.css:2697/6212、09-quote-library-2.css:716）——
 *     否则尺寸和指针坐标都会被缩 0.70；补偿清单写在各模块样式文件里；
 *   · 拖拽改尺寸（列宽/行高/树宽）的指针位移要除以本变量（见 workbench-scale.js
 *     的 sectionScaleFor 与各面板的 pointermove 实现）；
 *   · 打印沿用当前档位（5177 也没有打印专用的反向缩放）。 */
main > .view > .card > * {
  zoom: var(--workbench-section-scale);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html {
  color: var(--wb-text-primary);
  background: var(--wb-bg);
}

body {
  margin: 0;
  font-family: var(--wb-font-family);
  font-size: var(--wb-fs-13);
  line-height: var(--wb-font-line-height);
  color: var(--wb-text-primary);
  background: var(--wb-page-bg); /* 基准 §1.1 */
}

::selection { background: var(--wb-accent-soft); }

/* 滚动条（基准 §1.3 · 01-todo.css:76-99） */
* { scrollbar-color: var(--wb-scroll-thumb) var(--wb-scroll-track); }
::-webkit-scrollbar { width: var(--wb-scroll-size); height: var(--wb-scroll-size); }
::-webkit-scrollbar-track { background: var(--wb-scroll-track); }
::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-scroll-thumb);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--wb-scroll-thumb-hover); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--wb-scroll-thumb-active); background-clip: padding-box; }

/* 焦点：基准 §6 C4 要求客户版必须让键盘焦点可见（旧项目侧栏不可见）。
 * [data-sg-state] 是样式总览页的静态状态钩子：与真实伪类共用同一段声明，避免出现两套样式。 */
:focus-visible,
[data-sg-state="focus"] {
  outline: var(--wb-focus-outline);
  outline-offset: var(--wb-focus-outline-offset);
}

h1, h2, h3, h4 { margin: 0 0 var(--wb-space-2); line-height: 1.35; }
h1 { font-size: var(--wb-fs-22); }
h2 { font-size: var(--wb-fs-24); font-weight: var(--wb-fw-850); color: var(--wb-page-ink); }
h3 { font-size: var(--wb-fs-15); }
h4 { font-size: var(--wb-fs-14); }

p { margin: 0 0 var(--wb-space-2); }

a { color: var(--wb-link); text-decoration: none; }
a:hover, a:focus-visible { color: var(--wb-page-link-hover-ink); text-decoration: underline; }

code {
  padding: 1px 5px;
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-control);
  background: var(--wb-fill-soft);
  font-family: var(--wb-font-mono);
  font-size: var(--wb-fs-12);
}

input::placeholder, textarea::placeholder { color: var(--wb-text-placeholder); }
input, textarea, select { caret-color: var(--wb-caret); }

/* 工具类 */
.muted { color: var(--wb-text-secondary); }
.small { font-size: var(--wb-fs-12); }
.subhead { margin: var(--wb-space-7) 0 var(--wb-space-2); font-size: var(--wb-fs-15); }
.warn-line { margin: var(--wb-space-3) 0 0; color: var(--wb-warning); font-size: var(--wb-fs-13); }
.error-line { margin: var(--wb-space-3) 0 0; color: var(--wb-danger); font-size: var(--wb-fs-13); }
.ok-line { color: var(--wb-success); }
.visually-hidden { /* 基准 §7C · 08-quote-library.css:1525-1545 */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 数字与业务显示（基准 §4）：等宽数字 + 右对齐，用于金额/数量/编号/天数 */
.num, .num-right {
  font-variant-numeric: tabular-nums;
}
.num-right { text-align: right; }
.num-mono { font-family: var(--wb-font-mono); }
.code-text { font-weight: var(--wb-fw-700); text-transform: uppercase; }

/* ============================================================
 * 1. 左侧导航（基准 §3.1）
 * ============================================================ */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--wb-z-sidebar);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--wb-sidebar-gap);
  width: var(--wb-sidebar-width);
  padding: var(--wb-sidebar-padding-y) var(--wb-sidebar-padding-x);
  overflow: auto;
  color: var(--wb-sidebar-ink);
  background: var(--wb-sidebar-bg);
  border-right: 1px solid var(--wb-sidebar-border);
  box-shadow: var(--wb-sidebar-shadow);
}

.sidebar-brand { display: flex; gap: var(--wb-space-3); align-items: center; }
.sidebar-brand .brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--wb-radius-button);
  background: var(--wb-accent-btn-top);
  color: var(--wb-sidebar-brand-ink);
  font-size: var(--wb-fs-16);
  font-weight: var(--wb-fw-800);
}
/* 眉题（基准 §1.2：12px/850/.08em/uppercase；颜色按 §6 C1 处理，见 tokens.css 注释） */
.sidebar-brand .eyebrow {
  margin: 0;
  color: var(--wb-sidebar-eyebrow-ink);
  font-size: var(--wb-fs-12);
  font-weight: var(--wb-fw-850);
  letter-spacing: var(--wb-tracking-wide);
  text-transform: uppercase;
}
.sidebar-brand h1 {
  margin: var(--wb-space-1) 0 0;
  color: var(--wb-sidebar-brand-ink);
  font-size: var(--wb-fs-22);
  letter-spacing: 0;
}
.sidebar-brand p {
  margin: var(--wb-space-1) 0 0;
  color: var(--wb-sidebar-note-ink);
  font-size: var(--wb-fs-11);
}

.nav { display: grid; gap: var(--wb-space-3); }
.nav-footer { gap: var(--wb-space-1); }

.sidebar-footer {
  display: grid;
  gap: var(--wb-space-3);
  margin-top: auto;
  padding: var(--wb-space-5) var(--wb-space-2) 0;
  border-top: 1px solid var(--wb-sidebar-divider);
}

/* 「页面大小」控件（2026-10-01 照 5177 搬回；01-todo.css:1477-1525）：
 * 侧栏导航项之后、底部区之前；浅色按钮三枚 － / 100% / ＋，默认显示 100%。 */
.workbench-scale-panel {
  display: grid;
  gap: var(--wb-space-3);
  border-top: 1px solid var(--wb-sidebar-divider);
  padding: var(--wb-space-5) var(--wb-space-2) 0;
}

.workbench-scale-panel > span {
  color: var(--wb-sidebar-eyebrow-ink);
  font-size: 10px;                    /* 01-todo.css:1487 分组标题档 */
  font-weight: var(--wb-fw-800);
  letter-spacing: var(--wb-tracking-wide);
  text-transform: uppercase;
}

.workbench-scale-controls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wb-space-1);             /* 01-todo.css:1495 */
}

.workbench-scale-controls button {
  min-height: 36px;                   /* 01-todo.css:1499 */
  border: 1px solid var(--wb-scale-btn-border);
  border-radius: var(--wb-radius-button);
  background: var(--wb-scale-btn-bg);
  color: var(--wb-scale-btn-ink);
  cursor: pointer;
  font: inherit;
  font-size: var(--wb-fs-12);
  font-weight: var(--wb-fw-800);
  box-shadow: var(--wb-shadow-control);
}

.workbench-scale-controls button:hover,
.workbench-scale-controls button:focus-visible {
  border-color: var(--wb-scale-btn-hover-border);
  color: var(--wb-accent-ink);
  outline: 0;
}

.workbench-scale-controls button:disabled {
  cursor: default;
  opacity: var(--wb-disabled-opacity);
}

.workbench-scale-controls [data-workbench-scale="reset"] {
  color: var(--wb-scale-reset-ink);
  font-size: var(--wb-fs-11);         /* 01-todo.css:1524-1526 */
}

/* 导航项：默认 / 悬停 / 选中 / 键盘焦点（基准 §3.1 四态；拖拽态客户版不需要） */
.nav-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--wb-space-2);
  align-items: center;
  min-height: var(--wb-control-height-nav);
  padding: 2px 3px;
  border: 1px solid transparent;
  border-radius: var(--wb-radius-button);
  background: transparent;
  color: var(--wb-sidebar-item-ink);
  font-family: inherit;
  min-width: 0;
  padding: 2px var(--wb-space-2);
  font-size: var(--wb-fs-15);
  font-weight: var(--wb-fw-700);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--wb-transition-fast), border-color var(--wb-transition-fast), box-shadow var(--wb-transition-fast);
}
.nav-item:hover, .nav-item[data-sg-state="hover"] { color: var(--wb-sidebar-item-ink-hover); background: transparent; }
.nav-item.is-active {
  border-color: var(--wb-sidebar-item-active-border);
  background: var(--wb-sidebar-item-active-bg);
  box-shadow: var(--wb-sidebar-item-active-inset);
  color: var(--wb-sidebar-item-ink-active);
  font-weight: var(--wb-fw-800);
}
.nav-item.is-active:hover { color: var(--wb-sidebar-item-ink-active); }
.nav-item:disabled { opacity: var(--wb-disabled-opacity); cursor: not-allowed; }
.nav-item-danger { color: var(--wb-sidebar-item-ink); }
.nav-item-danger:hover { color: var(--wb-sidebar-item-ink-hover); }

.sidebar-account {
  margin: 0;
  padding: var(--wb-space-2) var(--wb-space-2) 0;
  color: var(--wb-sidebar-note-ink);
  font-size: var(--wb-fs-11);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* ============================================================
 * 2. 主内容区（基准 §3.2）
 * ============================================================ */

.main {
  margin-left: var(--wb-sidebar-width);
  padding: var(--wb-main-padding);
  min-width: 0;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-space-5);
  align-items: center;
  justify-content: space-between;
  max-width: var(--wb-panel-max-width);
  margin: 0 auto var(--wb-space-4);
  min-height: 34px;
}
.topbar h1 { margin: 0; font-size: var(--wb-fs-24); font-weight: var(--wb-fw-850); color: var(--wb-page-ink); }
/* 2026-10-13：模块页顶栏标题隐藏后，账号区靠 margin 留在右侧（只剩一个子项时 space-between 会把它推到左边）。 */
.account-area { margin-left: auto; color: var(--wb-text-secondary); font-size: var(--wb-fs-13); }
.account-area strong { color: var(--wb-text-primary); }

.banner-area { max-width: var(--wb-panel-max-width); margin: 0 auto var(--wb-space-4); }

/* 2026-10-13：模块页与垃圾篓页的顶栏整条撤除——卡片里有自己的标题，顶栏只剩账号区
   也算占一条空带（业务方两次要求"顶部不留空白"）。账号与「退出登录」入口保留在
   首页 / 设置 / 帮助的顶栏上；内容从主区内边距处直接铺满。 */
body[data-view="product-knowledge"] .topbar,
body[data-view="price-list"] .topbar,
body[data-view="quote-contract"] .topbar,
body[data-view="order-archive"] .topbar,
body[data-view="trash"] .topbar {
  display: none;
}

.view { display: grid; gap: var(--wb-space-6); }

/* 页面面板：基准 §3.2 `.section`（01-todo.css:2026-2035） */
.card {
  width: 100%;
  max-width: var(--wb-panel-max-width);
  margin: 0 auto var(--wb-space-10);
  padding: var(--wb-panel-padding);
  border: 1px solid var(--wb-panel-border);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-section-bg);
  box-shadow: var(--wb-shadow-panel);
}

/* 标题行：基准 §3.2 `.section-heading`（07-order-archives.css:216-228） */
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wb-space-8);
  padding-bottom: var(--wb-space-7);
  margin-bottom: var(--wb-space-5);
  border-bottom: 1px solid var(--wb-heading-divider);
}
.section-heading > :first-child { min-width: 0; }
.section-heading h2 { margin: 0; }

/* 点标题开本地文件夹的无框按钮（shared/folder-title.js；产品知识/价目表/订单档案/垃圾篓共用）。
 * 外观必须和原来的 `<h2>` 一致，只加 hover/focus 的链接式反馈——参照 quote-contract.css 的同型按钮。 */
.section-heading > .section-heading-folder-button { min-width: 0; }
.section-heading-folder-button {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.section-heading-folder-button h2 { margin: 0; }
.section-heading-folder-button:hover h2,
.section-heading-folder-button:focus-visible h2 {
  color: var(--wb-link);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.heading-actions { /* 基准 §3.2 `.heading-actions` 10-shell-base-2.css:712-718 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wb-space-4);
  justify-content: flex-end;
}

/* 工具条：基准 §3.2（旧项目无全局 .toolbar，取 10-shell-base-2.css:805-816 范式） */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wb-space-5);
  margin-bottom: var(--wb-space-5);
}
.toolbar-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wb-space-4);
  padding-top: var(--wb-space-3);
  border-top: 1px dashed var(--wb-border);
}

/* ============================================================
 * 3. 按钮（基准 §2.1；禁用按 §6 C3 收敛、焦点按 §6 C4）
 * ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--wb-space-1);
  min-height: var(--wb-control-height);
  padding: var(--wb-space-4) var(--wb-space-5);
  border: 1px solid var(--wb-btn-border);
  border-radius: var(--wb-radius-button);
  background: var(--wb-btn-bg);
  color: var(--wb-btn-ink);
  font-family: inherit;
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-700);
  cursor: pointer;
  box-shadow: var(--wb-shadow-control);
  transition: background-color var(--wb-transition-fast), background var(--wb-transition-fast),
    border-color var(--wb-transition-fast), box-shadow var(--wb-transition-fast), color var(--wb-transition-fast);
}
.btn:hover:not(:disabled),
.btn[data-sg-state="hover"] {
  border-color: var(--wb-btn-hover-border);
  background: var(--wb-btn-hover-bg);
  color: var(--wb-btn-hover-ink);
  box-shadow: var(--wb-btn-hover-shadow);
}
/* 激活/按下：基准 §2.1 注明"无全局规则"，由客户版补齐（保持同色系、按下更实） */
.btn:active:not(:disabled),
.btn[data-sg-state="active"] {
  border-color: var(--wb-accent-strong);
  background: var(--wb-accent-soft);
  color: var(--wb-accent-ink);
  box-shadow: var(--wb-focus-ring);
}
.btn:disabled { opacity: var(--wb-disabled-opacity); cursor: not-allowed; }

.btn-primary {
  border-color: var(--wb-btn-primary-border);
  background: var(--wb-btn-primary-bg);
  color: var(--wb-btn-primary-ink);
}
/* 悬停：基准 §6 C2 指出旧项目主按钮悬停会掉渐变（落到通用 hover），
   客户版补一条"深一档同色系"的渐变（新增规则，已记入偏差清单）。 */
.btn-primary:hover:not(:disabled),
.btn-primary[data-sg-state="hover"] {
  border-color: var(--wb-accent-strong);
  background: var(--wb-btn-primary-hover-bg);
  color: var(--wb-btn-primary-ink);
  box-shadow: var(--wb-btn-hover-shadow);
}
.btn-primary:active:not(:disabled),
.btn-primary[data-sg-state="active"] {
  border-color: var(--wb-accent-strong);
  background: var(--wb-accent-strong);
  color: var(--wb-btn-primary-ink);
}

.btn-danger { /* 基准 §2.1 描边危险（推荐套） */
  min-height: var(--wb-control-height-sm);
  padding: 7px var(--wb-space-6);
  border-color: var(--wb-btn-danger-border);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface);
  color: var(--wb-btn-danger-ink);
  box-shadow: none;
}
.btn-danger:hover:not(:disabled),
.btn-danger[data-sg-state="hover"] {
  border-color: var(--wb-btn-danger-border);
  background: var(--wb-btn-danger-hover-bg);
  color: var(--wb-btn-danger-ink);
  box-shadow: none;
}

.btn-text { /* 基准 §2.1 文字按钮（右键菜单项范式） */
  min-height: var(--wb-control-height-nav);
  padding: var(--wb-space-3) var(--wb-space-4);
  border-color: transparent;
  border-radius: var(--wb-radius-button);
  background: transparent;
  color: var(--wb-btn-text-ink);
  box-shadow: none;
}
.btn-text:hover:not(:disabled),
.btn-text[data-sg-state="hover"] {
  border-color: transparent;
  background: var(--wb-btn-text-hover-bg);
  color: var(--wb-btn-text-ink);
  box-shadow: none;
}

.btn-sm { min-height: var(--wb-control-height-sm); padding: var(--wb-space-1) var(--wb-space-4); font-size: var(--wb-fs-12); }

.actions { display: flex; flex-wrap: wrap; gap: var(--wb-space-3); align-items: center; margin: var(--wb-space-4) 0 var(--wb-space-1); }

/* ============================================================
 * 4. 输入类（基准 §2.2）
 * ============================================================ */

.field { display: block; margin: var(--wb-space-3) 0; }
.field > span {
  display: block;
  margin-bottom: var(--wb-space-2);
  color: var(--wb-text-primary);
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-700);
}

.input, .field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="number"], .field input[type="date"], .field input[type="search"], .field select {
  width: 100%;
  min-height: var(--wb-input-height);
  padding: var(--wb-space-5);
  border: 1px solid var(--wb-input-border);
  border-radius: var(--wb-radius-control);
  background: var(--wb-input-bg);
  color: var(--wb-input-ink);
  font-family: inherit;
  font-size: var(--wb-fs-13);
  font-weight: 500;
  box-shadow: var(--wb-input-shadow);
  transition: border-color var(--wb-transition-fast), box-shadow var(--wb-transition-fast);
}
.input:focus, .field input:focus, .field select:focus,
.input[data-sg-state="focus"], [data-sg-state="focus"].field input {
  border-color: var(--wb-input-focus-border);
  outline: 0;
  box-shadow: var(--wb-input-focus-shadow);
}
.input:read-only, .field input:read-only { background: var(--wb-input-readonly-bg); }
.input:disabled, .field input:disabled, .field select:disabled {
  background: var(--wb-input-disabled-bg);
  color: var(--wb-input-disabled-ink);
  cursor: not-allowed;
}

.field textarea, textarea.input {
  width: 100%;
  min-height: var(--wb-textarea-min-68);
  padding: var(--wb-space-5);
  border: 1px solid var(--wb-input-border);
  border-radius: var(--wb-radius-button);
  background: var(--wb-input-bg);
  color: var(--wb-input-ink);
  font-family: inherit;
  font-size: var(--wb-fs-13);
  font-weight: 500;
  line-height: 1.6;
  resize: vertical;
  box-shadow: var(--wb-input-shadow);
  transition: border-color var(--wb-transition-fast), box-shadow var(--wb-transition-fast);
}
.field textarea:focus, textarea.input:focus,
textarea.input[data-sg-state="focus"] {
  border-color: var(--wb-input-focus-border);
  outline: 0;
  box-shadow: var(--wb-input-focus-shadow);
}
.field textarea:disabled { background: var(--wb-input-disabled-bg); color: var(--wb-input-disabled-ink); cursor: not-allowed; }
/* 文本域三档高度（基准 §6 C8：旧项目基线 220px 对"单行备注"过高） */
textarea.rows-note { min-height: var(--wb-textarea-min-68); }
textarea.rows-terms { min-height: var(--wb-textarea-min-120); }
textarea.rows-long { min-height: var(--wb-textarea-min-220); }

/* 勾选/单选：基准 §6 C7 要求显式定尺寸（旧项目被全局 input{width:100%} 命中） */
input[type="checkbox"], input[type="radio"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--wb-accent);
  cursor: pointer;
}
input[type="checkbox"] { border-radius: var(--wb-radius-check); }

/* 数字输入去 spinner（基准 §2.2 · 01-todo.css:384-392） */
input[type="number"] { -webkit-appearance: none; -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.form-block { display: grid; gap: var(--wb-space-3); }
.form-block .actions { margin: var(--wb-space-1) 0 0; }
.form-grid { display: grid; gap: var(--wb-space-5); }
.verify-block {
  margin-top: var(--wb-space-5);
  padding: var(--wb-space-5);
  border: 1px dashed var(--wb-empty-border);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-panel-bg-soft);
}
.dev-token {
  margin-top: var(--wb-space-3);
  padding: var(--wb-space-3) var(--wb-space-4);
  border: 1px solid var(--wb-pill-warn-border);
  border-radius: var(--wb-radius-button);
  background: var(--wb-pill-warn-bg);
  color: var(--wb-pill-warn-ink);
  font-size: var(--wb-fs-12);
  overflow-wrap: anywhere;
}

/* ============================================================
 * 5. 页签（基准 §2.4 下划线式，基准 §6 C12 建议选这一套）
 * ============================================================ */

.tabs {
  display: flex;
  width: max-content;
  max-width: 100%;
  gap: var(--wb-space-6);
  margin: var(--wb-space-4) 0 var(--wb-space-5);
  border-bottom: 1px solid var(--wb-border);
}
.tab {
  min-height: 34px;
  padding: var(--wb-space-2) 3px var(--wb-space-1);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--wb-tab-ink);
  font-family: inherit;
  font-size: var(--wb-fs-14);
  font-weight: var(--wb-fw-900);
  cursor: pointer;
}
.tab:hover, .tab[data-sg-state="hover"] { color: var(--wb-tab-active-ink); }
.tab.is-active {
  border-bottom-color: var(--wb-tab-active-border);
  color: var(--wb-tab-active-ink);
}
.tab:disabled { color: var(--wb-text-disabled); opacity: var(--wb-disabled-opacity); cursor: not-allowed; }

/* ============================================================
 * 6. 胶囊 / 标签 / chip（基准 §2.5）
 * ============================================================ */

.badge { /* 状态胶囊：主色（默认） */
  display: inline-flex;
  align-items: center;
  gap: var(--wb-space-1);
  padding: 7px var(--wb-space-5);
  border: 1px solid var(--wb-pill-border);
  border-radius: var(--wb-radius-pill);
  background: var(--wb-pill-bg);
  color: var(--wb-pill-ink);
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-850);
  white-space: nowrap;
}

/* 客户版状态 → 色调映射（纯 CSS，不改 JS 逻辑）。
   目的：本地工作区四种状态一眼可分（基准 §5「本地工作区状态区」）。 */
.badge[data-state="ready"] { border-color: var(--wb-pill-ok-bg); background: var(--wb-pill-ok-bg); color: var(--wb-pill-ok-ink); }
.badge[data-state="read-only"] { border-color: var(--wb-pill-warn-border); background: var(--wb-pill-warn-bg); color: var(--wb-pill-warn-ink); }
.badge[data-state="needs-authorization"] { border-color: var(--wb-pill-info-border); background: var(--wb-pill-info-bg); color: var(--wb-pill-info-ink); }
.badge[data-state="denied"],
.badge[data-state="missing"],
.badge[data-state="incompatible"],
.badge[data-state="corrupt"],
.badge[data-state="error"],
.badge[data-state="unsupported"] { border-color: var(--wb-pill-danger-border); background: var(--wb-pill-danger-bg); color: var(--wb-pill-danger-ink); }
.badge[data-state="no-workspace"],
.badge[data-state="folder-without-workspace"],
.badge[data-state=""] { border-color: var(--wb-pill-neutral-border); background: var(--wb-pill-neutral-bg); color: var(--wb-pill-neutral-ink); }

.pill { /* 通用胶囊（会员状态等） */
  display: inline-flex;
  align-items: center;
  padding: 7px var(--wb-space-5);
  border: 1px solid var(--wb-pill-border);
  border-radius: var(--wb-radius-pill);
  background: var(--wb-pill-bg);
  color: var(--wb-pill-ink);
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-850);
  white-space: nowrap;
}
.pill-ok { border-color: var(--wb-pill-ok-bg); background: var(--wb-pill-ok-bg); color: var(--wb-pill-ok-ink); }
.pill-warn { border-color: var(--wb-pill-warn-border); background: var(--wb-pill-warn-bg); color: var(--wb-pill-warn-ink); }
.pill-info { border-color: var(--wb-pill-info-border); background: var(--wb-pill-info-bg); color: var(--wb-pill-info-ink); }
.pill-danger { border-color: var(--wb-pill-danger-border); background: var(--wb-pill-danger-bg); color: var(--wb-pill-danger-ink); }
.pill-neutral { border-color: var(--wb-pill-neutral-border); background: var(--wb-pill-neutral-bg); color: var(--wb-pill-neutral-ink); }

.chip { /* 中性 chip（模块可用性三枚并排，基准 §5） */
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 7px;
  border: 1px solid var(--wb-chip-border);
  border-radius: var(--wb-radius-pill);
  background: var(--wb-chip-bg);
  color: var(--wb-chip-ink);
  font-size: var(--wb-fs-12);
}
.chip-ok { border-color: var(--wb-pill-ok-bg); background: var(--wb-pill-ok-bg); color: var(--wb-pill-ok-ink); }
.chip-muted { border-color: var(--wb-pill-neutral-border); background: var(--wb-pill-neutral-bg); color: var(--wb-pill-neutral-ink); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--wb-space-4); }

.tag-example { /* 示例 / 参考标记（基准 §2.5 绿标签，基准 §5 推荐给示例库） */
  display: inline-flex;
  align-items: center;
  padding: 2px var(--wb-space-3);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-pill-ok-bg);
  color: var(--wb-pill-ok-ink);
  font-size: var(--wb-fs-11);
  font-weight: 500;
}
.tag-warn { /* 小标签（基准 §2.5） */
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 7px;
  border-radius: var(--wb-radius-control);
  background: var(--wb-tag-warn-bg);
  color: var(--wb-tag-warn-ink);
  font-size: var(--wb-fs-12);
  font-weight: var(--wb-fw-700);
}
.chip-removable { /* 可删 chip（基准 §2.5） */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 160px;
  padding: 3px 22px 3px 9px;
  border: 1px solid var(--wb-chip-removable-border);
  border-radius: var(--wb-radius-pill);
  background: var(--wb-chip-removable-bg);
  color: var(--wb-chip-removable-ink);
  font-size: var(--wb-fs-12);
  font-weight: var(--wb-fw-850);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
 * 7. 提示条（基准 §2.6）：行内提示盒 / 横幅 / toast
 * ============================================================ */

.message { /* 行内提示盒 */
  margin: var(--wb-space-3) 0;
  padding: var(--wb-space-5);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-button);
  background: var(--wb-fill-soft);
  line-height: 1.6;
}
.message[data-tone="ok"] { border-color: var(--wb-success-bg); background: var(--wb-success-bg); color: var(--wb-success); }
.message[data-tone="error"] { border-color: var(--wb-toast-error-border); background: var(--wb-toast-error-bg); color: var(--wb-toast-error-ink); }

.notice-line { /* 行内说明条（模块开通状态等） */
  margin-top: var(--wb-space-4);
  padding: var(--wb-space-4) var(--wb-space-5);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-button);
  background: var(--wb-fill-soft);
  font-size: var(--wb-fs-13);
}
.notice-line[data-tone="ok"] { border-color: var(--wb-success-bg); background: var(--wb-success-bg); color: var(--wb-success); }
.notice-line[data-tone="warn"] { border-color: var(--wb-pill-warn-border); background: var(--wb-pill-warn-bg); color: var(--wb-pill-warn-ink); }
.notice-line[data-tone="info"] { border-color: var(--wb-banner-info-border); background: var(--wb-banner-info-bg); color: var(--wb-banner-info-ink); }

.banner { /* 横幅 */
  margin: 0 0 var(--wb-space-3);
  padding: var(--wb-space-4) var(--wb-space-5);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-button);
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-700);
  line-height: 1.6;
}
.banner-info { border-color: var(--wb-banner-info-border); background: var(--wb-banner-info-bg); color: var(--wb-banner-info-ink); }
.banner-warn { border-color: var(--wb-banner-warn-border); background: var(--wb-banner-warn-bg); color: var(--wb-banner-warn-ink); }
.banner-error { border-color: var(--wb-banner-danger-border); background: var(--wb-banner-danger-bg); color: var(--wb-banner-danger-ink); }
/* 到期只读横幅：黄横幅 + 左侧色条（基准 §5） */
.banner-read-only {
  border-color: var(--wb-banner-warn-border);
  border-left: 4px solid var(--wb-banner-bar-readonly);
  background: var(--wb-banner-warn-bg);
  color: var(--wb-banner-warn-ink);
}

.wb-toast { /* 右上提示（基准 §2.6） */
  position: fixed;
  top: var(--wb-space-8);
  right: var(--wb-space-8);
  z-index: var(--wb-z-toast);
  max-width: min(430px, calc(100vw - 36px));
  padding: var(--wb-space-5) var(--wb-space-6);
  border: 1px solid var(--wb-toast-info-border);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-toast-info-bg);
  color: var(--wb-toast-info-ink);
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-700);
  line-height: 1.45;
  box-shadow: var(--wb-shadow-toast);
}
.wb-toast[data-tone="success"] { border-color: var(--wb-toast-success-border); background: var(--wb-toast-success-bg); color: var(--wb-toast-success-ink); }
.wb-toast[data-tone="error"] { border-color: var(--wb-toast-error-border); background: var(--wb-toast-error-bg); color: var(--wb-toast-error-ink); }

/* ============================================================
 * 8. 空态（基准 §2.7，基准 §6 C13：只写一条）
 * ============================================================ */

.empty-state {
  display: grid;
  place-items: center;
  min-height: 180px;
  padding: var(--wb-space-8);
  border: 1px dashed var(--wb-empty-border);
  border-radius: var(--wb-radius-button);
  background: var(--wb-empty-bg);
  color: var(--wb-empty-ink);
  text-align: center;
}
.empty-state-plain { /* 纯文字空态变体（基准 §2.7 其他变体） */
  min-height: 0;
  padding: var(--wb-space-5) 0;
  border: 0;
  background: transparent;
  text-align: left;
}
.empty { color: var(--wb-text-secondary); }

/* 拖放区：空态变体的虚线框（基准 §5「示例库标记」同源做法） */
.drop-zone {
  margin-top: var(--wb-space-5);
  padding: var(--wb-space-6);
  border: 1px dashed var(--wb-empty-border);
  border-radius: var(--wb-radius-button);
  background: var(--wb-panel-bg-soft);
  text-align: center;
}
.drop-zone.is-over { border-color: var(--wb-accent); background: var(--wb-accent-soft); }
.drop-zone p { margin: 0 0 var(--wb-space-2); }
.drop-hint { min-height: 20px; margin: 0; color: var(--wb-text-secondary); font-size: var(--wb-fs-12); }

/* ============================================================
 * 9. 表格（基准 §2.3，按建议取"报价排列表"那套：四边边框 + 密集行高，无斑马纹）
 * ============================================================ */

.wb-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--wb-table-container-border);
  background: var(--wb-surface);
}
.wb-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: var(--wb-fs-12);
}
.wb-table th, .wb-table td {
  padding: var(--wb-space-3) var(--wb-space-3);
  height: var(--wb-table-row-height);
  border: 1px solid var(--wb-table-border);
  text-align: left;
  vertical-align: middle;
}
.wb-table thead th {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--wb-table-head-bg);
  color: var(--wb-table-head-ink);
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-900);
}
.wb-table tbody tr:hover > td,
.wb-table tbody tr[data-sg-state="hover"] > td { background: var(--wb-table-row-hover-bg); }
.wb-table tbody tr.is-selected > td { background: var(--wb-table-row-selected-bg); }
.wb-table tfoot td, .wb-table tr.is-total > td {
  background: var(--wb-surface);
  color: var(--wb-table-total-ink);
  font-weight: var(--wb-fw-900);
}
.wb-table td.is-num, .wb-table th.is-num { text-align: right; font-variant-numeric: tabular-nums; }

/* 可编辑单元格（基准 §2.3，取财务/报价那套：常驻透明、聚焦出框） */
.wb-cell-input {
  width: 100%;
  min-height: 26px;
  padding: 3px var(--wb-space-1);
  border: 1px solid transparent;
  border-radius: var(--wb-radius-check);
  background: transparent;
  color: var(--wb-text-primary);
  font: inherit;
}
.wb-cell-input:focus,
.wb-cell-input[data-sg-state="focus"] {
  border-color: var(--wb-table-cell-focus-border);
  outline: none;
  background: var(--wb-surface);
  box-shadow: 0 0 0 2px var(--wb-table-cell-focus-ring);
}

/* 分页（基准 §2.9） */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--wb-space-4);
  padding: 2px 0 var(--wb-space-2);
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-12);
  font-weight: var(--wb-fw-850);
}
.pagination button {
  min-height: var(--wb-control-height-sm);
  padding: var(--wb-space-1) var(--wb-space-4);
  border: 1px solid var(--wb-pagination-border);
  border-radius: var(--wb-radius-control);
  background: var(--wb-surface);
  color: var(--wb-text-primary);
  font: inherit;
  cursor: pointer;
}
.pagination button:hover:not(:disabled),
.pagination button[data-sg-state="hover"] { border-color: var(--wb-accent); background: var(--wb-accent-soft); color: var(--wb-accent-ink); }
.pagination button:disabled { color: var(--wb-pagination-disabled-ink); opacity: var(--wb-disabled-opacity); cursor: not-allowed; }

/* ============================================================
 * 10. 弹窗 / 浮层（基准 §2.8；遮罩统一取一种，基准 §5）
 * ============================================================ */

.wb-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--wb-z-modal);
  display: grid;
  place-items: center;
  padding: var(--wb-space-10);
  background: var(--wb-overlay-bg);
}
.wb-modal {
  display: grid;
  gap: var(--wb-space-6);
  width: min(440px, 100%);
  padding: var(--wb-space-8);
  border: 1px solid var(--wb-modal-border);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-surface);
  box-shadow: var(--wb-shadow-modal);
}
.wb-modal h2, .wb-modal h3 { color: var(--wb-modal-ink); font-size: var(--wb-fs-19); }
.wb-modal-actions { display: flex; justify-content: flex-end; gap: var(--wb-space-4); }

.wb-menu { /* 右键 / 下拉菜单 */
  position: fixed;
  z-index: var(--wb-z-menu);
  min-width: 224px;
  max-width: min(320px, calc(100vw - 16px));
  margin: 0;
  padding: var(--wb-space-2);
  border: 1px solid var(--wb-menu-border);
  border-radius: var(--wb-radius-panel);
  background: var(--wb-menu-bg);
  box-shadow: var(--wb-shadow-menu);
  list-style: none;
}
.wb-menu li {
  padding: var(--wb-space-4) var(--wb-space-4);
  border-radius: 7px;
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-800);
  cursor: pointer;
}
.wb-menu li:hover { background: var(--wb-btn-text-hover-bg); }
.wb-menu li[aria-disabled="true"] { color: var(--wb-text-disabled); cursor: not-allowed; }

/* ============================================================
 * 11. 业务内容块（客户版既有结构）
 * ============================================================ */

.meta { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 2px var(--wb-space-5); margin: var(--wb-space-4) 0; }
.meta dt { color: var(--wb-text-secondary); font-size: var(--wb-fs-13); }
.meta dd { margin: 0; font-size: var(--wb-fs-13); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

.status-row { display: flex; flex-wrap: wrap; gap: var(--wb-space-4); align-items: center; margin: var(--wb-space-4) 0 var(--wb-space-2); }

.structure-box { margin: var(--wb-space-5) 0 var(--wb-space-1); }
.structure-box > summary {
  cursor: pointer;
  font-size: var(--wb-fs-13);
  font-weight: var(--wb-fw-800);
  color: var(--wb-link);
}
.structure-list, .kv-list { margin: var(--wb-space-3) 0 0; padding: 0; list-style: none; }
.structure-list li, .kv-list li {
  display: grid;
  grid-template-columns: 150px 90px minmax(0, 1fr);
  gap: var(--wb-space-3);
  padding: var(--wb-space-1) 0;
  border-bottom: 1px dashed var(--wb-border);
  font-size: var(--wb-fs-13);
}
.structure-list .k, .kv-list .k { color: var(--wb-text-secondary); }
.structure-list .why { color: var(--wb-text-secondary); font-size: var(--wb-fs-12); }
.structure-list li.ok .v { color: var(--wb-success); font-weight: var(--wb-fw-700); }
.kv-list li { grid-template-columns: 220px minmax(0, 1fr); }

.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--wb-space-5); margin-top: var(--wb-space-4); }
.module-grid > p { grid-column: 1 / -1; margin: 0; }
.module-card {
  padding: var(--wb-panel-padding);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-panel);
  background: linear-gradient(180deg, var(--wb-panel-bg), var(--wb-panel-bg-soft)); /* 基准 §3.2 内部卡片范式 B */
  box-shadow: var(--wb-shadow-soft);
}
.module-card h3 { margin-bottom: var(--wb-space-1); font-size: var(--wb-fs-18); font-weight: var(--wb-fw-850); }
.module-card p { margin: var(--wb-space-1) 0; font-size: var(--wb-fs-13); }
.module-state { margin-top: var(--wb-space-3); font-weight: var(--wb-fw-700); }
.module-state[data-tone="ok"] { color: var(--wb-success); }
.module-state[data-tone="warn"] { color: var(--wb-warning); }
.module-state[data-tone="info"] { color: var(--wb-text-secondary); }

.plain-list { margin: var(--wb-space-2) 0 var(--wb-space-4); padding-left: var(--wb-space-8); font-size: var(--wb-fs-13); }
.steps { margin: var(--wb-space-2) 0; padding-left: var(--wb-space-8); font-size: var(--wb-fs-13); }
.steps li { margin: 2px 0; }

/* 首次引导步骤（基准 §5）：内部卡片 + 序号，不发明连接线 */
.guide-steps { display: grid; gap: var(--wb-space-5); }
.guide-step {
  padding: var(--wb-panel-padding);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-panel);
  background: linear-gradient(180deg, var(--wb-panel-bg), var(--wb-panel-bg-soft));
  box-shadow: var(--wb-shadow-soft);
}
.guide-step .step-index {
  display: block;
  margin-bottom: var(--wb-space-1);
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-11);
  font-weight: var(--wb-fw-800);
  letter-spacing: var(--wb-tracking-wide);
  text-transform: uppercase;
}
.guide-step h3 { font-size: var(--wb-fs-18); font-weight: var(--wb-fw-850); }
.guide-step p { font-size: var(--wb-fs-13); color: var(--wb-text-secondary); }
.guide-step .actions { margin-top: var(--wb-space-3); }

.write-result .ok-line, .write-result p { margin: var(--wb-space-3) 0 0; }
.next-step { color: var(--wb-warning); font-weight: var(--wb-fw-700); }
.protocol-notice { margin-top: var(--wb-space-4); }

.site-footer {
  max-width: var(--wb-panel-max-width);
  margin: 0 auto var(--wb-space-10);
  padding: var(--wb-space-2) var(--wb-space-2) 0;
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-12);
}

.site-footer-icp { margin-top: var(--wb-space-2); text-align: center; }
.site-footer-icp a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 目录（V2）面板 ---------- */
.catalog-upgrade {
  margin: var(--wb-space-4) 0;
  padding: var(--wb-space-5);
  border: 1px solid var(--wb-pill-warn-border);
  border-radius: var(--wb-radius-button);
  background: var(--wb-pill-warn-bg);
}
.catalog-tree { display: grid; gap: var(--wb-space-2); }
.catalog-row { padding: var(--wb-space-2) 0; border-bottom: 1px dashed var(--wb-border); }
.catalog-row > .toolbar-inline { align-items: center; gap: var(--wb-space-3); }
.catalog-row select { max-width: 260px; }
.catalog-styles { display: grid; gap: var(--wb-space-2); margin: var(--wb-space-3) 0 0; padding-left: var(--wb-space-9); list-style: none; }
.catalog-styles li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wb-space-3); }
.catalog-problems { display: grid; gap: var(--wb-space-3); margin: var(--wb-space-3) 0 0; padding: 0; list-style: none; }
.catalog-problem {
  display: grid;
  gap: var(--wb-space-2);
  padding: var(--wb-space-5);
  border: 1px solid var(--wb-pill-warn-border);
  border-left: 4px solid var(--wb-pill-warn-ink);
  border-radius: var(--wb-radius-button);
  background: var(--wb-pill-warn-bg);
}
.catalog-problem-head { display: flex; flex-wrap: wrap; gap: var(--wb-space-3); align-items: baseline; }
.catalog-problem p { margin: 0; }
.catalog-problem select { max-width: 320px; }
.inline-form { display: grid; gap: var(--wb-space-2); margin-top: var(--wb-space-2); }
.inline-form .toolbar-inline { padding-top: var(--wb-space-2); border-top: 1px dashed var(--wb-border); }

/* ============================================================
 * 13. 产品知识工作台（对齐 5177 的卡片形态）
 *     左侧产品结构树 + 右侧款式卡片（卡头入口 + 卡体内联素材框）
 *     只用既有令牌；颜色/字号/间距全部取自 tokens.css
 * ============================================================ */

.pk-workbench {
  position: relative;
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: var(--wb-space-6);
  margin-top: var(--wb-space-5);
  align-items: start;
}
/* 左树右侧的拖拽调宽把手（5177 的左树可以拖宽；把手贴在树面板右边缘） */
.pk-tree-resizer {
  position: absolute;
  top: var(--wb-space-2);
  bottom: var(--wb-space-2);
  right: calc(-1 * var(--wb-space-3));
  width: var(--wb-space-3);
  cursor: col-resize;
  border-radius: var(--wb-radius-pill);
  background: transparent;
  touch-action: none;
}
.pk-tree-resizer:hover,
.pk-tree-resizer:focus-visible { background: var(--wb-accent-soft); outline: none; }
.pk-tree {
  position: relative;
  display: grid;
  gap: var(--wb-space-3);
  padding: var(--wb-space-4);
  background: var(--wb-panel-bg-soft);
  border: 1px solid var(--wb-panel-border);
  border-radius: var(--wb-radius-panel);
  align-content: start;
}
.pk-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--wb-space-2); }
.pk-tree-scroll {
  max-height: 62vh;
  overflow: auto;
  padding-right: var(--wb-space-1);
  scrollbar-width: thin;
  scrollbar-color: var(--wb-scroll-thumb) var(--wb-scroll-track);
}
.pk-tree-scroll::-webkit-scrollbar { width: var(--wb-scroll-size); }
.pk-tree-scroll::-webkit-scrollbar-track { background: var(--wb-scroll-track); }
.pk-tree-scroll::-webkit-scrollbar-thumb { background: var(--wb-scroll-thumb); }
.pk-tree-branch { display: block; }
.pk-tree-row {
  display: flex;
  align-items: center;
  gap: var(--wb-space-1);
  position: relative;
  border-radius: var(--wb-radius-control);
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
}
.pk-tree-row:hover { background: var(--wb-btn-hover-bg); }
.pk-tree-row.is-active { background: var(--wb-sidebar-item-active-bg); border-color: var(--wb-sidebar-item-active-border); }
.pk-tree-row.is-example .pk-tree-label { color: var(--wb-text-secondary); }
.pk-tree-row.is-drop-before { border-top-color: var(--wb-accent); }
.pk-tree-row.is-drop-after { border-bottom-color: var(--wb-accent); }
.pk-tree-row.is-drop-inside { background: var(--wb-accent-soft); box-shadow: inset 0 0 0 1px var(--wb-accent); }
.pk-tree-toggle { min-width: var(--wb-control-height-sm); padding: 0 var(--wb-space-1); color: var(--wb-text-secondary); }
.pk-tree-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  padding: var(--wb-space-1) var(--wb-space-2);
  background: none;
  border: 0;
  border-radius: var(--wb-radius-control);
  color: var(--wb-text-primary);
  font: inherit;
  cursor: pointer;
}
.pk-tree-label:hover { color: var(--wb-link); }
.pk-tree-row.is-active .pk-tree-label { font-weight: var(--wb-fw-700); color: var(--wb-sidebar-item-ink-active); }
.pk-tree-actions { display: none; align-items: center; gap: var(--wb-space-1); }
.pk-tree-row:hover .pk-tree-actions,
.pk-tree-row:focus-within .pk-tree-actions { display: flex; }
.pk-tree-grip { color: var(--wb-text-disabled); cursor: grab; user-select: none; }
.pk-search-results { list-style: none; margin: 0; padding: var(--wb-space-2) 0 0; display: grid; gap: var(--wb-space-1); }
.pk-search-item {
  width: 100%;
  text-align: left;
  padding: var(--wb-space-2);
  background: var(--wb-surface);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-control);
  color: var(--wb-text-primary);
  font: inherit;
  cursor: pointer;
}
.pk-search-item:hover { border-color: var(--wb-btn-hover-border); background: var(--wb-btn-hover-bg); }
.pk-search-item mark { background: var(--wb-tag-warn-bg); color: var(--wb-tag-warn-ink); border-radius: var(--wb-radius-check); padding: 0 2px; }
.pk-search-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--wb-space-2); padding-top: var(--wb-space-2); }
.pk-tree-extras { display: grid; gap: var(--wb-space-2); padding-top: var(--wb-space-3); border-top: 1px dashed var(--wb-border); }
.pk-extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wb-space-2);
  padding: var(--wb-space-2) var(--wb-space-3);
  background: var(--wb-surface);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-control);
  color: var(--wb-text-primary);
  font: inherit;
  cursor: pointer;
}
.pk-extra:hover { background: var(--wb-btn-hover-bg); border-color: var(--wb-btn-hover-border); }
.pk-extra.is-active { border-color: var(--wb-sidebar-item-active-border); background: var(--wb-sidebar-item-active-bg); font-weight: var(--wb-fw-700); }

/* ---- 右侧：类目头 + 卡片列表 ---- */
.pk-detail { display: grid; gap: var(--wb-space-5); min-width: 0; }
.pk-detail-head { display: grid; gap: var(--wb-space-2); padding-bottom: var(--wb-space-3); border-bottom: 1px solid var(--wb-heading-divider); }
.pk-detail-head .subhead, .pk-detail-head h3 { margin: 0; }
.pk-card-list { display: grid; gap: var(--wb-space-4); }
.pk-card {
  display: grid;
  gap: var(--wb-space-3);
  padding: var(--wb-space-4);
  background: var(--wb-surface);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-panel);
}
.pk-card.is-example { border-style: dashed; background: var(--wb-panel-bg-soft); }
.pk-card.is-compact { padding: var(--wb-space-3) var(--wb-space-4); }
/* 卡片拖拽排序：可拖的卡片显示抓手光标，拖动时给出落点提示 */
.pk-card[draggable="true"] { cursor: grab; }
.pk-card[draggable="true"]:active { cursor: grabbing; }
.pk-card.is-drop-before { border-top: 3px solid var(--wb-accent); }
.pk-card.is-drop-after { border-bottom: 3px solid var(--wb-accent); }
.pk-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--wb-space-4);
  align-items: start;
}
.pk-card-cover {
  position: relative;
  width: 76px;
  height: 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--wb-fill-soft);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-control);
  cursor: pointer;
  padding: 0;
}
.pk-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.pk-card-cover-placeholder { color: var(--wb-text-secondary); font-size: var(--wb-fs-12); }
.pk-card-chevron { position: absolute; right: 2px; bottom: 0; color: var(--wb-text-secondary); font-size: var(--wb-fs-12); }
.pk-card-title-block { display: grid; gap: 2px; min-width: 0; }
.pk-card-name { max-width: 340px; font-weight: var(--wb-fw-700); }
.pk-card-note {
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  color: var(--wb-text-secondary);
  font: inherit;
  font-size: var(--wb-fs-12);
  cursor: text;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pk-card-note:hover { color: var(--wb-link); }
.pk-card-entries { display: flex; flex-wrap: wrap; gap: var(--wb-space-2); align-items: center; }
.pk-entry {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-space-2);
  padding: var(--wb-space-1) var(--wb-space-3);
  background: var(--wb-btn-bg);
  border: 1px solid var(--wb-btn-border);
  border-radius: var(--wb-radius-pill);
  color: var(--wb-btn-ink);
  font: inherit;
  font-size: var(--wb-fs-13);
  cursor: pointer;
}
.pk-entry:hover { background: var(--wb-btn-hover-bg); color: var(--wb-btn-hover-ink); border-color: var(--wb-btn-hover-border); }
.pk-entry.is-active { background: var(--wb-accent-soft); border-color: var(--wb-accent); color: var(--wb-accent-ink); font-weight: var(--wb-fw-700); }
.pk-entry-dot { width: 6px; height: 6px; border-radius: var(--wb-radius-pill); background: var(--wb-border-strong); }
.pk-entry-dot.is-on { background: var(--wb-success); }
.pk-card-commands { justify-content: flex-end; }
.pk-card-example-note { margin: 0; }

/* ---- 卡体：素材框 ---- */
.pk-material-box {
  display: grid;
  gap: var(--wb-space-3);
  padding-top: var(--wb-space-3);
  border-top: 1px dashed var(--wb-border);
}
.pk-material-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wb-space-3); }
.pk-selection { padding: var(--wb-space-1) var(--wb-space-2); background: var(--wb-accent-soft); border-radius: var(--wb-radius-control); }
.pk-group {
  display: grid;
  gap: var(--wb-space-3);
  padding: var(--wb-space-3) var(--wb-space-4);
  background: var(--wb-panel-bg-soft);
  border: 1px solid var(--wb-panel-border);
  border-radius: var(--wb-radius-control);
}
.pk-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wb-space-3); }
.pk-group-toggle {
  background: none;
  border: 0;
  padding: 0;
  color: var(--wb-text-primary);
  font: inherit;
  font-weight: var(--wb-fw-700);
  cursor: pointer;
}
.pk-group-toggle:hover { color: var(--wb-link); }
.pk-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--wb-space-3);
}
.pk-tile {
  position: relative;
  display: grid;
  gap: var(--wb-space-1);
  margin: 0;
  padding: var(--wb-space-2);
  background: var(--wb-surface);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-control);
}
.pk-tile:hover { border-color: var(--wb-border-strong); }
.pk-tile.is-selected { border-color: var(--wb-accent); background: var(--wb-accent-soft); }
.pk-tile.is-main { box-shadow: inset 0 0 0 1px var(--wb-success); }
.pk-tile-pick { position: absolute; top: var(--wb-space-2); left: var(--wb-space-2); z-index: 1; accent-color: var(--wb-accent); }
.pk-tile-preview {
  display: grid;
  place-items: center;
  gap: 2px;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  background: var(--wb-fill-soft);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-check);
  color: var(--wb-text-secondary);
  cursor: pointer;
}
.pk-tile-preview:hover { border-color: var(--wb-btn-hover-border); }
.pk-tile-img { width: 100%; height: 100%; object-fit: cover; }
.pk-tile-icon { font-size: var(--wb-fs-18); color: var(--wb-text-secondary); }
.pk-tile-kind { font-size: var(--wb-fs-11); letter-spacing: var(--wb-tracking-wide); color: var(--wb-text-secondary); }
.pk-tile-placeholder { font-size: var(--wb-fs-12); color: var(--wb-text-secondary); }
.pk-tile-caption { display: grid; gap: 2px; }
.pk-tile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--wb-fs-12); }
.pk-tile-actions { display: flex; flex-wrap: wrap; gap: var(--wb-space-1); }
.pk-tile-actions .btn { padding: 0 var(--wb-space-2); }
.pk-tile-main { position: absolute; top: var(--wb-space-2); right: var(--wb-space-2); }
.pk-drop-sm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wb-space-2); justify-items: start; padding: var(--wb-space-2) var(--wb-space-3); }
.pk-drop-sm p { margin: 0; }
.pk-talks-wrap { display: grid; gap: var(--wb-space-2); }
.pk-talks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wb-space-2); }
.pk-talk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--wb-space-3);
  align-items: start;
  padding: var(--wb-space-2) var(--wb-space-3);
  background: var(--wb-surface);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-control);
}
.pk-talk-text { margin: 0; white-space: pre-wrap; word-break: break-word; }
.pk-talk-add { display: grid; gap: var(--wb-space-2); }
.pk-talk-add textarea { min-height: var(--wb-textarea-min-68); }
.pk-script-library-wrap {
  display: grid;
  gap: var(--wb-space-2);
  padding: var(--wb-space-3) var(--wb-space-4);
  background: var(--wb-surface);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-control);
}
.pk-block-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wb-space-3); }
.pk-block-head h4 { margin: 0; font-size: var(--wb-fs-15); }
.pk-script-library { min-height: var(--wb-textarea-min-120); }
.pk-preview { display: grid; gap: var(--wb-space-3); max-width: min(860px, 90vw); }
.pk-preview-media { max-width: 100%; max-height: 70vh; background: var(--wb-fill-soft); border-radius: var(--wb-radius-control); }
.pk-preview h3 { margin: 0; word-break: break-all; }
.pk-unavailable { display: grid; gap: var(--wb-space-3); }

@media (max-width: 920px) {
  .pk-workbench { grid-template-columns: 1fr; }
  .pk-tree-scroll { max-height: none; }
  .pk-card-head { grid-template-columns: auto minmax(0, 1fr); }
  .pk-card-commands { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ============================================================
 * 14. 报价合同工作台（QC1–QC13）：单据编辑器、明细表、签章、管理弹窗
 *     只用既有令牌；颜色/字号/间距全部取自 tokens.css
 * ============================================================ */

.qk-block {
  display: grid;
  gap: var(--wb-space-4);
  padding: var(--wb-space-4);
  margin-top: var(--wb-space-5);
  background: var(--wb-panel-bg-soft);
  border: 1px solid var(--wb-panel-border);
  border-radius: var(--wb-radius-panel);
}
.qk-block-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wb-space-3); }
.qk-block-head h3, .qk-block-head h4 { margin: 0; }
.qk-block-head h4 { color: var(--wb-text-primary); font-size: var(--wb-fs-15); }
.qk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wb-space-4); }
.qk-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qk-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wb-space-5); }
.qk-party {
  display: grid;
  gap: var(--wb-space-3);
  padding: var(--wb-space-4);
  background: var(--wb-surface);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-control);
}
.qk-lines { margin: 0; }
.qk-lines caption { text-align: left; padding: var(--wb-space-3) 0 0; }
.qk-lines .wb-cell-input { width: 100%; }
.qk-lines td .heading-actions { justify-content: flex-start; }

/* ============================================================
 * 报价工作台：与 5177 对应板块对齐的三块结构
 *   .qk-command-row        ← 5177 .invoice-quote-command-row（命令带）
 *   .qk-workarea-inner     ← 5177 .invoice-product-workarea-inner（左表 + 右利润侧栏）
 *   .qk-lines              ← 5177 .invoice-product-table.quote-style-table（密集表格）
 *   .qk-recent-card        ← 5177 .invoice-recent-card（最近报价卡片）
 * 颜色一律走设计令牌（基准 §1），不引入旧项目的黑框与 zoom 补偿。
 * ============================================================ */

.qk-command-row {
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wb-space-3);
  margin-bottom: var(--wb-space-3);
  padding: var(--wb-space-2) var(--wb-space-3);
  background: var(--wb-panel-bg-soft);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-control);
}
.qk-command-row .btn-sm, .qk-command-row button { min-height: var(--wb-control-height-sm); }

.qk-workarea-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: var(--wb-space-5);
  align-items: start;
}
.qk-main-pane { display: grid; gap: var(--wb-space-4); min-width: 0; }
.qk-lines-wrap { overflow-x: auto; border: 1px solid var(--wb-border-strong); border-radius: var(--wb-radius-control); }
.qk-lines { width: 100%; min-width: 720px; table-layout: fixed; border-collapse: collapse; }
.qk-lines th, .qk-lines td { padding: 4px 6px; border: 1px solid var(--wb-border); vertical-align: middle; }
.qk-lines thead th { background: var(--wb-fill-soft); font-size: var(--wb-fs-13); white-space: nowrap; }
.qk-lines th:nth-child(1), .qk-lines td:nth-child(1) { width: 42px; text-align: center; }
.qk-lines th:nth-child(2), .qk-lines td:nth-child(2) { width: auto; }
.qk-lines th:nth-child(3), .qk-lines td:nth-child(3) { width: 110px; }
.qk-lines th:nth-child(4), .qk-lines td:nth-child(4) { width: 90px; }
.qk-lines th:nth-child(5), .qk-lines td:nth-child(5) { width: 80px; }
.qk-lines th:nth-child(6), .qk-lines td:nth-child(6) { width: 90px; }
.qk-lines th:nth-child(7), .qk-lines td:nth-child(7) { width: 110px; }
.qk-lines th:nth-child(8), .qk-lines td:nth-child(8) { width: 130px; }
.qk-lines .wb-cell-input { padding: 4px 5px; min-height: var(--wb-control-height-sm); font-size: var(--wb-fs-13); }

/* 逐行利润侧栏（5177 .invoice-side-profit-panel） */
.qk-profit {
  display: grid;
  gap: var(--wb-space-3);
  min-width: 0;
  padding: var(--wb-space-4);
  background: var(--wb-surface);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-control);
}
.qk-profit-head { display: flex; align-items: center; justify-content: space-between; gap: var(--wb-space-3); }
.qk-profit-head h4 { margin: 0; font-size: var(--wb-fs-14); }
.qk-profit-lines { display: grid; gap: var(--wb-space-2); max-height: 320px; overflow: auto; }
.qk-profit-line { display: grid; grid-template-columns: 34px minmax(0, 1fr) 92px minmax(0, 1fr); align-items: center; gap: var(--wb-space-2); }
.qk-profit-line-profit { text-align: right; color: var(--wb-text-secondary); font-size: var(--wb-fs-12); font-variant-numeric: tabular-nums; }
.qk-profit-index { color: var(--wb-text-secondary); font-size: var(--wb-fs-12); }
.qk-profit-amount { text-align: right; font-size: var(--wb-fs-12); font-variant-numeric: tabular-nums; }
.qk-profit-line .input, .qk-profit-other .input { min-height: var(--wb-control-height-sm); font-size: var(--wb-fs-13); }
.qk-profit-summary { display: grid; gap: var(--wb-space-2); margin: 0; padding-top: var(--wb-space-3); border-top: 1px solid var(--wb-border); }
.qk-profit-summary > div { display: flex; justify-content: space-between; gap: var(--wb-space-3); }
.qk-profit-summary dt { color: var(--wb-text-secondary); font-size: var(--wb-fs-13); }
.qk-profit-summary dd { margin: 0; font-size: var(--wb-fs-13); font-variant-numeric: tabular-nums; }
.qk-profit-summary dd.qk-profit-pending { color: var(--wb-text-secondary); }
.qk-profit-other { margin: 0; }
.qk-profit .qk-profit-pending + .muted, .qk-profit p.muted { margin: 0; }

/* 最近单据卡片（5177 .invoice-recent-list / .invoice-recent-card） */
.qk-recent-list { display: grid; gap: var(--wb-space-3); }
.qk-recent-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--wb-space-4);
  align-items: center;
  padding: var(--wb-space-4);
  background: var(--wb-surface);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-control);
}
.qk-recent-card.is-issued { border-left: 3px solid var(--wb-accent); }
.qk-recent-card:hover { border-color: var(--wb-accent); }
.qk-recent-summary { display: grid; gap: var(--wb-space-2); min-width: 0; }
.qk-recent-title { display: flex; align-items: center; gap: var(--wb-space-3); min-width: 0; }
.qk-recent-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qk-recent-summary p { margin: 0; overflow-wrap: anywhere; }
.qk-recent-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wb-space-2); }
.qk-fees { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wb-space-4); max-width: 520px; }
.qk-totals {
  display: grid;
  gap: var(--wb-space-2);
  margin-left: auto;
  width: min(380px, 100%);
  padding: var(--wb-space-3) var(--wb-space-4);
  background: var(--wb-surface);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-control);
}
.qk-totals > div { display: flex; justify-content: space-between; gap: var(--wb-space-4); }
.qk-total-row {
  border-top: 1px solid var(--wb-border-strong);
  margin-top: var(--wb-space-2);
  padding-top: var(--wb-space-2);
  font-weight: var(--wb-fw-700);
  font-size: var(--wb-fs-16);
  color: var(--wb-table-total-ink);
}
.qk-sign-sheet {
  position: relative;
  min-height: 160px;
  background: var(--wb-surface);
  border: 1px dashed var(--wb-border-strong);
  border-radius: var(--wb-radius-control);
}
.qk-sign-chip {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 72px;
  min-height: 40px;
  padding: var(--wb-space-1) var(--wb-space-2);
  background: var(--wb-accent-soft);
  border: 1px solid var(--wb-accent);
  border-radius: var(--wb-radius-control);
  color: var(--wb-accent-ink);
  font-size: var(--wb-fs-11);
  text-align: center;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.qk-sign-chip:active { cursor: grabbing; }
/* 签章（2026-10-01 起走小助手）：章图 + 信息行 + 右键菜单 */
.qk-sign-block { display: grid; gap: var(--wb-space-4); }
.qk-seal-figure {
  display: grid;
  gap: var(--wb-space-2);
  margin: 0;
  padding: var(--wb-space-4);
  width: min(320px, 100%);
  background: var(--wb-surface);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-control);
}
.qk-seal-figure figcaption {
  display: flex;
  align-items: center;
  gap: var(--wb-space-3);
  color: var(--wb-text-secondary);
  font-size: var(--wb-fs-12);
  overflow-wrap: anywhere;
}
.qk-seal-image {
  display: block;
  max-width: 100%;
  max-height: 160px;
  object-fit: contain;
}
.qk-seal-figure .qk-seal-image { cursor: context-menu; }
.qk-seal-menu {
  position: fixed;
  z-index: var(--wb-z-menu);
  display: grid;
  min-width: 180px;
  padding: var(--wb-space-1);
  background: var(--wb-menu-bg);
  border: 1px solid var(--wb-menu-border);
  border-radius: var(--wb-radius-control);
  box-shadow: var(--wb-shadow-menu);
  /* 反向补偿（2026-10-01 板块缩放）：签章右键菜单挂在设置页卡片（缩放区）里，
   * fixed 的尺寸与指针坐标都会被缩 0.70；照 5177 的除算（invoice.css:2697）。 */
  zoom: calc(1 / var(--workbench-section-scale, 1));
}
.qk-seal-menu .btn { justify-content: flex-start; }
.qk-footer-block { background: var(--wb-panel-bg); }
.qk-footer { flex-wrap: wrap; }
.qk-export-note { display: grid; gap: var(--wb-space-2); }
.qk-empty { display: grid; gap: var(--wb-space-3); }
.qk-manage { display: grid; gap: var(--wb-space-4); width: min(720px, 92vw); max-height: 80vh; overflow: auto; }
.pk-manage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wb-space-3); }
.pk-manage-row {
  display: grid;
  gap: var(--wb-space-2);
  padding: var(--wb-space-3);
  background: var(--wb-surface);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-control);
}
.pk-manage-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wb-space-3); }
.pk-manage-row textarea { min-height: var(--wb-textarea-min-68); }

@media (max-width: 920px) {
  .qk-grid, .qk-grid-2, .qk-parties, .qk-fees { grid-template-columns: 1fr; }
  .pk-manage-fields { grid-template-columns: 1fr; }
}

/* ============================================================
 * 12. 响应式（基准 §3.2：客户版自定断点，沿用旧值 920px）
 * ============================================================ */

@media (max-width: 920px) {
  .sidebar { position: static; width: auto; flex-direction: column; }
  .main { margin-left: 0; padding: var(--wb-space-8); }
  .section-heading { flex-direction: column; align-items: flex-start; gap: var(--wb-space-5); }
  .heading-actions { justify-content: flex-start; }
  .meta { grid-template-columns: 1fr; }
  .structure-list li, .kv-list li { grid-template-columns: 1fr; }
}

/* ==========================================================================
   2026-10-05 业务方要求：打开板块不留左右空白。
   照 5177 的整幅宽口径（01-todo.css:2042-2057：产品结构 / 报价库 / 单据生成器 /
   价目表工作台 / 财务 / 订单档案 / 垃圾篓等工作台板块
   `max-width: none; width: 100%; margin-left/right: 0`）。板块视图（产品知识 /
   价目表 / 报价合同 / 订单档案 / 垃圾篓）激活时卡片撑满；页头、横幅与页脚由
   main.js 挂的 `is-module-view` 同步撑满。
   2026-10-13：首页也并入全幅（业务方验收要求"内容撑满页面"）；设置 / 帮助保持 1120 居中。
   ========================================================================== */
main.is-module-view > .topbar,
main.is-module-view > .banner-area,
main.is-module-view > .site-footer {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

main.is-module-view > .view > .card {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ==========================================================================
   2026-10-13 业务方拍板：登录页（左右分栏「登录②」）+ 主页（一体化头图「主页③」）。
   登录门：未登录整屏登录页、登录后显示工作台外壳（main.js 按 body[data-auth] 切换）。
   本段样式全部走设计令牌（check:design 扫描）。
   ========================================================================== */
body[data-auth="out"] .sidebar,
body[data-auth="out"] .main { display: none; }
body[data-auth="in"] #loginScreen { display: none; }

#loginScreen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(340px, 44%) 1fr;
}
.login-aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--wb-space-7);
  padding: var(--wb-space-10);
  background: var(--wb-sidebar-bg);
  color: var(--wb-sidebar-ink);
}
.login-brand { padding: 0 0 var(--wb-space-2); }
.login-lead { margin: 0; font-size: var(--wb-fs-15); color: var(--wb-sidebar-item-ink-active); }
.login-points { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wb-space-6); }
.login-points li { display: flex; gap: var(--wb-space-4); font-size: var(--wb-fs-13); line-height: 1.6; color: var(--wb-sidebar-item-ink); }
.login-points li::before {
  content: '';
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: var(--wb-radius-pill);
  background: var(--wb-sidebar-item-active-border);
}
.login-points strong { color: var(--wb-sidebar-item-ink-active); }
.login-note { margin: 0; font-size: var(--wb-fs-12); color: var(--wb-sidebar-note-ink); }
.login-main { display: flex; align-items: center; justify-content: center; padding: var(--wb-space-10); }
.login-card {
  width: min(430px, 100%);
  padding: var(--wb-space-10);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-lg);
  background: var(--wb-panel-bg);
  box-shadow: var(--wb-shadow-panel);
}
.login-card-head { text-align: center; margin-bottom: var(--wb-space-5); }
.login-card-head h2 { margin: 0 0 var(--wb-space-1); font-size: var(--wb-fs-22); font-weight: var(--wb-fw-850); }
.login-card .actions .btn-primary { width: 100%; }

/* 一体化头图：账号 ｜ 会员时间 ｜ 本地保存地址 */
.head-grid { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; }
.head-seg {
  display: flex;
  flex-direction: column;
  gap: var(--wb-space-2);
  min-width: 0;
  padding: var(--wb-space-4) var(--wb-space-7);
}
.head-seg + .head-seg { border-left: 1px solid var(--wb-heading-divider); }
.head-seg-top { display: flex; align-items: center; justify-content: space-between; gap: var(--wb-space-4); }
.head-seg-label { margin: 0; color: var(--wb-text-secondary); font-size: var(--wb-fs-12); letter-spacing: .03em; }
.head-value {
  margin: 0;
  font-size: var(--wb-fs-20);
  font-weight: var(--wb-fw-850);
  color: var(--wb-text-primary);
  overflow-wrap: anywhere;
}
.head-foot { margin: var(--wb-space-4) 0 0; padding-top: var(--wb-space-4); border-top: 1px solid var(--wb-heading-divider); }
.head-foot + .head-foot { margin-top: var(--wb-space-2); padding-top: 0; border-top: 0; }
#homeHeadWorkspace .meta-line strong { font-size: var(--wb-fs-18); }

/* 开始工作：四个模块各一行 */
.home-module-rows { display: grid; }
.home-module-row {
  display: grid;
  /* 2026-10-13 业务方反馈：状态胶囊与「进入」放在每行最左侧（在图标与模块名之前），
     名称与说明跟在后面；四行的左侧动作列自然对齐。 */
  grid-template-columns: auto auto auto minmax(0, 1fr);
  gap: var(--wb-space-5);
  align-items: center;
  padding: var(--wb-space-4) var(--wb-space-2);
}
.home-module-row + .home-module-row { border-top: 1px solid var(--wb-heading-divider); }
.home-module-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--wb-radius-button);
  background: var(--wb-accent-soft);
  color: var(--wb-accent-ink);
}
.home-module-icon svg { width: 18px; height: 18px; }
.home-module-text { display: grid; gap: 2px; min-width: 0; }
.home-module-text strong { font-size: var(--wb-fs-15); }
.home-module-text span { font-size: var(--wb-fs-12); }

/* 公告 */
.ann-list { list-style: none; margin: 0; padding: 0; }
.ann-list li { display: flex; gap: var(--wb-space-5); padding: var(--wb-space-3) 0; border-top: 1px solid var(--wb-heading-divider); }
.ann-list li:first-child { border-top: 0; }
.ann-list .ann-date { flex: none; color: var(--wb-text-secondary); font-size: var(--wb-fs-12); font-variant-numeric: tabular-nums; }

@media (max-width: 920px) {
  #loginScreen { grid-template-columns: 1fr; }
  .login-aside { display: none; }
  .head-grid { grid-template-columns: 1fr; }
  .head-seg + .head-seg { border-left: 0; border-top: 1px solid var(--wb-heading-divider); }
  /* 窄屏：左侧动作簇与图标一行，名称与说明换到下一行铺满 */
  .home-module-row { grid-template-columns: auto auto auto; }
  .home-module-text { grid-column: 1 / -1; }
}