/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/tokens.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================================
 * 蜂鸟协同平台 · 统一色彩配置 (Unified Design Tokens)
 * ----------------------------------------------------------------------------
 * 单一事实来源：全平台颜色只在此定义，组件一律引用 var(--token)，禁止散落硬编码。
 *
 * 基调：azure 蓝 → 青（取自简道云风格经营看板参考图）。
 *   - 主色 azure  #2f6bd8  —— 关键动作、选中、链接
 *   - 次色 cyan   #22b8c6  —— 渐变收尾、"进行中"、辅助强调
 *   - 头条渐变 navy #14264a → blue #2f6bd8 → cyan #22b8c6（看板首屏品牌感）
 *   - 分类色（系统化使用，非随意装饰）：蓝/青/橙/绿/紫，对应 业务/交付/财务关注/达成/人事
 *
 * 设计原则（对齐 docs/UI_DESIGN_STRATEGY.md）：
 *   1. 浅色留白，azure 蓝为系统主色；分类色按固定语义使用，不乱用。
 *   2. 主色用于关键动作与重点状态；红=风险、绿=达成、橙=预警。
 *   3. 文本/前景一律取通过 AA 对比的深阶（*-600/700），亮阶仅作填充与描边。
 * ========================================================================== */

:root {
  /* ---- 主色 · azure 蓝梯度 (Brand) ------------------------------------- */
  --brand-50: #eef4ff;
  --brand-100: #dbe8ff;
  --brand-200: #bcd4fb;
  --brand-300: #8fb6f5;
  --brand-400: #5b90ec;
  --brand-500: #2f6bd8; /* 主色锚点 */
  --brand-600: #2356bb; /* 主操作色 · 白字对比 6.0:1 (AA) */
  --brand-700: #1d459a; /* hover / 深色文本 */
  --brand-800: #193a78;
  --brand-900: #14264a; /* 墨蓝 · 头条起始 */

  /* ---- 次色 · cyan 青梯度 (Cyan / 进行中) ------------------------------ */
  --cyan-100: #d3f1f5;
  --cyan-300: #7fd6df;
  --cyan-400: #34bccb;
  --cyan-500: #16a5b8; /* 青色文本/描边 */
  --cyan-600: #0f8497;

  /* ---- 分类色 (Category) · 按固定语义,用于 KPI 顶条 / 图标底 / 图表 ---- */
  --cat-blue: #2f6bd8; /* 业务 */
  --cat-cyan: #22b8c6; /* 交付 */
  --cat-amber: #f5953c; /* 财务关注 / 预警 */
  --cat-green: #43b06a; /* 达成 / 成功 */
  --cat-purple: #7c6cf0; /* 人事 / 其他 */

  /* ---- 强调色别名 (Accent = 琥珀,承担"预警/重点") ---------------------- */
  --accent-50: #fdf3e6;
  --accent-100: #fbe2c2;
  --accent-200: #f6d9b0;
  --accent-300: #f3b96e;
  --accent-400: #f5953c; /* 锚点 · 填充/指示 */
  --accent-500: #d97b22;
  --accent-600: #b5611a;
  --accent-700: #8a4a14; /* 正文级琥珀文本 (AA) */

  /* ---- 语义状态色 (Status) --------------------------------------------- */
  /* 成功 / 达成 */
  --c-success: #2f9e6b;
  --c-success-ink: #1f7a4f;
  --c-success-soft: #e6f6ee;
  --c-success-border: #b8e3cc;
  /* 预警 · 琥珀 */
  --c-warning: #e08a2c;
  --c-warning-ink: #9a5d12;
  --c-warning-soft: #fdf3e6;
  --c-warning-border: #f6d9b0;
  /* 风险 · 红 */
  --c-danger: #e0584a;
  --c-danger-ink: #b23a2e;
  --c-danger-soft: #fdece9;
  --c-danger-border: #f6c6c0;
  /* 信息 · azure 蓝 */
  --c-info: #2f6bd8;
  --c-info-ink: #1d459a;
  --c-info-soft: #eef4ff;
  --c-info-border: #bcd4fb;

  /* ---- 中性 / 表面 / 文本 (Neutral · Surface · Ink) -------------------- */
  --ink: #1d2a3a; /* 主文本 · 冷墨蓝 */
  --ink-2: #5a6b7e; /* 次文本 */
  --ink-3: #8a99a8; /* 辅助/占位文本 */
  --ink-inverse: #ffffff;

  --surface: #ffffff; /* 卡片/面板 */
  --surface-soft: #eef3fa; /* 柔和分区底 */
  --surface-sunk: #f3f6fb; /* 进度槽/下沉底 */
  --surface-page: #f3f6fb; /* 页面底色 */

  --hairline: #e2e9f2; /* 默认描边 */
  --hairline-strong: #cfd9e6; /* 强描边/分隔 */

  /* ---- 效果 (Effects) -------------------------------------------------- */
  --ring: 0 0 0 3px rgba(47, 107, 216, 0.22); /* 焦点环 */
  --ring-accent: 0 0 0 3px rgba(245, 149, 60, 0.3);
  --shadow-sm: 0 1px 2px rgba(20, 38, 74, 0.06), 0 2px 6px rgba(20, 38, 74, 0.05);
  --shadow-md: 0 8px 24px rgba(31, 69, 154, 0.1);
  --shadow-lg: 0 18px 44px rgba(20, 38, 74, 0.16);

  /* ---- 渐变 / 氛围 (Gradients) ----------------------------------------- */
  --grad-header: linear-gradient(100deg, #14264a 0%, #2f6bd8 52%, #22b8c6 100%);
  --grad-brand: linear-gradient(135deg, var(--brand-500), var(--cyan-400));
  --grad-brand-soft: linear-gradient(150deg, #ffffff, var(--brand-50));
  --grad-rail: linear-gradient(90deg, var(--brand-300), var(--brand-500), var(--cyan-400));
  --grad-page:
    radial-gradient(900px 420px at 0% -8%, rgba(47, 107, 216, 0.1), transparent 60%),
    radial-gradient(820px 420px at 100% -6%, rgba(34, 184, 198, 0.1), transparent 58%),
    var(--surface-page);

  /* ---- 圆角 (Radii) ---------------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- 间距标度 (Spacing scale) --------------------------------------- */
  /* gap / padding / margin 一律取此梯度，命名 = 像素值，禁止再散填裸 px。
   * 4 的倍数为主轴；6/10/14 作过渡档，便于存量样式无损迁移。 */
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;

  /* ---- 字号 / 行高标度 (Type scale) ----------------------------------- */
  /* 正文 14、次要 13、辅助 12、标注 11；标题 16/18/20/24/30。命名 = 像素值。 */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --lh-tight: 1.25;
  --lh-snug: 1.4;
  --lh-normal: 1.55;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- 层级 (Z-index) — 按语义层取值，禁止再写裸数字 ------------------- */
  --z-base: 0;
  --z-raised: 1; /* 卡片悬浮/选中抬升 */
  --z-sticky: 100; /* 粘性表头 / 工具条 */
  --z-dropdown: 1000; /* 下拉菜单 / 气泡 */
  --z-overlay: 1100; /* 抽屉/弹层遮罩 */
  --z-modal: 1200; /* 模态对话框 */
  --z-toast: 1300; /* 全局通知 */
  --z-tooltip: 1400; /* 提示气泡 · 最顶层 */

  /* ---- 动效 (Motion) — 时长与缓动统一,过渡一律取此 -------------------- */
  --dur-fast: 120ms; /* 悬停/小态变化 */
  --dur-base: 200ms; /* 默认过渡 */
  --dur-slow: 320ms; /* 抽屉/折叠等大位移 */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* 默认进出 */
  --ease-out: cubic-bezier(0, 0, 0.2, 1); /* 进入 */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* 退出 */

  /* ---- 断点 (Breakpoints) · 约定值,媒体查询不支持 var(),仅文档对齐 ----
   * 三档：紧凑 1280 / 平板 820 / 手机 560(对齐 ui-control-design skill)。
   * 现存 1180/1100/860/760 等为历史漂移,后续逐步归一到此三档。 */

  /* ===================================================================== */
  /* 兼容别名 (Legacy aliases) — 旧代码仍引用这些名字，重指向新色阶后，
   * 凡走 token 的存量样式自动换肤；全平台更新时逐步替换为上面的语义 token。 */
  /* ===================================================================== */
  --bg-page: var(--surface-page);
  --bg-card: var(--surface);
  --bg-soft: var(--surface-soft);
  --bg-panel: var(--surface);
  --bg-sider: #fbfcfe;
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --line: var(--hairline);
  --brand: var(--brand-500);
  --brand-2: var(--cyan-400);
  --brand-3: var(--cyan-300);
  --brand-dark: var(--brand-700);
  --shadow-soft: var(--shadow-md);
}

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/ui-system.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================================
 * FengNiao Workbench UI System
 * Source: /workbench derived rules + existing globals.css + minimal extensions.
 * This file is self-contained and can be imported after tokens.css.
 * ========================================================================== */

:root {
  /* Color aliases from existing tokens.css */
  --ui-color-white: #ffffff;
  --ui-color-brand-50: var(--brand-50, var(--brand-50));
  --ui-color-brand-100: var(--brand-100, var(--brand-100));
  --ui-color-brand-200: var(--brand-200, var(--brand-200));
  --ui-color-brand-300: var(--brand-300, var(--brand-300));
  --ui-color-brand-500: var(--brand-500, var(--brand-500));
  --ui-color-brand-600: var(--brand-600, var(--brand-600));
  --ui-color-brand-700: var(--brand-700, var(--brand-700));
  --ui-color-brand-900: var(--brand-900, var(--brand-900));
  --ui-color-cyan-100: var(--cyan-100, var(--cyan-100));
  --ui-color-cyan-400: var(--cyan-400, var(--cyan-400));
  --ui-color-cyan-600: var(--cyan-600, var(--cyan-600));
  --ui-color-category-blue: var(--cat-blue, var(--brand-500));
  --ui-color-category-cyan: var(--cat-cyan, var(--cat-cyan));
  --ui-color-category-amber: var(--cat-amber, var(--cat-amber));
  --ui-color-category-green: var(--cat-green, var(--cat-green));
  --ui-color-category-purple: var(--cat-purple, var(--cat-purple));
  --ui-color-success: var(--c-success, var(--c-success));
  --ui-color-success-ink: var(--c-success-ink, var(--c-success-ink));
  --ui-color-success-soft: var(--c-success-soft, var(--c-success-soft));
  --ui-color-success-border: var(--c-success-border, var(--c-success-border));
  --ui-color-warning: var(--c-warning, var(--c-warning));
  --ui-color-warning-ink: var(--c-warning-ink, var(--c-warning-ink));
  --ui-color-warning-soft: var(--c-warning-soft, var(--accent-50));
  --ui-color-warning-border: var(--c-warning-border, var(--accent-200));
  --ui-color-danger: var(--c-danger, var(--c-danger));
  --ui-color-danger-ink: var(--c-danger-ink, var(--c-danger-ink));
  --ui-color-danger-soft: var(--c-danger-soft, var(--c-danger-soft));
  --ui-color-danger-border: var(--c-danger-border, var(--c-danger-border));
  --ui-color-info: var(--c-info, var(--brand-500));
  --ui-color-info-ink: var(--c-info-ink, var(--brand-700));
  --ui-color-info-soft: var(--c-info-soft, var(--brand-50));
  --ui-color-info-border: var(--c-info-border, var(--brand-200));
  --ui-color-text: var(--ink, var(--ink));
  --ui-color-text-secondary: var(--ink-2, var(--ink-2));
  --ui-color-text-muted: var(--ink-3, var(--ink-3));
  --ui-color-text-inverse: var(--ink-inverse, #ffffff);
  --ui-color-surface: var(--surface, #ffffff);
  --ui-color-surface-soft: var(--surface-soft, var(--surface-soft));
  --ui-color-surface-sunk: var(--surface-sunk, #f3f6fb);
  --ui-color-page: var(--surface-page, #f3f6fb);
  --ui-color-page-flat: #f8fafc;
  --ui-color-table-head: #f8fafc;
  --ui-color-border: var(--hairline, var(--hairline));
  --ui-color-border-strong: var(--hairline-strong, var(--hairline-strong));
  --ui-color-backdrop: rgba(15, 23, 42, 0.42);
  --ui-color-topbar-bg: rgba(244, 247, 251, 0.9);
  --ui-color-popover-shadow: rgba(15, 23, 42, 0.16);
  --ui-color-button-primary-shadow: rgba(47, 107, 216, 0.26);
  --ui-color-hover-shadow: rgba(15, 23, 42, 0.08);
  --ui-color-hero-chip-bg: rgba(255, 255, 255, 0.16);
  --ui-color-hero-chip-border: rgba(255, 255, 255, 0.22);
  --ui-color-hero-button-bg: rgba(255, 255, 255, 0.1);
  --ui-color-hero-button-border: rgba(255, 255, 255, 0.5);
  --ui-color-hero-muted: rgba(255, 255, 255, 0.78);
  --ui-color-hero-text-soft: rgba(255, 255, 255, 0.85);
  --ui-color-hero-positive: #b9f0c6;
  --ui-color-hero-negative: #ffc9c1;
  --ui-color-purple-soft: #efeafd;
  --ui-color-muted-soft: #f1f5f9;

  /* Typography */
  --ui-font-family-base: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --ui-font-family-mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --ui-font-size-xs: 11px;
  --ui-font-size-sm: 12px;
  --ui-font-size-md: 13px;
  --ui-font-size-body: 14px;
  --ui-font-size-title: 15px;
  --ui-font-size-chart-title: 16px;
  --ui-font-size-hero: 21px;
  --ui-font-size-kpi: 23px;
  --ui-font-weight-normal: 400;
  --ui-font-weight-medium: 600;
  --ui-font-weight-bold: 700;
  --ui-font-weight-strong: 800;

  /* Spacing: global scale only; component-specific 11/13/15px remain local. */
  --ui-space-2: 2px;
  --ui-space-4: 4px;
  --ui-space-6: 6px;
  --ui-space-8: 8px;
  --ui-space-10: 10px;
  --ui-space-12: 12px;
  --ui-space-14: 14px;
  --ui-space-16: 16px;
  --ui-space-18: 18px;
  --ui-space-20: 20px;
  --ui-space-24: 24px;
  --ui-space-32: 32px;

  /* Shape and effects */
  --ui-radius-sm: var(--radius-sm, 8px);
  --ui-radius-md: var(--radius-md, 12px);
  --ui-radius-lg: var(--radius-lg, 16px);
  --ui-radius-pill: var(--radius-pill, 999px);
  --ui-shadow-sm: var(--shadow-sm, 0 1px 2px rgba(20, 38, 74, 0.06), 0 2px 6px rgba(20, 38, 74, 0.05));
  --ui-shadow-md: var(--shadow-md, 0 8px 24px rgba(31, 69, 154, 0.1));
  --ui-shadow-lg: var(--shadow-lg, 0 18px 44px rgba(20, 38, 74, 0.16));
  --ui-focus-ring: var(--ring, 0 0 0 3px rgba(47, 107, 216, 0.22));
  --ui-grad-header: var(--grad-header, linear-gradient(100deg, var(--brand-900) 0%, var(--brand-500) 52%, var(--cat-cyan) 100%));
  --ui-border-default: 1px solid var(--ui-color-border);
  --ui-border-strong: 1px solid var(--ui-color-border-strong);
  --ui-border-brand: 1px solid var(--ui-color-brand-200);
  --ui-z-topbar: 120;
  --ui-z-topbar-menu: 130;
  --ui-z-popover: 220;
  --ui-z-profile-popover: 240;
  --ui-z-modal: 500;
  --ui-transition-fast: 0.15s ease;
  --ui-transition-base: 0.18s ease;
  --ui-transition-layout: 0.2s ease;
}

.ui-app-shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  overflow: hidden;
  transition: grid-template-columns var(--ui-transition-layout);
}

.ui-app-shell.is-sidebar-collapsed {
  grid-template-columns: 72px minmax(0, 1fr);
}

.ui-content {
  width: 100%;
  min-width: 0;
  height: 100vh;
  padding: var(--ui-space-24) var(--ui-space-32);
  overflow: auto;
  background: var(--ui-color-page-flat);
  color: var(--ui-color-text);
  font-family: var(--ui-font-family-base);
}

.ui-sidebar {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: var(--ui-border-default);
  background: var(--ui-color-white);
  color: var(--ui-color-text-secondary);
}

.ui-sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--ui-space-10);
  border-bottom: var(--ui-border-default);
  padding: var(--ui-space-8) 7px var(--ui-space-12);
}

.ui-nav-item {
  display: flex;
  align-items: center;
  gap: var(--ui-space-10);
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm);
  padding: var(--ui-space-8) 9px;
  color: var(--ui-color-text-secondary);
  text-decoration: none;
  transition: background var(--ui-transition-fast), border-color var(--ui-transition-fast), color var(--ui-transition-fast);
}

.ui-nav-item:hover {
  border-color: var(--ui-color-brand-200);
  background: var(--ui-color-brand-50);
  color: var(--ui-color-brand-700);
}

.ui-nav-item.is-active,
.ui-nav-item[aria-current="page"] {
  background: var(--ui-color-brand-500);
  color: var(--ui-color-white);
  font-weight: var(--ui-font-weight-bold);
}

.ui-topbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: var(--ui-z-topbar);
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: var(--ui-space-10);
  border-bottom: var(--ui-border-default);
  background: var(--ui-color-topbar-bg);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  padding: 0 var(--ui-space-16);
}

.ui-topbar-icon-button {
  position: relative;
  width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--ui-border-brand);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-color-white);
  color: var(--ui-color-text-secondary);
  transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast), transform var(--ui-transition-fast);
}

.ui-topbar-icon-button:hover {
  border-color: var(--ui-color-brand-300);
  box-shadow: 0 8px 16px var(--ui-color-hover-shadow);
  transform: translateY(-1px);
}

.ui-section-title {
  margin: var(--ui-space-16) 0 var(--ui-space-8);
  display: flex;
  align-items: center;
  gap: var(--ui-space-8);
  color: var(--ui-color-text-secondary);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-bold);
  letter-spacing: 0;
}

.ui-section-title::before {
  content: "";
  width: 3px;
  height: 13px;
  border-radius: 2px;
  background: var(--ui-color-brand-500);
}

.ui-section-title span,
.ui-section-title small {
  color: var(--ui-color-text-muted);
  font-size: inherit;
  font-weight: var(--ui-font-weight-medium);
  letter-spacing: 0;
}

.ui-workbench-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-24);
  margin-bottom: var(--ui-space-4);
  padding: var(--ui-space-18) var(--ui-space-24);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-grad-header);
  color: var(--ui-color-text-inverse);
  box-shadow: var(--ui-shadow-md);
}

.ui-workbench-hero::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -90px;
  width: 320px;
  height: 320px;
  border-radius: var(--ui-radius-pill);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 70%);
  pointer-events: none;
}

.ui-workbench-hero__main {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.ui-workbench-hero__title {
  margin: 0;
  color: var(--ui-color-text-inverse);
  font-size: var(--ui-font-size-hero);
  line-height: 1.2;
  letter-spacing: 0;
}

.ui-workbench-hero__date {
  color: var(--ui-color-hero-muted);
  font-size: var(--ui-font-size-md);
}

.ui-workbench-hero__metrics {
  margin-top: 11px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-8);
}

.ui-workbench-hero__metric {
  display: inline-flex;
  align-items: center;
  gap: var(--ui-space-6);
  border: 1px solid var(--ui-color-hero-chip-border);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-color-hero-chip-bg);
  color: var(--ui-color-white);
  padding: var(--ui-space-4) var(--ui-space-12);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-medium);
  font-style: normal;
}

.ui-workbench-hero__metric strong,
.ui-workbench-hero__metric b {
  color: var(--ui-color-hero-positive);
  font-weight: var(--ui-font-weight-strong);
}

.ui-workbench-hero__metric.is-negative strong,
.ui-workbench-hero__metric.is-negative b,
.ui-workbench-hero__metric strong.is-negative,
.ui-workbench-hero__metric b.is-negative {
  color: var(--ui-color-hero-negative);
}

.ui-workbench-hero__actions {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ui-space-12);
}

.ui-segmented {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-color-hero-chip-bg);
  padding: 3px;
  white-space: nowrap;
}

.ui-segmented__item {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: transparent;
  color: var(--ui-color-hero-text-soft);
  padding: 5px var(--ui-space-14);
  font: inherit;
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-bold);
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--ui-transition-fast), color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);
}

.ui-segmented__item:hover {
  color: var(--ui-color-white);
}

.ui-segmented__item.is-active,
.ui-segmented__item.on,
.ui-segmented__item[aria-selected="true"] {
  background: var(--ui-color-white);
  color: var(--ui-color-brand-700);
}

.ui-segmented__item:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus-ring);
}

/* StatChip —— 全站统一「概览/筛选」统计卡（复刻报价列表 .quotation-list-status-chip）。
   行容器 .ui-stat-chip-row 自适应网格；卡片 .ui-stat-chip（button 时可点筛选 + is-active 高亮）。
   替代各页自造的 .hrw-lane-card / .organization-governance-card / .settings-metric 等。 */
.ui-stat-chip-row {
  display: grid;
  /* 132px 下限(与 .quotation-task-lanes 一致)：让 7 张概览/KPI 卡(如报表中心经营总览)在桌面端
   * 自适应排进一行，避免第 7 张被挤到第二行单独成行；卡少时仍 1fr 铺满整行。 */
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.ui-stat-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 11px 12px 10px;
  border: 1px solid var(--ui-color-border, var(--hairline));
  border-left: 4px solid var(--chip-tone, var(--ui-color-info-ink, var(--brand-500)));
  border-radius: var(--ui-radius-sm, 8px);
  background: var(--ui-color-surface, #fff);
  box-shadow: var(--ui-shadow-sm, 0 1px 2px rgba(16, 40, 80, 0.06));
  text-align: left;
  font: inherit;
}

button.ui-stat-chip,
a.ui-stat-chip {
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

a.ui-stat-chip {
  text-decoration: none;
  color: inherit;
}

button.ui-stat-chip:hover,
a.ui-stat-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--ui-shadow-md, 0 8px 24px rgba(31, 69, 154, 0.1));
}

.ui-stat-chip.is-active {
  box-shadow: inset 0 0 0 1px var(--chip-tone, var(--brand-500)), var(--ui-shadow-sm, 0 1px 2px rgba(16, 40, 80, 0.06));
}

.ui-stat-chip > span {
  font-size: 12px;
  color: var(--ui-color-text-secondary, #51607a);
}

.ui-stat-chip > strong {
  font-size: 22px;
  font-weight: 720;
  line-height: 1.1;
  color: var(--ui-color-text, var(--ink));
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.ui-stat-chip > small {
  font-size: 11px;
  color: var(--ui-color-text-tertiary, var(--ink-3));
}

.ui-stat-chip.tone-info {
  --chip-tone: var(--ui-color-info-ink, var(--brand-500));
}
.ui-stat-chip.tone-success {
  --chip-tone: var(--ui-color-success-ink, #1f9d6b);
}
.ui-stat-chip.tone-warning {
  --chip-tone: var(--ui-color-warning-ink, #c98a16);
}
.ui-stat-chip.tone-danger {
  --chip-tone: var(--ui-color-danger-ink, #d04a3b);
}
.ui-stat-chip.tone-brand {
  --chip-tone: var(--ui-color-brand-500, var(--brand-500));
}
.ui-stat-chip.tone-muted {
  --chip-tone: var(--ui-color-text-tertiary, var(--ink-3));
}

/* StatChip 富内容：标签旁状态(status) + 描述下额外块(detail，如 状态/责任人 dl)。 */
.ui-stat-chip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.ui-stat-chip-head > span {
  font-size: 12px;
  color: var(--ui-color-text-secondary, #51607a);
}
.ui-stat-chip-head > em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--chip-tone, var(--ui-color-text-secondary, #51607a));
  white-space: nowrap;
}
.ui-stat-chip-detail {
  width: 100%;
  font-size: 11px;
  color: var(--ui-color-text-tertiary, var(--ink-3));
}
.ui-stat-chip-detail dl {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 2px 8px;
  gap: 2px 8px;
  margin: 4px 0 0;
}
.ui-stat-chip-detail dt {
  color: var(--ui-color-text-tertiary, var(--ink-3));
}
.ui-stat-chip-detail dd {
  margin: 0;
  color: var(--ui-color-text-secondary, #51607a);
}

.ui-button {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-6);
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-color-white);
  color: var(--ui-color-text);
  padding: 0 var(--ui-space-12);
  font: inherit;
  font-size: var(--ui-font-size-body);
  font-weight: var(--ui-font-weight-medium);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--ui-transition-fast), border-color var(--ui-transition-fast), color var(--ui-transition-fast), box-shadow var(--ui-transition-fast), transform var(--ui-transition-fast);
}

.ui-button svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-button--primary {
  background: var(--ui-color-brand-600);
  color: var(--ui-color-white);
  box-shadow: 0 8px 18px var(--ui-color-button-primary-shadow);
}

.ui-button--primary:hover {
  background: var(--ui-color-brand-700);
}

.ui-button--secondary {
  border-color: var(--ui-color-border-strong);
  background: var(--ui-color-surface-soft);
  color: var(--ui-color-text);
}

.ui-button--secondary:hover {
  border-color: var(--ui-color-brand-200);
  background: var(--ui-color-brand-50);
  color: var(--ui-color-brand-700);
}

.ui-button--ghost {
  border-color: var(--ui-color-brand-200);
  background: var(--ui-color-white);
  color: var(--ui-color-brand-700);
}

.ui-button--ghost:hover {
  border-color: var(--ui-color-brand-300);
  background: var(--ui-color-brand-50);
}

.ui-button--text {
  min-height: auto;
  border-color: transparent;
  background: transparent;
  color: var(--ui-color-brand-700);
  padding: 0;
  box-shadow: none;
}

.ui-button--text:hover {
  color: var(--ui-color-brand-600);
  text-decoration: none;
}

.ui-button--danger {
  background: var(--ui-color-danger);
  color: var(--ui-color-white);
  box-shadow: 0 8px 18px rgba(224, 88, 74, 0.22);
}

.ui-button--danger:hover {
  background: var(--ui-color-danger-ink);
}

.ui-button--inverse {
  height: 34px;
  min-height: 34px;
  border-color: var(--ui-color-hero-button-border);
  background: var(--ui-color-hero-button-bg);
  color: var(--ui-color-white);
  padding: 0 var(--ui-space-14);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-bold);
}

.ui-button--inverse:hover {
  background: var(--ui-color-hero-chip-bg);
  border-color: var(--ui-color-white);
}

.ui-button--icon {
  width: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: var(--ui-radius-pill);
}

.ui-button--sm {
  min-height: 28px;
  padding: 0 var(--ui-space-10);
  font-size: var(--ui-font-size-sm);
}

.ui-button--md {
  min-height: 36px;
  padding: 0 var(--ui-space-12);
  font-size: var(--ui-font-size-body);
}

.ui-button--lg {
  min-height: 44px;
  padding: 0 var(--ui-space-16);
  font-size: var(--ui-font-size-body);
}

.ui-button:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus-ring);
}

.ui-button:disabled,
.ui-button.is-disabled,
.ui-button.is-loading {
  cursor: not-allowed;
  opacity: 0.56;
  transform: none;
}

.ui-button.is-loading::after {
  content: "";
  width: 0.7em;
  height: 0.7em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--ui-radius-pill);
  animation: ui-spin 0.8s linear infinite;
}

.ui-link {
  color: var(--ui-color-brand-700);
  font-weight: var(--ui-font-weight-bold);
  text-decoration: none;
}

.ui-link:hover {
  color: var(--ui-color-brand-600);
}

.ui-quick-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-gap: var(--ui-space-10);
  gap: var(--ui-space-10);
}

.ui-quick-card {
  position: relative;
  display: grid;
  justify-items: center;
  grid-gap: var(--ui-space-8);
  gap: var(--ui-space-8);
  border: var(--ui-border-default);
  border-radius: var(--ui-radius-md);
  background: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-sm);
  color: var(--ui-color-text);
  padding: var(--ui-space-12) var(--ui-space-8);
  text-decoration: none;
  transition: transform var(--ui-transition-base), box-shadow var(--ui-transition-base), border-color var(--ui-transition-base);
}

.ui-quick-card:hover {
  transform: translateY(-2px);
  border-color: var(--ui-color-brand-200);
  box-shadow: var(--ui-shadow-md);
}

.ui-quick-card__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--ui-color-info-soft);
  color: var(--ui-color-category-blue);
}

.ui-quick-card__icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-quick-card__label {
  color: var(--ui-color-text);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-medium);
  line-height: 1.35;
}

.ui-badge-count {
  position: absolute;
  top: var(--ui-space-8);
  right: 22px;
  min-width: 17px;
  height: 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-color-danger);
  color: var(--ui-color-white);
  padding: 0 var(--ui-space-4);
  font-size: var(--ui-font-size-xs);
  font-weight: var(--ui-font-weight-strong);
  line-height: 1;
}

.ui-tone-blue,
.ui-quick-card__icon.is-blue {
  --ui-tone: var(--ui-color-category-blue);
  background: var(--ui-color-info-soft);
  color: var(--ui-color-category-blue);
}

.ui-tone-cyan,
.ui-quick-card__icon.is-cyan {
  --ui-tone: var(--ui-color-category-cyan);
  background: var(--ui-color-cyan-100);
  color: var(--ui-color-cyan-600);
}

.ui-tone-amber,
.ui-quick-card__icon.is-amber {
  --ui-tone: var(--ui-color-category-amber);
  background: var(--ui-color-warning-soft);
  color: var(--ui-color-category-amber);
}

.ui-tone-green,
.ui-quick-card__icon.is-green {
  --ui-tone: var(--ui-color-category-green);
  background: var(--ui-color-success-soft);
  color: var(--ui-color-category-green);
}

.ui-tone-purple,
.ui-quick-card__icon.is-purple {
  --ui-tone: var(--ui-color-category-purple);
  background: var(--ui-color-purple-soft);
  color: var(--ui-color-category-purple);
}

.ui-tone-red,
.ui-quick-card__icon.is-red {
  --ui-tone: var(--ui-color-danger);
  background: var(--ui-color-danger-soft);
  color: var(--ui-color-danger);
}

.ui-flow-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: hidden;
  border: var(--ui-border-default);
  border-radius: var(--ui-radius-md);
  background: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-sm);
}

.ui-flow-node {
  position: relative;
  display: grid;
  grid-gap: var(--ui-space-2);
  gap: var(--ui-space-2);
  border-right: var(--ui-border-default);
  color: inherit;
  padding: var(--ui-space-12) var(--ui-space-16);
  text-decoration: none;
  transition: background var(--ui-transition-fast);
}

.ui-flow-node:last-child {
  border-right: 0;
}

.ui-flow-node:hover {
  background: var(--ui-color-brand-50);
}

.ui-flow-node::after {
  content: "›";
  position: absolute;
  right: -8px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  color: var(--ui-color-text-muted);
  font-size: 15px;
  font-weight: var(--ui-font-weight-bold);
}

.ui-flow-node:last-child::after {
  content: none;
}

.ui-flow-node__label {
  color: var(--ui-color-text-secondary);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}

.ui-flow-node__value,
.ui-flow-value {
  color: var(--ui-color-text);
  font-size: 22px;
  line-height: 1.1;
  font-weight: 720;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.ui-flow-node__value em,
.ui-flow-value em {
  margin-left: var(--ui-space-2);
  color: var(--ui-color-text-secondary);
  font-size: var(--ui-font-size-md);
  font-style: normal;
  font-weight: var(--ui-font-weight-bold);
}

.ui-flow-node.is-pending .ui-flow-node__value,
.ui-flow-node__value.is-pending {
  color: var(--ui-color-text-muted);
  font-size: var(--ui-font-size-chart-title);
  font-weight: var(--ui-font-weight-bold);
}

.ui-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-gap: var(--ui-space-12);
  gap: var(--ui-space-12);
}

.ui-kpi-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  border: var(--ui-border-default);
  border-radius: var(--ui-radius-md);
  background: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-sm);
  padding: 15px 15px 13px;
  transition: transform var(--ui-transition-base), box-shadow var(--ui-transition-base);
}

.ui-kpi-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--ui-tone, var(--ui-color-category-blue));
}

.ui-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ui-shadow-md);
}

.ui-kpi-card__label {
  color: var(--ui-color-text-secondary);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
}

.ui-kpi-card__value,
.ui-kpi-value,
.ui-money {
  color: var(--ui-color-text);
  font-size: var(--ui-font-size-kpi);
  line-height: 1.1;
  font-weight: 720;
  letter-spacing: 0;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.ui-kpi-card--text .ui-kpi-card__value {
  font-size: 20px;
}

.ui-kpi-card__value em,
.ui-kpi-value em {
  margin-left: var(--ui-space-2);
  color: var(--ui-color-text-secondary);
  font-size: var(--ui-font-size-md);
  font-style: normal;
  font-weight: var(--ui-font-weight-bold);
}

.ui-kpi-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  color: var(--ui-color-text-muted);
  font-size: var(--ui-font-size-sm);
}

.ui-kpi-card.is-pending .ui-kpi-card__value,
.ui-kpi-card__value.is-pending {
  color: var(--ui-color-text-muted);
  font-size: 18px;
  font-weight: var(--ui-font-weight-bold);
}

.ui-panel {
  border: var(--ui-border-default);
  border-radius: var(--ui-radius-md);
  background: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-sm);
  padding: var(--ui-space-16);
}

.ui-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-12);
  margin-bottom: var(--ui-space-12);
}

.ui-panel__title {
  margin: 0;
  color: var(--ui-color-text);
  font-size: var(--ui-font-size-title);
  font-weight: var(--ui-font-weight-bold);
  letter-spacing: 0;
  line-height: 1.35;
}

.ui-panel a {
  color: var(--ui-color-brand-700);
  font-weight: var(--ui-font-weight-bold);
}

.ui-chart-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  grid-gap: var(--ui-space-12);
  gap: var(--ui-space-12);
}

.ui-chart-panel {
  min-width: 0;
  border: var(--ui-border-default);
  border-radius: var(--ui-radius-md);
  background: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-sm);
  padding: var(--ui-space-14);
}

.ui-chart-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ui-space-12);
  margin-bottom: var(--ui-space-8);
}

.ui-chart-panel__title {
  margin: 0;
  color: var(--ui-color-text);
  font-size: var(--ui-font-size-chart-title);
  line-height: 1.35;
  letter-spacing: 0;
}

.ui-chart-panel__subtitle {
  display: block;
  margin-top: var(--ui-space-4);
  color: var(--ui-color-text-secondary);
  font-size: var(--ui-font-size-md);
  line-height: 1.45;
}

.ui-attention-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: var(--ui-space-12);
  gap: var(--ui-space-12);
}

.ui-attention-grid .ui-panel {
  padding: var(--ui-space-14);
}

.ui-attention-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-10);
  border-top: var(--ui-border-default);
  color: inherit;
  padding: var(--ui-space-10) 0;
  text-decoration: none;
  transition: background var(--ui-transition-fast);
}

.ui-attention-row:first-of-type {
  border-top: 0;
}

.ui-attention-row:hover {
  background: var(--ui-color-brand-50);
}

.ui-attention-row__main {
  min-width: 0;
}

.ui-attention-row__title {
  display: block;
  overflow: hidden;
  color: var(--ui-color-text);
  font-size: var(--ui-font-size-md);
  line-height: 1.3;
  font-weight: var(--ui-font-weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-attention-row__meta {
  display: block;
  overflow: hidden;
  color: var(--ui-color-text-secondary);
  font-size: var(--ui-font-size-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-attention-row__side {
  flex: 0 0 auto;
  text-align: right;
}

.ui-attention-row__amount {
  display: block;
  color: var(--ui-color-text);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-bold);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.ui-status-pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--ui-radius-pill);
  padding: var(--ui-space-2) 9px;
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-bold);
  line-height: 1.35;
  white-space: nowrap;
}

.ui-status-pill.is-info,
.ui-status-pill.blue {
  background: var(--ui-color-info-soft);
  color: var(--ui-color-info-ink);
}

.ui-status-pill.is-warning,
.ui-status-pill.amber {
  background: var(--ui-color-warning-soft);
  color: var(--ui-color-warning-ink);
}

.ui-status-pill.is-danger,
.ui-status-pill.red {
  background: var(--ui-color-danger-soft);
  color: var(--ui-color-danger-ink);
}

.ui-status-pill.is-success,
.ui-status-pill.green {
  background: var(--ui-color-success-soft);
  color: var(--ui-color-success-ink);
}

.ui-status-pill.is-muted {
  background: var(--ui-color-muted-soft);
  color: var(--ui-color-text-secondary);
}

.ui-empty-state {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--ui-color-border-strong);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-color-surface-sunk);
  color: var(--ui-color-text-secondary);
  padding: var(--ui-space-14) var(--ui-space-16);
  font-size: var(--ui-font-size-md);
  line-height: 1.6;
  text-align: center;
}

.ui-table-wrap {
  overflow: auto;
  border: var(--ui-border-default);
  border-radius: var(--ui-radius-md);
  background: var(--ui-color-surface);
}

.ui-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  background: var(--ui-color-surface);
}

.ui-table th,
.ui-table td {
  border-bottom: var(--ui-border-default);
  padding: var(--ui-space-14) var(--ui-space-16);
  text-align: left;
  vertical-align: top;
}

.ui-table th {
  background: var(--ui-color-table-head);
  color: var(--ui-color-text-secondary);
  font-size: var(--ui-font-size-md);
  font-weight: var(--ui-font-weight-bold);
}

.ui-table tr:last-child td {
  border-bottom: 0;
}

.ui-table tbody tr:hover td {
  background: var(--ui-color-brand-50);
}

.ui-table__numeric {
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.ui-field {
  display: grid;
  grid-gap: var(--ui-space-6);
  gap: var(--ui-space-6);
}

.ui-field__label {
  color: var(--ui-color-text-secondary);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-bold);
}

.ui-input,
.ui-select,
.ui-textarea {
  width: 100%;
  min-height: 36px;
  border: var(--ui-border-strong);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-color-white);
  color: var(--ui-color-text);
  padding: 0 var(--ui-space-12);
  font: inherit;
  font-size: var(--ui-font-size-md);
}

.ui-textarea {
  min-height: 96px;
  padding: var(--ui-space-10) var(--ui-space-12);
  resize: vertical;
}

.ui-input::placeholder,
.ui-textarea::placeholder {
  color: var(--ui-color-text-muted);
}

.ui-input:focus,
.ui-select:focus,
.ui-textarea:focus {
  outline: none;
  border-color: var(--ui-color-brand-500);
  box-shadow: var(--ui-focus-ring);
}

.ui-input:disabled,
.ui-select:disabled,
.ui-textarea:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.ui-field__hint {
  color: var(--ui-color-text-muted);
  font-size: var(--ui-font-size-sm);
}

.ui-field__error {
  color: var(--ui-color-danger-ink);
  font-size: var(--ui-font-size-sm);
}

.ui-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-8);
  border: var(--ui-border-default);
  border-radius: var(--ui-radius-md);
  background: var(--ui-color-surface);
  padding: var(--ui-space-10) var(--ui-space-12);
}

.ui-filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: var(--ui-border-strong);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-color-white);
  color: var(--ui-color-text-secondary);
  padding: 0 var(--ui-space-12);
  font-size: var(--ui-font-size-sm);
  font-weight: var(--ui-font-weight-medium);
  cursor: pointer;
  transition: background var(--ui-transition-fast), border-color var(--ui-transition-fast), color var(--ui-transition-fast);
}

.ui-filter-chip:hover {
  border-color: var(--ui-color-brand-500);
  color: var(--ui-color-brand-600);
}

.ui-filter-chip.is-selected,
.ui-filter-chip.is-active {
  border-color: var(--ui-color-brand-500);
  background: var(--ui-color-brand-50);
  color: var(--ui-color-brand-700);
}

.ui-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--ui-z-modal);
  display: grid;
  place-items: center;
  background: var(--ui-color-backdrop);
}

.ui-modal {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  border: var(--ui-border-default);
  border-radius: var(--ui-radius-md);
  background: var(--ui-color-surface);
  box-shadow: var(--ui-shadow-lg);
}

.ui-modal__header,
.ui-modal__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-12);
  padding: var(--ui-space-14) var(--ui-space-16);
}

.ui-modal__body {
  padding: var(--ui-space-16);
}

.ui-number {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.ui-hoverable {
  transition: border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast), transform var(--ui-transition-fast);
}

.ui-hoverable:hover {
  border-color: var(--ui-color-brand-200);
  box-shadow: var(--ui-shadow-md);
  transform: translateY(-1px);
}

.ui-focusable:focus-visible {
  outline: none;
  box-shadow: var(--ui-focus-ring);
}

.ui-disabled,
.ui-row.is-disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.ui-row.is-selected {
  background: var(--ui-color-brand-50);
}

.ui-row.is-selected::before {
  background: var(--ui-color-brand-500);
}

.ui-tab.is-active {
  background: var(--ui-color-brand-500);
  color: var(--ui-color-white);
  font-weight: var(--ui-font-weight-bold);
}

.ui-skeleton {
  border-radius: var(--ui-radius-sm);
  background: linear-gradient(90deg, var(--ui-color-surface-sunk), var(--ui-color-white), var(--ui-color-surface-sunk));
  background-size: 200% 100%;
  animation: ui-skeleton 1.2s ease-in-out infinite;
}

@keyframes ui-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ui-skeleton {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

@media (max-width: 1280px) {
  .ui-quick-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ui-kpi-grid,
  .ui-flow-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ui-chart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .ui-quick-grid,
  .ui-kpi-grid,
  .ui-flow-strip,
  .ui-chart-grid,
  .ui-attention-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ui-workbench-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .ui-workbench-hero__actions {
    align-items: flex-start;
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .ui-content {
    padding: var(--ui-space-16);
  }

  .ui-quick-grid,
  .ui-kpi-grid,
  .ui-flow-strip,
  .ui-chart-grid,
  .ui-attention-grid {
    grid-template-columns: 1fr;
  }
}

/*!**************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/quotation-cockpit.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================
   工程驾驶舱主题 · Engineering Cockpit（浅色技术版 v2）
   报价模块专用，scope = .quotation-cockpit。
   保留工程仪表气质：等宽数字 + 硬朗细网格 + 电光蓝/琥珀强调 + 高密度 + 锐角，
   但走【浅色】底，不再厚重。数字用系统等宽字体（不依赖 Google Fonts）。
   ============================================================ */

.quotation-cockpit {
  /* —— 浅色技术调色板 —— */
  --ck-bg: #f3f6fa;
  --ck-panel: #ffffff;
  --ck-panel-2: #f5f8fc;
  --ck-panel-3: #eef3f9;
  --ck-line: #e2e8f1;
  --ck-line-strong: #c6d2e0;
  --ck-text: #16233a;
  --ck-text-dim: #5d6e83;
  --ck-text-faint: #97a6b8;
  --ck-blue: #0f72c9;
  --ck-blue-soft: #e7f1fb;
  --ck-amber: #c9760a;
  --ck-amber-soft: #fbf0dd;
  --ck-green: #138a5c;
  --ck-green-soft: #e4f4ec;
  --ck-red: #d23b3b;
  --ck-red-soft: #fbe9e9;
  --ck-mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
  /* —— 正文/表格字体：沿用系统 UI 字体栈，优先更现代的中文界面字体 —— */
  --ck-sans: var(--ui-font-family-base, "HarmonyOS Sans SC", "HarmonyOS Sans", "Alibaba PuHuiTi 3.0", "Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);

  /* —— 覆盖少量 token，强调技术蓝 + 细网格 —— */
  --brand: var(--ck-blue);
  --brand-2: var(--ck-blue);
  --brand-dark: var(--ck-blue-deep, #0a5499);
  --line: var(--ck-line);
  --text-primary: var(--ck-text);

  font-family: var(--ck-sans);
  letter-spacing: 0.1px;
  /* 撑满 .content 高度并按列排布——让带页脚的视图(报价工作台)能把页脚顶到底部。
     .content 在含 cockpit 时为 flex 列(见 globals.css 的 :has 规则)，故这里用 flex:1 稳妥撑满。 */
  flex: 1 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 卡片 / 区块 → 白底、细描边、锐角、极轻阴影 */
.quotation-cockpit .module-block,
.quotation-cockpit section.module-block,
.quotation-cockpit .quotation-overview-panel,
.quotation-cockpit .quotation-workbench-command,
.quotation-cockpit .quotation-summary-panel,
.quotation-cockpit .quotation-closure-board {
  background: var(--ck-panel);
  border: 1px solid var(--ck-line);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
}

/* 区块标题分隔线更利落 */
.quotation-cockpit .document-section-head {
  border-bottom: 1px solid var(--ck-line);
  padding-bottom: 10px;
}

.quotation-cockpit .module-title {
  letter-spacing: 0.2px;
}

/* —— section / 表标题统一 workbench「色条款」: 与 .ui-section-title::before 同款 3px 品牌色条。
 *    作用域限定 document-section-head 内的 module-title(=各视图区块标题/表标题),不波及 fold 摘要标题。 —— */
.quotation-cockpit .document-section-head .module-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quotation-cockpit .document-section-head .module-title::before {
  content: "";
  flex: none;
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--ui-color-brand-500, var(--brand-600, var(--brand-500)));
}

/* —— 数字：微软雅黑 + 等宽数字对齐（保留读数对齐，但用中文字体而非等宽英文字体） —— */
.quotation-cockpit .quotation-overview-amount strong,
.quotation-cockpit .quotation-overview-amount,
.quotation-cockpit .quotation-workbench-command-grid strong,
.quotation-cockpit .quotation-pricing-summary-grid strong,
.quotation-cockpit .quotation-costing-result-panel strong,
.quotation-cockpit .quotation-list-focus-metrics b,
.quotation-cockpit td,
.quotation-cockpit .status-badge {
  font-family: var(--ck-sans);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.quotation-cockpit .quotation-overview-amount strong {
  color: var(--ck-blue);
  font-size: 25px;
}

.quotation-cockpit .quotation-workbench-command-grid strong,
.quotation-cockpit .quotation-pricing-summary-grid strong,
.quotation-cockpit .quotation-costing-result-panel article.is-primary strong {
  color: var(--ck-blue);
  font-size: 18px;
}

/* —— 表格：硬朗细网格 + 高密度 + 等宽数字 —— */
.quotation-cockpit .data-table th {
  background: var(--ck-panel-2);
  color: var(--ck-text-dim);
  border-bottom: 1px solid var(--ck-line-strong);
  border-right: 1px solid var(--ck-line);
  font-size: 12px;
  letter-spacing: 0.3px;
}

.quotation-cockpit .data-table td {
  border-bottom: 1px solid var(--ck-line);
  border-right: 1px solid var(--ck-line);
  padding-top: 7px;
  padding-bottom: 7px;
}

.quotation-cockpit .data-table tbody tr:hover td {
  background: var(--ck-panel-2);
}

/* 金额/数字列右对齐 + 主数值加重（突出关键数字、规整对齐） */
.quotation-cockpit .data-table td.numeric-cell,
.quotation-cockpit .data-table th.numeric-cell {
  text-align: right;
}

.quotation-cockpit .data-table th.numeric-cell .quotation-column-heading {
  justify-content: flex-end;
}

.quotation-cockpit .data-table td.numeric-cell strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ck-text);
}

.quotation-cockpit .data-table td.numeric-cell span {
  color: var(--ck-text-dim);
  font-size: 12px;
}

/* —— 按钮：技术蓝主按钮 —— */
.quotation-cockpit .btn-primary {
  background: linear-gradient(180deg, #1a85e0, #0f72c9);
  border: 1px solid #0f72c9;
  color: var(--ink-inverse);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15, 114, 201, 0.25);
}

.quotation-cockpit .btn-primary:hover {
  background: linear-gradient(180deg, #2a92ec, #1576cf);
}

.quotation-cockpit .btn-ghost {
  border: 1px solid var(--ck-line-strong);
  color: var(--ck-text);
}

.quotation-cockpit .btn-ghost:hover {
  border-color: var(--ck-blue);
  color: var(--ck-blue);
  background: var(--ck-blue-soft);
}

/* —— 状态徽章 —— */
.quotation-cockpit .status-badge {
  border: 1px solid var(--ck-line-strong);
}

.quotation-cockpit .status-approved,
.quotation-cockpit .status-success {
  border-color: rgba(19, 138, 92, 0.4);
  background: var(--ck-green-soft);
  color: var(--ck-green);
}

.quotation-cockpit .status-pending,
.quotation-cockpit .status-warning {
  border-color: rgba(201, 118, 10, 0.4);
  background: var(--ck-amber-soft);
  color: var(--ck-amber);
}

/* —— 向导步骤条：一条同时承担「进度」+「页面导航」 —— */
.quotation-cockpit .quotation-wizard-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 4px;
  margin: 12px 0 16px;
  padding: 6px;
  border: 1px solid var(--ck-line);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--ck-panel-2), var(--ck-panel));
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
}

.quotation-cockpit .quotation-wizard-step {
  position: relative;
  flex: 1 1;
  min-width: 112px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ck-text-faint);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.quotation-cockpit .quotation-wizard-step:not(:last-child)::after {
  content: "›";
  position: absolute;
  right: -3px;
  color: var(--ck-line-strong);
  font-weight: 700;
  pointer-events: none;
}

.quotation-cockpit .quotation-wizard-step:hover {
  background: var(--ck-blue-soft);
  color: var(--ck-blue);
}

.quotation-cockpit .quotation-wizard-dot {
  width: 24px;
  height: 24px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  background: var(--ck-panel-3);
  color: var(--ck-text-dim);
  font-family: var(--ck-mono);
}

.quotation-cockpit .quotation-wizard-step.is-done {
  color: var(--ck-green);
}
.quotation-cockpit .quotation-wizard-step.is-done .quotation-wizard-dot {
  background: var(--ck-green-soft);
  color: var(--ck-green);
}
.quotation-cockpit .quotation-wizard-step.is-current {
  color: var(--ck-blue);
}
.quotation-cockpit .quotation-wizard-step.is-current .quotation-wizard-dot {
  background: var(--ck-blue);
  color: var(--ink-inverse);
}

/* 当前所在页：实心蓝高亮 */
.quotation-cockpit .quotation-wizard-step.is-active,
.quotation-cockpit .quotation-wizard-step.is-active:hover {
  background: var(--ck-blue);
  color: var(--ink-inverse);
  box-shadow: 0 1px 3px rgba(15, 114, 201, 0.3);
}
.quotation-cockpit .quotation-wizard-step.is-active .quotation-wizard-dot {
  background: rgba(255, 255, 255, 0.24);
  color: var(--ink-inverse);
}
.quotation-cockpit .quotation-wizard-step.is-active::after {
  color: rgba(255, 255, 255, 0.5);
}
.quotation-cockpit .quotation-wizard-step.is-skip {
  opacity: 0.5;
}
.quotation-cockpit .quotation-wizard-label {
  white-space: nowrap;
  font-size: 14px;
  letter-spacing: 0.01em;
}

.quotation-process-page-hero {
  min-height: 144px;
  height: 144px;
  align-items: flex-start;
  margin-bottom: 18px;
  overflow: hidden;
}

.quotation-process-page-hero .page-header-main {
  max-width: 960px;
  min-width: 0;
}

.quotation-process-page-hero .desc {
  max-width: 760px;
  display: -webkit-box;
  min-height: 22px;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.quotation-process-page-hero .page-header-actions {
  align-self: center;
  flex: none;
}

.quotation-process-page-hero h1 {
  display: -webkit-box;
  min-height: 34px;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.quotation-process-shell {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
  border-color: #dbeafe;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.quotation-process-shell-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.quotation-process-shell-head p {
  margin: 4px 0 0;
  color: var(--ck-text-faint);
  font-size: 13px;
  line-height: 1.55;
}

.quotation-process-summary-grid {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.quotation-process-summary-grid--form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quotation-process-summary-grid--detail {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quotation-process-summary-card {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-height: 96px;
  align-content: start;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: var(--surface);
  padding: 14px 16px;
}

.quotation-process-summary-card > span {
  color: var(--ck-text-faint);
  font-size: 12px;
  font-weight: 800;
}

.quotation-process-summary-card > strong {
  color: var(--ck-text);
  font-size: 20px;
  line-height: 1.25;
}

.quotation-process-summary-card > small {
  color: var(--ck-text-dim);
  font-size: 12px;
  line-height: 1.5;
}

.quotation-process-summary-card--amount > strong {
  font-size: 24px;
}

/* 报价方案与版本：两步定稿卡。原本无样式导致编号/标题/描述/状态散乱堆叠，
 * 这里统一成「编号徽标 + 标题/描述（左，弹性）+ 输入（中）+ 操作/状态（右）」的行结构。 */
.quotation-cockpit .quotation-cost-price-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 10px 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: #f8fafc;
}
.quotation-cockpit .quotation-cost-price-panel > select,
.quotation-cockpit .quotation-cost-price-panel > input {
  height: 34px;
  min-width: 130px;
  flex: 0 1 150px;
  padding: 0 10px;
  border: 1px solid #d5dced;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
}
.quotation-cockpit .quotation-cost-price-panel > input:disabled,
.quotation-cockpit .quotation-cost-price-panel > select:disabled {
  background: #eef1f6;
  color: #94a3b8;
}
.quotation-cockpit .quotation-cost-price-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.quotation-cockpit .quotation-quote-list-total-row td {
  background: #f6f9ff;
  border-top: 2px solid #dbe6fb;
  padding: 10px 14px;
}
.quotation-cockpit .quotation-quote-list-total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 24px;
  font-size: 13px;
  color: var(--text-secondary);
}
.quotation-cockpit .quotation-quote-list-total .quotation-quote-list-total-label {
  margin-right: auto;
  font-weight: 800;
  color: var(--ink);
}
.quotation-cockpit .quotation-quote-list-total strong {
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
}
.quotation-cockpit .quotation-quote-list-total strong.is-strong {
  color: #1b64f2;
}
.quotation-cockpit .quotation-fee-coverage-warning {
  flex-basis: 100%;
  margin-top: 6px;
  color: #b45309;
  font-size: 12px;
  font-weight: 700;
}

.quotation-cockpit .quotation-quote-plan-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
}
.quotation-cockpit .quotation-quote-plan-fix-hint {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #fcd9b6;
  border-radius: 8px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 12px;
  line-height: 1.6;
}
.quotation-cockpit .quotation-quote-plan-overview {
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--hairline);
}
.quotation-cockpit .quotation-quote-plan-list-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.quotation-cockpit .quotation-quote-plan-list-head > div { display: grid; grid-gap: 2px; gap: 2px; }
.quotation-cockpit .quotation-quote-plan-list-head strong { font-size: 14px; font-weight: 800; color: var(--ink); }
.quotation-cockpit .quotation-quote-plan-list-head span { font-size: 12px; color: var(--text-secondary); }
.quotation-cockpit .quotation-quote-plan-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface-sunk);
}
.quotation-cockpit .quotation-quote-plan-step {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 200px;
}
.quotation-cockpit .quotation-quote-plan-step > span {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  background: var(--brand-100);
  color: var(--brand-700);
}
.quotation-cockpit .quotation-quote-plan-step > span.is-done { background: var(--brand-600); color: #fff; }
.quotation-cockpit .quotation-quote-plan-step > span.is-pending {
  background: var(--surface);
  color: var(--text-secondary);
  border: 1px solid var(--hairline);
}
.quotation-cockpit .quotation-quote-plan-step > div { display: grid; grid-gap: 2px; gap: 2px; min-width: 0; }
.quotation-cockpit .quotation-quote-plan-step strong { font-size: 13px; font-weight: 700; color: var(--ink); }
.quotation-cockpit .quotation-quote-plan-step small { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.quotation-cockpit .quotation-quote-plan-row .quotation-quote-plan-input { flex: 0 0 auto; margin: 0; min-width: 168px; }
.quotation-cockpit .quotation-quote-plan-action { flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 8px; }
.quotation-cockpit .quotation-quote-plan-status {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  color: var(--text-secondary);
  white-space: nowrap;
}
.quotation-cockpit .quotation-quote-plan-status.is-done { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.quotation-cockpit .quotation-quote-plan-status.is-wait { background: var(--accent-50); color: var(--accent-700); border-color: var(--accent-200); }

.quotation-process-stepper-wrap {
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
}

.quotation-process-stepper-wrap .quotation-wizard-steps {
  margin: 0;
}

.quotation-cockpit .quotation-form-overview {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.quotation-cockpit .quotation-form-overview-grid {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 260px;
  grid-gap: 12px;
  gap: 12px;
  align-items: stretch;
}

.quotation-cockpit .quotation-form-overview-panel {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  border: 1px solid var(--ck-line);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px 14px;
}

.quotation-cockpit .quotation-form-overview-panel > span {
  color: var(--ck-text-faint);
  font-size: 12px;
  font-weight: 800;
}

.quotation-cockpit .quotation-form-overview-panel > strong {
  color: var(--ck-text);
  font-size: 18px;
  line-height: 1.25;
}

.quotation-cockpit .quotation-form-overview-panel > small {
  color: var(--ck-text-dim);
  font-size: 12px;
  line-height: 1.5;
}

.quotation-cockpit .quotation-form-overview-panel--flow {
  align-content: start;
}

.quotation-cockpit .quotation-form-overview-panel--flow .quotation-wizard-steps {
  margin: 0;
}

.quotation-cockpit .quotation-step-form-layout.is-edit {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.quotation-cockpit .quotation-step-form-aside {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
}

.quotation-cockpit .quotation-step-form-aside > .quotation-edit-assist {
  min-width: 0;
}

.quotation-cockpit .quotation-step-form-aside > .quotation-edit-assist--summary {
  grid-column: 1 / -1;
}

.quotation-cockpit .quotation-section-divider {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  margin: 4px 0 14px;
  border-left: 3px solid var(--ck-blue);
  border-radius: 0;
  background: transparent;
  padding: 2px 0 2px 12px;
}

.quotation-cockpit .quotation-section-divider strong {
  color: #0f172a;
  font-size: 13px;
}

.quotation-cockpit .quotation-section-divider span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.quotation-cockpit .quotation-compact-pending-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: -2px 0 14px;
  border-radius: 10px;
  background: #f8fbff;
  padding: 10px 12px;
}

.quotation-cockpit .quotation-compact-pending-line strong {
  color: #0f172a;
  font-size: 13px;
}

.quotation-cockpit .quotation-compact-pending-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quotation-cockpit .quotation-compact-pending-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  border: 1px solid #fde68a;
  border-radius: 999px;
  background: #fffbeb;
  color: #92400e;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}

.quotation-cockpit .quotation-field-pending-hint {
  color: #b45309;
}

.quotation-cockpit .quotation-edit-assist {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: var(--surface);
  padding: 14px;
}

.quotation-cockpit .quotation-edit-assist--summary {
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
  border-color: #dbeafe;
}

.quotation-cockpit .quotation-edit-assist header {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
}

.quotation-cockpit .quotation-edit-assist header strong {
  color: #0f172a;
  font-size: 14px;
}

.quotation-cockpit .quotation-edit-assist header span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.quotation-cockpit .quotation-edit-assist-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin: 0;
}

.quotation-cockpit .quotation-edit-assist-metrics div {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  border: 1px solid #e5edf6;
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.quotation-cockpit .quotation-edit-assist-metrics dt {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.quotation-cockpit .quotation-edit-assist-metrics dd {
  margin: 0;
  color: #0f172a;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.quotation-cockpit .quotation-edit-assist-metrics small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.quotation-cockpit .quotation-edit-assist-actions,
.quotation-cockpit .quotation-edit-assist-list {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.quotation-cockpit .quotation-edit-assist-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.quotation-cockpit .quotation-edit-jump,
.quotation-cockpit .quotation-edit-check {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-gap: 10px;
  gap: 10px;
  align-items: start;
  border: 1px solid #e5edf6;
  border-radius: 10px;
  background: #f8fafc;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.quotation-cockpit .quotation-edit-jump {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.quotation-cockpit .quotation-edit-jump:hover,
.quotation-cockpit .quotation-edit-check:hover {
  border-color: #bfdbfe;
  background: #f8fbff;
  transform: translateY(-1px);
}

.quotation-cockpit .quotation-edit-jump span,
.quotation-cockpit .quotation-edit-check strong {
  color: #0f172a;
  font-size: 13px;
  font-weight: 700;
}

.quotation-cockpit .quotation-edit-jump small,
.quotation-cockpit .quotation-edit-check small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.quotation-cockpit .quotation-edit-check > div {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
}

.quotation-cockpit .quotation-edit-assist-list li.is-ok .quotation-edit-check {
  border-color: #d1fae5;
  background: #f0fdf4;
}

.quotation-cockpit .quotation-edit-assist-list li.is-todo .quotation-edit-check {
  border-color: #fde68a;
  background: #fffbeb;
}

/* —— 向导底部：上一步 / 下一步 —— */
.quotation-cockpit .quotation-wizard-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--ck-line);
  border-top: 2px solid var(--ck-blue);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--ck-panel-2), var(--ck-panel));
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
}
.quotation-cockpit .quotation-wizard-footer-spacer {
  flex: 0 0 auto;
}
/* 方案二：审批检查并入提交区——紧贴页脚上方的检查条，仅在有待处理/阻断项时渲染（全通过则不出现）。 */
.quotation-cockpit .quotation-wizard-checks {
  margin-top: 18px;
  margin-bottom: -8px;
  padding: 12px 16px;
  border: 1px solid var(--ck-line);
  border-radius: 8px;
  background: var(--ck-panel);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quotation-cockpit .quotation-wizard-checks.is-blocked {
  border-color: #f0c2bd;
  background: #fdf4f3;
}
.quotation-cockpit .quotation-wizard-checks.is-warn {
  border-color: #f0dcb4;
  background: #fdf9f0;
}
.quotation-cockpit .quotation-wizard-checks-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.quotation-cockpit .quotation-wizard-checks-head strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--ck-text);
}
.quotation-cockpit .quotation-wizard-checks-progress {
  margin-left: auto;
  font-size: 12px;
  color: var(--ck-text-faint);
}
.quotation-cockpit .quotation-wizard-next {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}
.quotation-cockpit .quotation-wizard-next-text {
  display: grid;
  grid-gap: 1px;
  gap: 1px;
  text-align: right;
}
.quotation-cockpit .quotation-wizard-next-text span {
  color: var(--ck-text-dim);
  font-size: 11px;
  font-weight: 800;
}
.quotation-cockpit .quotation-wizard-next-text strong {
  color: var(--ck-text);
  font-size: 15px;
}
.quotation-cockpit .quotation-wizard-next-text small {
  color: var(--ck-text-dim);
  font-size: 12px;
}

/* —— 折叠区块：次要/明细内容默认收起，点开展开（给成本页减负） —— */
.quotation-cockpit details.quotation-fold > summary.quotation-fold-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.quotation-cockpit details.quotation-fold > summary.quotation-fold-summary::-webkit-details-marker {
  display: none;
}
.quotation-cockpit details.quotation-fold > summary.quotation-fold-summary::after {
  content: "▸ 展开";
  flex: none;
  font-size: 12px;
  font-weight: 700;
  color: var(--ck-blue);
  white-space: nowrap;
}
.quotation-cockpit details.quotation-fold[open] > summary.quotation-fold-summary::after {
  content: "▾ 收起";
}
.quotation-cockpit details.quotation-fold > summary.quotation-fold-summary:hover .module-title {
  color: var(--ck-blue);
}
/* 收起态：标题栏不画多余的分隔线 */
.quotation-cockpit details.quotation-fold:not([open]) > summary.document-section-head {
  border-bottom: none;
  padding-bottom: 0;
}
/* 区块内的内联折叠（如「按行成本明细」）：虚线分隔，不再套一层卡片 */
.quotation-cockpit details.quotation-fold-inline {
  border-top: 1px dashed var(--ck-line);
  margin-top: 14px;
  padding-top: 12px;
}
.quotation-cockpit details.quotation-fold-inline > summary.quotation-fold-summary .module-title {
  font-size: 13px;
}

/* —— 待补齐资料横幅：明确列出缺哪几项，点击直达对应步 —— */
.quotation-cockpit .quotation-missing-banner {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid rgba(201, 118, 10, 0.4);
  border-left: 3px solid var(--ck-amber);
  border-radius: 8px;
  background: var(--ck-amber-soft);
}
.quotation-cockpit .quotation-missing-banner-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 10px;
}
.quotation-cockpit .quotation-missing-banner-head strong {
  color: var(--ck-amber);
  font-size: 14px;
}
.quotation-cockpit .quotation-missing-banner-head small {
  color: var(--ck-text-dim);
  font-size: 12px;
}
.quotation-cockpit .quotation-missing-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.quotation-cockpit .quotation-missing-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(201, 118, 10, 0.45);
  border-radius: 999px;
  background: var(--ck-panel);
  color: var(--ck-text);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.quotation-cockpit .quotation-missing-chip:hover {
  background: var(--ck-amber-soft);
  border-color: var(--ck-amber);
}
.quotation-cockpit .quotation-missing-chip em {
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  color: var(--ck-amber);
}

/* —— 就绪检查：仪表清单 —— */
.quotation-cockpit .quotation-cost-gate-dot {
  font-family: var(--ck-mono);
}

.quotation-cockpit .quotation-cost-gates li.is-done {
  border-color: rgba(19, 138, 92, 0.35);
  background: var(--ck-green-soft);
}

.quotation-cockpit .quotation-cost-gates li.is-blocked {
  border-color: rgba(210, 59, 59, 0.35);
  background: var(--ck-red-soft);
}

.quotation-cockpit .quotation-cost-gates li.is-active {
  border-color: rgba(15, 114, 201, 0.35);
  background: var(--ck-blue-soft);
}

/* —— 子导航 tab：当前项电光蓝下划线 —— */
.quotation-cockpit .quotation-detail-subnav a.active {
  color: var(--ck-blue);
  border-bottom-color: var(--ck-blue);
}

/* —— 列宽拖拽手柄、列设置浮层 —— */
.quotation-cockpit .data-table thead th:hover .quotation-column-resizer::after {
  background: var(--ck-line-strong);
}

/* 顶部一条细电光蓝标识线，点出"仪表盘"气质（克制） */
.quotation-cockpit .quotation-overview-panel {
  border-top: 2px solid var(--ck-blue);
}

/* ============================================================
   收敛配色 · 中性底 + 蓝色单一强调
   规则：可点击的「动作」一律蓝；绿/琥珀/红只用于真正的状态语义，
   且仅作小徽章/文字/细条，不再大面积填充；清掉杂色（靛蓝等）。
   目标：一屏不超过「中性灰 + 蓝 + 一种状态色」，不眼花缭乱。
   ============================================================ */

/* 「下一步」动作 pill —— 不再按 tone 变四色，统一中性底 + 蓝字，悬停蓝边 */
.quotation-cockpit .quotation-next-action-link,
.quotation-cockpit .quotation-next-action-link.contract-action-info,
.quotation-cockpit .quotation-next-action-link.contract-action-warning,
.quotation-cockpit .quotation-next-action-link.contract-action-success,
.quotation-cockpit .quotation-next-action-link.contract-action-danger {
  background: var(--ck-blue-soft);
  color: var(--ck-blue);
  border-color: transparent;
}

.quotation-cockpit .quotation-next-action-link:hover,
.quotation-cockpit .quotation-next-action-link:focus-visible {
  border-color: var(--ck-blue);
}

/* 风险徽章 —— 去掉彩色填充底，仅保留语义文字色（安静） */
.quotation-cockpit .risk-badge {
  background: transparent;
  padding-left: 0;
}

.quotation-cockpit .risk-low,
.quotation-cockpit .risk-normal {
  color: var(--ck-text-dim);
}

.quotation-cockpit .risk-medium,
.quotation-cockpit .risk-warning {
  color: var(--ck-amber);
}

.quotation-cockpit .risk-high,
.quotation-cockpit .risk-danger {
  color: var(--ck-red);
}

/* 杂色标签（靛蓝 reason-tags 等）改中性灰 */
.quotation-cockpit .reason-tags em {
  background: var(--ck-panel-2);
  color: var(--ck-text-dim);
}

/* tone 卡片 —— 去掉彩色填充底，统一中性面板，仅用左侧 inset 细色条表达语义（无布局位移） */
.quotation-cockpit .tone-info,
.quotation-cockpit .tone-success,
.quotation-cockpit .tone-warning,
.quotation-cockpit .tone-danger {
  background: var(--ck-panel);
}

.quotation-cockpit article.tone-info,
.quotation-cockpit article.tone-success,
.quotation-cockpit article.tone-warning,
.quotation-cockpit article.tone-danger {
  box-shadow: inset 3px 0 0 var(--ck-line-strong);
}

.quotation-cockpit article.tone-info {
  box-shadow: inset 3px 0 0 var(--ck-blue);
}

.quotation-cockpit article.tone-success {
  box-shadow: inset 3px 0 0 var(--ck-green);
}

.quotation-cockpit article.tone-warning {
  box-shadow: inset 3px 0 0 var(--ck-amber);
}

.quotation-cockpit article.tone-danger {
  box-shadow: inset 3px 0 0 var(--ck-red);
}

/* 工作台任务车道卡片：去彩色底（globals 同特异性会赢，这里提高特异性盖掉） */
.quotation-cockpit .quotation-task-lane.tone-info,
.quotation-cockpit .quotation-task-lane.tone-success,
.quotation-cockpit .quotation-task-lane.tone-warning,
.quotation-cockpit .quotation-task-lane.tone-danger {
  background: var(--ck-panel);
  border-color: var(--ck-line);
}

.quotation-cockpit .quotation-task-lane.tone-info {
  box-shadow: inset 3px 0 0 var(--ck-blue);
}

.quotation-cockpit .quotation-task-lane.tone-success {
  box-shadow: inset 3px 0 0 var(--ck-green);
}

.quotation-cockpit .quotation-task-lane.tone-warning {
  box-shadow: inset 3px 0 0 var(--ck-amber);
}

.quotation-cockpit .quotation-task-lane.tone-danger {
  box-shadow: inset 3px 0 0 var(--ck-red);
}

/* 行内图标按钮：统一 28px 见方、中性描边、悬停蓝；主次只用「填充 vs 描边」区分，不堆颜色 */
.quotation-cockpit .quotation-row-icon-actions .btn-icon {
  width: 30px;
  min-width: 30px;
  height: 30px;
  border-radius: 6px;
}

.quotation-cockpit .quotation-row-icon-actions .btn-ghost.btn-icon {
  border: 1px solid var(--ck-line-strong);
  color: var(--ck-text-dim);
  background: var(--ck-panel);
}

.quotation-cockpit .quotation-row-icon-actions .btn-ghost.btn-icon:hover {
  border-color: var(--ck-blue);
  color: var(--ck-blue);
  background: var(--ck-blue-soft);
}

/* ============================================================
   P1 主线 flow（单页 6 段）：把详情页聚合视图重排成业务流水线。
   仅作用于 view=flow（data-view="flow"），旧 7-tab 视图不受影响。
   - 隐藏冗余的旧 7-tab 子导航（顶部 guide-rail 已是进度轴）
   - 容器改纵向单列，段间留白
   - 用 data-stage + order 把各面板排成 资料→清单→成本→报价→审批→出单
     （data-stage 标记将在下个 slice 逐块补；未标记块默认 order:0 暂随进度轴顶部）
   - data-flow-hide="1" 的块在 flow 中隐藏（去重）
   ============================================================ */
.quotation-detail-flow[data-view="flow"] {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.quotation-detail-flow[data-view="flow"] .quotation-detail-subnav {
  display: none;
}
.quotation-detail-flow[data-view="flow"] .quotation-guide-rail { order: 0; }
.quotation-detail-flow[data-view="flow"] [data-stage="profile"]  { order: 1; }
.quotation-detail-flow[data-view="flow"] [data-stage="items"]    { order: 2; }
.quotation-detail-flow[data-view="flow"] [data-stage="cost"]     { order: 3; }
.quotation-detail-flow[data-view="flow"] [data-stage="pricing"]  { order: 4; }
.quotation-detail-flow[data-view="flow"] [data-stage="approval"] { order: 6; }
.quotation-detail-flow[data-view="flow"] [data-stage="export"]   { order: 7; }
/* 成本·报价 段内排序（与视图无关：flow 整页 / costing 聚焦视图都生效）：
   取价/结果(3) → 品牌成本方案+执行明细(4) → 报价清单+保存+审核(5) */
.quotation-detail-flow .quotation-costing-workbench[data-stage="cost"]      { order: 3; }
.quotation-detail-flow .quotation-cost-compare-section[data-stage="cost"]   { order: 4; }
.quotation-detail-flow .quotation-pricing-workbench[data-stage="cost"]      { order: 5; }
/* 向导上一步/下一步导航是页脚，置于全部内容之后（否则 order:0 会浮到最顶端） */
.quotation-detail-flow .quotation-wizard-footer                             { order: 8; }
.quotation-detail-flow[data-view="flow"] [data-flow-hide="1"]    { display: none; }

/* 清单页「合并为综合报价」选行面板 */
.quotation-cockpit .quotation-comprehensive-merge-panel { padding: 14px; border: 1px solid var(--ck-line, #d8dee6); border-radius: 6px; background: #f7fafd; }
.quotation-cockpit .quotation-merge-select-summary { display: block; margin-top: 2px; color: var(--ck-blue, #0f72c9); font-weight: 500; }
.quotation-cockpit .quotation-selector-price-source { display: block; margin-top: 3px; font-size: 11px; line-height: 1.3; color: var(--ck-text-soft, #6b7a8d); }
.quotation-cockpit .quotation-editable-table td.first-column {
  vertical-align: middle;
}

.quotation-cockpit .quotation-item-name-cell {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  align-content: center;
  min-height: 66px;
}

.quotation-cockpit .quotation-item-name-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
}

.quotation-cockpit .quotation-item-name-content {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  min-width: 0;
}

.quotation-cockpit .quotation-item-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 40px;
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  background: #f8fbff;
  color: #6b7a8d;
  cursor: -webkit-grab;
  cursor: grab;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.quotation-cockpit .quotation-item-drag-handle:hover,
.quotation-cockpit .quotation-item-drag-handle:focus-visible {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #0f72c9;
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 114, 201, 0.1);
}

.quotation-cockpit .quotation-item-drag-handle:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.quotation-cockpit .quotation-item-name-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.quotation-cockpit .quotation-item-line-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 22px;
  padding: 0;
  border-radius: 11px;
  background: #eff6ff;
  color: var(--ck-blue, #0f72c9);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.quotation-cockpit .quotation-item-name-meta small {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #f8fafc;
  color: var(--ck-text-dim, #64748b);
  font-size: 12px;
  font-weight: 700;
}

.quotation-cockpit .quotation-table-input {
  width: 100%;
  min-height: 40px;
  border: 1px solid #d8e2ef;
  border-radius: 10px;
  background: #fbfdff;
  padding: 0 12px;
  color: var(--ck-text, #16233a);
  font-size: 14px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.quotation-cockpit .quotation-table-select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  background:
    linear-gradient(45deg, transparent 50%, #50617a 50%) right 14px center / 6px 6px no-repeat,
    linear-gradient(135deg, #50617a 50%, transparent 50%) right 10px center / 6px 6px no-repeat,
    #fbfdff;
  color: var(--ck-text, #16233a);
  font-size: 13px;
  font-weight: 700;
  padding: 0 34px 0 12px;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.quotation-cockpit .quotation-item-table-shell {
  border-color: #e5ecf3;
  border-radius: 8px;
}

.quotation-cockpit .quotation-item-table-shell .quotation-horizontal-table {
  max-height: min(68vh, 720px);
  overflow: auto;
  scrollbar-gutter: stable;
}

.quotation-cockpit .quotation-item-table-shell .quotation-editable-table th,
.quotation-cockpit .quotation-item-table-shell .quotation-editable-table td {
  vertical-align: middle;
}

.quotation-cockpit .quotation-item-table-shell .quotation-editable-table {
  min-width: 1120px;
}

.quotation-cockpit .quotation-item-table-shell .quotation-editable-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 5;
  height: 42px;
  padding: 10px 12px;
  border-right: 0;
  background: #f7fafe;
  color: #4f6077;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.quotation-cockpit .quotation-item-table-shell .quotation-editable-table td {
  height: 60px;
  padding: 8px 12px;
  border-right: 0;
  border-bottom: 1px solid #e5ecf3;
  color: #0b1f3a;
  font-size: 13px;
}

.quotation-cockpit .quotation-item-table-shell .quotation-editable-table tbody tr:hover td {
  background: #f7fbff;
}

.quotation-cockpit .quotation-item-table-shell .quotation-editable-table tbody tr.is-dragging td {
  opacity: 0.58;
  background: #f8fbff;
}

.quotation-cockpit .quotation-item-table-shell .quotation-editable-table tbody tr.is-drop-before td {
  box-shadow: inset 0 3px 0 #0f72c9;
}

.quotation-cockpit .quotation-item-table-shell .quotation-editable-table tbody tr.is-drop-after td {
  box-shadow: inset 0 -3px 0 #0f72c9;
}

.quotation-cockpit .quotation-item-table-shell .quotation-editable-table .first-column {
  background: var(--surface);
  box-shadow: 8px 0 14px rgba(15, 35, 70, 0.04);
}

.quotation-cockpit .quotation-item-table-shell .quotation-editable-table thead .first-column {
  z-index: 7;
  background: #f7fafe;
}

.quotation-cockpit .quotation-item-table-shell .quotation-editable-table tbody tr:hover .first-column {
  background: #f7fbff;
}

.quotation-cockpit .quotation-item-table-shell .quotation-editable-table .action-column {
  min-width: 96px;
  background: var(--surface);
  box-shadow: -10px 0 18px rgba(15, 35, 70, 0.07);
}

.quotation-cockpit .quotation-item-table-shell .quotation-editable-table thead .action-column {
  z-index: 7;
  background: #f7fafe;
}

.quotation-cockpit .quotation-item-table-shell .quotation-editable-table tbody tr:hover .action-column {
  background: #f7fbff;
}

.quotation-cockpit .quotation-item-table-shell .quotation-editable-table tbody tr.is-drop-before .first-column {
  box-shadow:
    inset 0 3px 0 #0f72c9,
    8px 0 14px rgba(15, 35, 70, 0.04);
}

.quotation-cockpit .quotation-item-table-shell .quotation-editable-table tbody tr.is-drop-after .first-column {
  box-shadow:
    inset 0 -3px 0 #0f72c9,
    8px 0 14px rgba(15, 35, 70, 0.04);
}

.quotation-cockpit .quotation-item-table-shell .quotation-editable-table tbody tr.is-drop-before .action-column {
  box-shadow:
    inset 0 3px 0 #0f72c9,
    -10px 0 18px rgba(15, 35, 70, 0.07);
}

.quotation-cockpit .quotation-item-table-shell .quotation-editable-table tbody tr.is-drop-after .action-column {
  box-shadow:
    inset 0 -3px 0 #0f72c9,
    -10px 0 18px rgba(15, 35, 70, 0.07);
}

.quotation-cockpit .quotation-item-table-shell .quotation-editable-table select,
.quotation-cockpit .quotation-item-table-shell .quotation-editable-table input {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.quotation-cockpit .quotation-item-table-shell .quotation-editable-table tbody td:not(.first-column) > .quotation-table-input,
.quotation-cockpit .quotation-item-table-shell .quotation-editable-table tbody td:not(.first-column) > .quotation-table-select {
  margin-top: 0;
}

.quotation-cockpit .quotation-table-input--number,
.quotation-cockpit .quotation-table-input--unit {
  text-align: left;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.quotation-cockpit .quotation-item-table-shell .quotation-table-input {
  min-height: 38px;
  border-radius: 8px;
  background: #fbfdff;
  font-size: 13px;
}

.quotation-cockpit .quotation-table-input--brand,
.quotation-cockpit .quotation-table-input--remark {
  min-width: 0;
}

.quotation-cockpit .quotation-table-input:hover {
  border-color: #bfd4ec;
  background: var(--surface);
}

.quotation-cockpit .quotation-table-select:hover {
  border-color: #bfd4ec;
  background-color: var(--surface);
}

.quotation-cockpit .quotation-table-input:focus {
  outline: none;
  border-color: var(--ck-blue, #0f72c9);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(15, 114, 201, 0.12);
}

.quotation-cockpit .quotation-table-select:focus {
  outline: none;
  border-color: var(--ck-blue, #0f72c9);
  background-color: var(--surface);
  box-shadow: 0 0 0 3px rgba(15, 114, 201, 0.12);
}

.quotation-cockpit .quotation-table-input:disabled {
  background: #f8fafc;
  color: #94a3b8;
}

.quotation-cockpit .quotation-table-select:disabled {
  background-color: #f8fafc;
  color: #94a3b8;
}

.quotation-cockpit .quotation-item-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.quotation-cockpit .quotation-item-row-actions .btn-icon {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.quotation-cockpit .quotation-item-row-actions .quotation-item-delete-action {
  border-color: #ffd0cc;
  background: #fff7f7;
  color: #d92d20;
  -webkit-text-fill-color: #d92d20;
}

.quotation-cockpit .quotation-item-row-actions .quotation-item-delete-action:hover,
.quotation-cockpit .quotation-item-row-actions .quotation-item-delete-action:focus-visible {
  border-color: #ff9f99;
  background: #fff0f0;
  color: #b42318;
  -webkit-text-fill-color: #b42318;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
}

.quotation-cockpit .quotation-item-row-actions .btn-icon svg {
  width: 15px;
  height: 15px;
  stroke-width: 2;
}
/* 按行品牌成本对比矩阵：左列清单行(主材/配件)，每个品牌一列，单元格内堆叠 毛利/成本/合价/系数/已选 */
.quotation-cockpit .quotation-cost-line-matrix { table-layout: fixed; width: 100%; min-width: 720px; }
.quotation-cockpit .quotation-cost-line-matrix th.first-column,
.quotation-cockpit .quotation-cost-line-matrix td.first-column { width: 34%; }
.quotation-cockpit .quotation-cost-line-matrix th:not(.first-column),
.quotation-cockpit .quotation-cost-line-matrix td:not(.first-column) { width: 22%; vertical-align: top; word-break: break-word; }
.quotation-cockpit .quotation-cost-line-matrix td.first-column strong { display: block; font-size: 13px; }
.quotation-cockpit .quotation-cost-line-matrix td.first-column small { display: block; font-size: 11px; color: var(--ck-text-soft, #6b7a8d); }
.quotation-cockpit .quotation-cost-matrix-cell { display: flex; flex-direction: column; gap: 1px; font-size: 12px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.quotation-cockpit .quotation-cost-matrix-cell small { font-size: 11px; color: var(--ck-text-soft, #6b7a8d); }
.quotation-cockpit .quotation-cost-matrix-pick { align-self: flex-start; margin-top: 3px; font-style: normal; font-size: 11px; color: var(--ink-inverse); background: var(--ck-blue, #0f72c9); border-radius: 3px; padding: 0 6px; }
.quotation-cockpit .quotation-cost-line-matrix td.is-selected-cost { background: var(--ck-blue-soft, #e8f1fb); }
/* 融合后「报价 / 成本明细」逐行的「品牌 / 系列」级联选择器(从成本库带出任意厂家/系列成本) */
.quotation-cockpit .quotation-brand-series-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.quotation-cockpit .quotation-brand-series-picker select {
  min-width: 120px;
  max-width: 160px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #d8e2ef;
  border-radius: 10px;
  background: #fbfdff;
  color: var(--ck-text, #16233a);
  font-size: 13px;
  font-weight: 600;
}
.quotation-cockpit .quotation-brand-series-picker select:focus {
  outline: none;
  border-color: var(--ck-blue, #0f72c9);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(15, 114, 201, 0.12);
}
.quotation-cockpit .quotation-brand-series-picker select:disabled { background: var(--ck-panel-soft, #f3f6fb); color: var(--ck-text-faint, #97a6b8); }
.quotation-cockpit .quotation-brand-series-picker .inline-btn {
  min-height: 34px;
  padding: 0 12px;
}
/* 逐行「比价」折叠：默认收起,展开看该行各品牌成本(100 行也不会过长) */
.quotation-cockpit .quotation-cost-row-compare > summary { cursor: pointer; font-size: 12px; color: var(--ck-blue, #0f72c9); list-style: none; }
.quotation-cockpit .quotation-cost-row-compare > summary::-webkit-details-marker { display: none; }
.quotation-cockpit .quotation-cost-row-compare-grid { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.quotation-cockpit .quotation-cost-row-compare-grid > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 3px 6px;
  border: 1px solid var(--ck-line, #e3e9f1);
  border-radius: 5px;
  font-size: 11px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.quotation-cockpit .quotation-cost-row-compare-grid > div.is-selected-cost { background: var(--ck-blue-soft, #e8f1fb); border-color: var(--ck-blue, #0f72c9); }
.quotation-cockpit .quotation-cost-row-compare-grid > div strong { font-size: 12px; }
.quotation-cockpit .quotation-cost-row-compare-grid > div small { color: var(--ck-text-soft, #6b7a8d); }
/* 取价基准·只读一行(成本数据库 + 铜价 + 铝价 + 来源) */
.quotation-cockpit .quotation-price-basis-row { display: flex; flex-wrap: wrap; gap: 16px; }
.quotation-cockpit .quotation-price-basis-row article { flex: 1 1 150px; display: flex; flex-direction: column; gap: 2px; }
.quotation-cockpit .quotation-price-basis-row article span { font-size: 12px; color: var(--ck-text-soft, #6b7a8d); }
.quotation-cockpit .quotation-price-basis-row article strong { font-size: 15px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--ck-text, #16233a); }
.quotation-cockpit .quotation-price-basis-row article small { font-size: 11px; color: var(--ck-text-faint, #97a6b8); }
.quotation-cockpit .quotation-price-basis-row article.quotation-basis-db { flex: 2 1 240px; }
.quotation-cockpit .quotation-basis-db-select {
  margin-top: 1px;
  padding: 5px 8px;
  border: 1px solid var(--ck-line-strong, #c6d2e0);
  border-radius: 5px;
  background: var(--ck-panel, #fff);
  color: var(--ck-text, #16233a);
  font-size: 13px;
  font-weight: 700;
  max-width: 100%;
}
.quotation-cockpit .quotation-basis-db-select:focus { outline: none; border-color: var(--ck-blue, #0f72c9); }
/* 审批对象：清楚标出正在/已审批的是哪个版本、金额、毛利、送审时间 */
.quotation-cockpit .quotation-approval-target {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.quotation-cockpit .quotation-approval-target > div {
  min-width: 104px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, currentColor 16%, var(--ck-line));
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.72);
}
.quotation-cockpit .quotation-approval-target dt {
  font-size: 11px;
  font-weight: 700;
  color: var(--ck-text-soft, #6b7a8d);
}
.quotation-cockpit .quotation-approval-target dd {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--ck-text, #16233a);
  white-space: nowrap;
}
/* 版本对比·版本类型徽章：草稿(蓝)/送审稿(琥珀)/正式版本(绿) */
.quotation-cockpit .quotation-version-kind {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  border: 1px solid var(--ck-line-strong, #c6d2e0);
}
.quotation-cockpit .quotation-version-kind.is-official { color: var(--ck-green, #138a5c); background: var(--ck-green-soft, #e4f4ec); border-color: rgba(19, 138, 92, 0.4); }
.quotation-cockpit .quotation-version-kind.is-candidate { color: var(--ck-amber, #c9760a); background: var(--ck-amber-soft, #fbf0dd); border-color: rgba(201, 118, 10, 0.4); }
.quotation-cockpit .quotation-version-kind.is-draft { color: var(--ck-blue, #0f72c9); background: var(--ck-blue-soft, #e7f1fb); border-color: rgba(15, 114, 201, 0.4); }
/* 审批·提交成熟度面板：与驾驶舱主题统一（白底/细线/锐角/纯色，去掉蓝绿渐变和厚圆角），不再突兀 */
.quotation-cockpit .quotation-readiness-panel {
  border: 1px solid var(--ck-line, #e2e8f1);
  border-radius: 6px;
  background: var(--ck-panel-2, #f5f8fc);
}
.quotation-cockpit .quotation-readiness-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 18px 18px;
}
.quotation-cockpit .quotation-readiness-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.quotation-cockpit .quotation-readiness-summary {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}
.quotation-cockpit .quotation-readiness-summary > span {
  color: var(--ck-text-dim, #6b7a8d);
  font-size: 12px;
  font-weight: 700;
}
.quotation-cockpit .quotation-readiness-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.quotation-cockpit .quotation-readiness-title-row strong {
  color: var(--ck-text, #16233a);
  font-size: 28px;
  line-height: 1.1;
}
.quotation-cockpit .quotation-readiness-summary small {
  color: var(--ck-text-soft, #6b7a8d);
  font-size: 13px;
}
.quotation-cockpit .quotation-readiness-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}
.quotation-cockpit .quotation-readiness-pill.is-ready {
  background: #ecfdf5;
  color: #047857;
}
.quotation-cockpit .quotation-readiness-pill.is-warning {
  background: #fff7ed;
  color: #c2410c;
}
.quotation-cockpit .quotation-readiness-pill.is-blocked {
  background: #fef2f2;
  color: #dc2626;
}
.quotation-cockpit .quotation-readiness-score {
  display: grid;
  justify-items: end;
  grid-gap: 4px;
  gap: 4px;
  min-width: 120px;
}
.quotation-cockpit .quotation-readiness-side-actions {
  display: grid;
  flex: none;
  justify-items: end;
  grid-gap: 8px;
  gap: 8px;
}
.quotation-cockpit .quotation-readiness-side-actions .btn {
  white-space: nowrap;
}
.quotation-cockpit .quotation-readiness-score strong {
  color: var(--ck-text, #16233a);
  font-size: 30px;
  line-height: 1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.quotation-cockpit .quotation-readiness-score span {
  color: var(--ck-text-soft, #6b7a8d);
  font-size: 13px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.quotation-cockpit .quotation-readiness-panel.is-blocked { border-color: rgba(210, 59, 59, 0.4); background: var(--ck-panel-2, #f5f8fc); }
.quotation-cockpit .quotation-readiness-panel.is-warning { border-color: rgba(201, 118, 10, 0.35); background: var(--ck-panel-2, #f5f8fc); }
.quotation-cockpit .quotation-readiness-panel.is-ready { border-color: rgba(15, 114, 201, 0.2); }
.quotation-cockpit .quotation-readiness-meter { height: 6px; background: var(--ck-line, #e2e8f1); border-radius: 3px; }
.quotation-cockpit .quotation-readiness-meter i { background: var(--ck-blue, #0f72c9); border-radius: 3px; }
.quotation-cockpit .quotation-readiness-panel.is-blocked .quotation-readiness-meter i { background: var(--ck-red, #d23b3b); }
.quotation-cockpit .quotation-readiness-panel.is-warning .quotation-readiness-meter i { background: var(--ck-amber, #c9760a); }
.quotation-cockpit .quotation-readiness-facts > div,
.quotation-cockpit .quotation-check-card {
  border: 1px solid var(--ck-line, #e2e8f1);
  border-radius: 6px;
  background: var(--ck-panel, #fff);
}
.quotation-cockpit .quotation-readiness-facts > div {
  padding: 12px 14px;
}
.quotation-cockpit .quotation-readiness-facts dt {
  color: var(--ck-text-dim, #6b7a8d);
  font-size: 12px;
  font-weight: 700;
}
.quotation-cockpit .quotation-readiness-facts dd {
  margin: 6px 0 0;
  color: var(--ck-text, #16233a);
  font-size: 15px;
  font-weight: 700;
}
.quotation-cockpit .quotation-check-card.is-blocking { border-color: rgba(210, 59, 59, 0.4); background: var(--ck-panel, #fff); }
.quotation-cockpit .quotation-check-card.is-warning { border-color: rgba(201, 118, 10, 0.35); background: var(--ck-panel, #fff); }
/* 卡片用 flex 换行 + 限定单卡宽度：数量少（甚至 1 张）也不会被拉满一整行，多张则自然铺排 */
.quotation-cockpit .quotation-readiness-facts,
.quotation-cockpit .quotation-check-grid,
.quotation-cockpit .quotation-risk-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.quotation-cockpit .quotation-readiness-sections {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}
.quotation-cockpit .quotation-readiness-section {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}
.quotation-cockpit .quotation-readiness-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.quotation-cockpit .quotation-readiness-section-head strong {
  color: var(--ck-text, #16233a);
  font-size: 15px;
}
.quotation-cockpit .quotation-readiness-section-head span {
  color: var(--ck-text-soft, #6b7a8d);
  font-size: 12px;
  font-weight: 700;
}
.quotation-cockpit .quotation-check-card,
.quotation-cockpit .quotation-risk-card {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  padding: 14px 16px;
}
.quotation-cockpit .quotation-check-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.quotation-cockpit .quotation-check-card-head span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}
.quotation-cockpit .quotation-check-card.is-blocking .quotation-check-card-head span,
.quotation-cockpit .quotation-risk-card.is-blocking .quotation-check-card-head span {
  background: #fef2f2;
  color: #dc2626;
}
.quotation-cockpit .quotation-check-card.is-warning .quotation-check-card-head span,
.quotation-cockpit .quotation-risk-card.is-warning .quotation-check-card-head span {
  background: #fff7ed;
  color: #c2410c;
}
.quotation-cockpit .quotation-check-card-head strong {
  color: var(--ck-text, #16233a);
  font-size: 15px;
}
.quotation-cockpit .quotation-check-card small,
.quotation-cockpit .quotation-risk-card small,
.quotation-cockpit .quotation-risk-empty {
  color: var(--ck-text-soft, #6b7a8d);
  font-size: 13px;
  line-height: 1.6;
}
.quotation-cockpit .quotation-risk-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}
.quotation-cockpit .quotation-risk-card {
  border: 1px solid var(--ck-line, #e2e8f1);
  border-radius: 6px;
  background: var(--surface);
}
.quotation-cockpit .quotation-risk-card.is-blocking {
  border-color: rgba(210, 59, 59, 0.35);
}
.quotation-cockpit .quotation-risk-card.is-warning {
  border-color: rgba(201, 118, 10, 0.3);
}
.quotation-cockpit .quotation-readiness-facts > div,
.quotation-cockpit .quotation-check-card,
.quotation-cockpit .quotation-risk-pill {
  flex: 1 1 200px;
  max-width: 460px;
}
/* 报价页·单列报价清单(逐行成本/报价/系数/毛利;母线行报价系数可编辑) */
.quotation-cockpit .quotation-quote-list-table td.first-column { vertical-align: top; }
.quotation-cockpit .quotation-quote-ops-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 12px 0 14px;
  padding: 12px 14px;
  border: 1px solid #e5edf7;
  border-radius: 12px;
  background: #f8fbff;
}

.quotation-cockpit .quotation-quote-ops-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: #506176;
  font-size: 13px;
}

.quotation-cockpit .quotation-quote-ops-summary strong {
  color: #16233a;
  font-size: 16px;
}

.quotation-cockpit .quotation-quote-ops-flag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff7ed;
  color: #c2410c;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.quotation-cockpit .quotation-quote-ops-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.quotation-cockpit .quotation-quote-ops-actions .btn {
  border-color: #d8e2ef;
  background: var(--surface);
  color: #35506f;
}

.quotation-cockpit .quotation-quote-ops-actions .btn:hover:not(:disabled) {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #0f72c9;
}

.quotation-cockpit .quotation-quote-ops-actions .btn.is-active {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #0f72c9;
}

.quotation-cockpit .quotation-horizontal-table {
  overflow: auto;
  border: 1px solid #e5edf7;
  border-radius: 16px;
  background: var(--surface);
}

.quotation-cockpit .quotation-quote-list-table {
  min-width: 1280px;
}

.quotation-cockpit .quotation-quote-list-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f6f9fd;
  color: #506176;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.quotation-cockpit .quotation-quote-list-table th,
.quotation-cockpit .quotation-quote-list-table td {
  border-color: #e5edf7;
}

.quotation-cockpit .quotation-quote-list-table tbody tr {
  position: relative;
}

.quotation-cockpit .quotation-quote-list-table tbody tr:hover td {
  background: #f8fbff;
}

.quotation-cockpit .quotation-quote-list-table tbody tr.is-editing td {
  background: #f8fbff;
}

.quotation-cockpit .quotation-quote-list-table tbody tr.is-editing td.first-column {
  box-shadow: inset 3px 0 0 #0f72c9;
}

.quotation-cockpit .quotation-quote-list-table tbody tr.is-risk-row td.first-column {
  box-shadow:
    inset 3px 0 0 rgba(220, 38, 38, 0.75),
    10px 0 14px rgba(15, 23, 42, 0.05);
}

.quotation-cockpit .quotation-quote-list-table tbody tr:hover td.first-column,
.quotation-cockpit .quotation-quote-list-table tbody tr:hover td.quotation-quote-compare-sticky,
.quotation-cockpit .quotation-quote-list-table tbody tr.is-editing td.first-column,
.quotation-cockpit .quotation-quote-list-table tbody tr.is-editing td.quotation-quote-compare-sticky {
  background: #f8fbff;
}

.quotation-cockpit .quotation-quote-list-table th.first-column,
.quotation-cockpit .quotation-quote-list-table td.first-column {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: 10px 0 14px rgba(15, 23, 42, 0.05);
  min-width: 280px;
}

.quotation-cockpit .quotation-quote-list-table thead th.first-column {
  z-index: 4;
  background: #f6f9fd;
  text-align: left;
}

.quotation-cockpit .quotation-quote-compare-sticky {
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--surface);
  box-shadow: -10px 0 14px rgba(15, 23, 42, 0.05);
  white-space: nowrap;
  min-width: 112px;
}

.quotation-cockpit .quotation-quote-list-table thead .quotation-quote-compare-sticky {
  z-index: 4;
  background: #f6f9fd;
}

.quotation-cockpit .quotation-quote-list-table td {
  min-height: 72px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.quotation-cockpit .quotation-quote-list-table .quotation-quote-col-qty {
  min-width: 104px;
}

.quotation-cockpit .quotation-quote-list-table .quotation-quote-col-brand,
.quotation-cockpit .quotation-quote-list-table .quotation-quote-col-series {
  min-width: 160px;
}

.quotation-cockpit .quotation-quote-list-table .quotation-quote-col-cost,
.quotation-cockpit .quotation-quote-list-table .quotation-quote-col-unit-cost,
.quotation-cockpit .quotation-quote-list-table .quotation-quote-col-unit-price,
.quotation-cockpit .quotation-quote-list-table .quotation-quote-col-amount {
  min-width: 132px;
}

.quotation-cockpit .quotation-quote-list-table .quotation-quote-col-coeff {
  min-width: 118px;
}

.quotation-cockpit .quotation-quote-list-table .quotation-quote-col-margin {
  min-width: 148px;
}

.quotation-cockpit .quotation-quote-list-table td.numeric-cell,
.quotation-cockpit .quotation-quote-list-table th.numeric-cell {
  text-align: center;
}

.quotation-cockpit .quotation-quote-list-table td.numeric-cell {
  white-space: nowrap;
}

.quotation-cockpit .quotation-quote-list-table td:not(.first-column):not(.quotation-quote-compare-sticky) {
  text-align: center;
}

.quotation-cockpit .quotation-quote-select {
  width: 100%;
  min-width: 132px;
  min-height: 36px;
  border: 1px solid #d8e2ef;
  border-radius: 8px;
  background: #fbfdff;
  padding: 0 10px;
  color: #16233a;
  font-size: 13px;
}

.quotation-cockpit .quotation-quote-select:focus {
  outline: none;
  border-color: #0f72c9;
  box-shadow: 0 0 0 3px rgba(15, 114, 201, 0.12);
  background: var(--surface);
}

.quotation-cockpit .quotation-quote-select:disabled {
  background: #f8fafc;
  color: #94a3b8;
}

.quotation-cockpit .quotation-quote-line-cell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-gap: 10px;
  gap: 10px;
  align-items: start;
}

.quotation-cockpit .quotation-quote-line-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eff6ff;
  color: var(--ck-blue, #0f72c9);
  font-size: 13px;
  font-weight: 800;
}

.quotation-cockpit .quotation-quote-line-body {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  min-width: 0;
}

.quotation-cockpit .quotation-quote-list-table td.first-column strong {
  display: -webkit-box;
  font-size: 15px;
  line-height: 1.45;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.quotation-cockpit .quotation-quote-list-table td.first-column small {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  padding: 0 10px;
  border-radius: 999px;
  background: #f8fafc;
  color: var(--ck-text-soft, #6b7a8d);
  font-size: 12px;
}

.quotation-cockpit .quotation-quote-numeric,
.quotation-cockpit .quotation-quote-money,
.quotation-cockpit .quotation-quote-percent {
  display: inline-block;
  white-space: nowrap;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: #16233a;
}

.quotation-cockpit .quotation-quote-money.is-strong {
  font-weight: 700;
}

.quotation-cockpit .quotation-quote-list-table td {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

.quotation-cockpit .quotation-quote-list-table .quotation-quote-list-coeff {
  width: 96px;
  min-height: 36px;
  border: 1px solid #d8e2ef;
  border-radius: 10px;
  padding: 0 10px;
  background: #fbfdff;
  text-align: center;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: #0f172a;
}

.quotation-cockpit .quotation-quote-list-table .quotation-quote-list-coeff:focus {
  outline: none;
  border-color: var(--ck-blue, #0f72c9);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(15, 114, 201, 0.12);
}

.quotation-cockpit .quotation-quote-list-table .quotation-cost-missing-hint {
  display: block;
  font-size: 0.68em;
  line-height: 1.3;
  color: var(--ink-3, #94a3b8);
  white-space: nowrap;
  cursor: help;
}

.quotation-cockpit .quotation-project-fee-share {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  justify-items: center;
  min-width: 116px;
}

.quotation-cockpit .quotation-project-fee-share strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.quotation-cockpit .quotation-project-fee-share span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.quotation-cockpit .quotation-quote-list-table .quotation-quote-list-amount-input {
  width: 118px;
  min-height: 36px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 0 10px;
  background: var(--surface-soft);
  color: var(--ink);
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.quotation-cockpit .quotation-quote-list-table .quotation-quote-list-amount-input:focus {
  outline: none;
  border-color: var(--ck-blue, #0f72c9);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(15, 114, 201, 0.12);
}

.quotation-cockpit .quotation-quote-list-table tr.is-bundle-main td.first-column {
  box-shadow:
    inset 3px 0 0 rgba(15, 114, 201, 0.55),
    10px 0 14px rgba(15, 23, 42, 0.05);
}
.quotation-cockpit .quotation-quote-list-table td.first-column .inline-btn { margin-top: 8px; }
.quotation-cockpit .quotation-margin-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.quotation-cockpit .quotation-margin-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.quotation-cockpit .quotation-margin-pill.is-normal {
  background: #ecfdf5;
  color: #047857;
}

.quotation-cockpit .quotation-margin-pill.is-low {
  background: #fff7ed;
  color: #c2410c;
}

.quotation-cockpit .quotation-margin-pill.is-risk {
  background: #fef2f2;
  color: #dc2626;
}

.quotation-cockpit .quotation-compare-toggle {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #0f72c9;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.quotation-cockpit .quotation-compare-toggle:hover {
  background: #eff6ff;
}

.quotation-cockpit .quotation-compare-toggle:focus-visible {
  outline: none;
  border-color: #93c5fd;
  background: #eff6ff;
  box-shadow: 0 0 0 3px rgba(15, 114, 201, 0.12);
}

.quotation-cockpit .quotation-quote-list-table tbody tr.is-compare-expanded td.quotation-quote-compare-sticky {
  background: #eff6ff;
}

.quotation-cockpit .quotation-horizontal-table.is-compare-open .quotation-quote-compare-sticky {
  position: static;
  right: auto;
  box-shadow: none;
}

.quotation-cockpit .quotation-quote-compare-inline-row td {
  position: relative;
  z-index: 5;
  padding: 0 14px 14px;
  border-top: 0;
  background: var(--surface);
}

.quotation-cockpit .quotation-compare-toggle.is-active {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #0f72c9;
}

.quotation-cockpit .quotation-quote-compare-panel {
  position: relative;
  z-index: 6;
  margin: 0;
  border: 1px solid #dbe7f4;
  border-radius: 16px;
  background: #f8fbff;
  overflow: hidden;
}

.quotation-cockpit .quotation-quote-compare-panel-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid #e5edf7;
  background: #f3f8fe;
}

.quotation-cockpit .quotation-quote-compare-panel-head .btn {
  flex: none;
}

.quotation-cockpit .quotation-quote-compare-panel-head > div {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  min-width: 0;
}

.quotation-cockpit .quotation-quote-compare-panel-head strong {
  color: #16233a;
  font-size: 15px;
}

.quotation-cockpit .quotation-quote-compare-panel-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.quotation-cockpit .quotation-quote-compare-panel-name {
  color: #35506f;
  font-size: 13px;
  font-weight: 600;
}

.quotation-cockpit .quotation-quote-compare-panel-spec {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--surface);
  color: #6b7a8d;
  font-size: 12px;
  font-style: normal;
}

.quotation-cockpit .quotation-quote-compare-detail {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border: 1px solid #dbe7f4;
  border-radius: 0;
  background: #f7fbff;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
}

.quotation-cockpit .quotation-quote-compare-detail-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  table-layout: fixed;
}

.quotation-cockpit .quotation-quote-compare-detail-table th,
.quotation-cockpit .quotation-quote-compare-detail-table td {
  padding: 12px 16px;
  border-top: 1px solid #e5edf7;
  font-size: 13px;
  color: #16233a;
  white-space: nowrap;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.quotation-cockpit .quotation-quote-compare-detail-table thead th {
  border-top: 0;
  background: #edf4fb;
  color: #506176;
  font-size: 12px;
  font-weight: 700;
}

.quotation-cockpit .quotation-quote-compare-detail-table th:first-child,
.quotation-cockpit .quotation-quote-compare-detail-table td:first-child {
  width: 24%;
  text-align: left;
}

.quotation-cockpit .quotation-quote-compare-detail-table th:nth-child(2),
.quotation-cockpit .quotation-quote-compare-detail-table td:nth-child(2),
.quotation-cockpit .quotation-quote-compare-detail-table th:nth-child(3),
.quotation-cockpit .quotation-quote-compare-detail-table td:nth-child(3),
.quotation-cockpit .quotation-quote-compare-detail-table th:nth-child(4),
.quotation-cockpit .quotation-quote-compare-detail-table td:nth-child(4),
.quotation-cockpit .quotation-quote-compare-detail-table th:nth-child(5),
.quotation-cockpit .quotation-quote-compare-detail-table td:nth-child(5),
.quotation-cockpit .quotation-quote-compare-detail-table th:nth-child(6),
.quotation-cockpit .quotation-quote-compare-detail-table td:nth-child(6) {
  width: 15.2%;
  text-align: center;
}

.quotation-cockpit .quotation-quote-compare-detail-table tbody tr.is-selected-cost {
  background: #eff6ff;
}

.quotation-cockpit .quotation-quote-compare-detail-table td strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.quotation-cockpit .quotation-quote-batch-modal {
  max-width: 560px;
}

.quotation-cockpit .quotation-quote-batch-form {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.quotation-cockpit .quotation-quote-batch-form label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.quotation-cockpit .quotation-quote-batch-form span {
  color: #506176;
  font-size: 13px;
  font-weight: 700;
}

.quotation-cockpit .quotation-quote-batch-form input,
.quotation-cockpit .quotation-quote-batch-form select {
  min-height: 38px;
  border: 1px solid #d8e2ef;
  border-radius: 10px;
  background: #fbfdff;
  padding: 0 12px;
}

.quotation-cockpit .quotation-quote-batch-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}
/* 报价系数(单价÷电流)内联可编辑：改系数即反推报价单价 */
.quotation-cockpit .quotation-quote-coefficient { display: flex; flex-direction: column; gap: 1px; margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--ck-line, #d8dee6); }
.quotation-cockpit .quotation-quote-coefficient > span { font-size: 11px; font-weight: 500; color: var(--ck-blue, #0f72c9); }
.quotation-cockpit .quotation-quote-coefficient > small { font-size: 10px; line-height: 1.3; color: var(--ck-text-soft, #6b7a8d); }
.quotation-cockpit .quotation-merge-select-list { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.quotation-cockpit .quotation-merge-select-list li { padding: 5px 8px; border-radius: 4px; border-bottom: 1px solid var(--ck-line-soft, #edf1f6); }
.quotation-cockpit .quotation-merge-select-list li.is-checked { background: var(--ck-blue-soft, #e8f1fb); }
/* 表格化的合并选择行：勾选 | 名称+规格 | 数量 | 单价 | 金额 | 归并标签，与「清单」口径一致便于核对 */
.quotation-cockpit .quotation-merge-select-list label,
.quotation-cockpit .quotation-merge-select-head {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 78px 104px 116px 80px;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
}
.quotation-cockpit .quotation-merge-select-list label { cursor: pointer; }
.quotation-cockpit .quotation-merge-select-head {
  padding: 2px 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ck-text-faint, #97a6b8);
  border-bottom: 1px solid var(--ck-line, #d8dee6);
}
.quotation-cockpit .quotation-merge-select-head .quotation-merge-select-cell-main { grid-column: 1 / span 2; }
.quotation-cockpit .quotation-merge-select-cell-main { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.quotation-cockpit .quotation-merge-select-cell-main strong { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quotation-cockpit .quotation-merge-select-cell-main small { font-size: 11px; color: var(--ck-text-soft, #6b7a8d); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quotation-cockpit .quotation-merge-select-cell-num { text-align: right; font-size: 12px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--ck-text, #243245); }
.quotation-cockpit .quotation-merge-select-cell-role { font-style: normal; text-align: right; font-size: 12px; color: var(--ck-blue, #0f72c9); }
.quotation-cockpit .quotation-merge-select-list li.is-disabled { opacity: 0.55; }
.quotation-cockpit .quotation-merge-select-list li.is-disabled label { cursor: not-allowed; }
.quotation-cockpit .quotation-merge-select-list li.is-disabled .quotation-merge-select-cell-role { color: var(--ck-text-faint, #97a6b8); }
.quotation-cockpit .quotation-merge-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.quotation-cockpit .quotation-merge-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }

/* P1 真折叠：非当前阶段收成一行纯标题栏（用 data-stage-title 经 ::before 渲染，
   隐藏全部内部内容，与内部结构无关，绝不出现半截标题/按钮），点开展开。 */
.quotation-detail-flow[data-view="flow"] [data-flow-fold="done"] {
  position: relative;
  height: 48px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
}
.quotation-detail-flow[data-view="flow"] [data-flow-fold="done"] > * {
  display: none;
}
.quotation-detail-flow[data-view="flow"] [data-flow-fold="done"]::before {
  content: attr(data-stage-title);
  position: absolute;
  left: 16px;
  top: 0;
  line-height: 48px;
  font-weight: 600;
  color: var(--ck-ink, #1f2937);
}
.quotation-detail-flow[data-view="flow"] [data-flow-fold="done"]::after {
  content: "▾ 点开查看";
  position: absolute;
  right: 16px;
  top: 0;
  line-height: 48px;
  font-size: 12px;
  color: var(--ck-blue, #0f72c9);
  pointer-events: none;
}
.quotation-detail-flow[data-view="flow"] [data-flow-fold="done"]:hover {
  background: var(--ck-blue-soft, #f0f6fd);
}

/* 铜铝价波动重报提醒 */
.quotation-cockpit .quotation-price-alert {
  border: 1px solid #f0c36d;
  background: #fff8e6;
  border-radius: 6px;
  padding: 12px 14px;
  order: -1; /* flow 单页里始终置顶 */
}
.quotation-cockpit .quotation-price-alert-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.quotation-cockpit .quotation-price-alert strong { color: #9a6700; }
.quotation-cockpit .quotation-price-alert ul { margin: 6px 0; padding-left: 18px; }
.quotation-cockpit .quotation-price-alert li { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.quotation-cockpit .quotation-price-alert small { color: #6b7280; }

/* 驳回提醒：被打回时置顶，带回驳回原因与审批人 */
.quotation-cockpit .quotation-reject-alert {
  border: 1px solid #f0b4b4;
  background: #fdf1f1;
  border-radius: 6px;
  padding: 12px 14px;
  order: -1; /* 始终置顶 */
}
.quotation-cockpit .quotation-reject-alert-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.quotation-cockpit .quotation-reject-alert-head strong { color: #c0392b; }
.quotation-cockpit .quotation-reject-alert-head small { color: #6b7280; }
.quotation-cockpit .quotation-reject-alert-reason {
  margin: 8px 0 4px;
  padding: 8px 10px;
  background: var(--surface);
  border: 1px solid #f3d4d4;
  border-radius: 4px;
  color: #3a3f4b;
  white-space: pre-wrap;
}
.quotation-cockpit .quotation-reject-alert > small { color: #6b7280; }

/* 审批状态条：状态驱动的单行 hero（绿=通过/蓝=审批中/红=驳回/灰=未提交） */
.quotation-cockpit .quotation-approval-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--ck-line);
  border-left-width: 3px;
  background: var(--ck-panel-2);
  border-radius: 6px;
}
.quotation-cockpit .quotation-approval-status-main {
  display: flex;
  align-items: center;
  gap: 10px;
}
.quotation-cockpit .quotation-approval-status-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 999px;
  background: currentColor;
}
.quotation-cockpit .quotation-approval-status strong { display: block; }
.quotation-cockpit .quotation-approval-status small { color: var(--ck-text-dim); }
.quotation-cockpit .quotation-approval-status.is-approved {
  border-left-color: var(--ck-green);
  background: var(--ck-green-soft);
}
.quotation-cockpit .quotation-approval-status.is-approved strong,
.quotation-cockpit .quotation-approval-status.is-approved .quotation-approval-status-dot { color: var(--ck-green); }
.quotation-cockpit .quotation-approval-status.is-pending {
  border-left-color: var(--ck-blue);
  background: var(--ck-blue-soft);
}
.quotation-cockpit .quotation-approval-status.is-pending strong,
.quotation-cockpit .quotation-approval-status.is-pending .quotation-approval-status-dot { color: var(--ck-blue); }
.quotation-cockpit .quotation-approval-status.is-rejected {
  border-left-color: var(--ck-red);
  background: var(--ck-red-soft);
}
.quotation-cockpit .quotation-approval-status.is-rejected strong,
.quotation-cockpit .quotation-approval-status.is-rejected .quotation-approval-status-dot { color: var(--ck-red); }
.quotation-cockpit .quotation-approval-status.is-draft strong,
.quotation-cockpit .quotation-approval-status.is-draft .quotation-approval-status-dot { color: var(--ck-text-dim); }

/* ============================================================
   审批段 · 精修（cockpit 内的 refined 执行，不引入异质风格）
   纵向节奏 + 一次编排的入场揭示 + 状态条仪表化深度 + 时间线成卡
   ============================================================ */
.quotation-cockpit .quotation-approval-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quotation-cockpit .quotation-approval-status {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(0, 1.8fr) auto;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--ck-line);
  border-left-width: 3px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
  overflow: hidden;
  background: var(--ck-panel, #fff);
}
.quotation-cockpit .quotation-approval-status::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, currentColor, transparent 72%);
  opacity: 0.18;
}
.quotation-cockpit .quotation-approval-status-main { gap: 10px; min-width: 0; }
.quotation-cockpit .quotation-approval-status strong {
  font-size: 14px;
  line-height: 1.25;
}
.quotation-cockpit .quotation-approval-status small {
  display: block;
  margin-top: 3px;
  color: var(--ck-text-dim);
  font-size: 12px;
  line-height: 1.45;
}

/* 状态点：发光环（10px + 柔环），审批中脉冲呼吸 */
.quotation-cockpit .quotation-approval-status-dot {
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
}

.quotation-cockpit .quotation-approval-status.is-approved {
  color: var(--ck-green);
  background: var(--surface);
}
.quotation-cockpit .quotation-approval-status.is-pending {
  color: var(--ck-blue);
  background: var(--surface);
}
.quotation-cockpit .quotation-approval-status.is-rejected {
  color: var(--ck-red);
  background: var(--surface);
}
.quotation-cockpit .quotation-approval-status.is-draft {
  color: var(--ck-text-dim);
  background: var(--surface);
  border-left-color: var(--ck-line-strong);
}

/* 时间线：报价审批里使用紧凑卡片式轨迹，不再堆多层标题与大留白。 */
.quotation-cockpit .quotation-approval-section .approval-progress-panel {
  background: var(--ck-panel);
  border: 1px solid var(--ck-line);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
  padding: 10px 12px;
}
.quotation-cockpit .quotation-approval-section .approval-progress-timeline {
  gap: 7px;
}

/* 次级动作：右对齐成排、去掉多余下边距 */
.quotation-cockpit .quotation-approval-section .quotation-closure-secondary {
  margin: 0;
  padding-top: 2px;
  justify-content: flex-end;
}

/* ============================================================
   成本报价工作台重构 · 摘要栏 + 左右布局 + 品牌抽屉 + 右侧风险面板
   ============================================================ */

.quotation-cockpit .quotation-cost-summary-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid var(--ck-line);
  border-left: 3px solid var(--ck-blue);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--ck-panel-2), var(--ck-panel));
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.06);
}
.quotation-cockpit .quotation-cost-summary-db {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 200px;
}
.quotation-cockpit .quotation-cost-summary-db > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--ck-text-dim);
}
.quotation-cockpit .quotation-cost-summary-db > strong {
  font-size: 13px;
  color: var(--ck-text);
}
.quotation-cockpit .quotation-cost-summary-db-select {
  max-width: 280px;
  padding: 5px 8px;
  border: 1px solid var(--ck-line-strong);
  border-radius: 5px;
  background: var(--ck-panel);
  color: var(--ck-text);
  font-size: 13px;
}
.quotation-cockpit .quotation-cost-summary-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  flex: 1 1 auto;
}
.quotation-cockpit .quotation-cost-summary-metrics > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-left: 14px;
  border-left: 1px solid var(--ck-line);
}
.quotation-cockpit .quotation-cost-summary-metrics dt {
  font-size: 11px;
  font-weight: 700;
  color: var(--ck-text-dim);
}
.quotation-cockpit .quotation-cost-summary-metrics dd {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--ck-text);
}
.quotation-cockpit .quotation-cost-summary-metrics > div.is-primary dd {
  color: var(--ck-blue);
  font-size: 18px;
}
.quotation-cockpit .quotation-cost-summary-metrics > div.is-risk dt,
.quotation-cockpit .quotation-cost-summary-metrics > div.is-risk dd {
  color: var(--ck-red);
}
.quotation-cockpit .quotation-cost-summary-plan {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-width: 190px;
}
.quotation-cockpit .quotation-cost-summary-plan label {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.quotation-cockpit .quotation-cost-summary-plan span {
  font-size: 11px;
  font-weight: 800;
  color: var(--ck-text-dim);
}
.quotation-cockpit .quotation-cost-summary-plan input {
  width: 104px;
  height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--ck-line-strong);
  border-radius: 6px;
  background: var(--ck-panel);
  color: var(--ck-text);
  font-size: 13px;
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.quotation-cockpit .quotation-cost-summary-plan input:focus {
  border-color: var(--ck-blue);
  box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.12);
  outline: none;
}
.quotation-cockpit .quotation-cost-summary-plan small {
  padding-bottom: 7px;
  color: var(--ck-text-dim);
  font-size: 11px;
  white-space: nowrap;
}
.quotation-cockpit .quotation-cost-summary-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* —— 主体左右布局：左 75% 报价/成本明细 · 右 25% 风险/版本 —— */
/* 单栏：成本/报价对比表占满整宽，审批检查与版本记录排到表格下方，不再做右侧侧栏
   （旧双栏 3fr+260px 把宽表挤到 ~75%，要横向拖动才看得全，且“成本”列会被滚出屏幕→看不到单项成本做分析）。 */
.quotation-cockpit .quotation-cost-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-gap: 16px;
  gap: 16px;
  align-items: start;
}
.quotation-cockpit .quotation-cost-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.quotation-cockpit .quotation-cost-aside {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* 跨品牌比较矩阵当成本阶段主对比视图：排到 cost-main 最前 */
.quotation-cockpit .quotation-cost-main > .quotation-cost-library-compare { order: -1; }
/* 旧「查看3家」行内对比列隐藏：已由矩阵替代，避免同页两套对比 */
.quotation-cockpit .quotation-quote-list-table .quotation-quote-col-compare { display: none; }
/* 矩阵单元格毛利着色：负毛利红、薄毛利(<8%)橙 */
.quotation-cockpit .quotation-brand-metric-margin.is-loss { color: #c0392b; font-weight: 700; }
.quotation-cockpit .quotation-brand-metric-margin.is-thin { color: #b9770e; font-weight: 700; }

/* ============ 跨品牌比较矩阵 · 视觉重做（紧凑卡片 + 紧致表格 + 数值右对齐） ============ */
/* —— 顶部品牌汇总卡片：一行一品牌的横向行卡，毛利为决策重点、操作靠右 —— */
.quotation-cockpit .quotation-compare-brand-grid { grid-template-columns: 1fr; gap: 8px; margin: 8px 0 14px; }
.quotation-cockpit .quotation-compare-brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--hairline);
  background: var(--surface);
  transition: border-color 0.15s ease, background 0.15s ease;
}
/* 身份：类型徽标(pill) + 品牌名(放大加粗) */
.quotation-cockpit .quotation-compare-brand > div:first-child {
  display: flex; align-items: baseline; gap: 8px; flex: 0 0 auto; min-width: 128px;
}
.quotation-cockpit .quotation-compare-brand > div:first-child span {
  margin: 0; font-size: 11px; font-weight: 700; color: var(--text-secondary);
  padding: 1px 8px; border-radius: 999px; background: var(--surface-sunk); white-space: nowrap;
}
.quotation-cockpit .quotation-compare-brand > div:first-child strong { margin: 0; font-size: 16px; font-weight: 800; }
/* 指标：成本/报价/毛利 横排，dl 撑开中间弹性区把右侧操作推到最右 */
.quotation-cockpit .quotation-compare-brand dl { display: flex; gap: 26px; margin: 0; flex: 1 1 auto; align-items: baseline; }
.quotation-cockpit .quotation-compare-brand dl > div { display: block; }
.quotation-cockpit .quotation-compare-brand dt { margin: 0; font-size: 10px; font-weight: 700; line-height: 1.2; color: var(--text-secondary); }
.quotation-cockpit .quotation-compare-brand dd { margin: 2px 0 0; font-size: 14px; font-weight: 700; line-height: 1.2; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--ink); }
/* 毛利 = 决策重点：放大 + 品牌主色 */
.quotation-cockpit .quotation-compare-brand .quotation-compare-brand-margin dt { color: var(--brand-600); }
.quotation-cockpit .quotation-compare-brand .quotation-compare-brand-margin dd { font-size: 22px; font-weight: 800; color: var(--brand-700); }
/* 报备状态 → pill，靠右 */
.quotation-cockpit .quotation-compare-brand > small {
  margin: 0; flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--text-secondary);
  padding: 2px 9px; border-radius: 999px; background: var(--surface-sunk); white-space: nowrap;
}
/* 操作：右侧 */
.quotation-cockpit .quotation-compare-brand .quotation-card-actions { margin: 0; gap: 8px; flex: 0 0 auto; align-items: center; }
.quotation-cockpit .quotation-compare-brand .quotation-card-actions .btn { min-height: 30px; padding: 5px 16px; font-size: 13px; }
.quotation-cockpit .quotation-compare-brand .quotation-action-note { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
/* 选中态(已选用)：品牌主色强调左条 + 浅底 + 徽标反白 */
.quotation-cockpit .quotation-compare-brand.is-selected {
  border-color: var(--brand-300);
  border-left-color: var(--brand-500);
  background: var(--brand-50);
}
.quotation-cockpit .quotation-compare-brand.is-selected > div:first-child span { background: var(--brand-600); color: #fff; }
.quotation-cockpit .quotation-compare-brand.is-selected .quotation-action-note { color: var(--brand-700); }
/* 建议方案：品牌色细左条提示 */
.quotation-cockpit .quotation-compare-brand.is-recommended { border-left-color: var(--brand-400); }
/* 需报备：琥珀(铜金)强调左条 + 报备 pill 着色 */
.quotation-cockpit .quotation-compare-brand.is-warning { border-left-color: var(--accent-400); }
.quotation-cockpit .quotation-compare-brand.is-warning > small { background: var(--accent-50); color: var(--accent-700); }

/* —— 矩阵表格：列更紧、品牌列分隔、数值右对齐 —— */
.quotation-cockpit .quotation-cost-compare-matrix { min-width: 880px; }
.quotation-cockpit .quotation-cost-compare-matrix th,
.quotation-cockpit .quotation-cost-compare-matrix td { padding: 8px 10px; }
.quotation-cockpit .quotation-cost-compare-matrix th:nth-child(2),
.quotation-cockpit .quotation-cost-compare-matrix td:nth-child(2) { min-width: 174px; }
.quotation-cockpit .quotation-cost-compare-matrix td:nth-child(2) strong { max-width: 168px; font-size: 13px; }
/* 品牌列：浅底+左分隔线，把"白底空列"和品牌列区分开 */
.quotation-cockpit .quotation-cost-compare-matrix th:nth-child(n+5),
.quotation-cockpit .quotation-cost-compare-matrix td:nth-child(n+5) { border-left: 1px solid var(--hairline, #e6ebf2); }
.quotation-cockpit .quotation-cost-compare-matrix td:nth-child(n+5) { background: var(--surface-sunk, #f7f9fc); }
.quotation-cockpit .quotation-cost-compare-matrix .is-selected-brand { background: var(--brand-50, #eaf2fe) !important; box-shadow: inset 2px 0 0 var(--brand-500, #2563eb); }
.quotation-cockpit .quotation-cost-compare-matrix tbody tr { border-bottom: 1px solid var(--hairline, #eef1f6); }

/* —— 单元格内容压缩：去掉"成本合价"冗余标签和成本库 SKU 行，只留 合价/单价·系数/毛利 —— */
.quotation-cockpit .quotation-brand-metric { gap: 1px; min-width: 118px; }
.quotation-cockpit .quotation-brand-metric > small:first-child { display: none; }   /* "成本合价" 冗余标签 */
.quotation-cockpit .quotation-brand-metric > small:last-child { display: none; }    /* 成本库 SKU 噪音行 */
.quotation-cockpit .quotation-brand-metric strong { font-size: 14px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.quotation-cockpit .quotation-brand-metric small { font-size: 10.5px; line-height: 1.3; }
.quotation-cockpit .quotation-brand-metric .quotation-brand-metric-coefficient { font-size: 11px; }
.quotation-cockpit .quotation-brand-metric .quotation-brand-metric-margin { font-size: 12px; margin-top: 1px; }

/* —— 报价输入框：完整可读、右对齐、与保存按钮齐平 —— */
.quotation-cockpit .quotation-simulation-price-editor { grid-template-columns: minmax(84px, 1fr) auto; gap: 6px; }
.quotation-cockpit .quotation-simulation-price-editor input { width: 100%; min-height: 30px; font-size: 13px; }
.quotation-cockpit .quotation-simulation-price-editor .btn { min-height: 30px; padding: 4px 10px; }
.quotation-cockpit .quotation-cost-compare-matrix td:nth-child(3) { min-width: 150px; }
.quotation-cockpit .quotation-cost-compare-matrix td:nth-child(4) { text-align: right; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 审批检查在前、版本记录在后（DOM 里版本记录先出现，用 order 调位） */
.quotation-cockpit .quotation-cost-aside .quotation-risk-panel { order: 1; }
.quotation-cockpit .quotation-cost-aside .quotation-compare-lab { order: 2; }

/* —— 品牌方案抽屉：默认只显示当前方案，点开才展开整单对比 —— */
.quotation-cockpit .quotation-brand-drawer {
  border: 1px solid var(--ck-line);
  border-radius: 6px;
  background: var(--ck-panel-2);
  margin-bottom: 12px;
}
.quotation-cockpit .quotation-brand-drawer > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}
.quotation-cockpit .quotation-brand-drawer > summary::-webkit-details-marker { display: none; }
.quotation-cockpit .quotation-brand-drawer-current {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.quotation-cockpit .quotation-brand-drawer-current span {
  font-size: 11px;
  font-weight: 700;
  color: var(--ck-text-dim);
}
.quotation-cockpit .quotation-brand-drawer-current strong {
  font-size: 15px;
  color: var(--ck-text);
}
.quotation-cockpit .quotation-brand-drawer-current small {
  font-size: 12px;
  color: var(--ck-text-faint);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.quotation-cockpit .quotation-brand-drawer-toggle {
  flex: 0 0 auto;
  padding: 5px 12px;
  border: 1px solid var(--ck-line-strong);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ck-blue);
  background: var(--ck-panel);
}
.quotation-cockpit .quotation-brand-drawer[open] > summary {
  border-bottom: 1px solid var(--ck-line);
}
.quotation-cockpit .quotation-brand-drawer .quotation-compare-brand-table {
  padding: 10px 14px 14px;
}

/* —— 右侧风险面板：清爽、清单式、可操作 —— */
.quotation-cockpit .quotation-risk-panel {
  padding: 14px 16px;
}
.quotation-cockpit .quotation-risk-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.quotation-cockpit .quotation-risk-panel-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.quotation-cockpit .quotation-risk-panel-title strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--ck-text);
}
.quotation-cockpit .quotation-risk-panel-title small {
  font-size: 11px;
  color: var(--ck-text-faint);
}
/* 状态药丸：替代厚重的 status-badge */
.quotation-cockpit .quotation-risk-pill {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.6;
  white-space: nowrap;
}
.quotation-cockpit .quotation-risk-pill.is-ok {
  color: var(--ck-green);
  background: var(--ck-green-soft);
}
.quotation-cockpit .quotation-risk-pill.is-warn {
  color: var(--ck-amber);
  background: var(--ck-amber-soft);
}
.quotation-cockpit .quotation-risk-pill.is-blocked {
  color: var(--ck-red);
  background: var(--ck-red-soft);
}

/* 清单：每条 = 图标 + 文本，blocked 红 / warn 琥珀 */
.quotation-cockpit .quotation-risk-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quotation-cockpit .quotation-risk-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--ck-panel-2);
  border-left: 3px solid var(--ck-line-strong);
}
.quotation-cockpit .quotation-risk-checklist li.is-blocked {
  background: var(--ck-red-soft);
  border-left-color: var(--ck-red);
}
.quotation-cockpit .quotation-risk-checklist li.is-warn {
  background: var(--ck-amber-soft);
  border-left-color: var(--ck-amber);
}
.quotation-cockpit .quotation-risk-checklist-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
  color: var(--ink-inverse);
}
.quotation-cockpit .quotation-risk-checklist li.is-blocked .quotation-risk-checklist-icon {
  background: var(--ck-red);
}
.quotation-cockpit .quotation-risk-checklist li.is-warn .quotation-risk-checklist-icon {
  background: var(--ck-amber);
}
.quotation-cockpit .quotation-risk-checklist-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.quotation-cockpit .quotation-risk-checklist-text strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--ck-text);
}
.quotation-cockpit .quotation-risk-checklist-text small {
  font-size: 12px;
  color: var(--ck-text-dim);
  line-height: 1.45;
}

/* 全通过状态 */
.quotation-cockpit .quotation-risk-allclear {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 6px;
  background: var(--ck-green-soft);
}
.quotation-cockpit .quotation-risk-allclear span {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ck-green);
  color: var(--ink-inverse);
  font-size: 13px;
  font-weight: 900;
}
.quotation-cockpit .quotation-risk-allclear p {
  margin: 0;
  font-size: 13px;
  color: var(--ck-green);
  font-weight: 600;
}
/* 已通过项弱化为一行小字 */
.quotation-cockpit .quotation-risk-passed {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--ck-text-faint);
  font-weight: 600;
}

.quotation-cockpit .quotation-risk-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--ck-line);
}
.quotation-cockpit .quotation-risk-panel-hint {
  font-size: 12px;
  color: var(--ck-amber);
  font-weight: 700;
}

/* 右侧版本记录折叠卡与面板视觉统一、收紧 */
.quotation-cockpit .quotation-cost-aside .quotation-compare-lab > summary {
  padding: 12px 14px;
}
.quotation-cockpit .quotation-cost-aside .quotation-compare-lab .module-title {
  font-size: 14px;
}

/* —— 核算依据区下沉为次级：弱化、与主表格区分 —— */
.quotation-cockpit .quotation-costing-secondary {
  margin-top: 4px;
}

/* ============================================================
   整体字号放大一档：表格 + 明细文本 + 右侧面板更易读
   （放在文件末尾，同特异度下覆盖前面的偏小字号）
   ============================================================ */
.quotation-cockpit .data-table th { font-size: 13px; }
.quotation-cockpit .data-table td { font-size: 14px; }
.quotation-cockpit .data-table td.numeric-cell strong { font-size: 15px; }
.quotation-cockpit .data-table td.numeric-cell span { font-size: 13px; }

/* 报价/成本明细表 */
.quotation-cockpit .quotation-quote-list-table td.first-column strong { font-size: 14px; }
.quotation-cockpit .quotation-quote-list-table td.first-column small { font-size: 12px; }
.quotation-cockpit .quotation-quote-coefficient > span { font-size: 12px; }
.quotation-cockpit .quotation-quote-coefficient > small { font-size: 11px; }
.quotation-cockpit .quotation-cost-row-compare > summary { font-size: 13px; }
.quotation-cockpit .quotation-cost-row-compare-grid > div strong { font-size: 13px; }
.quotation-cockpit .quotation-cost-row-compare-grid > div span,
.quotation-cockpit .quotation-cost-row-compare-grid > div small { font-size: 12px; }

/* 行级成本/品牌对比矩阵 */
.quotation-cockpit .quotation-cost-line-matrix td.first-column strong { font-size: 14px; }
.quotation-cockpit .quotation-cost-line-matrix td.first-column small { font-size: 12px; }
.quotation-cockpit .quotation-cost-matrix-cell { font-size: 13px; }
.quotation-cockpit .quotation-cost-matrix-cell small { font-size: 12px; }

/* 取价基准 / 审批对象等明细 */
.quotation-cockpit .quotation-price-basis-row article span { font-size: 13px; }
.quotation-cockpit .quotation-price-basis-row article strong { font-size: 16px; }
.quotation-cockpit .quotation-price-basis-row article small { font-size: 12px; }

/* 右侧风险清单 + 版本记录 */
.quotation-cockpit .quotation-risk-checklist-text strong { font-size: 14px; }
.quotation-cockpit .quotation-risk-checklist-text small { font-size: 13px; }
.quotation-cockpit .quotation-risk-panel-title small { font-size: 12px; }

/* 区块说明文字（muted-text）统一抬一档 */
.quotation-cockpit .muted-text { font-size: 13px; }

@media (max-width: 1180px) {
  .quotation-process-summary-grid--detail,
  .quotation-process-summary-grid--form,
  .quotation-cockpit .quotation-form-overview-grid {
    grid-template-columns: 1fr;
  }

  .quotation-cockpit .quotation-quote-ops-toolbar {
    align-items: flex-start;
  }

  .quotation-cockpit .quotation-quote-ops-actions {
    width: 100%;
  }

  .quotation-cockpit .quotation-readiness-head,
  .quotation-cockpit .quotation-readiness-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .quotation-cockpit .quotation-readiness-score {
    justify-items: start;
  }

  .quotation-cockpit .quotation-readiness-side-actions {
    justify-items: start;
  }
}

@media (max-width: 860px) {
  .quotation-cockpit .quotation-approval-status {
    grid-template-columns: 1fr;
  }

  .quotation-cockpit .quotation-approval-target > div {
    flex: 1 1 130px;
  }

  .quotation-cockpit .quotation-cost-summary-db,
  .quotation-cockpit .quotation-cost-summary-plan,
  .quotation-cockpit .quotation-cost-summary-actions {
    width: 100%;
  }

  .quotation-cockpit .quotation-cost-summary-plan {
    align-items: center;
  }

  .quotation-cockpit .quotation-cost-summary-actions {
    justify-content: flex-end;
  }

  .quotation-process-page-hero {
    height: auto;
    min-height: 132px;
    padding: 20px 22px;
  }

  .quotation-cockpit .quotation-step-form-aside {
    position: static;
  }

  .quotation-cockpit .quotation-edit-assist-metrics {
    grid-template-columns: 1fr;
  }

  .quotation-cockpit .quotation-quote-compare-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .quotation-cockpit .quotation-quote-compare-detail-table {
    min-width: 620px;
  }
}

/* —— 回访台账卡（QuotationFollowupPanel）：与报价方案卡同语言——hairline 卡 + sunk 行 +
 *    左 4px tone 色条 + 结果药丸。timeline 行：结果药丸(左) | 下一步/备注(中,弹性) | 下次/时间(右)。 */
.quotation-cockpit .quotation-followup-card {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}
.quotation-cockpit .quotation-followup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.quotation-cockpit .quotation-followup-title {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
}
.quotation-cockpit .quotation-followup-title strong {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
.quotation-cockpit .quotation-followup-title span {
  font-size: 12px;
  color: var(--text-secondary, var(--ink-2));
}
.quotation-cockpit .quotation-followup-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.quotation-cockpit .quotation-followup-stat {
  --chip-tone: var(--brand-500);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--chip-tone);
  background: color-mix(in srgb, var(--chip-tone) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--chip-tone) 26%, transparent);
}
.quotation-cockpit .quotation-followup-stat b {
  font-weight: 800;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.quotation-cockpit .quotation-followup-stat.tone-success { --chip-tone: var(--ui-color-success-ink, #1f9d6b); }
.quotation-cockpit .quotation-followup-stat.tone-danger { --chip-tone: var(--ui-color-danger-ink, #d04a3b); }
.quotation-cockpit .quotation-followup-stat.tone-warning { --chip-tone: var(--ui-color-warning-ink, #c98a16); }
.quotation-cockpit .quotation-followup-stat.tone-info { --chip-tone: var(--brand-500); }

.quotation-cockpit .quotation-followup-empty {
  margin: 0;
  padding: 16px;
  font-size: 13px;
  color: var(--text-secondary, var(--ink-2));
  background: var(--surface-sunk);
  border: 1px dashed var(--hairline);
  border-radius: 10px;
}
.quotation-cockpit .quotation-followup-error {
  margin: 0;
  font-size: 12px;
  color: var(--ui-color-danger-ink, #d04a3b);
}

.quotation-cockpit .quotation-followup-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}
.quotation-cockpit .quotation-followup-entry {
  --chip-tone: var(--brand-500);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px 10px 13px;
  background: var(--surface-sunk);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--chip-tone);
  border-radius: 10px;
}
.quotation-cockpit .quotation-followup-entry.tone-success { --chip-tone: var(--ui-color-success-ink, #1f9d6b); }
.quotation-cockpit .quotation-followup-entry.tone-danger { --chip-tone: var(--ui-color-danger-ink, #d04a3b); }
.quotation-cockpit .quotation-followup-entry.tone-warning { --chip-tone: var(--ui-color-warning-ink, #c98a16); }
.quotation-cockpit .quotation-followup-entry.tone-info { --chip-tone: var(--brand-500); }
.quotation-cockpit .quotation-followup-result {
  flex: 0 0 auto;
  align-self: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--chip-tone);
  white-space: nowrap;
}
.quotation-cockpit .quotation-followup-body {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-gap: 2px;
  gap: 2px;
}
.quotation-cockpit .quotation-followup-action {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.quotation-cockpit .quotation-followup-remark {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary, var(--ink-2));
  line-height: 1.4;
}
.quotation-cockpit .quotation-followup-meta {
  flex: 0 0 auto;
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  justify-items: end;
  text-align: right;
}
.quotation-cockpit .quotation-followup-next {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-700, #8a4a14);
  background: var(--accent-50, #fdf3e6);
  border-radius: 6px;
  padding: 1px 7px;
  white-space: nowrap;
}
.quotation-cockpit .quotation-followup-meta time {
  font-size: 11px;
  color: var(--ink-3);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.quotation-cockpit .quotation-followup-compose {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  border-radius: 10px;
}
.quotation-cockpit .quotation-followup-fields {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.quotation-cockpit .quotation-followup-fields label {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  flex: 0 0 auto;
}
.quotation-cockpit .quotation-followup-fields label.grow {
  flex: 1 1 180px;
  min-width: 160px;
}
.quotation-cockpit .quotation-followup-fields label > span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary, var(--ink-2));
}
.quotation-cockpit .quotation-followup-fields input,
.quotation-cockpit .quotation-followup-fields select {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.quotation-cockpit .quotation-followup-fields input:focus,
.quotation-cockpit .quotation-followup-fields select:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: var(--ui-focus-ring, 0 0 0 3px rgba(47, 107, 216, 0.18));
}
.quotation-cockpit .quotation-followup-compose > button {
  flex: 0 0 auto;
}

/* —— 报价跟进台账（QuotationFollowupBoardPage）：分段卡(标题 + 战绩小字) + 队列单元 ——
 * 不再单列 KPI 卡条(与分段 lane 重复)：分段 lane 本身 = 计数 + 筛选；逾期并入待回访 lane；
 * 战绩(本月中标/中标率)放卡头右侧小字，弱化。办理页≠看数页：突出队列、收掉冗余统计卡。 */
.quotation-cockpit .quotation-followup-board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.quotation-cockpit .quotation-followup-board-score {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12px;
  color: var(--text-secondary, var(--ink-2));
}
.quotation-cockpit .quotation-followup-board-score b {
  font-weight: 800;
  color: var(--ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.quotation-cockpit .quotation-task-lane small.is-overdue {
  color: var(--ui-color-danger-ink, #d04a3b);
  font-weight: 600;
}
.quotation-cockpit .quotation-followup-board-link {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--brand-600, #2356bb);
  font-size: 13px;
  font-weight: 700;
}
.quotation-cockpit .quotation-followup-board-link:hover {
  text-decoration: underline;
}
.quotation-cockpit .quotation-followup-board-status {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  justify-items: start;
}
.quotation-cockpit .quotation-followup-board-status small {
  font-size: 11px;
  color: var(--text-secondary, var(--ink-2));
}
.quotation-cockpit .quotation-followup-board-age {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary, var(--ink-2));
}
.quotation-cockpit .quotation-followup-board-overdue {
  color: var(--ui-color-danger-ink, #d04a3b);
  font-weight: 600;
}
.quotation-cockpit .quotation-followup-board-action {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
/* 「首次回访」提示：尚无回访记录的待回访行，下一步即首次联系——做成琥珀小标，区别于已记录动作。 */
.quotation-cockpit .quotation-followup-board-firsttouch {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-700, #8a4a14);
  background: var(--accent-50, #fdf3e6);
}

/* P0②/P1⑤/P1⑥/P2⑦/P2⑧ —— 审批对象卡 + 结构化驳回目标 */
.quotation-approval-object {
  margin-top: 12px;
}
.quotation-approval-object-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.quotation-approval-object-head .module-title {
  font-size: 14px;
  font-weight: 700;
}
.quotation-approval-object-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex-shrink: 0;
}
.quotation-approval-object-diff {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  background: var(--surface-2, #f4f6f9);
  color: var(--text-1, #1f2a37);
}
.quotation-approval-object-diff.is-up {
  background: var(--success-50, #eef7ee);
  color: var(--success-700, #1f7a3d);
}
.quotation-approval-object-diff.is-down {
  background: var(--accent-50, #fdf3e6);
  color: var(--accent-700, #8a4a14);
}
.quotation-approval-object-routing {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: 10px;
  font-size: 13px;
}
.quotation-approval-object-routing small {
  color: var(--text-3, #6b7280);
}
.quotation-approval-object-baseline {
  margin-top: 8px;
  font-size: 12px;
}
.quotation-approval-object-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-1, #e5e7eb);
}
.quotation-reject-alert-targets {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 8px 0;
  font-size: 13px;
  font-weight: 600;
}
.quotation-reject-alert-targets span {
  color: var(--danger-700, #b42318);
}

/*!************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/approval-center.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================
   审批中心 — 与「工程驾驶舱」(quotation-cockpit) 统一的视觉语言。
   白底面板 + 1px 细网格 + 电光蓝 #0f72c9 单一强调 + 系统字体 +
   等宽数字。布局保持「队列 → 决策」两栏，皮肤与报价完全一致。
   Scope: .approval-center
   ============================================================ */

.approval-center {
  --ck-bg: #f3f6fa;
  --ck-panel: #ffffff;
  --ck-panel-2: #f5f8fc;
  --ck-panel-3: #eef3f9;
  --ck-line: #e2e8f1;
  --ck-line-strong: #c6d2e0;
  --ck-text: #16233a;
  --ck-text-dim: #5d6e83;
  --ck-text-faint: #97a6b8;
  --ck-blue: #0f72c9;
  --ck-blue-soft: #e7f1fb;
  --ck-amber: #c9760a;
  --ck-amber-soft: #fbf0dd;
  --ck-green: #138a5c;
  --ck-green-soft: #e4f4ec;
  --ck-red: #d23b3b;
  --ck-red-soft: #fbe9e9;
  --ck-mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;

  color: var(--ck-text);
  background: var(--ck-bg);
  margin: -24px -32px;
  padding: 24px 32px 30px;
  letter-spacing: 0.1px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.approval-center .ac-page {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  gap: 14px;
}

/* 头部已统一为共享 PageHeader（variant="hero"）；旧 .ac-hero* 自绘 hero 已移除。 */

.approval-center .ac-notice {
  margin: 0;
  padding: 9px 14px;
  background: var(--ck-blue-soft);
  border: 1px solid var(--ck-line);
  border-left: 3px solid var(--ck-blue);
  border-radius: 6px;
  color: var(--ck-text);
  font-size: 13px;
}

/* shared panel treatment (matches .quotation-cockpit .module-block) */
.approval-center .ac-stats,
.approval-center .ac-queue,
.approval-center .ac-decision {
  background: var(--ck-panel);
  border: 1px solid var(--ck-line);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
}

/* ---- stats: dashboard read-out ---- */
.approval-center .ac-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 2px solid var(--ck-blue);
  overflow: hidden;
}
.approval-center .ac-stat {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-height: 92px;
  padding: 14px 18px 13px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--ck-line);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}
.approval-center .ac-stat:last-child {
  border-right: 0;
}
.approval-center .ac-stat:hover {
  background: var(--ck-panel-2);
}
.approval-center .ac-stat.active {
  background: linear-gradient(180deg, var(--ck-blue-soft), #fff);
  box-shadow: inset 0 3px 0 var(--ck-blue);
}
.approval-center .ac-stat > span {
  font-size: 12px;
  color: var(--ck-text-dim);
}
.approval-center .ac-stat > strong {
  font-family: var(--ck-mono);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 700;
  color: var(--ck-blue);
}
.approval-center .ac-stat[data-tone="urgent"] > strong {
  color: var(--ck-red);
}
.approval-center .ac-stat[data-tone="warning"] > strong {
  color: var(--ck-amber);
}
.approval-center .ac-stat[data-tone="danger"] > strong {
  color: var(--ck-red);
}
.approval-center .ac-stat[data-tone="success"] > strong {
  color: var(--ck-green);
}
.approval-center .ac-stat > small {
  color: var(--ck-text-faint);
  font-size: 12px;
  line-height: 1.25;
}

/* ---- board ---- */
.approval-center .ac-board {
  display: grid;
  grid-template-columns: minmax(320px, 0.82fr) 1.18fr;
  grid-gap: 14px;
  gap: 14px;
  align-items: start;
}
.approval-center .ac-queue {
  display: flex;
  flex-direction: column;
  max-height: none;
}
@media (max-width: 1080px) {
  .approval-center .ac-board {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .approval-center .ac-queue,
  .approval-center .ac-decision {
    max-height: none;
  }
}

/* ---- queue head ---- */
.approval-center .ac-queue-head {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  padding: 12px 12px 10px;
  border-bottom: 1px solid var(--ck-line);
}
.approval-center .ac-tabs {
  display: inline-flex;
  gap: 2px;
  background: var(--ck-panel-3);
  border: 1px solid var(--ck-line);
  border-radius: 6px;
  padding: 3px;
  width: -moz-fit-content;
  width: fit-content;
}
.approval-center .ac-tab {
  border: 0;
  background: transparent;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--ck-text-dim);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.approval-center .ac-tab:hover {
  color: var(--ck-blue);
}
.approval-center .ac-tab.active {
  background: var(--ck-blue);
  color: var(--ink-inverse);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15, 114, 201, 0.25);
}
.approval-center .ac-search {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--ck-line-strong);
  border-radius: 6px;
  background: var(--ck-panel);
  font: inherit;
  font-size: 13px;
  color: var(--ck-text);
}
.approval-center .ac-search::placeholder {
  color: var(--ck-text-faint);
}
.approval-center .ac-search:focus {
  outline: none;
  border-color: var(--ck-blue);
  box-shadow: 0 0 0 3px var(--ck-blue-soft);
}

.approval-center .ac-queue-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ck-line);
}
.approval-center .ac-chip {
  border: 1px solid var(--ck-line-strong);
  background: var(--ck-panel);
  color: var(--ck-text-dim);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.approval-center .ac-chip:hover {
  border-color: var(--ck-blue);
  color: var(--ck-blue);
}
.approval-center .ac-chip.active {
  border-color: var(--ck-blue);
  color: var(--ck-blue);
  background: var(--ck-blue-soft);
  font-weight: 600;
}
.approval-center .ac-mini-select {
  border: 1px solid var(--ck-line-strong);
  background: var(--ck-panel);
  color: var(--ck-text);
  border-radius: 6px;
  padding: 5px 8px;
  font: inherit;
  font-size: 12px;
}

/* ---- list rows: single column, title / meta / node+risk stacked ---- */
.approval-center .ac-list {
  flex: 1 1;
  overflow: visible;
}
.approval-center .ac-row {
  display: grid;
  grid-template-columns: 3px 1fr;
  grid-gap: 0;
  gap: 0;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ck-line);
  padding: 0;
  cursor: pointer;
  transition: background 0.12s ease;
}
.approval-center .ac-row:hover {
  background: var(--ck-panel-2);
}
.approval-center .ac-row.selected {
  background: var(--ck-blue-soft);
}
.approval-center .ac-row-rail {
  background: transparent;
}
.approval-center .ac-row.selected .ac-row-rail {
  background: var(--ck-blue);
}
.approval-center .ac-row[data-urgent="true"] .ac-row-rail {
  background: var(--ck-red);
}
.approval-center .ac-row-main {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  padding: 11px 14px 11px 12px;
  min-width: 0;
}
.approval-center .ac-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.approval-center .ac-row-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ck-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.approval-center .ac-num {
  font-family: var(--ck-mono);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.approval-center .ac-row-top > b {
  flex: none;
  font-family: var(--ck-mono);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 13px;
  color: var(--ck-blue);
  white-space: nowrap;
}
.approval-center .ac-row-meta {
  font-size: 12px;
  color: var(--ck-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.approval-center .ac-row-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.approval-center .ac-step {
  flex: 1 1;
  min-width: 0;
  font-size: 11px;
  font-family: var(--ck-mono);
  color: var(--ck-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 风险徽标已统一改用共享 <StatusBadge tone={riskTone()}>，原 .ac-risk 文本样式弃用。 */

/* ---- empty ---- */
.approval-center .ac-empty {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  justify-items: center;
  text-align: center;
  padding: 52px 24px;
  color: var(--ck-text-dim);
}
.approval-center .ac-empty-mark {
  width: 52px;
  height: 52px;
  border-radius: 8px;
  border: 1px dashed var(--ck-line-strong);
  display: grid;
  place-items: center;
  color: var(--ck-text-faint);
  font-size: 22px;
}
.approval-center .ac-empty strong {
  font-size: 15px;
  color: var(--ck-text);
}

.approval-center .ac-breathing-footer {
  align-self: stretch;
  display: flex;
  min-height: 48px;
  margin: auto -32px -30px;
  border-top: 1px solid var(--ck-line);
  background: var(--surface);
  color: #64748b;
  padding: 0 16px;
  box-shadow: none;
}

/* ---- decision panel ---- */
.approval-center .ac-decision {
  padding: 20px 22px 0;
  display: grid;
  grid-gap: 16px;
  gap: 16px;
  align-content: start;
  max-height: none;
  overflow: visible;
}
.approval-center .ac-decision-empty {
  min-height: 280px;
  display: grid;
  place-items: center;
  color: var(--ck-text-faint);
}
.approval-center .ac-decision-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.approval-center .ac-eyebrow {
  font-size: 12px;
  color: var(--ck-text-dim);
}
/* 状态徽标已统一改用共享 <StatusBadge tone={commonStatusTone()}>，原 .ac-status 等宽药丸弃用。 */
.approval-center .ac-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--ck-text);
}

/* facts */
.approval-center .ac-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 1px;
  gap: 1px;
  margin: 0;
  background: var(--ck-line);
  border: 1px solid var(--ck-line);
  border-radius: 6px;
  overflow: hidden;
}
.approval-center .ac-facts > div {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  padding: 9px 12px;
  background: var(--ck-panel);
}
.approval-center .ac-facts dt {
  font-size: 11px;
  color: var(--ck-text-dim);
}
.approval-center .ac-facts dd {
  margin: 0;
  font-size: 13px;
  color: var(--ck-text);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.approval-center .ac-note {
  margin: 0;
  font-size: 13px;
  color: var(--ck-text-dim);
  padding: 9px 12px;
  background: var(--ck-panel-2);
  border-left: 2px solid var(--ck-line-strong);
  border-radius: 0 6px 6px 0;
}

/* ---- flow stepper (matches the cockpit wizard dot semantics) ---- */
.approval-center .ac-flow {
  border: 1px solid var(--ck-line);
  border-radius: 6px;
  padding: 14px 16px 4px;
  background: var(--ck-panel-2);
}
.approval-center .ac-flow-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 12px;
}
.approval-center .ac-flow-head > span {
  font-weight: 700;
  font-size: 13px;
  color: var(--ck-text);
}
.approval-center .ac-flow-head > em {
  font-style: normal;
  font-family: var(--ck-mono);
  font-size: 12px;
  color: var(--ck-blue);
}
.approval-center .ac-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.approval-center .ac-step-item {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-gap: 12px;
  gap: 12px;
  padding: 0 0 16px;
}
.approval-center .ac-step-item::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 18px;
  bottom: -2px;
  width: 1px;
  background: var(--ck-line-strong);
}
.approval-center .ac-step-item:last-child::before {
  display: none;
}
.approval-center .ac-step-dot {
  width: 11px;
  height: 11px;
  margin-top: 4px;
  border-radius: 50%;
  border: 2px solid var(--ck-line-strong);
  background: var(--ck-panel-3);
  justify-self: center;
  z-index: 1;
}
.approval-center .ac-step-item[data-state="done"] .ac-step-dot {
  background: var(--ck-green);
  border-color: var(--ck-green);
}
.approval-center .ac-step-item[data-state="current"] .ac-step-dot {
  border-color: var(--ck-blue);
  background: var(--ck-blue);
  box-shadow: 0 0 0 4px var(--ck-blue-soft);
  animation: ac-pulse 1.8s ease-in-out infinite;
}
.approval-center .ac-step-item[data-state="overdue"] .ac-step-dot {
  border-color: var(--ck-red);
  background: var(--ck-red);
  box-shadow: 0 0 0 4px var(--ck-red-soft);
}
.approval-center .ac-step-item[data-state="rejected"] .ac-step-dot {
  border-color: var(--ck-red);
  background: var(--ck-red);
}
.approval-center .ac-step-item[data-state="cancelled"] .ac-step-dot {
  border-style: dashed;
}
@keyframes ac-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--ck-blue-soft); }
  50% { box-shadow: 0 0 0 6px var(--ck-blue-soft); }
}
.approval-center .ac-step-body {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  padding-top: 1px;
}
.approval-center .ac-step-body > strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ck-text);
}
.approval-center .ac-step-item[data-state="waiting"] .ac-step-body > strong,
.approval-center .ac-step-item[data-state="cancelled"] .ac-step-body > strong {
  color: var(--ck-text-faint);
  font-weight: 500;
}
.approval-center .ac-step-body > small {
  font-size: 11.5px;
  color: var(--ck-text-dim);
  font-family: var(--ck-mono);
}
.approval-center .ac-step-body > p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--ck-text-dim);
}

/* ---- checklist (matches cockpit cost-gates) ---- */
.approval-center .ac-checklist {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}
.approval-center .ac-check-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--ck-text);
}
.approval-center .ac-check {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 4px 10px;
  gap: 4px 10px;
  align-items: start;
  padding: 9px 12px;
  border: 1px solid var(--ck-line);
  border-radius: 6px;
  cursor: pointer;
  background: var(--ck-panel);
}
.approval-center .ac-check:hover {
  border-color: var(--ck-line-strong);
}
.approval-center .ac-check input {
  margin-top: 2px;
  accent-color: var(--ck-blue);
  width: 15px;
  height: 15px;
}
.approval-center .ac-check input:checked ~ strong {
  color: var(--ck-blue);
}
.approval-center .ac-check strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--ck-text);
}
.approval-center .ac-check span {
  grid-column: 2;
  font-size: 12px;
  color: var(--ck-text-dim);
}

/* ---- action ---- */
.approval-center .ac-act {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  margin-top: 6px;
  padding: 14px 0 18px;
  border-top: 1px solid var(--ck-line);
  background: var(--ck-panel);
  box-shadow: 0 -10px 14px -6px rgba(255, 253, 248, 0.95);
}
.approval-center .ac-act textarea {
  width: 100%;
  min-height: 62px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid var(--ck-line-strong);
  border-radius: 6px;
  background: var(--ck-panel);
  font: inherit;
  font-size: 13px;
  color: var(--ck-text);
}
.approval-center .ac-act textarea:focus {
  outline: none;
  border-color: var(--ck-blue);
  box-shadow: 0 0 0 3px var(--ck-blue-soft);
}
.approval-center .ac-hint {
  margin: 0;
  font-size: 12px;
  color: var(--ck-text-dim);
}
/* 非本步骤审批人时，在决策按钮上方给出醒目说明（替代「按钮置灰、点了没反应」的困惑）。 */
.approval-center .ac-blocked-note {
  margin: 0 0 2px;
  padding: 9px 12px;
  border: 1px solid var(--ck-amber);
  background: var(--ck-amber-soft);
  color: var(--ck-text);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}
.approval-center .ac-act-secondary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  padding-top: 2px;
}
.approval-center .ac-link {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--ck-text-dim);
  text-decoration: none;
  cursor: pointer;
}
.approval-center .ac-link:hover {
  color: var(--ck-blue);
  text-decoration: underline;
}
.approval-center .ac-link:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  text-decoration: none;
  color: var(--ck-text-faint);
}
.approval-center .ac-act-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}
.approval-center .ac-act-buttons .ac-approve {
  max-width: 320px;
}
.approval-center .ac-approve {
  flex: 1 1;
  border: 1px solid var(--ck-blue);
  background: linear-gradient(180deg, #1a85e0, #0f72c9);
  color: var(--ink-inverse);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 10px 18px;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 114, 201, 0.25);
  transition: background 0.15s ease, transform 0.05s ease;
}
.approval-center .ac-approve:hover:not(:disabled) {
  background: linear-gradient(180deg, #2a92ec, #1576cf);
}
.approval-center .ac-approve:active:not(:disabled) {
  transform: translateY(1px);
}
.approval-center .ac-approve:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.approval-center .ac-reject {
  border: 1px solid var(--ck-line-strong);
  background: var(--ck-panel);
  color: var(--ck-text);
  font-size: 14px;
  letter-spacing: 1px;
  padding: 10px 22px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.approval-center .ac-reject:hover:not(:disabled) {
  border-color: var(--ck-red);
  color: var(--ck-red);
  background: var(--ck-red-soft);
}
.approval-center .ac-reject:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.approval-center .ac-act-readonly {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ck-text-dim);
  font-size: 13px;
}
.approval-center .ac-act-readonly a {
  color: var(--ck-blue);
  text-decoration: none;
}
.approval-center .ac-act-readonly a:hover {
  text-decoration: underline;
}

/* ---- secondary ---- */
.approval-center .ac-more {
  border: 1px solid var(--ck-line);
  border-radius: 6px;
  background: var(--ck-panel-2);
}
.approval-center .ac-more > summary {
  list-style: none;
  cursor: pointer;
  padding: 9px 14px;
  font-size: 12.5px;
  color: var(--ck-text-dim);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.approval-center .ac-more > summary::-webkit-details-marker {
  display: none;
}
.approval-center .ac-more[open] > summary {
  border-bottom: 1px solid var(--ck-line);
  color: var(--ck-text);
}
.approval-center .ac-more-body {
  padding: 12px 14px;
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}
.approval-center .ac-change {
  display: grid;
  grid-gap: 1px;
  gap: 1px;
  background: var(--ck-line);
  border: 1px solid var(--ck-line);
  border-radius: 6px;
  overflow: hidden;
  font-size: 12.5px;
}
.approval-center .ac-change-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  grid-gap: 8px;
  gap: 8px;
  padding: 8px 10px;
  background: var(--ck-panel);
}
.approval-center .ac-change-row.head {
  background: var(--ck-panel-2);
  color: var(--ck-text-dim);
  font-size: 11px;
}
.approval-center .ac-change-row strong {
  font-weight: 600;
}
.approval-center .ac-audit dt {
  font-size: 11px;
  color: var(--ck-text-dim);
}
.approval-center .ac-audit dd {
  margin: 0 0 8px;
  font-family: var(--ck-mono);
  font-size: 12px;
  color: var(--ck-text-dim);
  word-break: break-all;
}

/* ============================================================
   Designer + Policy: same cockpit language on their existing markup
   ============================================================ */
.approval-center.platform-page {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}
.approval-center .platform-setting-section,
.approval-center .approval-policy-list,
.approval-center .approval-policy-detail,
.approval-center .approval-flow-step,
.approval-center .platform-metric {
  background: var(--ck-panel);
  border: 1px solid var(--ck-line);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
}
.approval-center .approval-policy-workbench {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) 1.2fr;
  grid-gap: 14px;
  gap: 14px;
  align-items: start;
}
.approval-center .approval-flow-step {
  background: var(--ck-panel-2);
}
.approval-center .approval-policy-row.selected,
.approval-center .approval-policy-row:hover {
  background: var(--ck-blue-soft);
}
.approval-center .approval-flow-role-chip {
  border-color: var(--ck-line-strong);
  background: var(--ck-panel);
}
.approval-center .approval-flow-role-chip input {
  accent-color: var(--ck-blue);
}
.approval-center .platform-metric strong {
  font-family: var(--ck-mono);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--ck-blue);
}
.approval-center .btn.btn-primary {
  background: linear-gradient(180deg, #1a85e0, #0f72c9);
  border: 1px solid #0f72c9;
  color: var(--ink-inverse);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(15, 114, 201, 0.25);
}
.approval-center .btn.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #2a92ec, #1576cf);
}
.approval-center .btn.btn-ghost:hover {
  border-color: var(--ck-blue);
  color: var(--ck-blue);
  background: var(--ck-blue-soft);
}

/* ============================================================
   Flowchart designer canvas — 发起 → 节点 → 通过, draggable + inline insert
   ============================================================ */
.approval-center .acd-editor-wrap {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}
.approval-center .acd-meta {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
/* 画布优先：画布占满整个编辑区,节点配置改为右侧滑出抽屉(见 .acd-inspector)。 */
.approval-center .acd-board {
  display: block;
}

.approval-center .acd-canvas {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 12px;
  background:
    radial-gradient(circle at 1px 1px, rgba(20, 33, 58, 0.05) 1px, transparent 0) 0 0 / 18px 18px,
    var(--ck-panel-2);
  border: 1px solid var(--ck-line);
  border-radius: 6px;
  min-height: 360px;
  overflow: auto;
}
.approval-center .acd-flowunit {
  display: contents;
}

.approval-center .acd-node {
  position: relative;
  width: 280px;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--ck-panel);
  border: 1px solid var(--ck-line-strong);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.06);
  cursor: -webkit-grab;
  cursor: grab;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.approval-center .acd-node:hover {
  border-color: var(--ck-blue);
}
.approval-center .acd-node.selected {
  border-color: var(--ck-blue);
  box-shadow: 0 0 0 3px var(--ck-blue-soft);
}
.approval-center .acd-node:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}
.approval-center .acd-node-order {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ck-blue);
  color: var(--ink-inverse);
  display: grid;
  place-items: center;
  font-family: var(--ck-mono);
  font-size: 13px;
  font-weight: 700;
}
.approval-center .acd-node-body {
  min-width: 0;
}
.approval-center .acd-node-body strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ck-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.approval-center .acd-node-body small {
  display: block;
  font-size: 12px;
  color: var(--ck-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.approval-center .acd-node-sla {
  font-family: var(--ck-mono);
  font-size: 12px;
  color: var(--ck-text-dim);
}
.approval-center .acd-node-del {
  position: absolute;
  top: -9px;
  right: -9px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--ck-line-strong);
  background: var(--surface);
  color: var(--ck-text-dim);
  font-size: 13px;
  line-height: 1;
  display: none;
  place-items: center;
  cursor: pointer;
}
.approval-center .acd-node:hover .acd-node-del {
  display: grid;
}
.approval-center .acd-node-del:hover {
  color: var(--ck-red);
  border-color: var(--ck-red);
}
.approval-center .acd-node-del:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.approval-center .acd-node-terminal {
  width: 150px;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  border-radius: 999px;
  background: var(--ck-blue-soft);
  border-color: var(--ck-blue);
  color: var(--ck-blue);
  font-weight: 700;
  font-size: 13px;
  cursor: default;
  box-shadow: none;
  padding: 9px 12px;
}
.approval-center .acd-node-end {
  background: var(--ck-green-soft);
  border-color: var(--ck-green);
  color: var(--ck-green);
}

.approval-center .acd-gap {
  position: relative;
  width: 280px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.approval-center .acd-gap::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: var(--ck-line-strong);
}
.approval-center .acd-add {
  position: relative;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--ck-line-strong);
  background: var(--surface);
  color: var(--ck-text-dim);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transition: all 0.15s ease;
}
.approval-center .acd-gap:hover .acd-add,
.approval-center .acd-add:focus-visible {
  opacity: 1;
  border-color: var(--ck-blue);
  color: var(--ck-blue);
}
.approval-center .acd-add:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}
.approval-center .acd-gap.dragover::before {
  background: var(--ck-blue);
  width: 3px;
}
.approval-center .acd-gap.dragover .acd-add {
  opacity: 1;
  border-color: var(--ck-blue);
  color: var(--ink-inverse);
  background: var(--ck-blue);
  transform: scale(1.2);
}
.approval-center .acd-canvas-hint {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--ck-text-faint);
  text-align: center;
}

/* 节点配置抽屉：默认移出屏外,选中节点时(.open)从右侧滑入。 */
.approval-center .acd-inspector {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  width: min(440px, 92vw);
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.22, 0.61, 0.36, 1);
  background: var(--ck-panel);
  border: 0;
  border-left: 1px solid var(--ck-line);
  border-radius: 0;
  box-shadow: -18px 0 48px rgba(15, 46, 92, 0.2);
  padding: 18px 18px 24px;
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  align-content: start;
  overflow-y: auto;
}

.approval-center .acd-inspector.open {
  transform: translateX(0);
}

.approval-center .acd-inspector-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(15, 23, 42, 0.28);
}

.approval-center .acd-inspector-close {
  justify-self: end;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ck-line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ck-text-dim);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.approval-center .acd-inspector-empty {
  text-align: center;
  padding: 28px 8px;
}
.approval-center .acd-inspector-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid var(--ck-line);
  padding-bottom: 8px;
}
.approval-center .acd-inspector-head strong {
  font-size: 14px;
  color: var(--ck-text);
}
.approval-center .acd-inspector-head span {
  font-family: var(--ck-mono);
  font-size: 12px;
  color: var(--ck-blue);
}
.approval-center .acd-inspector-label {
  font-size: 12px;
  color: var(--ck-text-dim);
  display: block;
  margin-bottom: 6px;
}

.approval-center .acd-node-cond {
  display: inline-block;
  margin-top: 2px;
  max-width: 100%;
  font-size: 11px;
  color: var(--ck-blue);
  background: var(--ck-blue-soft);
  border-radius: 3px;
  padding: 1px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.approval-center .acd-condition {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  border-top: 1px solid var(--ck-line);
  padding-top: 12px;
}
.approval-center .acd-condition-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ck-text);
  cursor: pointer;
}
.approval-center .acd-condition-toggle input {
  accent-color: var(--ck-blue);
}
.approval-center .acd-condition-row {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  grid-gap: 6px;
  gap: 6px;
}
.approval-center .acd-condition-row select,
.approval-center .acd-condition-row input {
  border: 1px solid var(--ck-line-strong);
  border-radius: 6px;
  padding: 6px 8px;
  font: inherit;
  font-size: 13px;
  background: var(--ck-panel);
  color: var(--ck-text);
}

/* ============================================================
   Inbox v2 — compact data table + slide-over decision drawer
   ============================================================ */
.approval-center .ac-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: var(--ck-panel);
  border: 1px solid var(--ck-line);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
  padding: 10px 12px;
}
.approval-center .ac-toolbar .ac-search {
  width: auto;
  flex: 1 1;
  min-width: 200px;
}
.approval-center .ac-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--ck-text-dim);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.approval-center .ac-queue-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: var(--ck-panel);
  border: 1px solid var(--ck-line);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
}
.approval-center .ac-queue-title > div {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  min-width: 0;
}
.approval-center .ac-queue-title strong {
  font-size: 14px;
  line-height: 1.25;
}
.approval-center .ac-queue-title span {
  color: var(--ck-text-dim);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.approval-center .ac-table-wrap {
  background: var(--ck-panel);
  border: 1px solid var(--ck-line);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
  overflow: auto;
  max-height: calc(100vh - 360px);
}
.approval-center .ac-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.approval-center .ac-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: var(--ck-text-dim);
  background: var(--ck-panel-2);
  border-bottom: 1px solid var(--ck-line-strong);
  padding: 9px 12px;
  white-space: nowrap;
}
.approval-center .ac-table th.num,
.approval-center .ac-table td.num {
  text-align: right;
}
.approval-center .ac-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--ck-line);
  color: var(--ck-text);
  white-space: nowrap;
  vertical-align: middle;
}
.approval-center .ac-table tbody tr {
  cursor: pointer;
  transition: background 0.12s ease;
}
.approval-center .ac-table tbody tr:hover {
  background: var(--ck-panel-2);
}
.approval-center .ac-table tbody tr.selected {
  background: var(--ck-blue-soft);
}
.approval-center .ac-table tbody tr[data-urgent="true"] td:first-child {
  box-shadow: inset 3px 0 0 var(--ck-red);
}
.approval-center .ac-table tbody tr.selected td:first-child {
  box-shadow: inset 3px 0 0 var(--ck-blue);
}
.approval-center .ac-td-title {
  min-width: 340px;
  max-width: 520px;
}
.approval-center .ac-td-title strong {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.approval-center .ac-td-title span {
  display: block;
  margin-top: 3px;
  color: var(--ck-text-faint);
  font-family: var(--ck-mono);
  font-size: 11px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.approval-center .ac-type-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid var(--ck-line);
  border-radius: 999px;
  background: var(--ck-panel-2);
  color: var(--ck-text-dim);
  font-size: 12px;
  white-space: nowrap;
}
.approval-center .ac-td-node {
  color: var(--ck-text-dim);
  font-size: 12px;
}
.approval-center .ac-td-overdue {
  color: var(--ck-red);
  font-weight: 600;
}

/* 审批队列卡片：承载共享 WorkbenchQueueTable（与考勤明细 / 文件中心同一套标准表壳）。 */
.approval-center .ac-queue-card {
  margin-top: 0;
  border-radius: 8px;
  border-color: var(--ck-line);
  background: var(--ck-panel);
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
}

.approval-center .quotation-queue-row-clickable {
  cursor: pointer;
}

/* 逾期行左缘红条 + 抽屉选中行高亮（沿用旧队列的行态语义）。 */
.approval-center .quotation-queue-table tbody tr.ac-row-urgent td:first-child {
  box-shadow: inset 3px 0 0 var(--c-danger);
}

.approval-center .quotation-queue-table tbody tr.is-selected-row {
  background: var(--c-info-soft);
}
.approval-center .ac-td-act {
  text-align: right;
}
.approval-center .ac-row-btn {
  border: 1px solid var(--ck-line-strong);
  background: var(--ck-panel);
  color: var(--ck-blue);
  border-radius: 6px;
  padding: 4px 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.approval-center .ac-row-btn:hover {
  border-color: var(--ck-blue);
  background: var(--ck-blue-soft);
}

/* slide-over drawer */
.approval-center .ac-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 33, 58, 0.28);
  z-index: 60;
  animation: ac-fade 0.15s ease;
}
.approval-center .ac-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(540px, 94vw);
  z-index: 61;
  background: var(--ck-panel);
  border-left: 1px solid var(--ck-line-strong);
  box-shadow: -12px 0 32px rgba(20, 33, 58, 0.16);
  display: flex;
  flex-direction: column;
  animation: ac-slide 0.2s ease;
}
@keyframes ac-fade {
  from {
    opacity: 0;
  }
}
@keyframes ac-slide {
  from {
    transform: translateX(24px);
    opacity: 0.4;
  }
}
.approval-center .ac-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ck-line);
}
.approval-center .ac-drawer-head-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.approval-center .ac-drawer-close {
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--ck-text-dim);
  cursor: pointer;
  padding: 0 4px;
}
.approval-center .ac-drawer-close:hover {
  color: var(--ck-text);
}
.approval-center .ac-drawer-body {
  flex: 1 1;
  overflow-y: auto;
  padding: 18px;
  display: grid;
  grid-gap: 16px;
  gap: 16px;
  align-content: start;
}
.approval-center .ac-drawer-foot {
  border-top: 1px solid var(--ck-line);
  padding: 14px 18px 16px;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  background: var(--ck-panel-2);
}
.approval-center .ac-drawer-foot.ac-act-readonly {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ck-text-dim);
  font-size: 13px;
}
.approval-center .ac-drawer-foot-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.approval-center .ac-drawer-foot .ac-hint {
  margin: 0;
}

@media (max-width: 1180px) {
  .approval-center .ac-hero {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .approval-center .ac-hero .more-actions {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .approval-center .ac-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .approval-center .ac-stat:nth-child(2) {
    border-right: 0;
  }
}

@media (max-width: 760px) {
  .approval-center {
    margin: -16px;
    padding: 16px;
  }
  .approval-center .ac-hero {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }
  .approval-center .ac-hero .more-actions {
    justify-self: stretch;
  }
  .approval-center .ac-hero .more-actions > summary.btn.btn-ghost,
  .approval-center .ac-hero-side {
    width: 100%;
  }
  .approval-center .ac-stats {
    grid-template-columns: 1fr;
  }
  .approval-center .ac-stat {
    border-right: 0;
    border-bottom: 1px solid var(--ck-line);
  }
  .approval-center .ac-stat:last-child {
    border-bottom: 0;
  }
  .approval-center .ac-breathing-footer {
    min-height: 48px;
    margin: auto -20px -22px;
    padding: 0 12px;
  }
  .approval-center .ac-toolbar {
    display: grid;
    grid-template-columns: 1fr;
  }
  .approval-center .ac-tabs,
  .approval-center .ac-count {
    width: 100%;
    margin-left: 0;
  }
  .approval-center .ac-tab {
    flex: 1 1;
  }
  .approval-center .ac-queue-title {
    align-items: flex-start;
    flex-direction: column;
  }
  .approval-center .ac-queue-title span {
    white-space: normal;
  }
  .approval-center .ac-table-wrap {
    max-height: none;
  }
}

/*!********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/collaboration-workbench.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************************************/
/* Collaboration workbench pages: 消息中心 / 文件中心.
   两页统一为 PageHeader hero + 卡点 lane 条 + 共享 WorkbenchQueueTable（与考勤明细同套表壳）。
   配色一律取全站 azure 品牌 token（tokens.css），不自带散落 hex —— 改 token 即两页同步生效。 */
.collab-workbench {
  --cw-panel: var(--surface);
  --cw-panel-soft: var(--surface-soft);
  --cw-line: var(--hairline);
  --cw-line-strong: var(--hairline-strong);
  --cw-text: var(--ink);
  --cw-text-dim: var(--ink-2);
  --cw-text-faint: var(--ink-3);
  --cw-blue: var(--brand-600);
  --cw-blue-soft: var(--brand-50);
  --cw-amber: var(--c-warning-ink);
  --cw-green: var(--c-success-ink);
  --cw-red: var(--c-danger-ink);
  --cw-mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;

  color: var(--cw-text);
  background: var(--surface-page);
  margin: -24px -32px;
  padding: 24px 32px 30px;
}

.collab-workbench .cw-page {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.collab-workbench .cw-notice {
  margin: 0;
  padding: 9px 14px;
  background: var(--cw-blue-soft);
  border: 1px solid var(--cw-line);
  border-left: 3px solid var(--cw-blue);
  border-radius: 6px;
  color: var(--cw-text);
  font-size: 13px;
}

.collab-workbench .cw-notice-error {
  background: var(--c-danger-soft);
  border-color: var(--c-danger-border);
  border-left-color: var(--c-danger);
  color: var(--c-danger-ink);
}

/* 批量操作条：勾选 ≥1 行时浮现在队列表上方，承载「批量已读 / 取消选择」。 */
.collab-workbench .cw-batch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 14px;
  background: var(--cw-blue-soft);
  border: 1px solid var(--cw-line);
  border-left: 3px solid var(--cw-blue);
  border-radius: 6px;
}

.collab-workbench .cw-batch-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--cw-text);
}

.collab-workbench .cw-batch-actions {
  display: flex;
  gap: 8px;
}

/* 卡点摘要 + 筛选：一行数块，摘要=入口合一（替代旧的 metrics / focus lanes / quick cards 三套重复筛选）。
   单面板 + 内分隔线；点击=设 active + 换列表 + 回第一页。消息中心 5 块、文件中心 4 块同款观感。 */
.collab-workbench .cw-lanes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--cw-panel);
  border: 1px solid var(--cw-line);
  border-top: 2px solid var(--cw-blue);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
  overflow: hidden;
}

.collab-workbench .cw-lane {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-height: 92px;
  padding: 14px 18px 13px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--cw-line);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.collab-workbench .cw-lane:last-child {
  border-right: 0;
}

.collab-workbench .cw-lane:hover {
  background: var(--cw-panel-soft);
}

.collab-workbench .cw-lane.active {
  background: linear-gradient(180deg, var(--cw-blue-soft), var(--cw-panel));
  box-shadow: inset 0 3px 0 var(--cw-blue);
}

.collab-workbench .cw-lane > span {
  font-size: 12px;
  color: var(--cw-text-dim);
}

.collab-workbench .cw-lane > strong {
  font-family: var(--cw-mono);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 700;
  color: var(--cw-blue);
}

.collab-workbench .cw-lane[data-tone="warning"] > strong {
  color: var(--cw-amber);
}

.collab-workbench .cw-lane[data-tone="danger"] > strong {
  color: var(--cw-red);
}

.collab-workbench .cw-lane[data-tone="success"] > strong {
  color: var(--cw-green);
}

.collab-workbench .cw-lane > small {
  color: var(--cw-text-faint);
  font-size: 12px;
  line-height: 1.25;
}

/* 协同队列卡片：消息中心 / 文件中心共用，承载共享 WorkbenchQueueTable。 */
.collab-workbench .cw-queue-card {
  margin-top: 0;
  border-radius: 8px;
  border-color: var(--cw-line);
  background: var(--cw-panel);
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
}

.collab-workbench .cw-header-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* 主列：加粗品牌蓝链接（消息标题 / 文件名共用）；可选未读圆点前缀。 */
.collab-workbench .cw-cell-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--cw-blue);
}

.collab-workbench .cw-cell-link strong {
  font-weight: 600;
  color: inherit;
}

.collab-workbench .cw-cell-link:hover strong {
  text-decoration: underline;
}

.collab-workbench .cw-unread-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--cw-blue);
}

/* 未读行：左缘品牌色细条 + 标题更重，便于在队列里扫读。 */
.collab-workbench .cw-row-unread td:first-child {
  box-shadow: inset 3px 0 0 var(--cw-blue);
}

.collab-workbench .cw-row-unread .cw-cell-link strong {
  font-weight: 700;
}

.collab-workbench .cw-chip {
  min-height: 30px;
  padding: 4px 12px;
  border: 1px solid var(--cw-line-strong);
  border-radius: 999px;
  background: var(--cw-panel);
  color: var(--cw-text-dim);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.collab-workbench .cw-chip:hover,
.collab-workbench .cw-chip.active {
  border-color: var(--cw-blue);
  background: var(--cw-blue-soft);
  color: var(--cw-blue);
}

.collab-workbench .cw-breathing-footer {
  min-height: clamp(120px, 16vh, 190px);
  margin: 4px 0 0;
  border-top: 0;
  background:
    linear-gradient(180deg, rgba(243, 246, 250, 0) 0%, rgba(243, 246, 250, 0.86) 42%, var(--surface) 100%);
  color: var(--ink-3);
  padding: 40px 16px 58px;
  box-shadow: none;
}

@media (max-width: 1180px) {
  .collab-workbench .cw-lanes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .collab-workbench {
    margin: -16px;
    padding: 16px;
  }

  .collab-workbench .cw-lanes {
    grid-template-columns: 1fr;
  }

  .collab-workbench .cw-lane {
    border-right: 0;
    border-bottom: 1px solid var(--cw-line);
  }

  .collab-workbench .cw-lane:last-child {
    border-bottom: 0;
  }

  .collab-workbench .cw-breathing-footer {
    min-height: 104px;
    padding: 34px 12px 46px;
  }
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/hr-workbench.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************/
/* Human resources workbench pages: attendance and organization. */
.hr-workbench {
  --hrw-bg: #f3f6fa;
  --hrw-panel: #ffffff;
  --hrw-panel-soft: #f5f8fc;
  --hrw-panel-muted: #eef3f9;
  --hrw-line: #e2e8f1;
  --hrw-line-strong: #c6d2e0;
  --hrw-text: #16233a;
  --hrw-text-dim: #5d6e83;
  --hrw-text-faint: #97a6b8;
  --hrw-blue: #0f72c9;
  --hrw-blue-soft: #e7f1fb;
  --hrw-amber: #c9760a;
  --hrw-green: #138a5c;
  --hrw-red: #d23b3b;
  --hrw-mono:
    "SFMono-Regular", ui-monospace, "JetBrains Mono", "Roboto Mono", Menlo,
    Consolas, monospace;

  color: var(--hrw-text);
  background: var(--hrw-bg);
  margin: -24px -32px;
  padding: 24px 32px 30px;
}

.hr-workbench .hrw-page {
  display: grid;
  /* Constrain the single column to the container so wide children (data tables,
     crowded toolbars) scroll/wrap internally instead of pushing the page —
     and the right-side padding — off-screen. */
  grid-template-columns: minmax(0, 1fr);
  grid-gap: 14px;
  gap: 14px;
}

.hr-workbench .hrw-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  grid-gap: 18px;
  gap: 18px;
  padding: 16px 24px;
  color: var(--ink-inverse);
  /* 统一为全站钢蓝 hero（与 .page-header-unified 一致，去末端青绿）。 */
  background: linear-gradient(118deg, #15325b 0%, #1f4d86 52%, #2c6ea4 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(15, 46, 92, 0.18);
}

.hr-workbench .hrw-hero-kicker {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
}

.hr-workbench .hrw-hero h1 {
  margin: 0;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
}

.hr-workbench .hrw-hero p {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
}

.hr-workbench .hrw-hero-side {
  min-width: 118px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.hr-workbench .hrw-hero-side span,
.hr-workbench .hrw-hero-side small {
  display: block;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
}

.hr-workbench .hrw-hero-side strong {
  display: block;
  margin: 2px 0;
  font-family: var(--hrw-mono);
  font-size: 28px;
  line-height: 1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.hr-workbench .hrw-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.hr-workbench .hrw-hero-actions .btn,
.hr-workbench .hrw-hero-actions .btn.btn-primary,
.hr-workbench .hrw-hero-actions .btn.btn-ghost,
.hr-workbench .hrw-hero-actions .more-actions > summary {
  height: 36px;
  min-width: 92px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #12325c !important;
  -webkit-text-fill-color: #12325c !important;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(8, 23, 55, 0.12);
  white-space: nowrap;
}

.hr-workbench .hrw-hero-actions .btn:hover,
.hr-workbench .hrw-hero-actions .more-actions > summary:hover {
  background: var(--surface);
  border-color: rgba(255, 255, 255, 0.95);
  color: #0f3f7a !important;
  -webkit-text-fill-color: #0f3f7a !important;
}

.hr-workbench .hrw-hero-actions .more-actions {
  position: relative;
}

.hr-workbench .hrw-hero-actions .more-actions-menu {
  right: 0;
  left: auto;
}

.hr-workbench .hrw-metrics,
.hr-workbench .organization-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 0;
  gap: 0;
  background: var(--hrw-panel);
  border: 1px solid var(--hrw-line);
  border-top: 2px solid var(--hrw-blue);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
  overflow: hidden;
}

.hr-workbench .hrw-metric,
.hr-workbench .organization-metrics div {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-height: 92px;
  padding: 14px 18px 13px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--hrw-line);
  border-radius: 0;
  box-shadow: none;
}

.hr-workbench .hrw-metric:last-child,
.hr-workbench .organization-metrics div:last-child {
  border-right: 0;
}

.hr-workbench .hrw-metric span,
.hr-workbench .organization-metrics span {
  font-size: 12px;
  color: var(--hrw-text-dim);
}

.hr-workbench .hrw-metric strong,
.hr-workbench .organization-metrics strong {
  font-family: var(--hrw-mono);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  line-height: 1.05;
  font-weight: 700;
  color: var(--hrw-blue);
}

.hr-workbench .hrw-metric small,
.hr-workbench .organization-metrics small {
  color: var(--hrw-text-faint);
  font-size: 12px;
  line-height: 1.25;
}

.hr-workbench .module-block,
.hr-workbench .organization-tree-card,
.hr-workbench .organization-detail-panel {
  background: var(--hrw-panel);
  border: 1px solid var(--hrw-line);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
}

.hr-workbench .module-block {
  padding: 12px;
}

.hr-workbench .module-title {
  color: var(--hrw-blue);
  border-left: 3px solid var(--hrw-blue);
  font-size: 14px;
}

.hr-workbench .notice-bar {
  margin: 0;
  border-radius: 6px;
}

.hr-workbench .organization-layout {
  gap: 14px;
}

.hr-workbench .organization-tree-summary article,
.hr-workbench .organization-governance-pill,
.hr-workbench .organization-detail-grid > div,
.hr-workbench .organization-summary-grid article,
.hr-workbench .organization-table-wrap {
  border-radius: 6px;
  box-shadow: none;
}

.hr-workbench .attendance-create-grid input,
.hr-workbench .attendance-create-grid select,
.hr-workbench .attendance-create-grid textarea,
.hr-workbench .organization-tree-toolbar input {
  border-color: var(--hrw-line-strong);
  border-radius: 6px;
  background: var(--hrw-panel);
}

.hr-workbench .organization-table th {
  background: var(--hrw-panel-soft);
}

.hr-workbench .organization-layout {
  grid-template-columns: 300px minmax(0, 1fr);
}

.hr-workbench .organization-tree-card,
.hr-workbench .organization-detail-panel {
  padding: 16px;
}

.hr-workbench .organization-tree-card {
  top: 76px;
}

.hr-workbench .organization-tree-node {
  border-radius: 6px;
}

.hr-workbench .organization-tree-node:hover,
.hr-workbench .organization-tree-row.active .organization-tree-node {
  border-color: var(--hrw-blue);
  background: var(--hrw-blue-soft);
}

.hr-workbench .organization-governance-strip,
.hr-workbench .organization-detail-grid,
.hr-workbench .organization-summary-grid {
  gap: 10px;
}

.hr-workbench .hrw-lane-panel,
.hr-workbench .organization-governance-board {
  background: var(--hrw-panel);
  border: 1px solid var(--hrw-line);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
  overflow: hidden;
}

.hr-workbench .hrw-lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hrw-line);
}

.hr-workbench .hrw-lane-head > div {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  min-width: 0;
}

.hr-workbench .hrw-lane-head strong {
  font-size: 14px;
}

.hr-workbench .hrw-lane-head span {
  color: var(--hrw-text-dim);
  font-size: 12px;
}

.hr-workbench .hrw-chip {
  min-height: 30px;
  padding: 4px 12px;
  border: 1px solid var(--hrw-line-strong);
  border-radius: 999px;
  background: var(--hrw-panel);
  color: var(--hrw-text-dim);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.hr-workbench .hrw-chip:hover {
  border-color: var(--hrw-blue);
  background: var(--hrw-blue-soft);
  color: var(--hrw-blue);
}

.hr-workbench .hrw-lane-grid,
.hr-workbench .organization-governance-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hr-workbench .hrw-lane-card,
.hr-workbench .organization-governance-card {
  min-height: 104px;
  padding: 14px 16px;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  text-align: left;
  background: var(--hrw-panel);
  border: 0;
  border-right: 1px solid var(--hrw-line);
  color: var(--hrw-text);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.hr-workbench .hrw-lane-card:last-child,
.hr-workbench .organization-governance-card:last-child {
  border-right: 0;
}

.hr-workbench .hrw-lane-card:hover,
.hr-workbench .hrw-lane-card.active,
.hr-workbench .organization-governance-card:hover,
.hr-workbench .organization-governance-card.active {
  background: linear-gradient(180deg, var(--hrw-blue-soft), #fff);
  box-shadow: inset 0 3px 0 var(--hrw-blue);
}

.hr-workbench .hrw-lane-card span,
.hr-workbench .organization-governance-card span {
  color: var(--hrw-text-dim);
  font-size: 12px;
}

.hr-workbench .hrw-lane-card strong,
.hr-workbench .organization-governance-card strong {
  font-family: var(--hrw-mono);
  font-size: 26px;
  line-height: 1.05;
  color: var(--hrw-blue);
}

.hr-workbench .hrw-lane-card small,
.hr-workbench .organization-governance-card p {
  margin: 0;
  color: var(--hrw-text-faint);
  font-size: 12px;
  line-height: 1.35;
}

.hr-workbench .hrw-lane-card.tone-warning strong,
.hr-workbench .organization-governance-card.primary strong {
  color: var(--hrw-amber);
}

.hr-workbench .hrw-lane-card.tone-danger strong {
  color: var(--hrw-red);
}

.hr-workbench .hrw-lane-card.tone-success strong {
  color: var(--hrw-green);
}

/* Attendance workbench: hero subline, overview cards, data-card header, toolbar filters. */
.hr-workbench .attendance-hero-sub {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 600;
}

/* Overview lane row reuses .hrw-lane-card; widen the grid to six presence buckets. */
.hr-workbench .attendance-overview-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.hr-workbench .attendance-data-head {
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.hr-workbench .attendance-head-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.hr-workbench .attendance-data-tabs {
  flex: 0 0 auto;
}

.hr-workbench .attendance-head-controls select,
.hr-workbench .attendance-month-input {
  height: 34px;
  border: 1px solid var(--hrw-line-strong);
  border-radius: 8px;
  background: var(--hrw-panel);
  color: var(--hrw-text);
  font-size: 13px;
  padding: 0 10px;
}

.hr-workbench .attendance-punch {
  font-family: var(--hrw-mono);
  font-size: 12px;
}

.hr-workbench .attendance-anomaly-count {
  color: #d04a3b;
  font-weight: 700;
}

.hr-workbench .attendance-workbench,
.hr-workbench .attendance-create-panel {
  border-radius: 6px;
  border-color: var(--hrw-line);
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
}

.hr-workbench .attendance-filters-inline {
  gap: 8px;
}

.hr-workbench .attendance-filters-inline label {
  color: var(--hrw-text-dim);
  font-size: 12px;
  font-weight: 700;
}

.hr-workbench .organization-governance-board {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hr-workbench .organization-governance-card {
  border-radius: 0;
}

.hr-workbench .hrw-breathing-footer {
  min-height: clamp(160px, 20vh, 240px);
  margin: 0;
  border-top: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.96) 40%,
    #ffffff 100%
  );
  color: #94a3b8;
  padding: 48px 16px 70px;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 1180px) {
  .hr-workbench .hrw-hero {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .hr-workbench .hrw-hero-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .hr-workbench .hrw-metrics,
  .hr-workbench .organization-metrics,
  .hr-workbench .hrw-lane-grid,
  .hr-workbench .organization-governance-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hr-workbench .hrw-metric:nth-child(2),
  .hr-workbench .organization-metrics div:nth-child(2),
  .hr-workbench .hrw-lane-card:nth-child(2),
  .hr-workbench .organization-governance-card:nth-child(2) {
    border-right: 0;
  }

  .hr-workbench .attendance-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hr-workbench .organization-layout {
    grid-template-columns: 1fr;
  }

  .hr-workbench .organization-tree-card {
    position: static;
  }
}

@media (max-width: 760px) {
  .hr-workbench {
    margin: -16px;
    padding: 16px;
  }

  .hr-workbench .hrw-hero,
  .hr-workbench .hrw-metrics,
  .hr-workbench .organization-metrics,
  .hr-workbench .hrw-lane-grid,
  .hr-workbench .attendance-overview-grid,
  .hr-workbench .organization-governance-board {
    grid-template-columns: 1fr;
  }

  .hr-workbench .hrw-hero {
    gap: 12px;
    padding: 16px;
  }

  .hr-workbench .hrw-hero-actions,
  .hr-workbench .hrw-hero-actions .btn,
  .hr-workbench .hrw-hero-actions .more-actions,
  .hr-workbench .hrw-hero-actions .more-actions > summary,
  .hr-workbench .hrw-hero-side {
    width: 100%;
  }

  .hr-workbench .hrw-metric,
  .hr-workbench .organization-metrics div,
  .hr-workbench .hrw-lane-card,
  .hr-workbench .organization-governance-card {
    border-right: 0;
    border-bottom: 1px solid var(--hrw-line);
  }

  .hr-workbench .hrw-metric:last-child,
  .hr-workbench .organization-metrics div:last-child,
  .hr-workbench .hrw-lane-card:last-child,
  .hr-workbench .organization-governance-card:last-child {
    border-bottom: 0;
  }

  .hr-workbench .hrw-breathing-footer {
    min-height: 128px;
    padding: 38px 12px 52px;
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/system-workbench.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/
/* System settings workbench pages. */
.system-workbench {
  --sw-bg: #f3f6fa;
  --sw-panel: #ffffff;
  --sw-panel-soft: #f5f8fc;
  --sw-line: #e2e8f1;
  --sw-line-strong: #c6d2e0;
  --sw-text: #16233a;
  --sw-text-dim: #5d6e83;
  --sw-text-faint: #97a6b8;
  --sw-blue: #0f72c9;
  --sw-blue-deep: #082044;
  --sw-blue-soft: #e7f1fb;
  --sw-amber: #c9760a;
  --sw-green: #138a5c;
  --sw-red: #d23b3b;
  --sw-mono:
    "SFMono-Regular", ui-monospace, "JetBrains Mono", "Roboto Mono", Menlo,
    Consolas, monospace;

  color: var(--sw-text);
  background: var(--sw-bg);
  margin: -24px -32px;
  padding: 24px 32px 30px;
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.system-workbench .page-header-unified {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  grid-gap: 18px;
  gap: 18px;
  min-height: 96px;
  padding: 16px 24px;
  color: var(--ink-inverse);
  /* 统一为全站钢蓝 hero（与 .page-header-unified / .quotation-task-page-hero 一致，去末端青绿）。 */
  background: linear-gradient(118deg, #15325b 0%, #1f4d86 52%, #2c6ea4 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(15, 46, 92, 0.18);
}

.system-workbench .page-header-main {
  min-width: 0;
}

.system-workbench .page-header-unified .breadcrumb {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
}

.system-workbench .page-header-unified h1 {
  margin: 0;
  color: var(--ink-inverse);
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
}

.system-workbench .page-header-unified .desc {
  max-width: 720px;
  margin: 6px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
}

.system-workbench .page-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.system-workbench .page-header-actions .btn,
.system-workbench .page-header-actions .btn.btn-primary,
.system-workbench .page-header-actions .btn.btn-ghost,
.system-workbench .page-header-actions .more-actions > summary {
  height: 36px;
  min-width: 92px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #12325c !important;
  -webkit-text-fill-color: #12325c !important;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(8, 23, 55, 0.12);
  white-space: nowrap;
}

.system-workbench .page-header-actions .btn:hover,
.system-workbench .page-header-actions .more-actions > summary:hover {
  background: var(--surface);
  border-color: rgba(255, 255, 255, 0.95);
  color: #0f3f7a !important;
  -webkit-text-fill-color: #0f3f7a !important;
}

.system-workbench .page-header-actions .more-actions {
  position: relative;
}

.system-workbench .page-header-actions .more-actions-menu {
  right: 0;
  left: auto;
}

.system-workbench .tenant-settings-hero,
.system-workbench .user-hero,
.system-workbench .role-hero,
.system-workbench .permission-matrix-hero,
.system-workbench .approval-flow-designer-hero,
.system-workbench .operation-audit-hero,
.system-workbench .tenant-subscription-hero {
  border: 1px solid var(--sw-line);
  border-top: 2px solid var(--sw-blue);
  border-radius: 6px;
  background: var(--sw-panel);
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
}

.system-workbench .tenant-settings-hero,
.system-workbench .user-hero,
.system-workbench .role-hero,
.system-workbench .permission-matrix-hero,
.system-workbench .approval-flow-designer-hero {
  min-height: 96px;
  padding: 16px 18px;
}

.system-workbench .tenant-settings-hero-kicker {
  color: var(--sw-blue);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

.system-workbench :is(.user-hero, .role-hero, .permission-matrix-hero, .approval-flow-designer-hero) h1 {
  margin: 4px 0;
  color: var(--sw-text);
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: 0;
}

.system-workbench :is(.user-hero, .role-hero, .permission-matrix-hero, .approval-flow-designer-hero) p {
  margin: 0;
  color: var(--sw-text-dim);
  font-size: 13px;
}

.system-workbench :is(
  .tenant-settings-health,
  .user-metrics,
  .role-metrics,
  .permission-matrix-summary,
  .platform-metrics,
  .approval-flow-designer-metrics,
  .operation-audit-metric-grid,
  .tenant-first-run-strip
) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 0;
  gap: 0;
  background: var(--sw-panel);
  border: 1px solid var(--sw-line);
  border-top: 2px solid var(--sw-blue);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
  overflow: hidden;
}

.system-workbench :is(
  .tenant-health-card,
  .permission-matrix-summary article,
  .platform-metric,
  .approval-flow-designer-metrics article,
  .operation-audit-metric-card,
  .tenant-first-run-strip article
) {
  min-height: 92px;
  padding: 14px 18px 13px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--sw-line);
  border-radius: 0;
  box-shadow: none;
}

.system-workbench :is(
  .tenant-health-card,
  .permission-matrix-summary article,
  .platform-metric,
  .approval-flow-designer-metrics article,
  .operation-audit-metric-card,
  .tenant-first-run-strip article
):last-child {
  border-right: 0;
}

.system-workbench :is(
  .tenant-health-card,
  .permission-matrix-summary article,
  .platform-metric,
  .approval-flow-designer-metrics article,
  .operation-audit-metric-card,
  .tenant-first-run-strip article
) span,
.system-workbench :is(
  .tenant-health-card,
  .permission-matrix-summary article,
  .platform-metric,
  .approval-flow-designer-metrics article,
  .operation-audit-metric-card,
  .tenant-first-run-strip article
) small,
.system-workbench :is(
  .tenant-health-card,
  .permission-matrix-summary article,
  .platform-metric,
  .approval-flow-designer-metrics article,
  .operation-audit-metric-card,
  .tenant-first-run-strip article
) p {
  color: var(--sw-text-dim);
  font-size: 12px;
}

.system-workbench :is(
  .tenant-health-card,
  .permission-matrix-summary article,
  .platform-metric,
  .approval-flow-designer-metrics article,
  .operation-audit-metric-card,
  .tenant-first-run-strip article
) strong {
  font-family: var(--sw-mono);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--sw-blue);
  font-size: 28px;
  line-height: 1.05;
}

.system-workbench :is(.tenant-health-card.tone-warning, .operation-audit-metric-card.is-warning) strong {
  color: var(--sw-amber);
}

.system-workbench :is(.tenant-health-card.tone-danger, .permission-matrix-summary .is-risk, .operation-audit-metric-card.is-danger) strong {
  color: var(--sw-red);
}

.system-workbench .tenant-health-card.tone-success strong {
  color: var(--sw-green);
}

.system-workbench .tenant-settings-overview-card {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border-color: #dbeafe;
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(243, 250, 255, 0.98));
  box-shadow: var(--shadow-soft);
}

.system-workbench .tenant-settings-overview-card .document-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  border: 0;
}

.system-workbench .tenant-settings-overview-card .muted-text {
  max-width: 780px;
  margin: 4px 0 0;
  color: var(--sw-text-dim);
  font-size: 13px;
  line-height: 1.6;
}

.system-workbench .tenant-settings-overview-card .status-pill {
  flex: 0 0 auto;
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.system-workbench .tenant-settings-overview-card .tenant-settings-health {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.system-workbench .tenant-settings-overview-card .tenant-health-card {
  min-height: 86px;
  padding: 12px 14px;
  border: 1px solid #dbeafe;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}

.system-workbench .tenant-settings-overview-card .tenant-health-card::before {
  display: none;
}

.system-workbench .tenant-settings-overview-card .tenant-health-card span,
.system-workbench .tenant-settings-overview-card .tenant-health-card small {
  color: var(--sw-text-dim);
}

.system-workbench .tenant-settings-overview-card .tenant-health-card strong {
  color: var(--sw-blue);
  font-size: 28px;
}

.system-workbench .tenant-settings-overview-card .tenant-health-card.tone-warning strong {
  color: var(--sw-amber);
}

.system-workbench .tenant-settings-overview-card .tenant-health-card.tone-danger strong {
  color: var(--sw-red);
}

.system-workbench .tenant-settings-overview-card .tenant-health-card.tone-success strong {
  color: var(--sw-green);
}

.system-workbench .tenant-settings-overview-card .tenant-settings-flow-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.system-workbench .tenant-settings-overview-card .flow-step {
  min-height: 94px;
  padding: 12px;
  border-color: #dbeafe;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}

.system-workbench .tenant-settings-overview-card .flow-step.active {
  border-color: #93c5fd;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.system-workbench .tenant-settings-overview-card .flow-step span {
  color: #1d4ed8;
}

.system-workbench .tenant-settings-overview-card .flow-step strong {
  color: var(--sw-text);
  font-size: 18px;
}

.system-workbench .tenant-settings-overview-card .flow-step small {
  color: var(--sw-text-dim);
}

.system-workbench :is(
  .section-card,
  .role-list-panel,
  .role-inspector,
  .permission-matrix-panel,
  .approval-policy-list,
  .approval-policy-detail,
  .approval-flow-summary-panel,
  .approval-flow-risk-board,
  .tenant-ops-panel,
  .tenant-request-table-card,
  .operation-audit-filter,
  .operation-audit-side-card,
  .table-wrap,
  .table-container
) {
  border-color: var(--sw-line);
  border-radius: 8px;
  background: var(--sw-panel);
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
}

.system-workbench :is(
  .user-toolbar,
  .role-toolbar,
  .permission-matrix-toolbar,
  .operation-audit-filter,
  .tenant-subscription-summary-bar,
  .approval-flow-design-strip
) {
  border: 1px solid var(--sw-line);
  border-radius: 8px;
  background: var(--sw-panel);
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
}

.system-workbench :is(.role-section-title, .tenant-settings-command-head) strong,
.system-workbench :is(.role-section-title, .tenant-settings-command-head) h2 {
  color: var(--sw-text);
  letter-spacing: 0;
}

.system-workbench .tenant-settings-command {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
  grid-gap: 14px;
  gap: 14px;
}

.system-workbench .tenant-settings-command-main,
.system-workbench .tenant-settings-command-side {
  align-content: start;
  gap: 12px;
  border-color: #dbeafe;
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 255, 0.99));
  box-shadow: var(--shadow-soft);
}

.system-workbench .tenant-settings-command-head {
  align-items: flex-start;
  padding: 0;
}

.system-workbench .tenant-settings-command-head p {
  margin: 4px 0 0;
  color: var(--sw-text-dim);
  font-size: 13px;
  line-height: 1.6;
}

.system-workbench .tenant-settings-lanes {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.system-workbench .tenant-settings-lane {
  min-height: 112px;
  padding: 12px;
  border: 1px solid #dbeafe;
  border-top: 3px solid #60a5fa;
  border-left-width: 1px;
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}

.system-workbench .tenant-settings-lane.active,
.system-workbench .tenant-settings-lane:hover {
  transform: translateY(-1px);
  border-color: #93c5fd;
  box-shadow: 0 12px 20px rgba(37, 99, 235, 0.08);
}

.system-workbench .tenant-settings-lane.tone-blue {
  border-top-color: #2563eb;
}

.system-workbench .tenant-settings-lane.tone-amber {
  border-top-color: #f59e0b;
  background: #fff;
}

.system-workbench .tenant-settings-lane.tone-teal {
  border-top-color: #0f766e;
  background: #fff;
}

.system-workbench .tenant-settings-lane span {
  color: #1d4ed8;
  letter-spacing: 0;
}

.system-workbench .tenant-settings-lane strong {
  font-size: 18px;
}

.system-workbench .tenant-settings-lane small {
  font-size: 12px;
  line-height: 1.55;
}

.system-workbench .tenant-settings-lane-meta {
  gap: 6px;
}

.system-workbench .tenant-settings-lane-meta em,
.system-workbench .tenant-settings-lane-meta b {
  min-height: 22px;
  padding: 0 8px;
  background: #f8fbff;
}

.system-workbench .tenant-settings-active-panel {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
}

.system-workbench .tenant-settings-active-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.system-workbench .tenant-settings-active-list .tenant-settings-item {
  min-height: 104px;
  border-color: #dbeafe;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}

.system-workbench .tenant-settings-command-side .tenant-action-list {
  gap: 8px;
}

.system-workbench .tenant-settings-command-side .tenant-action-list a,
.system-workbench .tenant-settings-queue-item {
  min-height: 68px;
  border-color: #dbeafe;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
}

.system-workbench .tenant-settings-queue-filters {
  margin-top: 2px;
}

.system-workbench .tenant-settings-queue-filters button {
  min-height: 30px;
  border-color: #dbeafe;
  background: #f8fbff;
}

.system-workbench .tenant-settings-queue-filters button.active {
  background: #1d4ed8;
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.12);
}

.system-workbench .tenant-settings-queue-index {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #eff6ff;
  color: #1d4ed8;
  box-shadow: none;
}

.system-workbench.user-page .user-account-overview-card,
.system-workbench.user-page .user-overview-panel,
.system-workbench.user-page .user-onboarding-board,
.system-workbench.user-page .user-focus-strip,
.system-workbench.user-page .user-list-panel,
.system-workbench.user-page .user-inspector {
  border: 1px solid var(--sw-line);
  border-radius: 8px;
  background: var(--sw-panel);
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
}

.system-workbench.user-page .user-account-overview-card {
  padding: 14px 16px 16px;
}

.system-workbench.user-page .document-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
}

.system-workbench.user-page .document-section-head h2 {
  margin: 2px 0 0;
  color: var(--sw-text);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0;
}

.system-workbench.user-page .document-section-head .muted-text {
  margin: 0;
  color: var(--sw-blue);
  font-size: 12px;
  font-weight: 800;
}

.system-workbench.user-page .document-section-head .status-pill {
  min-height: 28px;
  padding: 0 10px;
  border-color: #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
  white-space: nowrap;
}

.system-workbench.user-page .user-account-overview-card .user-metrics {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  gap: 10px;
}

.system-workbench.user-page .user-account-overview-card .tenant-health-card {
  min-height: 96px;
  border: 1px solid #dbeafe;
  border-top: 3px solid #60a5fa;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  box-shadow: none;
}

.system-workbench.user-page .user-account-overview-card .tenant-health-card:last-child {
  border-right: 1px solid #dbeafe;
}

.system-workbench.user-page .user-account-overview-card .tenant-health-card span,
.system-workbench.user-page .user-account-overview-card .tenant-health-card small {
  color: var(--sw-text-dim);
}

.system-workbench.user-page .user-account-overview-card .tenant-health-card strong {
  color: #1d4ed8;
  font-size: 26px;
}

.system-workbench.user-page .user-account-overview-card .tenant-health-card.tone-warning {
  border-top-color: #f59e0b;
}

.system-workbench.user-page .user-account-overview-card .tenant-health-card.tone-danger {
  border-top-color: #ef4444;
}

.system-workbench.user-page .user-account-overview-card .tenant-health-card.tone-success {
  border-top-color: #10b981;
}

.system-workbench.user-page .user-toolbar {
  /* 网格列有 320px 下限 + 两个 auto 段，最小宽度约 820px，窄于成员面板时会右溢；
     改为可换行的 flex：搜索框可伸缩，状态分段/查询按钮放不下时自动换行，不再超出页边。 */
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 12px;
}

.system-workbench.user-page .user-search {
  flex: 1 1 240px;
  min-width: 0;
}

.system-workbench.user-page .user-segment {
  flex-wrap: wrap;
}

.system-workbench.user-page .user-toolbar-actions {
  margin-left: auto;
}

.system-workbench.user-page .user-search input {
  height: 36px;
  border-color: #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
}

.system-workbench.user-page .user-segment {
  min-height: 36px;
  border-color: #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
}

.system-workbench.user-page .user-segment button {
  min-width: 64px;
  border-radius: 6px;
}

.system-workbench.user-page .user-segment button.active {
  color: #1d4ed8;
  background: #fff;
}

.system-workbench.user-page .user-command-strip-primary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.system-workbench.user-page .user-command-card {
  min-height: 112px;
  border: 1px solid #dbeafe;
  border-top: 3px solid #60a5fa;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  box-shadow: none;
}

.system-workbench.user-page .user-command-card:hover,
.system-workbench.user-page .user-command-card.active {
  transform: translateY(-1px);
  border-color: #93c5fd;
  border-top-color: #2563eb;
  background: #f8fbff;
  box-shadow: 0 12px 20px rgba(37, 99, 235, 0.08);
}

.system-workbench.user-page .user-command-card span {
  color: #1d4ed8;
  letter-spacing: 0;
}

.system-workbench.user-page .user-command-card strong {
  color: var(--sw-text);
  font-size: 24px;
}

.system-workbench.user-page .user-command-card small {
  color: var(--sw-text-dim);
  line-height: 1.55;
}

.system-workbench.user-page .user-command-card em {
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid #dbeafe;
  background: #f8fbff;
  color: #1d4ed8;
}

.system-workbench.user-page .user-overview-grid {
  grid-template-columns: minmax(0, 0.96fr) minmax(360px, 1.04fr);
  gap: 12px;
}

.system-workbench.user-page .user-overview-panel,
.system-workbench.user-page .user-onboarding-board,
.system-workbench.user-page .user-focus-strip,
.system-workbench.user-page .user-list-panel,
.system-workbench.user-page .user-inspector {
  padding: 14px;
}

.system-workbench.user-page .user-section-title {
  margin-bottom: 10px;
  align-items: flex-start;
}

.system-workbench.user-page .user-section-title strong {
  color: var(--sw-text);
  font-size: 16px;
  letter-spacing: 0;
}

.system-workbench.user-page .user-section-title span {
  color: var(--sw-text-dim);
  font-size: 12px;
}

.system-workbench.user-page .user-overview-stats {
  gap: 8px;
}

.system-workbench.user-page .user-overview-stats div,
.system-workbench.user-page .user-capacity-strip,
.system-workbench.user-page .user-onboarding-stage,
.system-workbench.user-page .user-join-alert,
.system-workbench.user-page .user-queue-card,
.system-workbench.user-page .user-queue-empty,
.system-workbench.user-page .user-focus-list.horizontal a,
.system-workbench.user-page .user-focus-list.horizontal p,
.system-workbench.user-page .user-inspector-list div,
.system-workbench.user-page .user-inspector-note,
.system-workbench.user-page .user-workbench-checklist,
.system-workbench.user-page .user-workbench-shortcuts a {
  border-radius: 8px;
  box-shadow: none;
}

.system-workbench.user-page .user-overview-stats div,
.system-workbench.user-page .user-capacity-strip,
.system-workbench.user-page .user-onboarding-stage,
.system-workbench.user-page .user-inspector-list div,
.system-workbench.user-page .user-workbench-checklist {
  border-color: #dbeafe;
  background: #f8fbff;
}

.system-workbench.user-page .user-capacity-strip {
  margin-top: 10px;
}

.system-workbench.user-page .user-onboarding-stages {
  margin-top: 10px;
  gap: 7px;
}

.system-workbench.user-page .user-onboarding-stage {
  padding: 8px 10px;
}

.system-workbench.user-page .user-onboarding-stage > span {
  width: 28px;
  height: 28px;
  color: #1d4ed8;
}

.system-workbench.user-page .user-queue-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.system-workbench.user-page .user-queue-card,
.system-workbench.user-page .user-queue-empty {
  min-height: 104px;
  border-color: #dbeafe;
  background: #fff;
  padding: 12px;
}

.system-workbench.user-page .user-queue-card:hover {
  transform: translateY(-1px);
  border-color: #93c5fd;
  background: #f8fbff;
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.08);
}

.system-workbench.user-page .user-join-alert {
  border-color: #bfdbfe;
  background: #eff6ff;
  padding: 12px;
}

.system-workbench.user-page .user-focus-strip-full {
  margin-top: 0;
}

.system-workbench.user-page .user-focus-list.horizontal {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.system-workbench.user-page .user-focus-list.horizontal a,
.system-workbench.user-page .user-focus-list.horizontal p {
  min-height: 76px;
  border-color: #dbeafe;
  background: #fff;
  padding: 12px;
}

.system-workbench.user-page .user-focus-list.horizontal strong {
  font-size: 14px;
}

.system-workbench.user-page .user-focus-list.horizontal span {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.55;
}

.system-workbench.user-page .user-workbench {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.28fr);
  gap: 12px;
}

.system-workbench.user-page .user-list-caption {
  margin-top: -4px;
  color: var(--sw-text-dim);
}

.system-workbench.user-page .user-table-wrap-modern {
  border-color: var(--sw-line);
  border-radius: 8px;
  box-shadow: none;
}

/* 成员表格改用全站标准表壳 data-table.quotation-task-table.quotation-queue-table
   （序号 row-index-column、主列品牌蓝链接、等高单行、图标操作列 action-column），
   列宽走 <col> 内联；不再维护 user-table-modern 专属样式。 */

.system-workbench.user-page .user-table th,
.system-workbench.user-page .user-table td {
  padding: 12px;
}

.system-workbench.user-page .user-table-modern td:first-child {
  background: transparent;
}

.system-workbench.user-page .user-avatar-card {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  box-shadow: none;
}

.system-workbench.user-page .user-row-actions a,
.system-workbench.user-page .user-row-actions button {
  min-height: 30px;
  min-width: 52px;
  border-radius: 8px;
}

.system-workbench.user-page .user-inspector {
  top: 76px;
}

.system-workbench.user-page .user-inspector-note {
  border-color: #dbeafe;
  background: #f8fbff;
}

.system-workbench.user-page .user-inspector-note strong {
  color: var(--sw-text);
}

.system-workbench.user-page .user-workbench-shortcuts a {
  min-height: 36px;
}

.system-workbench.user-page .user-account-form-layout {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.3fr);
  gap: 12px;
  align-items: start;
}

.system-workbench.user-page .user-create-panel,
.system-workbench.user-page .user-create-impact-panel {
  border: 1px solid var(--sw-line);
  border-radius: 8px;
  background: var(--sw-panel);
  padding: 14px;
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
}

.system-workbench.user-page .user-create-impact-panel {
  position: -webkit-sticky;
  position: sticky;
  top: 76px;
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.system-workbench.user-page .user-create-form.standalone {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.system-workbench.user-page .user-create-form label {
  min-width: 0;
}

.system-workbench.user-page .user-create-form label span,
.system-workbench.user-page .user-role-head span {
  color: var(--sw-text-dim);
  font-size: 12px;
  font-weight: 800;
}

.system-workbench.user-page .user-create-form input,
.system-workbench.user-page .user-create-form select,
.system-workbench.user-page .user-role-head input {
  width: 100%;
  height: 36px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
  color: var(--sw-text);
  padding: 0 10px;
}

.system-workbench.user-page .user-create-form input:disabled,
.system-workbench.user-page .user-create-form select:disabled {
  color: #94a3b8;
  background: #f1f5f9;
  cursor: not-allowed;
}

.system-workbench.user-page .user-create-form input:focus,
.system-workbench.user-page .user-create-form select:focus,
.system-workbench.user-page .user-role-head input:focus {
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
}

.system-workbench.user-page .user-create-remark {
  grid-column: span 2;
}

.system-workbench.user-page p.user-create-remark,
.system-workbench.user-page .user-inspector-note {
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
  padding: 12px;
  color: var(--sw-text-dim);
  font-size: 13px;
  line-height: 1.6;
}

.system-workbench.user-page .user-create-roles.standalone {
  margin-top: 14px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
  padding: 12px;
}

.system-workbench.user-page .user-role-head {
  display: grid;
  grid-template-columns: minmax(120px, auto) minmax(180px, 1fr);
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
}

.system-workbench.user-page .user-role-bundle-panel {
  margin-top: 10px;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.system-workbench.user-page .user-role-bundle-intro,
.system-workbench.user-page .user-role-picker-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.system-workbench.user-page .user-role-bundle-intro strong,
.system-workbench.user-page .user-role-picker-head strong {
  color: var(--sw-text);
  font-size: 13px;
}

.system-workbench.user-page .user-role-bundle-intro span,
.system-workbench.user-page .user-role-picker-head span {
  color: var(--sw-text-faint);
  font-size: 12px;
}

.system-workbench.user-page .user-role-bundles {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}

.system-workbench.user-page .user-role-bundles button {
  flex: 1 1;
  min-width: 0;
  min-height: 82px;
  display: grid;
  align-content: start;
  grid-gap: 4px;
  gap: 4px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
  color: var(--sw-text);
  padding: 10px;
  text-align: left;
}

.system-workbench.user-page .user-role-bundles button strong,
.system-workbench.user-page .user-role-bundles button span,
.system-workbench.user-page .user-role-bundles button em {
  display: block;
}

.system-workbench.user-page .user-role-bundles button strong {
  font-size: 12px;
  font-weight: 800;
  color: #1d4ed8;
}

.system-workbench.user-page .user-role-bundles button span {
  color: var(--sw-text-dim);
  font-size: 12px;
  line-height: 1.35;
}

.system-workbench.user-page .user-role-bundles button em {
  color: var(--sw-text-faint);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.system-workbench.user-page .user-role-bundles button:hover:not(:disabled) {
  border-color: #93c5fd;
  background: #eff6ff;
}

.system-workbench.user-page .user-role-bundles button.is-selected {
  border-color: #60a5fa;
  background: #eff6ff;
  box-shadow: inset 0 0 0 1px #bfdbfe;
}

.system-workbench.user-page .user-role-bundles button.is-selected em {
  color: #1d4ed8;
}

.system-workbench.user-page .user-role-bundles button:disabled {
  color: #94a3b8;
  background: #f1f5f9;
  cursor: not-allowed;
}

.system-workbench.user-page .user-role-bundles button:disabled strong,
.system-workbench.user-page .user-role-bundles button:disabled span,
.system-workbench.user-page .user-role-bundles button:disabled em {
  color: #94a3b8;
}

.system-workbench.user-page .user-role-picker-head {
  margin-top: 10px;
  padding-top: 2px;
}

.system-workbench.user-page .user-role-picker {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.system-workbench.user-page .user-role-picker label,
.system-workbench.user-page .user-role-picker p {
  min-height: 58px;
  margin: 0;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  box-shadow: none;
}

.system-workbench.user-page .user-role-picker label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "check name"
    "check code";
  grid-column-gap: 8px;
  column-gap: 8px;
  align-items: center;
}

.system-workbench.user-page .user-role-picker input {
  grid-area: check;
  width: 16px;
  height: 16px;
  margin: 0;
}

.system-workbench.user-page .user-role-picker strong {
  grid-area: name;
  color: var(--sw-text);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.system-workbench.user-page .user-role-picker small {
  grid-area: code;
  color: var(--sw-text-faint);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.system-workbench.user-page .user-role-picker p {
  grid-column: 1 / -1;
  color: var(--sw-text-dim);
  display: grid;
  place-items: center;
}

.system-workbench.user-page .user-create-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.system-workbench.user-page .user-access-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.system-workbench.user-page .user-access-metrics span {
  min-height: 58px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #fff;
  color: #1d4ed8;
  display: grid;
  place-items: center;
  padding: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

.system-workbench.user-page .user-access-groups {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.system-workbench.user-page .user-access-groups div,
.system-workbench.user-page .user-access-groups > p {
  margin: 0;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #fff;
  padding: 10px;
}

.system-workbench.user-page .user-access-groups strong {
  color: var(--sw-text);
  font-size: 13px;
}

.system-workbench.user-page .user-access-groups p {
  margin: 5px 0 0;
  color: var(--sw-text-dim);
  font-size: 12px;
  line-height: 1.55;
}

.system-workbench.user-page .form-error,
.system-workbench.user-page .role-notice.warning {
  margin: 0;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff5f5;
  color: #b42318;
  padding: 10px 12px;
}

.system-workbench.role-page .role-governance-overview-card,
.system-workbench.role-page .role-create-panel,
.system-workbench.role-page .role-summary-panel,
.system-workbench.role-page .role-risk-board,
.system-workbench.role-page .role-list-panel,
.system-workbench.role-page .role-inspector,
.system-workbench.role-page .role-toolbar,
.system-workbench.role-page .role-segment {
  border: 1px solid var(--sw-line);
  border-radius: 8px;
  background: var(--sw-panel);
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
}

.system-workbench.role-page .role-governance-overview-card {
  padding: 14px 16px 16px;
}

.system-workbench.role-page .document-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
}

.system-workbench.role-page .document-section-head h2 {
  margin: 2px 0 0;
  color: var(--sw-text);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0;
}

.system-workbench.role-page .document-section-head .muted-text {
  margin: 0;
  color: var(--sw-blue);
  font-size: 12px;
  font-weight: 800;
}

.system-workbench.role-page .document-section-head .status-pill {
  min-height: 28px;
  padding: 0 10px;
  border-color: #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
  white-space: nowrap;
}

.system-workbench.role-page .role-governance-overview-card .role-metrics {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  gap: 10px;
}

.system-workbench.role-page .role-governance-overview-card .tenant-health-card {
  min-height: 96px;
  border: 1px solid #dbeafe;
  border-top: 3px solid #60a5fa;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  box-shadow: none;
}

.system-workbench.role-page .role-governance-overview-card .tenant-health-card:last-child {
  border-right: 1px solid #dbeafe;
}

.system-workbench.role-page .role-governance-overview-card .tenant-health-card span,
.system-workbench.role-page .role-governance-overview-card .tenant-health-card small {
  color: var(--sw-text-dim);
}

.system-workbench.role-page .role-governance-overview-card .tenant-health-card strong {
  color: #1d4ed8;
  font-size: 26px;
}

.system-workbench.role-page .role-governance-overview-card .tenant-health-card.tone-warning {
  border-top-color: #f59e0b;
}

.system-workbench.role-page .role-governance-overview-card .tenant-health-card.tone-danger {
  border-top-color: #ef4444;
}

.system-workbench.role-page .role-governance-overview-card .tenant-health-card.tone-success {
  border-top-color: #10b981;
}

.system-workbench.role-page .notice-bar {
  border-radius: 8px;
  box-shadow: none;
}

.system-workbench.role-page .role-toolbar {
  grid-template-columns: minmax(320px, 1fr) minmax(150px, auto) minmax(150px, auto) auto;
  gap: 10px;
  padding: 10px 12px;
}

.system-workbench.role-page .role-search input,
.system-workbench.role-page .role-toolbar select,
.system-workbench.role-page .role-create-form input,
.system-workbench.role-page .role-create-form select {
  height: 36px;
  border-color: #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
}

.system-workbench.role-page .role-segment {
  min-height: 40px;
  padding: 4px;
}

.system-workbench.role-page .role-segment button {
  min-width: 72px;
  border-radius: 6px;
}

.system-workbench.role-page .role-segment button.active {
  background: #eff6ff;
  color: #1d4ed8;
}

.system-workbench.role-page .role-command-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.system-workbench.role-page .role-command-card {
  min-height: 112px;
  border: 1px solid #dbeafe;
  border-top: 3px solid #60a5fa;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  box-shadow: none;
}

.system-workbench.role-page .role-command-card:hover,
.system-workbench.role-page .role-command-card.active {
  transform: translateY(-1px);
  border-color: #93c5fd;
  border-top-color: #2563eb;
  background: #f8fbff;
  box-shadow: 0 12px 20px rgba(37, 99, 235, 0.08);
}

.system-workbench.role-page .role-command-card span {
  color: #1d4ed8;
  letter-spacing: 0;
}

.system-workbench.role-page .role-command-card strong {
  color: var(--sw-text);
  font-size: 24px;
}

.system-workbench.role-page .role-command-card small {
  color: var(--sw-text-dim);
  line-height: 1.55;
}

.system-workbench.role-page .role-command-card em {
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid #dbeafe;
  background: #f8fbff;
  color: #1d4ed8;
}

.system-workbench.role-page .role-workbench-summary {
  grid-template-columns: minmax(0, 0.96fr) minmax(360px, 1.04fr);
  gap: 12px;
}

.system-workbench.role-page .role-create-panel,
.system-workbench.role-page .role-summary-panel,
.system-workbench.role-page .role-risk-board,
.system-workbench.role-page .role-list-panel,
.system-workbench.role-page .role-inspector {
  padding: 14px;
}

.system-workbench.role-page .role-section-title {
  margin-bottom: 10px;
  align-items: flex-start;
}

.system-workbench.role-page .role-section-title strong {
  color: var(--sw-text);
  font-size: 16px;
  letter-spacing: 0;
}

.system-workbench.role-page .role-section-title span {
  color: var(--sw-text-dim);
  font-size: 12px;
}

.system-workbench.role-page .role-summary-grid {
  gap: 8px;
}

.system-workbench.role-page .role-summary-grid div,
.system-workbench.role-page .role-capacity-strip,
.system-workbench.role-page .role-risk-card,
.system-workbench.role-page .role-risk-empty,
.system-workbench.role-page .role-inspector-list div,
.system-workbench.role-page .role-inspector-note,
.system-workbench.role-page .role-workbench-checklist,
.system-workbench.role-page .role-workbench-shortcuts a,
.system-workbench.role-page .role-inspector-actions button,
.system-workbench.role-page .role-create-panel {
  border-radius: 8px;
  box-shadow: none;
}

.system-workbench.role-page .role-summary-grid div,
.system-workbench.role-page .role-capacity-strip,
.system-workbench.role-page .role-inspector-list div,
.system-workbench.role-page .role-workbench-checklist {
  border-color: #dbeafe;
  background: #f8fbff;
}

.system-workbench.role-page .role-capacity-strip {
  margin-top: 10px;
}

.system-workbench.role-page .role-risk-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.system-workbench.role-page .role-risk-card,
.system-workbench.role-page .role-risk-empty {
  min-height: 92px;
  padding: 12px;
}

.system-workbench.role-page .role-risk-card strong {
  font-size: 14px;
}

.system-workbench.role-page .role-risk-card span,
.system-workbench.role-page .role-risk-empty {
  font-size: 12px;
  line-height: 1.55;
}

.system-workbench.role-page .role-workbench {
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.28fr);
  gap: 12px;
}

.system-workbench.role-page .role-list-caption {
  margin-top: -4px;
  color: var(--sw-text-dim);
}

.system-workbench.role-page .role-table-wrap {
  border-color: var(--sw-line);
  border-radius: 8px;
  box-shadow: none;
}

.system-workbench.role-page .role-table {
  min-width: 1120px;
}

.system-workbench.role-page .role-table th,
.system-workbench.role-page .role-table td {
  padding: 12px;
}

.system-workbench.role-page .role-detail-link,
.system-workbench.role-page .role-inspector-actions button {
  min-height: 30px;
  border-radius: 8px;
}

.system-workbench.role-page .role-risk-dot.large {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  box-shadow: none;
}

.system-workbench.role-page .role-inspector {
  top: 76px;
}

.system-workbench.role-page .role-inspector-note {
  border-color: #dbeafe;
  background: #f8fbff;
}

.system-workbench.role-page .role-inspector-note strong {
  color: var(--sw-text);
}

.system-workbench.role-page .role-permission-tags span {
  border-radius: 8px;
  background: #f8fbff;
}

.system-workbench.role-page .role-inspector-actions {
  gap: 8px;
}

.system-workbench.role-page .role-create-form {
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 10px;
}

.system-workbench.role-page .role-create-description {
  grid-column: span 2;
}

.system-workbench.role-page .role-create-actions {
  align-self: flex-end;
}

.system-workbench.role-page .form-error {
  margin: 0;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff5f5;
  color: #b42318;
  padding: 10px 12px;
}

.system-workbench.approval-center .approval-governance-overview-card,
.system-workbench.approval-center .approval-policy-list,
.system-workbench.approval-center .approval-policy-detail {
  border: 1px solid var(--sw-line);
  border-radius: 8px;
  background: var(--sw-panel);
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
}

.system-workbench.approval-center .approval-governance-overview-card {
  padding: 14px 16px 16px;
}

.system-workbench.approval-center .document-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
}

.system-workbench.approval-center .document-section-head h2 {
  margin: 2px 0 0;
  color: var(--sw-text);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0;
}

.system-workbench.approval-center .document-section-head .muted-text {
  margin: 0;
  color: var(--sw-blue);
  font-size: 12px;
  font-weight: 800;
}

.system-workbench.approval-center .document-section-head .status-pill {
  min-height: 28px;
  padding: 0 10px;
  border-color: #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
  white-space: nowrap;
}

.system-workbench.approval-center .approval-governance-metrics {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  gap: 10px;
}

.system-workbench.approval-center .approval-governance-metrics .platform-metric {
  min-height: 96px;
  border: 1px solid #dbeafe;
  border-top: 3px solid #60a5fa;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  box-shadow: none;
}

.system-workbench.approval-center .approval-governance-metrics .platform-metric:last-child {
  border-right: 1px solid #dbeafe;
}

.system-workbench.approval-center .approval-governance-metrics .platform-metric span,
.system-workbench.approval-center .approval-governance-metrics .platform-metric small {
  color: var(--sw-text-dim);
}

.system-workbench.approval-center .approval-governance-metrics .platform-metric strong {
  color: #1d4ed8;
  font-size: 26px;
}

.system-workbench.approval-center .notice-bar {
  border-radius: 8px;
  box-shadow: none;
}

.system-workbench.approval-center .approval-policy-command-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.system-workbench.approval-center .approval-policy-command-card {
  min-height: 112px;
  border: 1px solid #dbeafe;
  border-top: 3px solid #60a5fa;
  border-radius: 8px;
  background: #fff;
  color: inherit;
  padding: 12px;
  text-align: left;
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.system-workbench.approval-center .approval-policy-command-card:hover,
.system-workbench.approval-center .approval-policy-command-card.active {
  transform: translateY(-1px);
  border-color: #93c5fd;
  border-top-color: #2563eb;
  background: #f8fbff;
  box-shadow: 0 12px 20px rgba(37, 99, 235, 0.08);
}

.system-workbench.approval-center .approval-policy-command-card:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.system-workbench.approval-center .approval-policy-command-card span,
.system-workbench.approval-center .approval-policy-command-card small,
.system-workbench.approval-center .approval-policy-command-card em {
  display: block;
}

.system-workbench.approval-center .approval-policy-command-card span {
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
}

.system-workbench.approval-center .approval-policy-command-card strong {
  color: var(--sw-text);
  font-size: 24px;
  line-height: 1;
}

.system-workbench.approval-center .approval-policy-command-card small {
  color: var(--sw-text-dim);
  font-size: 12px;
  line-height: 1.55;
}

.system-workbench.approval-center .approval-policy-command-card em {
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
  color: #1d4ed8;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.system-workbench.approval-center .approval-policy-workbench {
  grid-template-columns: minmax(340px, 0.36fr) minmax(0, 1fr);
  gap: 12px;
}

.system-workbench.approval-center .approval-policy-list,
.system-workbench.approval-center .approval-policy-detail {
  padding: 14px;
}

.system-workbench.approval-center .approval-policy-list {
  max-height: none;
  gap: 8px;
}

.system-workbench.approval-center .approval-policy-list-headline {
  display: grid;
}

.system-workbench.approval-center .role-section-title {
  margin-bottom: 10px;
  align-items: flex-start;
}

.system-workbench.approval-center .role-section-title strong {
  color: var(--sw-text);
  font-size: 16px;
  letter-spacing: 0;
}

.system-workbench.approval-center .role-section-title span {
  color: var(--sw-text-dim);
  font-size: 12px;
}

.system-workbench.approval-center .approval-policy-row {
  border-color: #dbeafe;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  box-shadow: none;
}

.system-workbench.approval-center .approval-policy-row:hover,
.system-workbench.approval-center .approval-policy-row.selected {
  transform: translateY(-1px);
  border-color: #93c5fd;
  background: #f8fbff;
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.08);
}

.system-workbench.approval-center .approval-policy-row.selected::before {
  top: 10px;
  bottom: 10px;
  background: #2563eb;
}

.system-workbench.approval-center .approval-policy-row strong {
  font-size: 15px;
  letter-spacing: 0;
}

.system-workbench.approval-center .approval-policy-detail {
  top: 76px;
}

.system-workbench.approval-center .approval-policy-current-head {
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
  padding: 12px;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.system-workbench.approval-center .approval-policy-current-head strong {
  color: var(--sw-text);
  font-size: 18px;
  line-height: 1.35;
}

.system-workbench.approval-center .approval-policy-current-head span {
  color: var(--sw-text-dim);
  font-size: 12px;
  line-height: 1.55;
}

.system-workbench.approval-center .approval-policy-meta {
  margin: 12px 0;
  gap: 8px;
}

.system-workbench.approval-center .approval-policy-meta div,
.system-workbench.approval-center .approval-policy-node-editor,
.system-workbench.approval-center .approval-policy-tags span,
.system-workbench.approval-center .approval-policy-codes span,
.system-workbench.approval-center .approval-policy-codes code,
.system-workbench.approval-center .approval-policy-field input,
.system-workbench.approval-center .approval-policy-field select,
.system-workbench.approval-center .approval-policy-field textarea,
.system-workbench.approval-center .approval-policy-node-editor select {
  border-radius: 8px;
}

.system-workbench.approval-center .approval-policy-meta div,
.system-workbench.approval-center .approval-policy-node-editor {
  border-color: #dbeafe;
  background: #f8fbff;
  box-shadow: none;
}

.system-workbench.approval-center .approval-policy-section {
  padding: 12px 0;
}

.system-workbench.approval-center .approval-policy-section strong {
  font-size: 14px;
}

.system-workbench.approval-center .approval-policy-section p {
  color: var(--sw-text-dim);
}

.system-workbench.approval-center .approval-policy-actions .btn,
.system-workbench.approval-center .approval-policy-node-actions .btn,
.system-workbench.approval-center .approval-policy-editor-tools .btn {
  border-radius: 8px;
}

.system-workbench.approval-center .form-error,
.system-workbench.approval-center .role-notice {
  margin: 0;
  border-radius: 8px;
  padding: 10px 12px;
}

.system-workbench.approval-center .role-notice {
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.system-workbench.operation-audit-page .operation-audit-overview-card,
.system-workbench.operation-audit-page .operation-audit-list-panel,
.system-workbench.operation-audit-page .operation-audit-side-card {
  border: 1px solid var(--sw-line);
  border-radius: 8px;
  background: var(--sw-panel);
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
}

.system-workbench.operation-audit-page .operation-audit-overview-card {
  padding: 14px 16px 16px;
}

.system-workbench.operation-audit-page .document-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 12px;
}

.system-workbench.operation-audit-page .document-section-head h2 {
  margin: 2px 0 0;
  color: var(--sw-text);
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0;
}

.system-workbench.operation-audit-page .document-section-head .muted-text {
  margin: 0;
  color: var(--sw-blue);
  font-size: 12px;
  font-weight: 800;
}

.system-workbench.operation-audit-page .document-section-head span:not(.status-pill) {
  display: block;
  margin-top: 4px;
  color: var(--sw-text-dim);
  font-size: 13px;
  line-height: 1.6;
}

.system-workbench.operation-audit-page .document-section-head .status-pill {
  min-height: 28px;
  padding: 0 10px;
  border-color: #dbeafe;
  background: #eff6ff;
  color: #1d4ed8;
  white-space: nowrap;
}

.system-workbench.operation-audit-page .operation-audit-metric-grid {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  gap: 10px;
}

.system-workbench.operation-audit-page .operation-audit-metric-card {
  min-height: 96px;
  border: 1px solid #dbeafe;
  border-top: 3px solid #60a5fa;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  box-shadow: none;
}

.system-workbench.operation-audit-page .operation-audit-metric-card:last-child {
  border-right: 1px solid #dbeafe;
}

.system-workbench.operation-audit-page .operation-audit-metric-card span,
.system-workbench.operation-audit-page .operation-audit-metric-card p {
  color: var(--sw-text-dim);
}

.system-workbench.operation-audit-page .operation-audit-metric-card strong {
  color: #1d4ed8;
  font-size: 26px;
}

.system-workbench.operation-audit-page .operation-audit-metric-card.is-warning {
  border-top-color: #f59e0b;
}

.system-workbench.operation-audit-page .operation-audit-metric-card.is-danger {
  border-top-color: #ef4444;
}

.system-workbench.operation-audit-page .notice-bar {
  border-radius: 8px;
  box-shadow: none;
}

.system-workbench.operation-audit-page .operation-audit-task-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.system-workbench.operation-audit-page .operation-audit-task-card {
  min-height: 112px;
  border: 1px solid #dbeafe;
  border-top: 3px solid #60a5fa;
  border-radius: 8px;
  background: #fff;
  color: inherit;
  padding: 12px;
  text-align: left;
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  cursor: pointer;
  box-shadow: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.system-workbench.operation-audit-page .operation-audit-task-card:hover,
.system-workbench.operation-audit-page .operation-audit-task-card.is-active {
  transform: translateY(-1px);
  border-color: #93c5fd;
  border-top-color: #2563eb;
  background: #f8fbff;
  box-shadow: 0 12px 20px rgba(37, 99, 235, 0.08);
}

.system-workbench.operation-audit-page .operation-audit-task-card.tone-danger {
  border-top-color: #ef4444;
}

.system-workbench.operation-audit-page .operation-audit-task-card.tone-warning {
  border-top-color: #f59e0b;
}

.system-workbench.operation-audit-page .operation-audit-task-card.tone-success {
  border-top-color: #10b981;
}

.system-workbench.operation-audit-page .operation-audit-task-card span,
.system-workbench.operation-audit-page .operation-audit-task-card small,
.system-workbench.operation-audit-page .operation-audit-task-card em {
  display: block;
}

.system-workbench.operation-audit-page .operation-audit-task-card span {
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
}

.system-workbench.operation-audit-page .operation-audit-task-card strong {
  color: var(--sw-text);
  font-size: 24px;
  line-height: 1;
}

.system-workbench.operation-audit-page .operation-audit-task-card small {
  color: var(--sw-text-dim);
  font-size: 12px;
  line-height: 1.55;
}

.system-workbench.operation-audit-page .operation-audit-task-card em {
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
  color: #1d4ed8;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.system-workbench.operation-audit-page .operation-audit-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 0.3fr);
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
}

.system-workbench.operation-audit-page .operation-audit-main,
.system-workbench.operation-audit-page .operation-audit-side {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.system-workbench.operation-audit-page .operation-audit-list-panel,
.system-workbench.operation-audit-page .operation-audit-side-card {
  padding: 14px;
}

.system-workbench.operation-audit-page .operation-audit-list-headline {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  margin-bottom: 10px;
}

.system-workbench.operation-audit-page .role-section-title {
  margin-bottom: 0;
  align-items: flex-start;
}

.system-workbench.operation-audit-page .role-section-title strong,
.system-workbench.operation-audit-page .operation-audit-side-head strong {
  color: var(--sw-text);
  font-size: 16px;
  letter-spacing: 0;
}

.system-workbench.operation-audit-page .role-section-title span,
.system-workbench.operation-audit-page .operation-audit-side-head span,
.system-workbench.operation-audit-page .operation-audit-list-headline p {
  color: var(--sw-text-dim);
  font-size: 12px;
  line-height: 1.55;
}

.system-workbench.operation-audit-page .operation-audit-list-headline p {
  margin: 0;
}

.system-workbench.operation-audit-page .operation-audit-list-panel .module-block,
.system-workbench.operation-audit-page .operation-audit-list-panel .workbench-queue-table,
.system-workbench.operation-audit-page .operation-audit-list-panel .table-wrap {
  border-color: var(--sw-line);
  border-radius: 8px;
  box-shadow: none;
}

.system-workbench.operation-audit-page .operation-audit-module-cell {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.system-workbench.operation-audit-page .operation-audit-module-cell small {
  color: var(--sw-text-dim);
  font-size: 12px;
}

.system-workbench.operation-audit-page .operation-audit-module-chip,
.system-workbench.operation-audit-page .operation-audit-action-pill,
.system-workbench.operation-audit-page .operation-audit-state-tag,
.system-workbench.operation-audit-page .operation-audit-trigger-tag,
.system-workbench.operation-audit-page .operation-audit-risk-badge {
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
  color: #1d4ed8;
  display: inline-flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 12px;
  font-weight: 800;
}

.system-workbench.operation-audit-page .operation-audit-action-pill {
  background: #fff;
  color: var(--sw-text);
}

.system-workbench.operation-audit-page .operation-audit-state-flow,
.system-workbench.operation-audit-page .operation-audit-trigger-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.system-workbench.operation-audit-page .operation-audit-guardrail {
  margin: 0;
  color: var(--sw-text-dim);
  font-size: 12px;
  line-height: 1.55;
}

.system-workbench.operation-audit-page .operation-audit-view-link {
  min-height: 30px;
  border-color: #dbeafe;
  background: #f8fbff;
}

.system-workbench.operation-audit-page .operation-audit-side {
  position: -webkit-sticky;
  position: sticky;
  top: 76px;
}

.system-workbench.operation-audit-page .operation-audit-side-card {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.system-workbench.operation-audit-page .operation-audit-side-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.system-workbench.operation-audit-page .operation-audit-current-head,
.system-workbench.operation-audit-page .operation-audit-side-spotlight,
.system-workbench.operation-audit-page .operation-audit-risk-card {
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
  box-shadow: none;
}

.system-workbench.operation-audit-page .operation-audit-current-head {
  padding: 12px;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.system-workbench.operation-audit-page .operation-audit-current-head strong {
  color: var(--sw-text);
  font-size: 18px;
  line-height: 1.35;
}

.system-workbench.operation-audit-page .operation-audit-current-head span {
  color: var(--sw-text-dim);
  font-size: 12px;
}

.system-workbench.operation-audit-page .operation-audit-side-spotlights,
.system-workbench.operation-audit-page .operation-audit-risk-stack {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.system-workbench.operation-audit-page .operation-audit-side-spotlight {
  padding: 10px 12px;
  color: var(--sw-text-dim);
  font-size: 12px;
  line-height: 1.55;
}

.system-workbench.operation-audit-page .operation-audit-checklist {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.system-workbench.operation-audit-page .operation-audit-checklist li {
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #fff;
  padding: 10px 12px;
  color: var(--sw-text-dim);
  font-size: 12px;
  line-height: 1.55;
}

.system-workbench.operation-audit-page .operation-audit-side-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.system-workbench.operation-audit-page .operation-audit-side-actions .btn {
  justify-content: center;
  min-height: 34px;
}

.system-workbench.operation-audit-page .operation-audit-risk-card {
  padding: 12px;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.system-workbench.operation-audit-page .operation-audit-risk-card span {
  color: #dc2626;
  font-size: 12px;
  font-weight: 800;
}

.system-workbench.operation-audit-page .operation-audit-risk-card strong {
  color: var(--sw-text);
  font-size: 14px;
}

.system-workbench.operation-audit-page .operation-audit-risk-card p {
  margin: 0;
  color: var(--sw-text-dim);
  font-size: 12px;
  line-height: 1.55;
}

.system-workbench.operation-audit-page .operation-audit-risk-card a {
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.system-workbench :is(.data-table, .role-table, .user-table, .permission-matrix-table, .operation-audit-table) thead th {
  background: #f3f7fb;
  color: #1c3559;
}

.system-workbench :is(.btn, .inline-btn, .operation-audit-view-link) {
  border-radius: 8px;
}

.system-workbench .sw-breathing-footer {
  min-height: clamp(160px, 20vh, 240px);
  margin: 8px 0 0;
  padding: 48px 16px 70px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #8ea0ba;
  font-size: 12px;
  font-weight: 700;
  background: linear-gradient(180deg, rgba(243, 246, 250, 0), #ffffff 64%);
}

.system-workbench .sw-breathing-footer span {
  display: inline-flex;
  gap: 9px;
  align-items: center;
}

.system-workbench .sw-breathing-footer span::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #b6c4d7;
}

@media (max-width: 1180px) {
  .system-workbench :is(
    .tenant-settings-health,
    .user-metrics,
    .role-metrics,
    .permission-matrix-summary,
    .platform-metrics,
    .approval-flow-designer-metrics,
    .operation-audit-metric-grid,
    .tenant-first-run-strip
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-workbench .tenant-settings-command,
  .system-workbench .tenant-settings-lanes,
  .system-workbench .tenant-settings-overview-card .tenant-settings-flow-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-workbench.user-page .user-command-strip-primary,
  .system-workbench.user-page .user-focus-list.horizontal {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-workbench.user-page .user-overview-grid,
  .system-workbench.user-page .user-workbench,
  .system-workbench.user-page .user-account-form-layout {
    grid-template-columns: 1fr;
  }

  .system-workbench.user-page .user-inspector,
  .system-workbench.user-page .user-create-impact-panel {
    position: static;
  }

  .system-workbench.user-page .user-create-form.standalone {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-workbench.role-page .role-command-strip,
  .system-workbench.role-page .role-risk-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-workbench.role-page .role-workbench-summary,
  .system-workbench.role-page .role-workbench,
  .system-workbench.role-page .role-create-form {
    grid-template-columns: 1fr;
  }

  .system-workbench.role-page .role-inspector {
    position: static;
  }

  .system-workbench.role-page .role-create-description {
    grid-column: auto;
  }

  .system-workbench.approval-center .approval-policy-command-strip,
  .system-workbench.approval-center .approval-policy-workbench {
    grid-template-columns: 1fr;
  }

  .system-workbench.approval-center .approval-policy-detail {
    position: static;
  }

  .system-workbench.operation-audit-page .operation-audit-task-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .system-workbench.operation-audit-page .operation-audit-workbench {
    grid-template-columns: 1fr;
  }

  .system-workbench.operation-audit-page .operation-audit-side {
    position: static;
  }
}

@media (max-width: 760px) {
  .system-workbench {
    margin: -16px;
    padding: 16px;
  }

  .system-workbench .page-header-unified {
    grid-template-columns: 1fr;
    min-height: unset;
  }

  .system-workbench .page-header-actions {
    justify-content: flex-start;
  }

  .system-workbench :is(
    .tenant-settings-health,
    .user-metrics,
    .role-metrics,
    .permission-matrix-summary,
    .platform-metrics,
    .approval-flow-designer-metrics,
    .operation-audit-metric-grid,
    .tenant-first-run-strip
  ) {
    grid-template-columns: 1fr;
  }

  .system-workbench .tenant-settings-command,
  .system-workbench .tenant-settings-lanes,
  .system-workbench .tenant-settings-active-list,
  .system-workbench .tenant-settings-overview-card .tenant-settings-health,
  .system-workbench .tenant-settings-overview-card .tenant-settings-flow-steps {
    grid-template-columns: 1fr;
  }

  .system-workbench.user-page .document-section-head,
  .system-workbench.user-page .user-toolbar,
  .system-workbench.user-page .user-toolbar-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .system-workbench.user-page .user-command-strip-primary,
  .system-workbench.user-page .user-queue-cards,
  .system-workbench.user-page .user-focus-list.horizontal,
  .system-workbench.user-page .user-overview-stats,
  .system-workbench.user-page .user-create-form.standalone,
  .system-workbench.user-page .user-role-head,
  .system-workbench.user-page .user-role-picker,
  .system-workbench.user-page .user-access-metrics {
    grid-template-columns: 1fr;
  }

  .system-workbench.user-page .user-role-bundles {
    flex-wrap: wrap;
  }

  .system-workbench.user-page .user-role-bundles button {
    flex-basis: min(220px, 100%);
  }

  .system-workbench.user-page .user-create-remark {
    grid-column: auto;
  }

  .system-workbench.user-page .user-create-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .system-workbench.role-page .document-section-head,
  .system-workbench.role-page .role-toolbar,
  .system-workbench.role-page .role-toolbar-actions,
  .system-workbench.role-page .role-command-strip,
  .system-workbench.role-page .role-risk-list,
  .system-workbench.role-page .role-summary-grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .system-workbench.role-page .role-create-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .system-workbench.approval-center .document-section-head,
  .system-workbench.approval-center .approval-policy-command-strip,
  .system-workbench.approval-center .approval-governance-metrics,
  .system-workbench.approval-center .approval-policy-meta,
  .system-workbench.approval-center .approval-policy-edit-grid,
  .system-workbench.approval-center .approval-policy-node-editor {
    display: grid;
    grid-template-columns: 1fr;
  }

  .system-workbench.approval-center .approval-policy-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .system-workbench.operation-audit-page .document-section-head,
  .system-workbench.operation-audit-page .operation-audit-task-strip,
  .system-workbench.operation-audit-page .operation-audit-metric-grid,
  .system-workbench.operation-audit-page .operation-audit-side-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .system-workbench :is(
    .tenant-health-card,
    .permission-matrix-summary article,
    .platform-metric,
    .approval-flow-designer-metrics article,
    .operation-audit-metric-card,
    .tenant-first-run-strip article
  ) {
    border-right: 0;
    border-bottom: 1px solid var(--sw-line);
  }

  .system-workbench :is(
    .tenant-health-card,
    .permission-matrix-summary article,
    .platform-metric,
    .approval-flow-designer-metrics article,
    .operation-audit-metric-card,
    .tenant-first-run-strip article
  ):last-child {
    border-bottom: 0;
  }
}

/* 系统设置首页 · 参考客户/报价管理的轻量分组入口 */
.settings-home-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: var(--space-8);
}

.settings-home-group {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--sw-line);
  border-radius: 8px;
  background: var(--sw-panel);
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
}

.settings-home-group-head h2 {
  margin: 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.settings-home-group-head p {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-13);
  color: var(--ink-2);
}

.settings-home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-top: var(--space-12);
}

.settings-home-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-16);
  background: var(--surface);
  border: 1px solid var(--sw-line);
  border-radius: 8px;
  text-decoration: none;
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.settings-home-card:hover {
  border-color: var(--brand-200);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.settings-home-icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--brand-50);
  color: var(--brand-600);
}

.settings-home-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-home-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.settings-home-card-body strong {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

.settings-home-card-body small {
  font-size: var(--fs-12);
  color: var(--ink-2);
  line-height: var(--lh-snug);
}

.settings-home-owner {
  margin-top: var(--space-4);
  font-size: var(--fs-11);
  color: var(--ink-3);
}

@media (max-width: 820px) {
  .settings-home-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 设置页通用指标条（对齐组织架构页：白底卡片 + 细线 + 蓝色顶边强调 + 克制大数字）。
   可作为系统设置各表格页的统一摘要/筛选条，颜色风格与组织架构页一致。 ── */
.settings-metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-gap: var(--space-12);
  gap: var(--space-12);
}
.settings-metric-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-20);
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-top: 2px solid var(--hairline-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard);
}
.settings-metric-card:hover {
  border-color: var(--brand-200);
  box-shadow: var(--shadow-sm);
}
.settings-metric-card.is-active {
  border-color: var(--brand-300);
  border-top-color: var(--brand-500);
  background: var(--brand-50);
}
.settings-metric-value {
  font-size: var(--fs-24);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--ink);
}
.settings-metric-card.is-active .settings-metric-value {
  color: var(--brand-700);
}
.settings-metric-label {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--ink);
}
.settings-metric-hint {
  font-size: var(--fs-12);
  color: var(--ink-3);
  line-height: var(--lh-snug);
}

/* 审计记录行：去多盒堆叠，改克制单色——状态流转用箭头连写，操作/触发用柔和文字。 */
.audit-module-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.audit-module-cell strong {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--ink);
}
.audit-module-cell small {
  font-size: var(--fs-12);
  color: var(--ink-3);
}
.audit-action-text {
  font-size: var(--fs-13);
  color: var(--ink);
}
.audit-muted-text {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--ink-2);
  line-height: var(--lh-normal);
}
.audit-flow {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--fs-13);
  color: var(--ink-2);
}
.audit-flow-step {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.audit-flow-arrow {
  font-style: normal;
  margin: 0 var(--space-6);
  color: var(--ink-3);
}
/* 系统设置各表格统一留白（对齐组织架构页的透气感）——惠及成员/角色/审计等所有
   使用 WorkbenchQueueTable 的系统设置页；业务页表格不在 .system-workbench 作用域内，不受影响。 */
.system-workbench .quotation-task-table tbody td {
  padding-top: var(--space-12);
  padding-bottom: var(--space-12);
  vertical-align: middle;
}
/* 审计表：放开换行,让状态流转链优雅折行而非被裁切。 */
.operation-audit-page .quotation-task-table tbody td {
  white-space: normal;
}
.operation-audit-page .audit-flow {
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--space-4);
}
/* 权限矩阵：固定「模块」列宽并禁止模块名竖排折行（此前过窄 → 租/户/运/营）。 */
.system-workbench .permission-matrix-table th:first-child,
.system-workbench .permission-matrix-table td:first-child {
  width: 152px;
  min-width: 152px;
}
.system-workbench .permission-module-cell strong {
  white-space: nowrap;
}

/* ── 设置详情 archetype（企业设置等）：分组卡片 + label-值行 + 就地编辑（飞书/Notion 式）。
   读为主、配色克制、留白透气；颜色与组织架构页一致。 ── */
.settings-detail-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.settings-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-4);
}
.settings-group-head h2 {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.settings-group-tag {
  font-size: var(--fs-11);
  font-weight: var(--fw-medium);
  color: var(--ink-3);
  padding: 1px var(--space-6);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
}
.settings-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 0 var(--space-32);
  gap: 0 var(--space-32);
  margin: 0;
}
.settings-detail-grid > div {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: baseline;
  grid-gap: var(--space-12);
  gap: var(--space-12);
  padding: var(--space-12) 0;
  border-top: 1px solid var(--hairline);
}
.settings-detail-grid dt {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--ink-2);
}
.settings-detail-grid dd {
  margin: 0;
  font-size: var(--fs-14);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.settings-logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 56px;
  height: 28px;
  padding: 0 var(--space-10);
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-3);
  font-size: var(--fs-12);
}
@media (max-width: 820px) {
  .settings-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 时间线 / 留痕 archetype（审计留痕等）：按日分组的竖向时间线，配色克制——
   节点 dot 带语义色，动作/对象用柔和文字，不堆彩色标签。 ── */
.audit-trail-toolbar {
  margin-bottom: var(--space-4);
}
.audit-trail {
  display: flex;
  flex-direction: column;
  gap: var(--space-18);
  margin: 0;
  padding: 0;
  list-style: none;
}
.audit-day-label {
  margin: 0 0 var(--space-12);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--ink-2);
}
.audit-events {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  margin: 0;
  padding: 0;
  list-style: none;
}
.audit-event {
  display: grid;
  grid-template-columns: 52px 18px 1fr;
  align-items: start;
  grid-column-gap: var(--space-12);
  column-gap: var(--space-12);
}
.audit-event-card {
  position: relative;
  min-height: 72px;
  padding: var(--space-12) var(--space-16) var(--space-12) 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}
.audit-event-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--brand-500);
}
.audit-event-card.tone-success::before {
  background: var(--c-success-ink);
}
.audit-event-card.tone-warning::before {
  background: var(--c-warning-ink);
}
.audit-event-card.tone-danger::before {
  background: var(--c-danger-ink);
}
.audit-event-card.tone-info {
  border-color: color-mix(in srgb, var(--brand-500) 20%, var(--line));
  background: color-mix(in srgb, var(--brand-50) 56%, var(--surface));
}
.audit-event-card.tone-muted::before {
  background: var(--ink-3);
}
.audit-event-time {
  padding-top: 3px;
  padding-left: var(--space-12);
  font-size: var(--fs-12);
  color: var(--ink-3);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.audit-event-rail {
  position: relative;
  display: flex;
  justify-content: center;
}
.audit-event-rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 9px;
  bottom: -22px;
  width: 2px;
  transform: translateX(-50%);
  background: var(--hairline);
}
.audit-events .audit-event:last-child .audit-event-rail::before {
  display: none;
}
.audit-event-dot {
  position: relative;
  z-index: 1;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--brand-500);
  box-shadow: 0 0 0 3px var(--surface);
}
.audit-event-dot.tone-success {
  background: var(--c-success-ink);
}
.audit-event-dot.tone-warning {
  background: var(--c-warning-ink);
}
.audit-event-dot.tone-danger {
  background: var(--c-danger-ink);
}
.audit-event-dot.tone-info {
  background: var(--brand-500);
}
.audit-event-dot.tone-muted {
  background: var(--ink-3);
}
.audit-event-body {
  min-width: 0;
}
.audit-event-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
}
.audit-event-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}
.audit-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
}
.audit-event-line strong {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.audit-kind-pill {
  min-height: 22px;
  padding-inline: 8px;
  font-size: var(--fs-11);
}
.audit-event-arrived,
.audit-event-module {
  font-size: var(--fs-12);
  color: var(--ink-2);
}
.audit-event-module {
  flex: 0 0 auto;
  font-weight: var(--fw-semibold);
}
.audit-event-role {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-10);
  margin: var(--space-10) 0 0;
  font-size: var(--fs-13);
  color: var(--ink-2);
}
.audit-event-role strong {
  color: var(--ink);
}
.audit-diff {
  display: inline-flex;
  align-items: center;
  margin: var(--space-10) 0 0;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-muted);
  font-size: var(--fs-12);
  color: var(--ink-2);
}
.audit-diff .arrow {
  margin: 0 var(--space-6);
  color: var(--ink-3);
  font-style: normal;
}
.audit-trail-empty {
  margin: 0;
  padding: var(--space-24) 0;
  text-align: center;
  color: var(--ink-3);
  font-size: var(--fs-13);
}

/* ── 设置页内二级 tab（企业设置等）：下划线式分页签，留在页内、不进左侧导航。 ── */
.settings-tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: var(--space-16);
}
.settings-tab {
  padding: var(--space-10) var(--space-16);
  font-size: var(--fs-14);
  color: var(--ink-2);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard);
}
.settings-tab:hover {
  color: var(--ink);
}
.settings-tab.active {
  color: var(--brand-700);
  border-bottom-color: var(--brand-500);
  font-weight: var(--fw-medium);
}

/* 容量用量条 */
.capacity-meters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: var(--space-20);
  gap: var(--space-20);
}
.capacity-meter {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.capacity-meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-8);
}
.capacity-meter-head span {
  font-size: var(--fs-13);
  color: var(--ink-2);
}
.capacity-meter-head strong {
  font-size: var(--fs-14);
  color: var(--ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.capacity-bar {
  height: 8px;
  background: var(--surface-sunk);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.capacity-bar > i {
  display: block;
  height: 100%;
  background: var(--brand-500);
  border-radius: inherit;
}
.capacity-meter small {
  font-size: var(--fs-12);
  color: var(--ink-3);
}

/* 容量与模块 · 申请扩容表单（FormField + .ui-input/.ui-textarea，3 列响应式，对齐控件标准） */
.system-workbench.tenant-ops-page .tenant-request-panel {
  display: grid;
  grid-gap: var(--space-16);
  gap: var(--space-16);
}
.system-workbench.tenant-ops-page .tenant-capacity-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: var(--space-12) var(--space-16);
  gap: var(--space-12) var(--space-16);
}
.system-workbench.tenant-ops-page .tenant-capacity-form > label,
.system-workbench.tenant-ops-page .tenant-capacity-reason {
  display: grid;
  grid-gap: var(--space-6);
  gap: var(--space-6);
  align-content: start;
}
.system-workbench.tenant-ops-page .tenant-capacity-form > label > span,
.system-workbench.tenant-ops-page .tenant-capacity-reason > span {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--ink-2);
}
.system-workbench.tenant-ops-page .tenant-capacity-reason .ui-textarea {
  min-height: 76px;
  resize: vertical;
}
@media (max-width: 820px) {
  .system-workbench.tenant-ops-page .tenant-capacity-form {
    grid-template-columns: 1fr;
  }
}

/* 企业设置 · 资料内联编辑（公司资料/联系与开通，提交走租户变更审批流） */
.system-workbench .settings-detail-grid dd .ui-input {
  width: 100%;
  max-width: 340px;
}
.system-workbench .settings-edit-notice {
  margin: 0 0 var(--space-4);
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-sm);
  font-size: var(--fs-13);
}
.system-workbench .settings-edit-notice.tone-info {
  background: var(--c-info-soft);
  color: var(--c-info-ink);
}
.system-workbench .settings-edit-notice.tone-danger {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}
.system-workbench .settings-edit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-top: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface-sunk);
  box-shadow: var(--shadow-xs);
}
.system-workbench .settings-edit-bar > span {
  font-size: var(--fs-13);
  color: var(--ink-2);
}

/* 设置就地编辑：Select 与内联数字字段（本地化 / 安全策略） */
.system-workbench .settings-detail-grid dd select {
  width: 100%;
  max-width: 340px;
  min-height: 36px;
  padding: 0 var(--space-10);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-14);
}
.system-workbench .settings-inline-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}
.system-workbench .settings-inline-field .ui-input {
  width: 84px;
}
.system-workbench .settings-inline-field em {
  font-style: normal;
  font-size: var(--fs-13);
  color: var(--ink-2);
}
.system-workbench .settings-stacked-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: 340px;
}

/* ───────────────── 容量与套餐：图形化 plan 页 ───────────────── */
/* 套餐主卡：左档位/名称/状态，右价格/到期倒计时；档位左描边着色 */
.plan-hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-24);
  overflow: hidden;
}
.plan-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--brand-500);
}
.plan-hero.tier-growth::before {
  background: var(--accent-500);
}
.plan-hero.tier-enterprise::before {
  background: #7c5cff;
}
.plan-hero-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  min-width: 0;
}
.plan-hero-tierbadge {
  align-self: flex-start;
  padding: 2px var(--space-10);
  border-radius: var(--radius-pill);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--brand-700);
  background: var(--brand-50);
}
.plan-hero.tier-growth .plan-hero-tierbadge {
  color: var(--accent-700);
  background: var(--accent-50);
}
.plan-hero.tier-enterprise .plan-hero-tierbadge {
  color: #4f3bc0;
  background: #efeaff;
}
.plan-hero-name {
  font-size: 22px;
  font-weight: var(--fw-bold);
  color: var(--ink);
}
.plan-hero-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-10);
}
.plan-hero-modulecount {
  font-size: var(--fs-13);
  color: var(--ink-2);
}
.plan-hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-10);
  text-align: right;
}
.plan-hero-price {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.plan-hero-terms {
  display: flex;
  gap: var(--space-20);
  margin: 0;
}
.plan-hero-terms div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plan-hero-terms dt {
  margin: 0;
  font-size: var(--fs-12);
  color: var(--ink-3);
}
.plan-hero-terms dd {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.plan-hero-countdown {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  font-size: var(--fs-12);
  color: var(--ink-2);
}
.plan-hero-countdown strong {
  font-size: var(--fs-18);
  color: var(--brand-700);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.plan-hero-termbar {
  display: block;
  width: 110px;
  height: 5px;
  margin-left: var(--space-8);
  border-radius: var(--radius-pill);
  background: var(--surface-sunk);
  overflow: hidden;
}
.plan-hero-termbar > i {
  display: block;
  height: 100%;
  background: var(--brand-400);
}

/* 容量环形仪表（按用量比上色） */
.capacity-rings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: var(--space-20);
  gap: var(--space-20);
}
.capacity-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-10);
}
.capacity-ring-dial {
  position: relative;
  width: 96px;
  height: 96px;
}
.capacity-ring-dial svg {
  width: 100%;
  height: 100%;
}
.capacity-ring-track {
  fill: none;
  stroke: var(--surface-sunk);
  stroke-width: 8;
}
.capacity-ring-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dasharray var(--dur-slow) var(--ease-standard);
}
.capacity-ring.tone-ok .capacity-ring-fill {
  stroke: var(--c-success-ink);
}
.capacity-ring.tone-warning .capacity-ring-fill {
  stroke: var(--c-warning-ink);
}
.capacity-ring.tone-danger .capacity-ring-fill {
  stroke: var(--c-danger-ink);
}
.capacity-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.capacity-ring-center strong {
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  color: var(--ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.capacity-ring-center span {
  font-size: var(--fs-11);
  color: var(--ink-3);
}
.capacity-ring-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.capacity-ring-meta span {
  font-size: var(--fs-13);
  color: var(--ink-2);
}
.capacity-ring-meta b {
  font-size: var(--fs-13);
  color: var(--ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* 已开通模块格 */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-gap: var(--space-10);
  gap: var(--space-10);
}
.module-chip {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-10) var(--space-12);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-size: var(--fs-13);
}
.module-chip.is-on {
  background: var(--surface);
  color: var(--ink);
}
.module-chip.is-off {
  background: var(--surface-sunk);
  color: var(--ink-3);
}
.module-chip-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: var(--fs-11);
}
.module-chip.is-on .module-chip-dot {
  background: var(--c-success-soft);
  color: var(--c-success-ink);
}
.module-chip.is-off .module-chip-dot {
  background: var(--surface);
  color: var(--ink-3);
}
.module-chip-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.module-chip small {
  color: var(--ink-3);
  font-size: var(--fs-11);
}

/* 套餐对比卡 */
.plan-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: var(--space-16);
  gap: var(--space-16);
}
.plan-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-16);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.plan-card.is-current {
  border-color: var(--brand-400);
  box-shadow: inset 0 0 0 1px var(--brand-400);
}
.plan-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}
.plan-card-tier {
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.plan-card.tier-starter .plan-card-tier {
  color: var(--brand-700);
}
.plan-card.tier-growth .plan-card-tier {
  color: var(--accent-700);
}
.plan-card.tier-enterprise .plan-card-tier {
  color: #4f3bc0;
}
.plan-card-flag {
  padding: 1px var(--space-8);
  border-radius: var(--radius-pill);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  color: var(--brand-700);
  background: var(--brand-50);
}
.plan-card-price {
  font-size: var(--fs-18);
  font-weight: var(--fw-bold);
  color: var(--ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.plan-card-specs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.plan-card-specs li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-8);
  font-size: var(--fs-13);
}
.plan-card-specs li span {
  color: var(--ink-2);
}
.plan-card-specs li b {
  color: var(--ink);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.plan-card-cta {
  margin-top: auto;
  padding: var(--space-8) 0 0;
  text-align: center;
  font-size: var(--fs-13);
  color: var(--ink-3);
}
.plan-card-cta.is-current {
  color: var(--brand-700);
  font-weight: var(--fw-medium);
}
@media (max-width: 720px) {
  .plan-hero-side {
    align-items: flex-start;
    text-align: left;
  }
}

/* 成员页 · 未分配角色 用中性灰 chip（区别于真实角色蓝标） */
.system-workbench .user-page .user-role-empty {
  border-color: var(--hairline);
  background: var(--surface-sunk);
  color: var(--ink-3);
}

/* 审批治理 · 左列风险徽标改用共享 riskTone（与右侧详情/全站风险同色），顶部对齐网格行 */
.system-workbench.approval-center .approval-policy-row-risk {
  align-self: start;
}

/* 审批策略 · 表格 + 编辑抽屉重构（飞书克制：一张表看清谁审批/触发/时限） */
.system-workbench.approval-center .approval-policy-table-card {
  padding: 0;
}
.system-workbench.approval-center .approval-policy-table-card .approval-policy-list-headline {
  padding: var(--space-16) var(--space-16) 0;
}
.system-workbench.approval-center .approval-policy-name-cell {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.system-workbench.approval-center .approval-policy-name-cell strong {
  font-size: var(--fs-14);
  color: var(--ink);
}
.system-workbench.approval-center .approval-chain {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-2);
  font-size: var(--fs-13);
}
.system-workbench.approval-center .approval-chain-arrow {
  color: var(--ink-3);
  font-style: normal;
  margin: 0 var(--space-4);
}
.system-workbench.approval-center .approval-policy-drawer .ac-facts {
  margin-bottom: var(--space-12);
}
.system-workbench.approval-center .approval-policy-drawer .approval-policy-section {
  padding: var(--space-12) 0 0;
}
/* 表格列宽固定，审批链占弹性空间、长链优雅折行 */
.system-workbench.approval-center .approval-policy-table {
  table-layout: fixed;
  width: 100%;
}
.system-workbench.approval-center .approval-policy-table .col-name {
  width: 26%;
}
.system-workbench.approval-center .approval-policy-table .col-module {
  width: 11%;
}
.system-workbench.approval-center .approval-policy-table .col-sla {
  width: 88px;
}
.system-workbench.approval-center .approval-policy-table .col-status {
  width: 84px;
}
.system-workbench.approval-center .approval-policy-table .col-actions {
  width: 148px;
}
/* 编辑抽屉略宽，给审批链节点行留足空间 */
.system-workbench.approval-center .approval-policy-drawer {
  width: min(540px, 94vw);
}

/* 角色管理表格：风险并入角色名行、固定列宽（对齐审批策略的克制表格） */
.system-workbench.role-page .role-table {
  table-layout: fixed;
  width: 100%;
}
.system-workbench.role-page .role-table .role-col-name {
  width: 34%;
}
.system-workbench.role-page .role-table .role-col-status {
  width: 120px;
}
.system-workbench.role-page .role-table .role-col-member {
  width: 84px;
}
.system-workbench.role-page .role-table .role-col-actions {
  width: 168px;
}
.system-workbench.role-page .role-name-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-items: flex-start;
}
.system-workbench.role-page .role-name-line {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}

/* 角色管理 · 飞书式主从（左角色列表 + 右权限明细，按模块分组） */
.system-workbench.role-page .role-workbench {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  grid-gap: var(--space-16);
  gap: var(--space-16);
  align-items: start;
}
.system-workbench.role-page .role-list-pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.system-workbench.role-page .role-pick-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.system-workbench.role-page .role-pick-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
  text-align: left;
  padding: var(--space-10) var(--space-12);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard);
}
.system-workbench.role-page .role-pick-row:hover {
  border-color: var(--brand-200);
  background: var(--surface-soft);
}
.system-workbench.role-page .role-pick-row.selected {
  border-color: var(--brand-500);
  background: var(--c-info-soft);
}
.system-workbench.role-page .role-pick-main {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
}
.system-workbench.role-page .role-pick-main strong {
  font-size: var(--fs-14);
  color: var(--ink);
}
.system-workbench.role-page .role-pick-row small {
  color: var(--ink-2);
  font-size: var(--fs-12);
}
.system-workbench.role-page .role-detail-pane {
  position: -webkit-sticky;
  position: sticky;
  top: var(--space-16);
}
.system-workbench.role-page .role-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
  flex-wrap: wrap;
}
.system-workbench.role-page .role-detail-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.system-workbench.role-page .role-detail-title strong {
  font-size: var(--fs-18);
  color: var(--ink);
}
.system-workbench.role-page .role-detail-badges {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.system-workbench.role-page .role-detail-desc {
  margin: var(--space-12) 0 0;
  color: var(--ink-2);
  font-size: var(--fs-13);
}
.system-workbench.role-page .role-detail-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: var(--space-12);
  gap: var(--space-12);
  margin: var(--space-16) 0;
  padding: var(--space-12) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.system-workbench.role-page .role-detail-facts dt {
  color: var(--ink-3);
  font-size: var(--fs-12);
  margin-bottom: var(--space-2);
}
.system-workbench.role-page .role-detail-facts dd {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
}
.system-workbench.role-page .role-detail-section > strong {
  display: block;
  font-size: var(--fs-14);
  margin-bottom: var(--space-8);
}
.system-workbench.role-page .role-perm-groups {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  max-height: min(56vh, 620px);
  overflow: auto;
  padding-right: 2px;
}
.system-workbench.role-page .role-perm-group {
  display: grid;
  grid-template-columns: minmax(132px, 0.34fr) minmax(0, 1fr);
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #ffffff;
}
.system-workbench.role-page .role-perm-module {
  min-width: 0;
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  padding-top: 0;
}
.system-workbench.role-page .role-perm-module strong {
  overflow: hidden;
  color: var(--ink);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.system-workbench.role-page .role-perm-module small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
}
.system-workbench.role-page .role-perm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}
.system-workbench.role-page .role-perm-chip {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.system-workbench.role-page .role-perm-chip.is-sensitive {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}
.system-workbench.role-page .role-perm-chip.is-more {
  border-style: dashed;
  background: #ffffff;
  color: var(--ink-2);
}
@media (max-width: 1024px) {
  .system-workbench.role-page .role-workbench {
    grid-template-columns: 1fr;
  }
  .system-workbench.role-page .role-detail-pane {
    position: static;
  }
  .system-workbench.role-page .role-perm-group {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .system-workbench.role-page .role-perm-actions {
    justify-content: flex-start;
  }
}

/* 组织账号：部门树 + 成员（双栏） */
.system-workbench.user-page .org-workbench {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  grid-gap: var(--space-16);
  gap: var(--space-16);
  align-items: start;
}
.system-workbench.user-page .org-tree-pane {
  position: -webkit-sticky;
  position: sticky;
  top: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.system-workbench.user-page .org-tree-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}
.system-workbench.user-page .org-tree-head strong {
  font-size: var(--fs-14);
  color: var(--ink);
}
.system-workbench.user-page .org-tree {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.system-workbench.user-page .org-tree-root,
.system-workbench.user-page .org-tree-children {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.system-workbench.user-page .org-tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  width: 100%;
  text-align: left;
  padding: var(--space-8) var(--space-12);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard);
}
.system-workbench.user-page .org-tree-node:hover {
  background: var(--surface-soft);
}
.system-workbench.user-page .org-tree-node.is-active {
  border-color: var(--brand-500);
  background: var(--c-info-soft);
}
.system-workbench.user-page .org-tree-all {
  margin-bottom: var(--space-6);
  font-weight: var(--fw-semibold);
}
.system-workbench.user-page .org-tree-node-main {
  display: flex;
  align-items: baseline;
  gap: var(--space-6);
  min-width: 0;
}
.system-workbench.user-page .org-tree-name {
  font-size: var(--fs-13);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.system-workbench.user-page .org-tree-type {
  font-size: var(--fs-11);
  color: var(--ink-3);
  flex-shrink: 0;
}
.system-workbench.user-page .org-tree-count {
  font-size: var(--fs-12);
  color: var(--ink-2);
  background: var(--surface-sunk);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-8);
  min-width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.system-workbench.user-page .org-tree-node.is-active .org-tree-count {
  background: var(--surface);
  color: var(--brand-600);
}
.system-workbench.user-page .org-tree-empty {
  margin: 0;
  padding: var(--space-12);
  color: var(--ink-3);
  font-size: var(--fs-12);
}
.system-workbench.user-page .org-member-pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  min-width: 0;
}
@media (max-width: 1024px) {
  .system-workbench.user-page .org-workbench {
    grid-template-columns: 1fr;
  }
  .system-workbench.user-page .org-tree-pane {
    position: static;
  }
}

/* ============================================================
 * 二级页面共享原语（secondary-page-design skill）
 * 详情页头 EntityDetailHeader（复用 PageHeader，仅加标题行）+
 * 表单骨架 FormScaffold / FormSection（泛化自既有 .customer-form-* 多数派范式，
 * 取代各模块 .customer-form-* / .*-form 散写）。仅用 tokens，不新造颜色。
 * ============================================================ */

/* 详情头：标题 + 状态徽标同排 */
.page-header-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.page-header-title-row h1 {
  margin: 0;
}

/* —— 表单骨架 —— */
/* 全内容宽度，与列表/详情/hero（.content / .page-header 均 max-width:none）一致——
   不要再像旧 .customer-form-shell 那样收窄成 1220px 居中列（那会显得是「窄页面」）。 */
.form-scaffold {
  width: 100%;
}
.form-scaffold-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-gap: 18px;
  gap: 18px;
}
.form-scaffold-notice {
  margin-bottom: 18px;
}
/* 分节卡：所有 FormSection 收在一张卡里，节间细线分隔 */
.form-scaffold-sections {
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}
.form-scaffold-section {
  padding: 24px;
  border-top: 1px solid var(--surface-soft);
}
.form-scaffold-section:first-child {
  border-top: 0;
}
.form-scaffold-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.form-scaffold-section-head strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.3;
}
.form-scaffold-section-head p {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.6;
}
/* 字段网格 —— 直接命中 FormField 渲染的 <label>，无需逐字段加类 */
.form-scaffold-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 18px 20px;
  gap: 18px 20px;
}
.form-scaffold-grid.is-single {
  grid-template-columns: minmax(0, 1fr);
}
.form-scaffold-grid > label {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  min-width: 0;
}
.form-scaffold-grid > label.form-scaffold-field-wide {
  grid-column: 1 / -1;
}
.form-scaffold-grid > label > span {
  font-size: 13px;
  color: var(--ink);
  font-weight: 700;
}
.form-scaffold-grid input,
.form-scaffold-grid select,
.form-scaffold-grid textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--surface);
  font-size: 14px;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}
.form-scaffold-grid input:focus,
.form-scaffold-grid select:focus,
.form-scaffold-grid textarea:focus {
  border-color: var(--brand-300);
  box-shadow: 0 0 0 4px rgba(191, 219, 254, 0.3);
  background: var(--surface);
  outline: 0;
}
.form-scaffold-grid textarea {
  min-height: 156px;
  resize: vertical;
}
/* 操作栏：独立一张卡，贴在分节卡下方 */
.form-scaffold-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
  padding: 18px 24px;
}
.form-scaffold-footer-meta {
  min-width: 0;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}
.form-scaffold-footer-meta strong {
  color: var(--ink);
  font-size: 14px;
}
.form-scaffold-footer-meta p {
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.6;
}
.form-scaffold-footer-status {
  min-width: min(100%, 280px);
}
.form-scaffold-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .form-scaffold-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .form-scaffold-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .form-scaffold-actions {
    justify-content: stretch;
  }
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/quotation-list-workbench.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * 报价列表 workbench 化（UI skill: ui-control-design）。
 * 复用 /workbench 的 .ui-* 视觉语言与 --ui-* token，作用域严格限定在报价列表视图，
 * 不影响其它页面、不改任何业务逻辑/数据/权限/路由。token 用 var(--x, 兜底) 形式，
 * 即使 token 名变动也有安全兜底。
 */

/* —— 修复：内容卡片被卡内宽表格撑出容器、比页头/nav 宽 48px 右侧突出错位 ——
 * 根因：cockpit 的 grid/flex 内容区，grid 子项默认 min-width:auto，被报价表格的
 * min-content(~1184) 撑大；表格本就在 .table-wrap(overflow-x:auto) 里，给容器/包裹
 * min-width:0 即可让卡片守住容器宽(与页头/nav 对齐)、宽表格在卡内横向滚动。
 * cockpit 全局生效，其它视图的卡片也一并不再右溢。 */
.quotation-cockpit .module-block,
.quotation-cockpit .quotation-list-shell {
  min-width: 0;
}

.quotation-cockpit .table-wrap {
  min-width: 0;
}

.quotation-cockpit .quotation-list-view {
  grid-template-columns: minmax(0, 1fr);
}

/* —— 列表视图页头：直接复用工作台同款深色 hero 类 .quotation-task-page-hero(深蓝→青渐变+白字)，
 *    保证与 /quotations/tasks 完全一致。className 见 QuotationsPage(activeView==="list" →
 *    "dashboard-hero quotation-task-page-hero quotation-list-page-hero")；该 hero 类为纯样式、无 JS 依赖。 —— */

/* —— 状态快捷筛选：workbench KPI / pill chip strip —— */
.quotation-cockpit .quotation-list-status-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 12px;
}

.quotation-cockpit .quotation-list-status-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 11px 12px 10px;
  border: 1px solid var(--ui-color-border, var(--hairline));
  /* 与工作台 .quotation-task-lane 一致：左侧 4px tone 色条 + 8px 圆角(原为顶部色条+12px) */
  border-left: 4px solid var(--chip-tone, var(--ui-color-info-ink, var(--brand-500)));
  border-radius: var(--ui-radius-sm, 8px);
  background: var(--ui-color-surface, #fff);
  box-shadow: var(--ui-shadow-sm, 0 1px 2px rgba(16, 40, 80, 0.06));
  cursor: pointer;
  text-align: left;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.quotation-cockpit .quotation-list-status-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--ui-shadow-md, 0 8px 24px rgba(31, 69, 154, 0.1));
}

/* 色条改由 border-left 承担(见上)，原顶部 ::before 色条移除 */

.quotation-cockpit .quotation-list-status-chip > span {
  font-size: 12px;
  color: var(--ui-color-text-secondary, #51607a);
}

.quotation-cockpit .quotation-list-status-chip > strong {
  font-size: 22px;
  font-weight: 720;
  line-height: 1.1;
  color: var(--ui-color-text, var(--ink));
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.quotation-cockpit .quotation-list-status-chip > small {
  font-size: 11px;
  color: var(--ui-color-text-tertiary, var(--ink-3));
}

.quotation-cockpit .quotation-list-status-chip.tone-info {
  --chip-tone: var(--ui-color-info-ink, var(--brand-500));
}

.quotation-cockpit .quotation-list-status-chip.tone-success {
  --chip-tone: var(--ui-color-success-ink, #1f9d6b);
}

.quotation-cockpit .quotation-list-status-chip.tone-warning {
  --chip-tone: var(--ui-color-warning-ink, #c98a16);
}

.quotation-cockpit .quotation-list-status-chip.tone-danger {
  --chip-tone: var(--ui-color-danger-ink, #d04a3b);
}

.quotation-cockpit .quotation-list-status-chip.active {
  border-color: var(--chip-tone, var(--ui-color-info-ink, var(--brand-500)));
  box-shadow: var(--ui-focus-ring, 0 0 0 3px rgba(47, 107, 216, 0.22));
}

/* —— 表格状态徽章：作用域限定为 .ui-status-pill 观感（不动共享 QuotationTable）—— */
.quotation-list-view .status-badge {
  border: none;
  border-radius: var(--ui-radius-pill, 999px);
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.quotation-list-view .status-badge.status-draft {
  background: var(--ui-color-info-soft, #e8f0fe);
  color: var(--ui-color-info-ink, var(--brand-500));
}

.quotation-list-view .status-badge.status-pending_approval {
  background: var(--ui-color-warning-soft, #fdf3e0);
  color: var(--ui-color-warning-ink, #c98a16);
}

.quotation-list-view .status-badge.status-approved,
.quotation-list-view .status-badge.status-active {
  background: var(--ui-color-success-soft, var(--c-success-soft));
  color: var(--ui-color-success-ink, #1f9d6b);
}

.quotation-list-view .status-badge.status-closed {
  background: var(--ui-color-muted-soft, #eef2f7);
  color: var(--ui-color-text-secondary, #51607a);
}

/* —— 报价记录区块标题用 .ui-section-title（已全局），分页/筛选按钮用 .ui-button（已全局）—— */

/* ============ 全面规范化：工作区导航 / 筛选区 / 表格 → workbench 干净语言 ============ */

/* 工作区导航：干净卡片容器 + tab；active 用 info 软底+品牌字，hover 浅底，去掉旧的重描边 */
.quotation-cockpit .quotation-workspace-nav {
  background: var(--ui-color-surface, #fff);
  border: 1px solid var(--ui-color-border, var(--hairline));
  border-radius: var(--ui-radius-md, 12px);
  box-shadow: var(--ui-shadow-sm, 0 1px 2px rgba(16, 40, 80, 0.06));
}

.quotation-cockpit .quotation-workspace-nav a {
  border: 1px solid transparent;
  border-radius: var(--ui-radius-sm, 8px);
  color: var(--ui-color-text-secondary, #51607a);
  transition: background 0.16s ease, color 0.16s ease;
}

.quotation-cockpit .quotation-workspace-nav a:hover {
  background: var(--ui-color-surface-soft, #f6f9fd);
}

.quotation-cockpit .quotation-workspace-nav a.active {
  background: var(--ui-color-info-soft, #e8f0fe);
  border-color: var(--ui-color-info-soft, #cfe0fb);
  color: var(--ui-color-info-ink, var(--brand-500));
}

/* 筛选区已迁入「报价记录」表头卡(document-section-head + quotation-task-header-tools)，
 * 关键词/状态输入复用 .quotation-filter-field、按钮复用 .ui-button，旧 .quotation-list-toolbar 规则已废弃。
 * 表头三列栅格定义见文件末尾 .quotation-list-header-tools。 */

/* 表格：去掉竖网格线 → 干净 workbench 表（只留横向 hairline、行距更舒展、柔和 hover）。
 * cockpit 全局生效，让各视图表格统一从「工程网格」转为 workbench 干净表。 */
.quotation-cockpit .data-table th {
  background: var(--ui-color-surface-sunk, #f6f8fc);
  color: var(--ui-color-text-secondary, #51607a);
  border-right: none;
  border-bottom: 1px solid var(--ui-color-border, var(--hairline));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 11px 14px;
}

.quotation-cockpit .data-table td {
  border-right: none;
  border-bottom: 1px solid var(--ui-color-border, #eef2f7);
  padding: 11px 14px;
}

.quotation-cockpit .data-table tbody tr:hover td {
  background: var(--ui-color-surface-soft, #f6f9fd);
}

/* 序号列：窄、居中、淡色、等宽数字 */
.quotation-cockpit .data-table th.index-column,
.quotation-cockpit .data-table td.index-column {
  text-align: center;
  color: var(--ui-color-text-tertiary, var(--ink-3));
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* —— 响应式：沿用 1280 / 820 / 560 —— */
@media (max-width: 820px) {
  .quotation-cockpit .quotation-list-status-row {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .page-header.quotation-list-hero {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .quotation-cockpit .quotation-list-status-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* —— 报价记录表头：复用 workbench document-section-head + quotation-task-header-tools 视觉语言。
 *    工具 = 关键词(实时检索) + 操作(重置 / 列设置下拉 / 每页N条下拉)；状态筛选走上方 KPI 卡片,
 *    不在表头放状态下拉,也不放「查询」按钮(对齐报价工作台)。两列栅格:关键词 1fr + 操作贴右。 —— */
.quotation-list-view .quotation-list-header-tools {
  grid-template-columns: minmax(220px, 1fr) auto;
}

.quotation-list-view .quotation-list-header-tools .quotation-filter-field-keyword {
  width: 100%;
}

.quotation-list-view .quotation-list-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 表头里的查询/重置按钮对齐 34px 输入/下拉高度 */
.quotation-list-view .quotation-list-toolbar-actions .ui-button {
  min-height: 34px;
  height: 34px;
  padding: 0 16px;
}

@media (max-width: 1180px) {
  .quotation-list-view .quotation-list-header-tools {
    grid-template-columns: minmax(180px, 1fr) auto;
  }
}

.quotation-list-workspace-modal {
  width: min(1120px, calc(100vw - 48px));
  max-height: min(860px, calc(100vh - 48px));
}

.quotation-list-workspace-modal.is-view {
  width: min(980px, calc(100vw - 48px));
  max-height: min(820px, calc(100vh - 48px));
}

.quotation-list-workspace-modal.is-edit {
  width: min(1140px, calc(100vw - 48px));
  max-height: min(900px, calc(100vh - 48px));
}

.quotation-list-workspace-modal__header,
.quotation-list-workspace-modal__footer {
  align-items: flex-start;
}

.quotation-list-workspace-modal__headline {
  min-width: 0;
}

.quotation-list-workspace-modal__header-actions,
.quotation-list-workspace-modal__footer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.quotation-list-workspace-modal__body {
  gap: 14px;
}

.quotation-list-workspace-close {
  min-width: 72px;
}

.quotation-list-workspace-loading {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.quotation-list-workspace-notice {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #e5edf6;
  border-radius: 12px;
  background: #fbfdff;
}

.quotation-list-workspace-notice strong {
  color: #0f172a;
  font-size: 14px;
}

.quotation-list-workspace-notice span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.55;
}

.quotation-list-workspace-stages {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.quotation-list-workspace-stages article,
.quotation-list-workspace-facts article,
.quotation-list-workspace-card {
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  background: var(--surface);
}

.quotation-list-workspace-stages article {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  padding: 11px 12px;
}

.quotation-list-workspace-stages article > span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.quotation-list-workspace-stages article > strong {
  color: #0f172a;
  font-size: 13px;
}

.quotation-list-workspace-stages article.is-done {
  border-color: #b7ebd0;
  background: #f4fbf7;
}

.quotation-list-workspace-stages article.is-active {
  border-color: #bfdbfe;
  background: #f8fbff;
}

.quotation-list-workspace-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.quotation-list-workspace-modal.is-view .quotation-list-workspace-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quotation-list-workspace-facts--summary article {
  min-height: 94px;
}

.quotation-list-workspace-facts article {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  padding: 12px 14px;
}

.quotation-list-workspace-facts span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.quotation-list-workspace-facts strong {
  color: #0f172a;
  font-size: 16px;
  line-height: 1.3;
}

.quotation-list-workspace-facts small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.55;
}

.quotation-list-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
  grid-gap: 12px;
  gap: 12px;
}

.quotation-list-workspace-modal.is-view .quotation-list-workspace-grid {
  grid-template-columns: minmax(0, 1fr);
}

.quotation-list-workspace-modal.is-view .quotation-list-workspace-stages {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quotation-list-workspace-card {
  display: grid;
  align-content: start;
  grid-gap: 12px;
  gap: 12px;
  padding: 14px;
}

.quotation-list-workspace-card--primary {
  gap: 14px;
}

.quotation-list-workspace-card > header {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.quotation-list-workspace-card > header strong {
  color: #0f172a;
  font-size: 14px;
}

.quotation-list-workspace-card > header span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
}

.quotation-list-workspace-form textarea {
  resize: vertical;
}

.quotation-list-workspace-checks {
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.quotation-list-workspace-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px 14px;
  gap: 10px 14px;
  margin: 0;
}

.quotation-list-workspace-summary--hero {
  padding: 12px 14px;
  border: 1px solid #e8eef6;
  border-radius: 12px;
  background: #f8fafc;
}

.quotation-list-workspace-summary dt {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.quotation-list-workspace-summary dd {
  margin: 4px 0 0;
  color: #0f172a;
  font-size: 13px;
  line-height: 1.6;
}

.quotation-list-workspace-summary--dense {
  grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
}

.quotation-list-workspace-subsection {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.quotation-list-workspace-subsection--panel {
  padding: 12px 14px;
  border: 1px solid #e6edf5;
  border-radius: 12px;
  background: var(--surface);
}

.quotation-list-workspace-subsection > header {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
}

.quotation-list-workspace-subsection > header strong {
  color: #0f172a;
  font-size: 13px;
}

.quotation-list-workspace-subsection > header span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.quotation-list-workspace-next {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #d7e6fb;
  border-radius: 12px;
  background: #f6faff;
}

.quotation-list-workspace-next strong {
  color: #1d4ed8;
  font-size: 13px;
}

.quotation-list-workspace-next span {
  color: #0f172a;
  font-size: 14px;
  font-weight: 700;
}

.quotation-list-workspace-next small {
  color: #64748b;
  font-size: 12px;
  line-height: 1.55;
}

.quotation-list-workspace-list {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.quotation-list-workspace-list section {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.quotation-list-workspace-list h3 {
  margin: 0;
  color: #0f172a;
  font-size: 14px;
}

.quotation-list-workspace-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.quotation-list-workspace-list li {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid #e5edf6;
  border-radius: 10px;
  background: #f8fafc;
}

.quotation-list-workspace-list li strong {
  color: #0f172a;
  font-size: 13px;
}

.quotation-list-workspace-list li span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.55;
}

@media (max-width: 960px) {
  .quotation-list-workspace-modal {
    width: min(100vw - 24px, 1120px);
  }

  .quotation-list-workspace-stages,
  .quotation-list-workspace-facts,
  .quotation-list-workspace-grid,
  .quotation-list-workspace-summary,
  .quotation-list-workspace-summary--dense {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .quotation-list-workspace-modal {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 24px);
  }

  .quotation-list-workspace-stages,
  .quotation-list-workspace-facts,
  .quotation-list-workspace-grid,
  .quotation-list-workspace-summary,
  .quotation-list-workspace-summary--dense {
    grid-template-columns: 1fr;
  }

  .quotation-list-workspace-modal__header-actions,
  .quotation-list-workspace-modal__footer-actions {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 760px) {
  .quotation-list-view .quotation-list-header-tools {
    grid-template-columns: minmax(0, 1fr);
  }

  .quotation-list-view .quotation-list-toolbar-actions {
    justify-content: flex-start;
  }
}

/* —— 表格字体统一：cockpit 全局 `.quotation-cockpit td{font-family:var(--ck-mono)}` 把列表表格
 *    单元格强制成等宽字体，工作台靠 `.quotation-task-table td` 更高特异度覆盖回无衬线。
 *    列表用的是共享 QuotationTable(.quotation-configurable-table)，没覆盖→显示等宽，与工作台不一致。
 *    这里用更高特异度覆盖回与工作台同款 UI 无衬线字体(含金额/序号)。 —— */
.quotation-list-view .quotation-configurable-table th,
.quotation-list-view .quotation-configurable-table td,
.quotation-list-view .quotation-configurable-table strong,
.quotation-list-view .quotation-configurable-table span,
.quotation-list-view .quotation-configurable-table small,
.quotation-list-view .quotation-configurable-table a,
.quotation-list-view .quotation-configurable-table b {
  font-family: var(--ui-font-family-base, var(--font-sans));
}

/* 金额/数字列保持等宽数字(对齐)但用无衬线字族——与工作台一致 */
.quotation-list-view .quotation-configurable-table td.numeric-cell,
.quotation-list-view .quotation-configurable-table .tabular {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.aligned-money-cell {
  display: inline-grid;
  grid-template-columns: auto minmax(7ch, auto) 3ch;
  align-items: baseline;
  column-gap: 5px;
  min-width: 15ch;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1, "tnum";
  line-height: 1.1;
}

.numeric-cell .aligned-money-cell {
  justify-content: end;
}

.aligned-money-currency {
  font-weight: 760;
}

.aligned-money-integer {
  text-align: right;
}

.aligned-money-decimal {
  text-align: left;
}

/* ============ 清单中心(imports 视图)规范化 ============
 *  作用域：.quotation-cockpit .quotation-settings-workbench
 *  与 list 视图同法——控件改 .ui-button / .ui-status-pill，焦点指标抽成 workbench KPI chip 条
 *  (复用 .quotation-list-status-chip)，并把 globals.css 旧硬编码色(#e5edf6/#0f172a/#64748b)
 *  覆盖回 --ui-* token。仅样式，不动 state / 数据 / 权限 / 路由。 */

/* 焦点条：原 2 列(focus-main | metrics) → 单列；metrics 已抽成下方 .quotation-list-status-row chip 条。
 *  globals 基线是 1.4fr 0.9fr，移走 metrics 后右列会空出，故此处更高特异度覆盖为单列。 */
.quotation-cockpit .quotation-settings-workbench .quotation-list-focus-strip {
  grid-template-columns: 1fr;
}

/* 焦点主卡：对齐 workbench 卡片(--ui-* 边框/圆角/阴影)，替换旧 #e5edf6 描边、硬阴影缺失 */
.quotation-cockpit .quotation-settings-workbench .quotation-list-focus-main {
  border-color: var(--ui-color-border, var(--hairline));
  border-radius: var(--ui-radius-md, 12px);
  box-shadow: var(--ui-shadow-sm, 0 1px 2px rgba(16, 40, 80, 0.06));
}

.quotation-cockpit .quotation-settings-workbench .quotation-list-focus-main span,
.quotation-cockpit .quotation-settings-workbench .quotation-list-focus-main small {
  color: var(--ui-color-text-secondary, #51607a);
}

.quotation-cockpit .quotation-settings-workbench .quotation-list-focus-main strong {
  color: var(--ui-color-text, var(--ink));
}

/* KPI chip 条与焦点卡的间距(承自命令块) */
.quotation-cockpit .quotation-settings-command .quotation-list-status-row {
  margin-top: 12px;
}

/* 清单中心的 chip 是展示态(纯计数，非筛选按钮)：去掉指针手型，hover 上浮保留为读数反馈 */
.quotation-cockpit .quotation-settings-command .quotation-list-status-chip {
  cursor: default;
}

/* 空状态：对齐 .ui-empty-state 观感(柔和虚线 + 下沉底 + 次级字色)，替换旧白底实线 */
.quotation-cockpit .quotation-settings-workbench .quotation-list-option-empty {
  border: 1px dashed var(--ui-color-border-strong, #c8d3e2);
  border-radius: var(--ui-radius-sm, 8px);
  background: var(--ui-color-surface-sunk, #f6f9fd);
  color: var(--ui-color-text-secondary, #51607a);
}

.quotation-cockpit .quotation-settings-workbench .quotation-list-option-empty strong {
  color: var(--ui-color-text, var(--ink));
}

.quotation-cockpit .quotation-settings-workbench .quotation-list-option-empty span {
  color: var(--ui-color-text-secondary, #51607a);
}

/* 导入校验 tone 卡片：仅在本视图把旧硬编码 tone 色(#fff7f7/#fed7aa/#bbf7d0)对齐 --ui-* soft token
 *  (不动共享的 .quotation-risk-panel-item / .quotation-version-step) */
.quotation-cockpit .quotation-settings-workbench .quotation-rule-builder article.tone-danger {
  border-color: var(--ui-color-danger-border, var(--c-danger-border));
  background: var(--ui-color-danger-soft, var(--c-danger-soft));
}

.quotation-cockpit .quotation-settings-workbench .quotation-rule-builder article.tone-warning {
  border-color: var(--ui-color-warning-border, var(--accent-200));
  background: var(--ui-color-warning-soft, var(--accent-50));
}

.quotation-cockpit .quotation-settings-workbench .quotation-rule-builder strong {
  color: var(--ui-color-text, var(--ink));
}

.quotation-cockpit .quotation-settings-workbench .quotation-rule-builder small {
  color: var(--ui-color-text-secondary, #51607a);
}

/* —— 响应式：清单中心 chip 条沿用 .quotation-list-status-row 既有 820 / 560 断点(见上)，焦点卡单列已兜底 —— */

/* ============ 报价列表(list 视图)完善：收尾 token 对齐 + 去冗余卡皮 ============
 *  作用域：.quotation-cockpit .quotation-list-view / .quotation-task-page-hero
 *  仅样式，不动 state / 数据 / 权限 / 路由。深色 hero 操作按钮维持 btn(由
 *  .quotation-task-page-hero .page-header-actions .btn 处理玻璃态+文字填充色，勿改)。 */

/* 1) 状态 chip 条容器：去掉 .module-block 卡皮(渐变底/描边/阴影/大圆角/内距)，让 KPI chip
 *    直接铺在页面上——与清单中心 + 工作台参考一致，消除"卡里套卡"的双重描边。 */
.quotation-cockpit .quotation-list-view .quotation-list-shell {
  margin-top: 12px;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  padding: 0;
}

/* 2) 分页按钮：旧 .quotation-task-pagination button 用硬编码色(#dbe3ef/#475569)，
 *    本视图对齐 --ui-* token + 柔和 hover，与 workbench 设计系统一致(不动共享 tasks 视图)。 */
.quotation-list-view .quotation-task-pagination button {
  border-color: var(--ui-color-border, var(--hairline));
  background: var(--ui-color-surface, #fff);
  color: var(--ui-color-text-secondary, #51607a);
  font-weight: 600;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.quotation-list-view .quotation-task-pagination button:hover:not(:disabled) {
  background: var(--ui-color-surface-soft, #f6f9fd);
  border-color: var(--ui-color-border-strong, var(--hairline-strong));
  color: var(--ui-color-text, var(--ink));
}

.quotation-list-view .quotation-task-pagination button.active {
  border-color: var(--ui-color-info-ink, var(--brand-500));
  background: var(--ui-color-info-soft, #e8f0fe);
  color: var(--ui-color-info-ink, var(--brand-500));
}

/* 3) 深色 hero 上的操作提示(无查看权限/请选择报价)：原为浅灰实体盒，夹在玻璃按钮间突兀。
 *    改玻璃态(半透明白底 + 白字)，与相邻 ghost 按钮统一观感(读作禁用/提示态)。 */
.quotation-task-page-hero .page-header-actions .quotation-action-note {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.14);
  color: var(--ink-inverse);
}

/* ============ WorkbenchQueueTable 收尾:与报价工作台对齐 ============ */

/* 1) 工具条右对齐:队列表无日期筛选(只有 搜索+列设置+条数 3 项),而报价工作台的
 *    .quotation-task-header-tools 是按 4 项(含日期)的 4 列 grid,3 项会落进空的日期列、看着居中。
 *    改成 flex 右对齐(覆盖 grid),让工具贴右,与报价工作台同样靠右。 */
.quotation-cockpit .quotation-queue-tools {
  display: flex;
  grid-template-columns: none;
  flex-wrap: nowrap; /* 禁止换行:搜索框吃余量并可收缩,控件固定不收缩 */
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  min-width: 0;
}

/* 工具条控件(日期/状态下拉/列设置/每页条数)固定不收缩,始终单行靠右。 */
.quotation-cockpit .quotation-queue-tools > * {
  flex-shrink: 0;
}

/* 搜索框占余量、可收缩到 min-width,避免把后面的控件挤换行。 */
.quotation-cockpit .quotation-queue-tools .quotation-filter-field-keyword {
  flex: 1 1 200px;
  min-width: 140px;
  width: auto;
}

/* 2) 主文本字号/字重与报价工作台统一:报价工作台主 strong 是 14px/800(其 strong 外包一层 div、
 *    逃过 td>strong 规则),而队列表 strong 是 td 直接子、命中 td>strong 的 13px/850。
 *    这里把队列表主 strong 对齐成 14px/800。 */
.quotation-cockpit .quotation-queue-table td > strong {
  font-size: 14px;
  font-weight: 800;
}

/* 3) 队列表撑满内容区: 列宽用「项目列占大头 + 标准清单/异常/状态收窄」的比例,table-layout:fixed
 *    下按 colgroup 比例分配,项目列吃掉多余宽度、其余列保持窄;避免右侧留白也避免「16行/6项」列过宽。 */
.quotation-cockpit .quotation-queue-table {
  width: 100%;
}

/* ============ 报价列表：按 business-table-style-guide.md 收敛成业务表 ============
 *  作用域只限定报价列表视图。字段语义见 QuotationTable：序号 | 业务名称 | 客户/区域 |
 *  负责人 | 状态 | 下一步 | 金额/指标 | 最近更新 | 操作。 */
.quotation-list-view .quotation-table-shell {
  overflow: hidden;
  border: 1px solid #e5ecf3;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 35, 70, 0.04);
}

.quotation-list-view .quotation-configurable-table-wrap {
  border: 0;
  border-radius: 0;
  background: var(--surface);
}

.quotation-list-view .quotation-configurable-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  color: #0b1f3a;
}

.quotation-list-view .quotation-configurable-table th {
  height: 40px;
  padding: 8px 14px;
  border-bottom: 1px solid #dfe8f4;
  background:
    linear-gradient(180deg, #fbfdff 0%, #f4f7fb 100%);
  color: #61748c;
  font-size: 12.5px;
  font-weight: 760;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}

.quotation-list-view .quotation-configurable-table td {
  height: 54px;
  padding: 7px 14px;
  border-bottom: 1px solid #edf1f7;
  background: var(--surface);
  color: #16273d;
  font-size: 13px;
  font-weight: 730;
  line-height: 1.25;
  text-align: center;
}

.quotation-list-view .quotation-configurable-table tbody tr:nth-child(even) td {
  background: #fcfdff;
}

.quotation-list-view .quotation-configurable-table tbody tr:hover td {
  background: linear-gradient(90deg, rgba(246, 250, 255, 0.96), rgba(251, 253, 255, 0.98));
}

.quotation-list-view .quotation-configurable-table tbody tr.is-selected td {
  background: #eef6ff;
}

.quotation-list-view .quotation-configurable-table tbody tr.is-selected td:first-child {
  box-shadow: inset 3px 0 0 #1d6fea;
}

.quotation-list-view .quotation-configurable-table .row-index-column {
  width: 56px;
  min-width: 56px;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 720;
  text-align: center;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.quotation-list-view .quotation-business-name {
  display: block;
  overflow: hidden;
  max-width: 100%;
  color: #185abd;
  font-size: 13px;
  font-weight: 790;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-list-view .quotation-configurable-table td > strong {
  display: block;
  overflow: hidden;
  max-width: 100%;
  color: #0b1f3a;
  font-size: 13px;
  font-weight: 780;
  line-height: 1.25;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-list-view .quotation-configurable-table .first-column {
  text-align: left;
}

.quotation-list-view .quotation-configurable-table .first-column strong,
.quotation-list-view .quotation-configurable-table .first-column span,
.quotation-list-view .quotation-configurable-table .first-column small {
  text-align: left;
}

.quotation-list-view .quotation-configurable-table td > span:not(.quotation-business-status):not(.quotation-next-step-chip):not(.quotation-date-cell):not(.quotation-owner-cell),
.quotation-list-view .quotation-configurable-table td > small {
  display: block;
  overflow: hidden;
  max-width: 100%;
  margin-top: 3px;
  color: #6b7a90;
  font-size: 12px;
  font-weight: 620;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-list-view .quotation-owner-cell,
.quotation-list-view .quotation-date-cell {
  display: inline-flex;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
  color: #0b1f3a;
  font-size: 13px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-list-view .quotation-configurable-table td.numeric-cell {
  text-align: center;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.quotation-list-view .quotation-configurable-table td.numeric-cell strong {
  color: #0b1f3a;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.quotation-list-view .quotation-configurable-table td.numeric-cell span {
  color: #6b7a90;
  text-align: center;
}

.quotation-list-view .quotation-business-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.quotation-list-view .quotation-business-status::before {
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.quotation-list-view .quotation-business-status.status-draft {
  background: #eef6ff;
  color: #1d6fea;
}

.quotation-list-view .quotation-business-status.status-pending_approval {
  background: #fff6e8;
  color: #b66a00;
}

.quotation-list-view .quotation-business-status.status-approved,
.quotation-list-view .quotation-business-status.status-active {
  background: #e9f8f1;
  color: #0b815a;
}

.quotation-list-view .quotation-business-status.status-closed {
  background: #f1f4f8;
  color: #6b7a90;
}

.quotation-list-view .quotation-next-step-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  max-width: 100%;
  min-height: 22px;
  padding: 0 10px;
  overflow: hidden;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.quotation-list-view .quotation-next-step-chip.contract-action-info {
  background: #eef6ff;
  color: #1d6fea;
}

.quotation-list-view .quotation-next-step-chip.contract-action-warning {
  background: #fff6e8;
  color: #b66a00;
}

.quotation-list-view .quotation-next-step-chip.contract-action-success {
  background: #e9f8f1;
  color: #0b815a;
}

.quotation-list-view .quotation-next-step-chip.contract-action-danger {
  background: #fff0f0;
  color: #d92d20;
}

.quotation-list-view .quotation-next-step-chip:hover,
.quotation-list-view .quotation-next-step-chip:focus-visible {
  box-shadow: 0 0 0 3px rgba(29, 111, 234, 0.12);
}

.quotation-list-view .quotation-configurable-table .action-column {
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  z-index: 1;
  min-width: 132px;
  width: 132px;
  background: var(--surface);
  box-shadow: -10px 0 18px rgba(15, 35, 70, 0.07);
}

.quotation-list-view .quotation-configurable-table thead .action-column {
  z-index: 2;
  background: #f7fafe;
}

.quotation-list-view .quotation-configurable-table tbody tr:hover .action-column {
  background: #f7fbff;
}

.quotation-list-view .quotation-configurable-table tbody tr.is-selected .action-column {
  background: #eef6ff;
}

.quotation-list-view .quotation-row-icon-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  width: 100%;
}

.quotation-list-view .quotation-row-icon-actions .btn-icon {
  width: 30px;
  min-width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.quotation-list-view .quotation-row-icon-actions .btn-primary.btn-icon {
  border-color: #1d6fea;
  background: #1d6fea;
  color: var(--ink-inverse) !important;
  -webkit-text-fill-color: #fff;
  box-shadow: 0 8px 18px rgba(29, 111, 234, 0.18);
}

.quotation-list-view .quotation-row-icon-actions .btn-primary.btn-icon:hover,
.quotation-list-view .quotation-row-icon-actions .btn-primary.btn-icon:focus-visible {
  border-color: #1557c8;
  background: #1557c8;
  box-shadow: 0 10px 22px rgba(29, 111, 234, 0.24);
}

.quotation-list-view .quotation-row-icon-actions .btn-ghost.btn-icon {
  border-color: #d5e1f0;
  background: var(--surface);
  color: #4f6077;
  -webkit-text-fill-color: #4f6077;
}

.quotation-list-view .quotation-row-icon-actions .btn-ghost.btn-icon:hover,
.quotation-list-view .quotation-row-icon-actions .btn-ghost.btn-icon:focus-visible {
  border-color: #8bb8f5;
  background: #eef6ff;
  color: #1d6fea;
  -webkit-text-fill-color: #1d6fea;
  box-shadow: 0 0 0 3px rgba(29, 111, 234, 0.14);
}

.quotation-list-view .quotation-row-icon-actions .quotation-task-delete-action {
  border-color: #ffd0cc;
  background: #fff7f7;
  color: #d92d20;
  -webkit-text-fill-color: #d92d20;
}

.quotation-list-view .quotation-row-icon-actions .quotation-task-delete-action:hover,
.quotation-list-view .quotation-row-icon-actions .quotation-task-delete-action:focus-visible {
  border-color: #ff9f99;
  background: #fff0f0;
  color: #b42318;
  -webkit-text-fill-color: #b42318;
  box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
}

.quotation-list-view .quotation-row-icon-actions .btn-icon:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.quotation-list-view .quotation-row-icon-actions .btn-icon svg,
.quotation-list-view .quotation-row-icon-actions .btn-icon .action-glyph {
  width: 15px;
  height: 15px;
}

/* 客户列表：在保留业务表格密度的基础上增强可读性与质感。 */
.customer-list-card {
  border-color: rgba(204, 216, 232, 0.7);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(251, 253, 255, 0.98)),
    var(--surface);
  box-shadow:
    0 12px 28px rgba(25, 54, 96, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.customer-list-card .quotation-task-table-head {
  min-height: 52px;
  border-bottom: 1px solid rgba(217, 226, 239, 0.86);
}

.customer-list-card .module-title {
  color: #0f2747;
  font-size: 18px;
  font-weight: 800;
}

.customer-list-card .quotation-horizontal-table {
  /* 窄屏下表格比容器宽时要能横向滚动看到右侧列（时间/操作），不再直接裁切。
     overflow:auto 仍按 border-radius 裁圆角，仅在溢出时出现滚动条。 */
  overflow: auto;
  border-radius: 10px;
}

.customer-list-card .quotation-queue-table {
  color: #24364e;
}

.customer-list-card .quotation-queue-table th {
  height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #dfe8f4;
  background:
    linear-gradient(180deg, #fbfdff 0%, #f4f7fb 100%);
  color: #61748c;
  font-size: 12.5px;
  font-weight: 760;
  text-align: center;
}

.customer-list-card .quotation-queue-table td {
  height: 54px;
  padding-top: 7px;
  padding-bottom: 7px;
  border-bottom-color: #edf2f8;
  color: #16273d;
  font-size: 13px;
  font-weight: 730 !important;
  line-height: 1.25;
  text-align: center;
}

.customer-list-card .quotation-queue-table td a,
.customer-list-card .quotation-queue-table td b,
.customer-list-card .quotation-queue-table td small,
.customer-list-card .quotation-queue-table td span,
.customer-list-card .quotation-queue-table td strong {
  font-weight: 730 !important;
}

.customer-list-card .quotation-queue-table tbody tr:nth-child(even) td {
  background: #fcfdff;
}

.customer-list-card .quotation-queue-table tbody tr:hover td {
  background: linear-gradient(90deg, rgba(246, 250, 255, 0.96), rgba(251, 253, 255, 0.98));
}

.customer-list-card .quotation-queue-table tbody tr:hover td:first-child {
  box-shadow: inset 2px 0 0 rgba(47, 107, 216, 0.36);
}

.customer-list-card .quotation-queue-table .row-index-column {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 720 !important;
}

.customer-list-card .quotation-queue-table td a strong {
  color: #185abd;
  font-size: 13px;
  font-weight: 790 !important;
}

.customer-list-card .quotation-queue-table tbody td:nth-child(2) {
  text-align: left;
}

.customer-list-card .quotation-queue-table tbody td:nth-child(2) a,
.customer-list-card .quotation-queue-table tbody td:nth-child(2) strong {
  text-align: left;
}

.customer-list-card .quotation-queue-table td a:hover strong {
  color: #164a9f;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.customer-list-card .quotation-queue-table td:nth-child(3),
.customer-list-card .quotation-queue-table td:nth-child(4),
.customer-list-card .quotation-queue-table td:nth-child(6),
.customer-list-card .quotation-queue-table td:nth-child(7),
.customer-list-card .quotation-queue-table td:nth-child(8) {
  font-weight: 780 !important;
}

.customer-list-card .customer-chain-stats {
  color: #53657f;
  font-weight: 760;
  letter-spacing: 0.02em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.customer-list-card .ui-status-pill {
  min-width: 88px;
  min-height: 22px;
  justify-content: center;
  border: 0;
  font-size: 12px;
  font-weight: 760;
  box-shadow: inset 0 0 0 1px rgba(54, 96, 150, 0.04);
}

.customer-list-card .action-column {
  min-width: 120px;
  box-shadow: -10px 0 20px rgba(15, 35, 70, 0.055);
  text-align: center;
}

.customer-list-card .inline-actions {
  justify-content: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.customer-list-card .business-list-row-actions,
.quotation-list-view .business-list-row-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
  flex-wrap: nowrap;
}

.customer-list-card .business-list-row-actions > a,
.customer-list-card .business-list-row-actions > button,
.quotation-list-view .business-list-row-actions > a,
.quotation-list-view .business-list-row-actions > button {
  flex: 0 0 auto;
}

.customer-list-card .inline-actions .btn-icon {
  width: 29px;
  min-width: 29px;
  height: 29px;
  border-radius: 8px;
}

.customer-list-card .inline-actions .btn-primary.btn-icon {
  box-shadow: 0 6px 14px rgba(47, 107, 216, 0.18);
}

/* 铜价驾驶舱列表：按客户列表的业务表视觉收敛，保留铜价页的数据结构。 */
.copper-cockpit-list-card {
  border-color: rgba(204, 216, 232, 0.72);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(251, 253, 255, 0.98)),
    var(--surface);
  box-shadow:
    0 12px 28px rgba(25, 54, 96, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.copper-cockpit-list-card .quotation-task-table-head {
  min-height: 52px;
  border-bottom: 1px solid rgba(217, 226, 239, 0.86);
}

.copper-cockpit-list-card .module-title {
  color: #0f2747;
  font-size: 18px;
  font-weight: 800;
}

.copper-cockpit-list-card .muted-text {
  color: #53657f;
  font-size: 13px;
  font-weight: 720;
}

.copper-cockpit-list-card .quotation-horizontal-table {
  overflow: hidden;
  border-radius: 10px;
}

.copper-cockpit-list-card .quotation-queue-table {
  color: #24364e;
}

.copper-cockpit-list-card .quotation-queue-table th {
  height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #dfe8f4;
  background:
    linear-gradient(180deg, #fbfdff 0%, #f4f7fb 100%);
  color: #61748c;
  font-size: 12.5px;
  font-weight: 760;
  text-align: center;
}

.copper-cockpit-list-card .quotation-queue-table td {
  height: 54px;
  padding-top: 7px;
  padding-bottom: 7px;
  border-bottom-color: #edf2f8;
  color: #16273d;
  font-size: 13px;
  font-weight: 730 !important;
  line-height: 1.25;
  text-align: center;
}

.copper-cockpit-list-card .quotation-queue-table td a,
.copper-cockpit-list-card .quotation-queue-table td b,
.copper-cockpit-list-card .quotation-queue-table td small,
.copper-cockpit-list-card .quotation-queue-table td span,
.copper-cockpit-list-card .quotation-queue-table td strong {
  font-weight: 730 !important;
}

.copper-cockpit-list-card .quotation-queue-table tbody tr:nth-child(even) td {
  background: #fcfdff;
}

.copper-cockpit-list-card .quotation-queue-table tbody tr:hover td {
  background: linear-gradient(90deg, rgba(246, 250, 255, 0.96), rgba(251, 253, 255, 0.98));
}

.copper-cockpit-list-card .quotation-queue-table tbody tr:hover td:first-child {
  box-shadow: inset 2px 0 0 rgba(47, 107, 216, 0.36);
}

.copper-cockpit-list-card .quotation-queue-table .row-index-column {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 720 !important;
  text-align: center;
}

.copper-cockpit-list-card .quotation-queue-table .first-column {
  text-align: left;
}

.copper-cockpit-list-card .quotation-queue-table .first-column strong {
  color: #185abd;
  font-size: 13px;
  font-weight: 790 !important;
}

.copper-cockpit-list-card .quotation-queue-table .first-column small {
  margin-top: 3px;
  color: #53657f;
  font-size: 11px;
  font-weight: 660 !important;
  line-height: 1.25;
}

.copper-cockpit-list-card .quotation-queue-table td.numeric-cell {
  color: #0b1f3a;
  font-weight: 780 !important;
  text-align: center;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.copper-cockpit-list-card .quotation-queue-table td:nth-child(3),
.copper-cockpit-list-card .quotation-queue-table td:nth-child(4),
.copper-cockpit-list-card .quotation-queue-table td:nth-child(5) {
  font-weight: 780 !important;
}

.copper-cockpit-list-card .ui-status-pill {
  min-width: 88px;
  min-height: 22px;
  justify-content: center;
  border: 0;
  font-size: 12px;
  font-weight: 760;
  box-shadow: inset 0 0 0 1px rgba(54, 96, 150, 0.04);
}

.copper-cockpit-list-card .quotation-filter-field input {
  height: 34px;
  border-color: #dbe6f5;
  border-radius: 9px;
  color: #0f2747;
  font-size: 13px;
  font-weight: 700;
}

.copper-cockpit-list-card .quotation-task-dropdown > summary {
  min-height: 34px;
  border-color: #cfe0fa;
  border-radius: 9px;
  background: #f6f9ff;
  color: #1955b8;
  font-size: 13px;
  font-weight: 780;
}

.copper-cockpit-list-card .quotation-task-pagination {
  color: #53657f;
  font-weight: 720;
}

/* 商机列表：复用客户列表业务表观感，补齐金额/状态/操作列的居中扫读。 */
.opportunity-list-card .quotation-queue-table td.numeric-cell {
  color: #0b1f3a;
  font-weight: 780 !important;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.opportunity-list-card .quotation-queue-table td.numeric-cell,
.opportunity-list-card .quotation-queue-table td:not(.first-column) {
  vertical-align: middle;
}

.opportunity-list-card .quotation-queue-table .ui-status-pill {
  display: inline-flex;
  min-width: 88px;
}

.opportunity-list-card .quotation-queue-table .action-column {
  text-align: center;
}

/* 报价子模块主列表：工作台 / 清单中心 / 核算队列统一到客户列表的业务表节奏。 */
.quotation-task-list-card .quotation-task-table th,
.quotation-task-list-card .quotation-task-table td,
.quotation-import-list-card .quotation-queue-table th,
.quotation-import-list-card .quotation-queue-table td,
.quotation-costing-list-card .quotation-queue-table th,
.quotation-costing-list-card .quotation-queue-table td,
.quotation-record-list-card .quotation-configurable-table th,
.quotation-record-list-card .quotation-configurable-table td {
  vertical-align: middle;
}

.quotation-task-list-card .quotation-task-table th,
.quotation-import-list-card .quotation-queue-table th,
.quotation-costing-list-card .quotation-queue-table th {
  height: 40px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #dfe8f4;
  background:
    linear-gradient(180deg, #fbfdff 0%, #f4f7fb 100%);
  color: #61748c;
  font-size: 12.5px;
  font-weight: 760;
  text-align: center;
}

.quotation-task-list-card .quotation-task-table td,
.quotation-import-list-card .quotation-queue-table td,
.quotation-costing-list-card .quotation-queue-table td {
  height: 54px;
  padding-top: 7px;
  padding-bottom: 7px;
  border-bottom-color: #edf2f8;
  color: #16273d;
  font-size: 13px;
  font-weight: 730;
  line-height: 1.25;
  text-align: center;
}

.quotation-task-list-card .quotation-task-table tbody tr:nth-child(even) td,
.quotation-import-list-card .quotation-queue-table tbody tr:nth-child(even) td,
.quotation-costing-list-card .quotation-queue-table tbody tr:nth-child(even) td {
  background: #fcfdff;
}

.quotation-task-list-card .quotation-task-table tbody tr:hover td,
.quotation-import-list-card .quotation-queue-table tbody tr:hover td,
.quotation-costing-list-card .quotation-queue-table tbody tr:hover td {
  background: linear-gradient(90deg, rgba(246, 250, 255, 0.96), rgba(251, 253, 255, 0.98));
}

.quotation-task-list-card .quotation-task-table .first-column,
.quotation-import-list-card .quotation-queue-table .first-column,
.quotation-costing-list-card .quotation-queue-table .first-column {
  text-align: left;
}

.quotation-task-list-card .quotation-task-title-cell strong,
.quotation-import-list-card .quotation-queue-table tbody td:nth-child(2) strong,
.quotation-costing-list-card .quotation-queue-table tbody td:nth-child(2) strong {
  color: #185abd;
  font-size: 13px;
  font-weight: 790;
}

.quotation-task-list-card .quotation-task-table td > strong,
.quotation-import-list-card .quotation-queue-table td > strong,
.quotation-costing-list-card .quotation-queue-table td > strong {
  color: #0b1f3a;
  font-size: 13px;
  font-weight: 780;
  text-align: center;
}

.quotation-task-list-card .quotation-task-table .first-column strong,
.quotation-task-list-card .quotation-task-table .first-column span,
.quotation-import-list-card .quotation-queue-table .first-column strong,
.quotation-import-list-card .quotation-queue-table .first-column span,
.quotation-costing-list-card .quotation-queue-table .first-column strong,
.quotation-costing-list-card .quotation-queue-table .first-column span {
  text-align: left;
}

.quotation-task-list-card .quotation-task-table .numeric-cell,
.quotation-import-list-card .quotation-queue-table .numeric-cell,
.quotation-costing-list-card .quotation-queue-table .numeric-cell {
  color: #0b1f3a;
  font-weight: 780;
  text-align: center;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.quotation-cockpit .quotation-task-workbench .quotation-task-table th.col-amount {
  text-align: center;
}

.quotation-cockpit .quotation-task-workbench .quotation-task-table th.col-amount .quotation-column-heading {
  display: block;
  width: 100%;
  padding-right: 8px;
  text-align: center;
}

.quotation-task-list-card .quotation-task-table td.col-amount {
  text-align: right;
}

.quotation-task-list-card .quotation-task-table td.col-amount .aligned-money-cell {
  width: 15ch;
  min-width: 15ch;
  justify-content: stretch;
  margin-left: auto;
  margin-right: 0;
}

.quotation-task-list-card .quotation-task-table td.numeric-cell strong,
.quotation-import-list-card .quotation-queue-table td.numeric-cell strong,
.quotation-costing-list-card .quotation-queue-table td.numeric-cell strong {
  text-align: center;
}

.quotation-task-list-card .quotation-task-table td.col-amount .aligned-money-cell span {
  text-align: inherit;
}

.quotation-task-list-card .quotation-task-table td.col-amount .aligned-money-currency {
  text-align: right;
}

.quotation-task-list-card .quotation-task-table td.col-amount .aligned-money-integer {
  text-align: right;
}

.quotation-task-list-card .quotation-task-table td.col-amount .aligned-money-decimal {
  text-align: left;
}

.quotation-task-list-card .risk-badge {
  /* 徽标宽度贴合文字（去掉 min-width:88px，短标签如「常规」不再被拉成长色条）。 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(54, 96, 150, 0.04);
}

.quotation-task-list-card .risk-normal {
  background: #eef5ff;
  color: #185abd;
}

.quotation-task-list-card .risk-warning {
  border-color: rgba(232, 148, 39, 0.1);
  background: #fff2df;
  color: #c76a00;
}

.quotation-task-list-card .risk-danger {
  border-color: rgba(239, 68, 68, 0.12);
  background: #ffe8ea;
  color: #d92d20;
}

.quotation-task-list-card .quotation-row-icon-actions,
.quotation-import-list-card .quotation-row-icon-actions,
.quotation-costing-list-card .quotation-row-icon-actions {
  justify-content: center;
  width: 100%;
}

/* 成本数据库入口列表：跟报价/客户业务表保持同一套字体密度和居中节奏。 */
.price-library-current .cost-library-version-table {
  border-collapse: separate;
  border-spacing: 0;
  color: #16273d;
  font-family: var(--ui-font-family-base, var(--font-sans));
}

.price-library-current .cost-library-version-table th {
  height: 40px;
  padding: 8px 14px;
  border-bottom: 1px solid #dfe8f4;
  background:
    linear-gradient(180deg, #fbfdff 0%, #f4f7fb 100%);
  color: #61748c;
  font-size: 12.5px;
  font-weight: 760;
  text-align: center;
}

.price-library-current .cost-library-version-table td {
  height: 54px;
  padding: 7px 14px;
  border-bottom-color: #edf2f8;
  color: #16273d;
  font-size: 13px;
  font-weight: 730;
  line-height: 1.25;
  text-align: center;
  vertical-align: middle;
}

.price-library-current .cost-library-version-table tbody tr:nth-child(even) td {
  background: #fcfdff;
}

.price-library-current .cost-library-version-table tbody tr:hover td {
  background: linear-gradient(90deg, rgba(246, 250, 255, 0.96), rgba(251, 253, 255, 0.98));
}

.price-library-current .cost-library-version-table th:first-child,
.price-library-current .cost-library-version-table td:first-child {
  text-align: left;
}

.price-library-current .cost-library-version-table .cost-library-name strong {
  color: #185abd;
  font-size: 13px;
  font-weight: 790;
}

.price-library-current .cost-library-version-table td strong,
.price-library-current .cost-library-version-table td span,
.price-library-current .cost-library-version-table td small {
  font-weight: 730;
}

.price-library-current .cost-library-version-table .cost-library-compact-data {
  align-items: center;
}

.price-library-current .cost-library-version-table .ui-status-pill {
  min-width: 88px;
  justify-content: center;
}

.price-library-current .cost-library-version-table .price-row-actions {
  justify-content: center;
  width: 100%;
}

.quotation-list-view {
  gap: 12px;
}

.quotation-cockpit .quotation-list-view .quotation-list-status-row {
  grid-template-columns: repeat(auto-fit, minmax(164px, 1fr));
  gap: 10px;
  margin-bottom: 0;
}

.quotation-cockpit .quotation-list-view .quotation-list-status-chip {
  min-height: 88px;
  padding: 12px 14px;
  border-color: #e5ecf3;
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 35, 70, 0.05);
}

.quotation-cockpit .quotation-list-view .quotation-list-status-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15, 35, 70, 0.08);
}

.quotation-cockpit .quotation-list-view .quotation-list-status-chip > strong {
  color: #0b1f3a;
  font-size: 22px;
  font-weight: 800;
}

.quotation-cockpit .quotation-list-view .quotation-list-status-chip.active {
  background: #eef6ff;
  box-shadow: inset 0 0 0 1px rgba(29, 111, 234, 0.42), 0 1px 2px rgba(15, 35, 70, 0.05);
}

.quotation-list-view .quotation-list-business-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  padding: 0 12px 12px;
}

.quotation-list-view .quotation-list-business-metric {
  position: relative;
  min-width: 0;
  padding: 12px 14px 11px;
  border: 1px solid #e5ecf3;
  border-radius: 8px;
  background: var(--surface);
}

.quotation-list-view .quotation-list-business-metric::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--metric-tone, #1d6fea);
  content: "";
}

.quotation-list-view .quotation-list-business-metric span {
  display: block;
  overflow: hidden;
  color: #6b7a90;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-list-view .quotation-list-business-metric strong {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  color: #0b1f3a;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.quotation-list-view .quotation-list-business-metric small {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  color: #6b7a90;
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-list-view .quotation-list-business-metric.tone-info {
  --metric-tone: #1d6fea;
}

.quotation-list-view .quotation-list-business-metric.tone-success {
  --metric-tone: #16884a;
}

.quotation-list-view .quotation-list-business-metric.tone-warning {
  --metric-tone: #b76a00;
}

.quotation-list-view .quotation-list-business-metric.tone-danger {
  --metric-tone: #d93025;
}

.quotation-list-view .quotation-task-table-block {
  overflow: hidden;
  border-color: #e5ecf3;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 35, 70, 0.04);
}

.quotation-list-view .quotation-list-table-head {
  padding: 14px 12px 12px;
  border-bottom: 1px solid #e5ecf3;
}

.quotation-list-view .quotation-list-table-head .module-title {
  color: #0b1f3a;
}

.quotation-list-view .quotation-list-table-head .muted-text {
  color: #6b7a90;
}

@media (max-width: 1180px) {
  .quotation-list-view .quotation-list-business-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .quotation-list-view .quotation-list-business-metrics {
    grid-template-columns: 1fr;
  }
}

/* 共享 .quotation-task-lanes 现已是响应式 auto-fit(见 globals.css)，桌面端 7 个 lane 自适应
 * 一行排开。此复合选择器(0,2,0)进一步压过 ≤1080 的 2 列媒体查询，让报价列表状态概览(7 个 lane)
 * 在平板宽度也保持 auto-fit、不回落两行单独成行。 */
.quotation-task-lanes.quotation-list-status-lanes {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/
* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--ui-font-family-base);
  font-size: 16px;
  line-height: 1.6;
  background: var(--grad-page);
  color: var(--text-primary);
}

a {
  text-decoration: none;
}

.db-status-page {
  min-height: 100vh;
  padding: 48px;
  background: var(--surface-sunk);
  color: var(--ink);
}

.db-status-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  max-width: 1120px;
  margin: 0 auto 28px;
}

.db-status-header h1 {
  margin: 12px 0 0;
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: 0;
}

.db-status-header p {
  max-width: 480px;
  margin: 0;
  color: var(--ink-2);
  line-height: 1.7;
}

.db-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
}

.db-status-pill.online {
  color: var(--c-success-ink);
  background: var(--c-success-soft);
  border: 1px solid #86efac;
}

.db-status-pill.offline {
  color: var(--c-danger-ink);
  background: var(--c-danger-soft);
  border: 1px solid var(--c-danger-border);
}

.db-status-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
}

.db-status-grid article,
.db-status-error {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.db-status-grid span {
  display: block;
  color: var(--ink-2);
  font-size: 13px;
  margin-bottom: 10px;
}

.db-status-grid strong {
  display: block;
  color: var(--ink);
  font-size: 26px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.db-status-error {
  max-width: 1120px;
  margin: 0 auto;
}

.db-status-error strong {
  display: block;
  color: var(--c-danger-ink);
  font-size: 20px;
  margin-bottom: 8px;
}

.db-status-error p {
  margin: 0;
  color: var(--ink-2);
}

@media (max-width: 760px) {
  .db-status-page {
    padding: 24px;
  }

  .db-status-header {
    display: block;
  }

  .db-status-header h1 {
    font-size: 30px;
    margin-bottom: 12px;
  }

  .db-status-grid {
    grid-template-columns: 1fr;
  }
}

.app-shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 240px 1fr;
  transition: grid-template-columns 0.2s ease;
  overflow: hidden;
}

.main {
  min-width: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sider {
  background: var(--surface);
  color: var(--ink);
  border-right: 1px solid var(--line);
  padding: 14px 9px;
  transition: padding 0.2s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--hairline);
  padding: 8px 7px 12px;
}

.brand strong {
  display: block;
  max-width: 144px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-mark {
  width: 34px;
  height: 34px;
  min-width: 34px;
  flex: 0 0 auto;
  border-radius: 10px;
  color: var(--ink-inverse);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--brand), var(--brand-2), var(--brand-3));
}

.brand small {
  display: block;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}

.menu {
  margin-top: 10px;
  flex: 1 1;
  overflow: auto;
  padding-bottom: 6px;
}

.menu-group + .menu-group {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--surface-soft);
}

.menu-group-trigger {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  grid-gap: 6px;
  gap: 6px;
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  margin: 0 0 4px;
  padding: 6px 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
}

.menu-group-trigger:hover {
  background: var(--brand-50);
  color: var(--brand-700);
}

.menu-group-title,
.menu-group-trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.menu-group-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 11px;
  font-weight: 900;
}

.menu-group-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  color: var(--ink-2);
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
}

.menu-group-toggle::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.16s ease;
}

.menu-group-trigger.expanded .menu-group-toggle::before {
  transform: rotate(45deg);
}

.menu-group-trigger b {
  position: absolute;
  left: -5px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: var(--brand-600);
}

.menu-group.group-active .menu-group-trigger {
  color: var(--brand-700);
  background: var(--brand-50);
}

.menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  padding: 8px 9px;
  border-radius: 8px;
  border: 1px solid transparent;
  min-height: 40px;
}

.menu a.active,
.menu a:hover {
  color: var(--brand-700);
  background: var(--brand-50);
  border-color: var(--brand-200);
}

.menu a.parent-active {
  color: var(--brand-700);
  border-color: var(--brand-100);
}

.menu-item-block + .menu-item-block {
  margin-top: 2px;
}

.menu-children {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  margin: 2px 0 4px 18px;
  padding-left: 10px;
  border-left: 1px solid var(--brand-100);
}

.menu-children a {
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}

.menu-children .menu-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 7px;
}

.menu-children .menu-icon svg {
  width: 15px;
  height: 15px;
}

.menu-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--brand-50);
  color: var(--brand-600);
  transition: background 0.2s ease, color 0.2s ease;
}

.menu-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu a.active .menu-icon,
.menu a:hover .menu-icon {
  color: var(--brand-700);
  background: var(--brand-100);
}

.menu-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-empty {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  margin: 8px 4px;
  border: 1px dashed var(--hairline-strong);
  border-radius: 8px;
  padding: 12px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.menu-empty strong {
  color: var(--ink);
}

.sider-footer {
  border-top: 1px dashed var(--brand-100);
  padding-top: 10px;
}

.app-shell.sider-collapsed {
  grid-template-columns: 72px 1fr;
}

.app-shell.sider-collapsed .sider {
  padding-left: 10px;
  padding-right: 10px;
}

.app-shell.sider-collapsed .brand {
  justify-content: center;
}

.app-shell.sider-collapsed .brand > div {
  display: none;
}

.app-shell.sider-collapsed .menu p {
  display: none;
}

.app-shell.sider-collapsed .menu-group-trigger {
  grid-template-columns: 1fr;
  justify-items: center;
  padding: 7px 4px;
}

.app-shell.sider-collapsed .menu-group-trigger span,
.app-shell.sider-collapsed .menu-group-meta,
.app-shell.sider-collapsed .menu-group-toggle {
  display: none;
}

.app-shell.sider-collapsed .menu a {
  justify-content: center;
  padding: 8px 6px;
}

.app-shell.sider-collapsed .menu-children {
  margin-left: 0;
  padding-left: 0;
  border-left: 0;
}

.app-shell.sider-collapsed .menu-label {
  display: none;
}

.app-shell.sider-collapsed .menu-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
}

.app-shell.sider-collapsed .menu a {
  position: relative;
}

.app-shell.sider-collapsed .menu a:hover::after,
.app-shell.sider-collapsed .menu a:focus-visible::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  z-index: 20;
  transform: translateY(-50%);
  white-space: nowrap;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--ink);
  color: var(--ink-inverse);
  padding: 6px 8px;
  font-size: 12px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
}

.app-shell.sider-collapsed .sider-footer {
  padding-top: 10px;
}

.app-shell.sider-collapsed .sider-collapse-btn {
  width: 44px;
  min-width: 44px;
  height: 44px;
  border-radius: 999px;
  padding: 0;
  margin: 0 auto;
}

.app-shell.sider-collapsed .toggle-label {
  display: none;
}

.topbar {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 120;
  min-height: 66px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  background: rgba(244, 247, 251, 0.9);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.sider-collapse-btn {
  height: 36px;
  border: 1px solid var(--brand-200);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), var(--brand-50));
  color: var(--brand-700);
  padding: 0 10px;
  font-weight: 600;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

.toggle-icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(63, 116, 136, 0.16);
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.sider-toggle {
  display: none;
  height: 36px;
  border: 1px solid var(--brand-200);
  border-radius: 8px;
  background: var(--surface);
  color: var(--brand-700);
  padding: 0 10px;
  font-weight: 600;
}

.search,
.topbar-spacer,
.topbar-work-context {
  flex: 1 1;
  min-width: 0;
}

.search {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.topbar-work-context {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  color: var(--ink);
  line-height: 1.25;
}

.topbar-work-context strong {
  overflow: hidden;
  font-size: 14px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-work-context span {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-welcome {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search input {
  width: 100%;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  background: var(--surface);
}

.top-actions {
  position: relative;
  z-index: 130;
  display: flex;
  gap: 8px;
  min-width: 0;
  align-items: center;
}

.topbar-shortcut,
.profile-menu {
  position: relative;
}

.topbar-icon-btn,
.topbar-user-button {
  min-height: 36px;
  border-radius: 999px;
  border: 1px solid var(--brand-200);
  background: var(--surface);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease,
    background-color 0.2s ease;
}

.topbar-icon-btn {
  position: relative;
  width: 36px;
  padding: 0;
}

.topbar-icon-btn svg,
.topbar-user-button svg,
.profile-popover svg,
.shortcut-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.topbar-icon-btn.alert {
  border-color: var(--accent-300);
  color: var(--accent-700);
  background: var(--accent-50);
}

.topbar-icon-btn:hover,
.topbar-user-button:hover {
  border-color: var(--brand-300);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.topbar-badge {
  position: absolute;
  top: -5px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-600);
  color: var(--ink-inverse);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.topbar-user-button {
  gap: 9px;
  padding: 4px 10px 4px 5px;
}

.topbar-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--cyan-500));
  color: var(--ink-inverse);
  font-weight: 800;
}

.topbar-user-copy {
  display: grid;
  text-align: left;
  line-height: 1.15;
}

.topbar-user-copy strong {
  color: var(--ink);
  font-size: 13px;
}

.topbar-user-copy small {
  margin-top: 3px;
  color: var(--ink-2);
  font-size: 11px;
}

.topbar-user-caret {
  color: var(--ink-2);
  font-size: 12px;
}

.topbar-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 310px;
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
  padding: 12px;
  z-index: 220;
}

.topbar-popover-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.topbar-popover-title strong {
  color: var(--ink);
}

.topbar-popover-title span {
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  background: var(--brand-50);
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
}

.shortcut-list {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.shortcut-list a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-column-gap: 10px;
  column-gap: 10px;
  grid-row-gap: 2px;
  row-gap: 2px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--hairline);
  background: var(--surface-sunk);
}

.shortcut-list a:hover {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.shortcut-icon {
  grid-row: span 2;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--brand-50);
  color: var(--brand);
}

.shortcut-list strong,
.shortcut-list small {
  display: block;
}

.shortcut-list strong {
  color: var(--ink);
  font-size: 13px;
}

.shortcut-list small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}

.popover-footer-link {
  margin-top: 10px;
  min-height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--brand);
  background: var(--surface);
  border: 1px solid var(--brand-100);
  font-weight: 800;
}

.chip,
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--brand-100);
  background: var(--surface);
  padding: 0 12px;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.chip-link {
  text-decoration: none;
}

.chip:hover,
.avatar:hover {
  border-color: var(--brand-300);
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.avatar {
  width: 34px;
  padding: 0;
  color: var(--brand);
  background: var(--brand-50);
}

.profile-popover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 238px;
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 240;
}

.profile-popover-title {
  margin: 0 0 8px;
  padding: 8px;
  border-bottom: 1px solid var(--surface-soft);
  font-size: 12px;
  color: var(--ink-2);
}

.profile-popover-title strong,
.profile-popover-title span,
.profile-popover-title small {
  display: block;
}

.profile-popover-title strong {
  color: var(--ink);
  font-size: 14px;
}

.profile-popover-title span {
  margin-top: 3px;
}

.profile-popover-title small {
  margin-top: 3px;
  font-size: 11px;
}

.profile-popover a,
.profile-popover-action {
  color: var(--brand-800);
  border-radius: 8px;
  padding: 9px 8px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
}

.profile-popover-action {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.profile-popover a:hover,
.profile-popover-action:hover {
  background: var(--brand-50);
}

.profile-popover-action.danger {
  color: var(--c-danger-ink);
}

.profile-item-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
}

.profile-item-copy {
  min-width: 0;
  display: grid;
  grid-gap: 2px;
  gap: 2px;
}

.profile-item-copy strong {
  overflow: hidden;
  color: inherit;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-item-copy small {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-popover-action.danger .profile-item-copy small {
  color: var(--c-danger-ink);
}

.content {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px 32px;
  overflow: auto;
  background: var(--surface-sunk);
  /* 内容区填满 .main 的剩余高度——内容短时也撑满视口，配合下方 sticky 页脚贴底。 */
  flex: 1 1;
  min-height: 0;
}

/* 仅报价页(含 .quotation-cockpit)：content 改为 flex 列，使 cockpit/工作台能撑满并把页脚顶到底。
   用 :has 限定，避免影响其它页面的内部布局。 */
.content:has(.quotation-cockpit) {
  display: flex;
  flex-direction: column;
}

.content.content-business-footer {
  display: flex;
  flex-direction: column;
}

.content.content-business-footer > :not(.app-shell-business-footer) {
  flex: 0 0 auto;
}

.content.content-business-footer .business-list-breathing-footer,
.content.content-business-footer .compact-copyright-footer {
  display: none !important;
}

.app-shell-business-footer {
  flex: 0 0 auto;
}

.content > section,
.content > nav,
.content > article {
  width: 100%;
  max-width: none;
}

.page-header {
  width: 100%;
  max-width: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.page-header-main {
  min-width: 0;
}

.breadcrumb {
  margin: 0;
  color: var(--text-secondary);
  font-size: 13px;
}

h1 {
  margin: 6px 0;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.desc {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.dashboard-hero {
  position: relative;
  overflow: hidden;
  min-height: 188px;
  align-items: center;
  border-color: var(--brand-200);
  background:
    linear-gradient(130deg, rgba(255, 255, 255, 0.96), rgba(231, 244, 240, 0.9)),
    linear-gradient(90deg, rgba(63, 116, 136, 0.1), rgba(167, 208, 216, 0.16));
}

.page-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.btn {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  height: 36px;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0 12px;
  font: inherit;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  min-width: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.page-header > .page-header-actions .btn {
  flex: 0 0 auto;
  height: 36px;
  min-width: 88px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 36px;
  overflow: visible;
  text-indent: 0;
}

.page-header-actions .btn-ghost {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink);
}

.page-header-actions .btn-primary,
.page-header-actions .btn-dark {
  color: var(--ink-inverse) !important;
  -webkit-text-fill-color: #fff;
}

.btn-primary {
  color: var(--ink-inverse);
  background: var(--brand-600);
  box-shadow: 0 8px 18px rgba(63, 116, 136, 0.26);
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.btn-primary:hover {
  background: var(--brand-700);
}

.btn-dark {
  color: var(--ink-inverse);
  background: var(--ink);
  border-color: var(--ink);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.24);
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.btn-dark:hover {
  background: var(--ink);
}

.btn-secondary {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--hairline-strong);
}

.btn-danger {
  color: var(--c-danger-ink);
  background: var(--surface);
  border-color: var(--c-danger-border);
}

.btn-ghost {
  color: var(--text-primary);
  background: var(--surface);
  border-color: var(--brand-200);
}

/* —— 应用内确认/原因对话框（替代 window.confirm / window.prompt）—— */
.app-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.45);
  animation: app-dialog-fade 0.12s ease;
}
@keyframes app-dialog-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.app-dialog {
  width: min(440px, 100%);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22);
  padding: 20px 22px 18px;
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}
.app-dialog-head strong {
  display: block;
  font-size: 16px;
  color: var(--ink);
}
.app-dialog-head p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}
.app-dialog-reason {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}
.app-dialog-reason > span {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.app-dialog-reason > span em {
  font-style: normal;
  color: var(--c-danger);
}
.app-dialog-reason textarea {
  min-height: 84px;
  resize: vertical;
  padding: 9px 11px;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
}
.app-dialog-reason textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(15, 114, 201, 0.12);
}
.app-dialog-error {
  color: var(--c-danger);
  font-size: 12px;
}
.app-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.page-header > .page-header-actions .btn-ghost {
  color: var(--text-primary);
  background: var(--surface);
  border-color: var(--brand-100);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

/* 禁用态：统一为「浅灰底 + 灰字」，确保文字可读且明显不可点。
   注意 .page-header-actions .btn-ghost/.btn-primary 用 color !important + -webkit-text-fill-color
   锁了文字色，禁用态必须同时覆盖这两者，否则会出现深字虚化或白底白字（看不清）。 */
.page-header > .page-header-actions .btn-ghost:disabled,
.page-header-actions .btn-ghost:disabled,
.page-header-actions .btn-primary:disabled,
.page-header-actions .btn-dark:disabled {
  color: var(--ink-3) !important;
  -webkit-text-fill-color: var(--ink-3);
  background: var(--surface-sunk);
  border-color: var(--hairline);
  opacity: 1;
  box-shadow: none;
  cursor: not-allowed;
}

.btn:disabled {
  cursor: not-allowed;
  color: var(--ink-3);
  background: var(--surface-sunk);
  border-color: var(--hairline);
  box-shadow: none;
}

.more-actions {
  position: relative;
}

.more-actions > summary {
  width: 36px;
  min-width: 36px;
  padding: 0;
  list-style: none;
}

.more-actions > summary::-webkit-details-marker {
  display: none;
}

.more-actions-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 184px;
  padding: 8px;
  border: 1px solid var(--brand-100);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.14);
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  z-index: 40;
}

.more-actions-menu a,
.more-actions-menu button {
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-800);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.more-actions-menu a:hover,
.more-actions-menu button:hover {
  background: var(--brand-50);
}

.more-actions-menu .danger {
  color: var(--c-danger-ink);
}

.more-action-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
}

.more-action-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notice-bar {
  margin: 14px 0;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--brand-100);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  background: var(--surface);
  color: var(--ink);
}

.notice-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--brand-50);
  color: var(--brand);
}

.notice-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notice-copy {
  min-width: 0;
  display: grid;
  grid-gap: 3px;
  gap: 3px;
}

.notice-copy strong {
  color: var(--ink);
  font-size: 14px;
}

.notice-copy span {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.notice-actions {
  display: flex;
  justify-content: flex-end;
}

.notice-action {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  border: 1px solid currentColor;
  color: var(--brand);
  font-size: 13px;
  font-weight: 800;
}

.notice-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.notice-warning .notice-icon {
  background: var(--accent-50);
  color: var(--accent-600);
}

.notice-danger {
  border-color: var(--c-danger-border);
  background: var(--c-danger-soft);
}

.notice-danger .notice-icon {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

.notice-success {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.notice-success .notice-icon {
  background: var(--c-success-soft);
  color: var(--c-success-ink);
}

/* 零值指标置灰（审计 P0-3）：数值为 0 的 KPI 卡，数字以中性灰呈现，
   空数据/无风险时页面克制而非“没做完”。.is-zero-metric 由渲染侧按 isZeroMetric 附加。 */
.is-zero-metric strong,
.is-zero-metric > strong,
strong.is-zero-metric {
  color: #aab4c2 !important;
  -webkit-text-fill-color: #aab4c2 !important;
}

/* 列表表格容器约束到父宽度:作为 grid/flex 子项时 min-width:auto 会撑到表格 max-content,
   导致窄屏(如 1440)表格撑破右边框。min-width:0 让它收到栅格轨道宽,长表由内层 overflow-x:auto 横向滚动。 */
.quotation-table-shell,
.quotation-table-shell > .table-wrap,
.quotation-configurable-table-wrap {
  min-width: 0;
  max-width: 100%;
}

/* KPI/指标数字统一等宽数字(tabular-nums),让各卡数字纵向对齐更整齐(审计 P3)。
   仅影响数字字宽,不改其它样式。 */
.quotation-summary-item strong,
.finance-metric-card strong,
.finance-milestone-card strong,
.tender-kpi-card strong,
.kpi-card strong,
.finance-action-card strong,
.electrical-kpi-card strong,
.finance-project-row strong,
.budget-analysis-kpi-grid strong {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.tenant-settings-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 18px;
  gap: 18px;
}

.tenant-settings-section {
  min-height: 0;
  display: grid;
  grid-gap: 14px;
  gap: 14px;
  border-radius: 18px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 255, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 14px 30px rgba(15, 23, 42, 0.05);
}

.tenant-settings-section h2 {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 850;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  letter-spacing: -0.01em;
}

.tenant-settings-section h2 small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.tenant-settings-section-head {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.tenant-settings-section-head p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
}

.tenant-settings-section-owner {
  width: -moz-fit-content;
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--brand-100);
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 800;
}

.tenant-settings-section-owner.tone-amber {
  border-color: var(--accent-200);
  background: var(--accent-50);
  color: var(--accent-600);
}

.tenant-settings-section-owner.tone-teal {
  border-color: var(--brand-200);
  background: var(--brand-50);
  color: var(--c-success-ink);
}

.tenant-settings-list {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.tenant-settings-item {
  min-height: 92px;
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-gap: 14px;
  gap: 14px;
  align-items: start;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease,
    background 0.15s ease;
}

.tenant-settings-item:hover {
  border-color: var(--brand-200);
  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.12);
  transform: translateY(-2px);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, var(--brand-50) 100%);
}

.tenant-settings-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #ffffff 0%, var(--brand-50) 100%);
  color: var(--brand);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 10px 20px rgba(59, 130, 246, 0.12);
}

.tenant-settings-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tenant-settings-item strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.tenant-settings-status {
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: var(--surface-sunk);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}

.tenant-settings-status.tone-warning {
  border-color: var(--accent-300);
  background: var(--accent-50);
  color: var(--accent-600);
}

.tenant-settings-status.tone-success {
  border-color: #86efac;
  background: var(--surface-sunk);
  color: var(--c-success-ink);
}

.tenant-settings-item small {
  display: block;
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
}

.tenant-settings-item-meta {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.tenant-settings-item-meta em,
.tenant-settings-item-meta b {
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  line-height: 1;
}

.tenant-settings-item-meta em {
  border: 1px solid var(--brand-100);
  background: var(--surface);
  color: var(--brand-600);
  font-style: normal;
  font-weight: 700;
}

.tenant-settings-item-meta b {
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 800;
}

.tenant-settings-summary {
  grid-column: 1 / -1;
  border: 1px dashed var(--brand-200);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 36%),
    linear-gradient(150deg, var(--surface), var(--brand-50));
  padding: 18px 20px;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  border-radius: 16px;
}

.tenant-settings-summary strong {
  color: var(--brand-800);
  font-size: 16px;
}

.tenant-settings-summary p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.75;
}

.tenant-settings-empty-wrap {
  margin-top: 18px;
}

.tenant-settings-hero {
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.75fr);
  grid-gap: 16px;
  gap: 16px;
}

.tenant-settings-hero-main,
.tenant-settings-hero-side {
  border: 1px solid var(--brand-100);
  border-radius: 18px;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 36%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 255, 0.98));
  padding: 22px 24px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 16px 36px rgba(15, 23, 42, 0.06);
}

.tenant-settings-hero-main {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.tenant-settings-hero-kicker,
.tenant-settings-hero-side span {
  color: var(--brand-500);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.tenant-settings-hero-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.tenant-settings-hero-title strong {
  color: var(--ink);
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.tenant-settings-hero-title em {
  color: var(--ink-2);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}

.tenant-settings-hero-main p,
.tenant-settings-hero-side p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.8;
}

.tenant-settings-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tenant-settings-hero-tags span {
  min-height: 30px;
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-600);
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 800;
}

.tenant-settings-hero-side {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
  align-content: space-between;
}

.tenant-settings-hero-side strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.35;
}

.tenant-settings-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tenant-settings-health {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
}

.tenant-health-card {
  min-height: 112px;
  border: 1px solid var(--brand-100);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 35%),
    linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  padding: 16px 18px;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 12px 26px rgba(15, 23, 42, 0.05);
}

.tenant-health-card span,
.tenant-health-card small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.tenant-health-card strong {
  color: var(--ink);
  font-size: 36px;
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.tenant-health-card.tone-warning {
  border-color: var(--accent-200);
  background:
    radial-gradient(circle at top right, rgba(251, 146, 60, 0.12), transparent 35%),
    linear-gradient(180deg, #ffffff 0%, var(--accent-50) 100%);
}

.tenant-health-card.tone-danger {
  border-color: var(--c-danger-border);
  background:
    radial-gradient(circle at top right, rgba(248, 113, 113, 0.12), transparent 35%),
    linear-gradient(180deg, #ffffff 0%, var(--c-danger-soft) 100%);
}

.tenant-health-card.tone-success {
  border-color: var(--c-success-border);
  background:
    radial-gradient(circle at top right, rgba(34, 197, 94, 0.12), transparent 35%),
    linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
}

.tenant-settings-ops {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-gap: 16px;
  gap: 16px;
}

.tenant-settings-flow,
.tenant-settings-actions {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.tenant-flow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tenant-flow-head span {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}

.tenant-settings-flow h2,
.tenant-settings-actions h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  letter-spacing: -0.01em;
}

.tenant-flow-progress {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-soft);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(148, 163, 184, 0.18);
}

.tenant-flow-progress i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cat-green), var(--c-success));
}

.tenant-settings-flow-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.tenant-settings-command {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.95fr);
  grid-gap: 16px;
  gap: 16px;
}

.tenant-settings-command-main,
.tenant-settings-command-side {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.tenant-settings-active-panel {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.tenant-settings-active-summary {
  border: 1px solid var(--brand-100);
  border-left-width: 4px;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
}

.tenant-settings-active-summary.tone-amber {
  border-left-color: var(--c-warning);
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.1), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, var(--accent-50) 100%);
}

.tenant-settings-active-summary.tone-blue {
  border-left-color: var(--brand-500);
}

.tenant-settings-active-summary.tone-teal {
  border-left-color: var(--c-success-ink);
  background:
    radial-gradient(circle at top right, rgba(13, 148, 136, 0.1), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
}

.tenant-settings-active-summary span {
  display: block;
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.tenant-settings-active-summary strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.2;
}

.tenant-settings-active-summary p {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
}

.tenant-settings-active-metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.tenant-settings-active-metrics em {
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--brand-100);
  background: rgba(255, 255, 255, 0.9);
  color: var(--brand-600);
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.tenant-settings-active-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tenant-settings-active-note {
  border: 1px dashed var(--brand-200);
  border-radius: 14px;
  padding: 14px 16px;
  background: linear-gradient(150deg, var(--surface), var(--brand-50));
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.75;
}

.tenant-settings-command-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tenant-settings-command-head.compact {
  display: grid;
}

.tenant-settings-command-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  letter-spacing: -0.01em;
}

.tenant-settings-command-head p {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
}

.tenant-settings-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.tenant-settings-lane {
  min-height: 148px;
  border: 1px solid var(--brand-100);
  border-left-width: 4px;
  border-radius: 16px;
  padding: 14px 14px 16px;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}

.tenant-settings-lane:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 28px rgba(15, 23, 42, 0.08);
}

.tenant-settings-lane.tone-blue {
  border-left-color: var(--brand-500);
}

.tenant-settings-lane.tone-amber {
  border-left-color: var(--c-warning);
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.1), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, var(--accent-50) 100%);
}

.tenant-settings-lane.tone-teal {
  border-left-color: var(--c-success-ink);
  background:
    radial-gradient(circle at top right, rgba(13, 148, 136, 0.1), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
}

.tenant-settings-lane span {
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.tenant-settings-lane strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.2;
}

.tenant-settings-lane small {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.6;
}

.tenant-settings-lane-meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tenant-settings-lane-meta em,
.tenant-settings-lane-meta b {
  min-height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  line-height: 1;
}

.tenant-settings-lane-meta em {
  border: 1px solid var(--brand-100);
  background: var(--surface);
  color: var(--ink);
  font-style: normal;
  font-weight: 700;
}

.tenant-settings-lane-meta b {
  background: var(--brand-50);
  color: var(--brand-600);
  font-weight: 800;
}

.tenant-settings-queue {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.tenant-settings-queue-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tenant-settings-queue-filters button {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--brand-100);
  background: var(--surface);
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 800;
}

.tenant-settings-queue-filters button.active {
  border-color: var(--brand-600);
  background: linear-gradient(135deg, var(--brand-900), var(--brand-500));
  color: var(--ink-inverse);
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.16);
}

.tenant-settings-queue-item {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease;
}

.tenant-settings-queue-item:hover {
  transform: translateY(-1px);
  border-color: var(--brand-200);
  box-shadow: 0 14px 24px rgba(37, 99, 235, 0.08);
}

.tenant-settings-queue-index {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand-900), var(--brand-500));
  color: var(--ink-inverse);
  font-size: 14px;
  font-weight: 900;
}

.tenant-settings-queue-item strong {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--ink);
  font-size: 15px;
}

.tenant-settings-queue-item small {
  display: block;
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
}

.tenant-settings-queue-section {
  display: inline-flex;
  margin-top: 10px;
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 800;
}

.tenant-settings-queue-empty {
  border: 1px dashed var(--hairline-strong);
  border-radius: 14px;
  padding: 16px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
  background: var(--surface-sunk);
}

.tenant-settings-change-log {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.tenant-settings-change-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.tenant-settings-secondary-drawer {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.tenant-settings-drawer-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.tenant-settings-drawer-trigger {
  width: 100%;
  border: 1px solid var(--brand-100);
  border-left-width: 4px;
  border-radius: 16px;
  padding: 14px;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  text-align: left;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  color: inherit;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}

.tenant-settings-drawer-trigger:hover {
  transform: translateY(-1px);
  border-color: var(--brand-200);
  box-shadow: 0 14px 24px rgba(37, 99, 235, 0.08);
}

.tenant-settings-drawer-trigger.active {
  border-color: var(--brand-600);
  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.12);
}

.tenant-settings-drawer-trigger.tone-blue {
  border-left-color: var(--brand-500);
}

.tenant-settings-drawer-trigger.tone-amber {
  border-left-color: var(--c-warning);
  background:
    radial-gradient(circle at top right, rgba(245, 158, 11, 0.1), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, var(--accent-50) 100%);
}

.tenant-settings-drawer-trigger.tone-teal {
  border-left-color: var(--c-success-ink);
  background:
    radial-gradient(circle at top right, rgba(13, 148, 136, 0.1), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
}

.tenant-settings-drawer-trigger span {
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.tenant-settings-drawer-trigger strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}

.tenant-settings-drawer-trigger small {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
}

.tenant-settings-drawer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tenant-settings-drawer-meta em,
.tenant-settings-drawer-meta b,
.tenant-settings-drawer-preview i {
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  line-height: 1;
}

.tenant-settings-drawer-meta em {
  border: 1px solid var(--brand-100);
  background: var(--surface);
  color: var(--ink);
  font-style: normal;
  font-weight: 700;
}

.tenant-settings-drawer-meta b {
  background: var(--brand-50);
  color: var(--brand-600);
  font-weight: 800;
}

.tenant-settings-drawer-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tenant-settings-drawer-preview i {
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-2);
  font-style: normal;
  font-weight: 700;
}

.tenant-settings-change-item {
  border: 1px solid var(--hairline);
  border-left-width: 4px;
  border-radius: 14px;
  padding: 12px 14px;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
}

.tenant-settings-change-item.tone-warning {
  border-left-color: var(--c-warning);
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-50) 100%);
}

.tenant-settings-change-item.tone-success {
  border-left-color: var(--c-success);
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
}

.tenant-settings-change-item.tone-neutral {
  border-left-color: var(--ink-3);
}

.tenant-settings-change-item strong {
  color: var(--ink);
  font-size: 14px;
}

.tenant-settings-change-item small {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
}

.tenant-settings-change-item span {
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 800;
}

.tenant-flow-step {
  min-height: 132px;
  border: 1px solid var(--c-success-soft);
  border-radius: 14px;
  background:
    radial-gradient(circle at top right, rgba(34, 197, 94, 0.08), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
  padding: 14px 12px 12px;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
  box-shadow: 0 10px 24px rgba(34, 197, 94, 0.08);
}

.tenant-flow-step:hover {
  border-color: var(--brand-300);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, var(--brand-50) 100%);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(59, 130, 246, 0.12);
}

.tenant-flow-step b {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--cat-green);
  color: var(--ink-inverse);
  display: inline-grid;
  place-items: center;
  font-size: 11px;
  box-shadow: 0 8px 16px rgba(34, 197, 94, 0.22);
}

.tenant-flow-step strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}

.tenant-flow-step small {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
}

.tenant-flow-step em {
  margin-top: auto;
  color: var(--c-success-ink);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.tenant-flow-step.done {
  border-color: #86efac;
}

.tenant-action-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.tenant-action-list a {
  min-height: 72px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.tenant-action-list a:hover {
  border-color: var(--brand-200);
  background: linear-gradient(180deg, #ffffff 0%, var(--brand-50) 100%);
  box-shadow: 0 14px 28px rgba(59, 130, 246, 0.1);
  transform: translateY(-1px);
}

.tenant-action-list strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.4;
}

.tenant-action-list span {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.6;
}

.tenant-task-priority {
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--brand-200);
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.tenant-task-priority.high {
  border-color: var(--c-danger-border);
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

.module-block {
  margin-top: 14px;
  border: 1px solid var(--brand-100);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.98), rgba(243, 250, 255, 0.98));
  padding: 14px;
  box-shadow: var(--shadow-soft);
}

.sales-link-timeline {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.sales-link-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sales-link-head p {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.6;
}

.sales-link-meta {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
}

.sales-link-meta small {
  color: var(--ink-2);
  font-size: 12px;
}

.sales-link-sync {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--brand-700);
  background: var(--brand-100);
  border: 1px solid var(--brand-200);
}

.sales-link-sync.is-synced {
  color: var(--c-success-ink);
  background: var(--c-success-soft);
  border-color: #86efac;
}

.sales-link-sync.is-fallback,
.sales-link-sync.is-syncing {
  color: var(--accent-700);
  background: var(--accent-100);
  border-color: var(--accent-200);
}

.sales-link-sync.is-risk {
  color: var(--c-danger-ink);
  background: var(--c-danger-soft);
  border-color: var(--c-danger-border);
}

/* —— 销售链路：紧凑步骤条 —— */
.sales-link-steps {
  list-style: none;
  margin: 0;
  padding: 10px 0 4px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  grid-gap: 0;
  gap: 0;
}

.sales-link-step {
  position: relative;
  min-width: 0;
  padding-top: 28px;
  text-align: center;
}

/* 连接线 */
.sales-link-step::before {
  content: "";
  position: absolute;
  top: 8px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--hairline-strong);
  transition: background 0.3s ease;
}

.sales-link-step:first-child::before {
  display: none;
}

.sales-link-step-inner {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  justify-items: center;
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.sales-link-step-dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--surface);
  border: 2.5px solid var(--hairline-strong);
  z-index: 1;
  transition: all 0.25s ease;
}

.sales-link-step-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.3;
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}

.sales-link-step-value {
  font-size: 11px;
  color: var(--ink-3, #94a3b8);
  line-height: 1.4;
  overflow-wrap: anywhere;
  padding: 1px 6px;
  border-radius: 4px;
}

a.sales-link-step-inner:hover .sales-link-step-label {
  color: var(--brand-600);
}

/* done：绿点 + 绿连线，标签变深 */
.sales-link-step.is-done .sales-link-step-dot {
  background: var(--c-success-ink);
  border-color: var(--c-success-ink);
  box-shadow: 0 0 0 3px rgba(31, 122, 79, 0.12);
}

.sales-link-step.is-done::before {
  background: var(--c-success-ink);
  opacity: 0.45;
}

.sales-link-step.is-done .sales-link-step-label {
  color: var(--ink);
}

.sales-link-step.is-done .sales-link-step-value {
  color: var(--c-success-ink);
  background: var(--c-success-soft);
}

/* active：品牌蓝 + 脉冲光环，标签高亮 */
@keyframes sales-chain-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--brand-100); }
  55% { box-shadow: 0 0 0 7px rgba(47, 107, 216, 0.07); }
}

.sales-link-step.is-active .sales-link-step-dot {
  background: var(--brand-500);
  border-color: var(--brand-500);
  animation: sales-chain-pulse 2.4s ease-in-out infinite;
}

.sales-link-step.is-active::before {
  background: linear-gradient(to right, rgba(31,122,79,0.4), var(--brand-400, #5b8ee8));
}

.sales-link-step.is-active .sales-link-step-label {
  color: var(--brand-700, #1a4eba);
  font-weight: 700;
}

.sales-link-step.is-active .sales-link-step-value {
  color: var(--brand-700, #1a4eba);
  background: var(--brand-50, #eef4ff);
  font-weight: 600;
}

/* risk：红点 */
.sales-link-step.is-risk .sales-link-step-dot {
  background: var(--c-danger-ink);
  border-color: var(--c-danger-ink);
  box-shadow: 0 0 0 3px var(--c-danger-soft);
}

.sales-link-step.is-risk .sales-link-step-label {
  color: var(--c-danger-ink);
}

.sales-link-step.is-risk .sales-link-step-value {
  color: var(--c-danger-ink);
  background: var(--c-danger-soft);
}

/* 底栏：闭环进度 */
.sales-link-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
  margin: 0;
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--surface-sunk);
  border: 1px solid var(--hairline);
  color: var(--ink-2);
  font-size: 12px;
}

.sales-link-progress strong {
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 760px) {
  .sales-link-head {
    display: grid;
  }

  .sales-link-meta {
    align-items: flex-start;
  }

  .sales-link-steps {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 24px;
  }
}

.message-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-top: 14px;
}

.message-stat-card {
  min-height: 118px;
  border-radius: 16px;
  border: 1px solid var(--brand-100);
  background: var(--surface);
  padding: 18px;
  box-shadow: var(--shadow-soft);
}

.message-stat-card span {
  display: block;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}

.message-stat-card strong {
  display: block;
  margin-top: 10px;
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
}

.message-stat-card p {
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.message-type-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-top: 12px;
}

.message-type-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  min-height: 58px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.message-type-card:hover {
  border-color: var(--brand-300);
  background: var(--surface);
}

.message-type-card.active {
  border-color: var(--brand-500);
  background: var(--brand-50);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.1);
}

.message-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--brand-50);
  color: var(--brand-500);
}

.message-type-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.message-type-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-type-card em {
  color: var(--brand-500);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.file-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(135deg, var(--surface) 0%, #ffffff 64%);
}

.file-detail-hero-main {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  min-width: 0;
}

.file-detail-hero-main span,
.file-detail-hero-main small {
  color: var(--ink-2);
  font-size: 13px;
}

.file-detail-hero-main strong {
  color: var(--ink);
  font-size: 26px;
  line-height: 1.25;
}

.file-detail-status {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  min-width: 220px;
}

.file-attention-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.file-attention-strip div {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.file-attention-strip strong {
  color: var(--accent-700);
  font-size: 15px;
}

.file-attention-strip span {
  color: var(--accent-700);
  font-size: 13px;
}

.file-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
}

.file-business-link {
  margin-top: 14px;
}

.module-title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-600);
  padding-left: 10px;
  border-left: 3px solid var(--cyan-400);
}

.state-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.state-btn {
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--brand-100);
  background: var(--surface);
  color: var(--ink);
  padding: 0 10px;
}

.state-btn.active {
  border-color: var(--brand-300);
  color: var(--brand-600);
  background: var(--brand-50);
}

.page-state {
  display: grid;
  justify-items: center;
  grid-gap: 12px;
  gap: 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 34px 20px;
  color: var(--text-secondary);
  text-align: center;
  box-shadow: none;
}

.page-state-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--brand-50);
  color: #165dff;
  font-weight: 800;
}

.page-state-copy {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  max-width: 520px;
}

.page-state-copy strong {
  color: var(--ink);
  font-size: 17px;
}

.page-state-copy p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.page-state-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.page-state-skeleton {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  width: min(420px, 100%);
}

.page-state-skeleton span {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--surface-soft), var(--surface-sunk), var(--surface-soft));
}

.page-state-skeleton-rich {
  width: min(760px, 100%);
  gap: 14px;
}

.page-state-skeleton-title {
  width: 42%;
}

.page-state-skeleton-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.page-state-skeleton-cards span {
  height: 72px;
  border-radius: 12px;
}

.page-state-skeleton-filter {
  width: 100%;
  height: 36px !important;
  border-radius: 10px !important;
}

.page-state-skeleton-table {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.page-state-skeleton-table span {
  height: 38px;
  border-radius: 10px;
}

.page-state-skeleton span:nth-child(2) {
  width: 84%;
  justify-self: center;
}

.page-state-skeleton span:nth-child(3) {
  width: 64%;
  justify-self: center;
}

.page-state-skeleton-rich span:nth-child(2),
.page-state-skeleton-rich span:nth-child(3) {
  width: auto;
  justify-self: stretch;
}

.page-state-error {
  border-color: var(--c-danger-border);
  background: var(--surface);
}

.page-state-error .page-state-icon {
  background: var(--c-danger-soft);
  color: #dc2626;
}

.page-state-permissionDenied {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.page-state-permissionDenied .page-state-icon {
  background: var(--accent-50);
  color: var(--accent-600);
}

.page-state-empty .page-state-icon {
  background: var(--surface-sunk);
  color: var(--ink-2);
}

.report-overview-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.report-overview-kpi {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.report-overview-kpi {
  border-top-width: 3px;
}

.report-overview-kpi header,
.report-risk-grid article header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.report-overview-kpi span,
.report-overview-kpi small,
.report-risk-grid p,
.report-funnel-card small,
.report-common-card small,
.report-loss-panel li {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.report-overview-kpi em {
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--ink);
  padding: 3px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.report-overview-kpi strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1.15;
}

.report-overview-kpi.tone-success {
  border-top-color: var(--cyan-500);
}

.report-overview-kpi.tone-warning {
  border-top-color: var(--c-warning);
}

.report-overview-kpi.tone-danger {
  border-top-color: var(--c-danger);
}

.report-overview-kpi.tone-info {
  border-top-color: var(--brand-500);
}

.report-conversion-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
  grid-gap: 12px;
  gap: 12px;
}

.report-funnel-strip,
.report-risk-grid,
.report-common-grid {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.report-risk-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.report-funnel-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.report-funnel-card,
.report-common-card {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
  text-decoration: none;
}

.report-funnel-card {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  border-top-width: 3px;
}

.report-funnel-card span,
.report-common-card span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.report-funnel-card strong {
  color: var(--ink);
  font-size: 22px;
}

.report-funnel-card em {
  color: var(--brand-600);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.report-funnel-card.tone-success {
  border-top-color: var(--cyan-500);
}

.report-funnel-card.tone-warning {
  border-top-color: var(--c-warning);
}

.report-funnel-card.tone-danger {
  border-top-color: var(--c-danger);
}

.report-funnel-card.tone-info {
  border-top-color: var(--brand-500);
}

.report-loss-panel ul {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.report-loss-panel li {
  border-bottom: 1px solid var(--surface-soft);
  padding-bottom: 10px;
}

.report-risk-grid article {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.report-risk-grid article strong {
  color: var(--ink);
  font-size: 15px;
}

.report-risk-grid article header span {
  border-radius: 999px;
  background: var(--accent-50);
  color: var(--accent-600);
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.report-risk-grid article.tone-danger {
  border-color: var(--c-danger-border);
  background: var(--surface);
}

.report-risk-grid article.tone-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.report-risk-grid dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin: 0;
}

.report-risk-grid dt {
  color: var(--ink-3);
  font-size: 12px;
}

.report-risk-grid dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.report-risk-grid article p {
  margin: 0;
}

.report-directory-block {
  scroll-margin-top: 24px;
}

.report-directory-grid {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.report-directory-group {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fbff;
}

.report-directory-group header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.report-directory-group header span {
  color: #0f172a;
  font-size: 14px;
  font-weight: 900;
}

.report-directory-group header small {
  max-width: 680px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.6;
  text-align: right;
}

.report-common-grid {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.report-common-card {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  color: inherit;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.report-common-card:hover {
  border-color: var(--brand-300);
  transform: translateY(-1px);
}

.report-common-card strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.report-template-admin {
  padding: 0;
  overflow: hidden;
}

.report-template-admin summary {
  display: flex;
  cursor: pointer;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  list-style: none;
}

.report-template-admin summary::-webkit-details-marker {
  display: none;
}

.report-template-admin summary span {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.report-template-admin summary small {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.report-template-admin summary::after {
  content: "展开";
  flex: 0 0 auto;
  border: 1px solid var(--brand-200);
  border-radius: 999px;
  color: var(--brand-600);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
}

.report-template-admin[open] summary {
  border-bottom: 1px solid var(--hairline);
}

.report-template-admin[open] summary::after {
  content: "收起";
}

.report-template-section {
  padding: 16px;
}

.report-template-section + .report-template-section {
  border-top: 1px solid var(--surface-soft);
}

.tenant-ops-page {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

.tenant-subscription-hero,
.tenant-ops-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
  grid-gap: 14px;
  gap: 14px;
  align-items: start;
}

.tenant-ops-panel,
.tenant-plan-card {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.tenant-subscription-current {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.tenant-subscription-headline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.42fr);
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
}

.tenant-subscription-current h2 {
  margin: 0;
  color: var(--ink);
  font-size: 26px;
}

.tenant-subscription-current p,
.tenant-change-row span,
.tenant-module-row p,
.tenant-plan-card p,
.tenant-plan-scope span,
.tenant-first-run-strip small {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.tenant-delivery-actions,
.tenant-login-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tenant-delivery-grid,
.tenant-subscription-facts,
.tenant-first-run-strip,
.tenant-plan-grid {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.tenant-subscription-headline-meta {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.tenant-delivery-grid,
.tenant-subscription-facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tenant-delivery-grid > div,
.tenant-subscription-facts > div,
.tenant-first-run-strip article {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 12px;
}

.tenant-delivery-grid span,
.tenant-subscription-facts span,
.tenant-first-run-strip span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.tenant-delivery-grid strong,
.tenant-subscription-facts strong,
.tenant-first-run-strip strong {
  color: var(--ink);
  font-size: 15px;
  word-break: break-word;
}

.tenant-fact-content {
  min-width: 0;
}

.tenant-technical-details {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 10px 12px;
}

.tenant-technical-details summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 800;
}

.tenant-technical-details dl {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin: 12px 0 0;
}

.tenant-technical-details div {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
}

.tenant-technical-details dt {
  color: var(--ink-2);
  font-size: 12px;
}

.tenant-technical-details dd {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  word-break: break-all;
}

.tenant-subscription-queue,
.tenant-change-list,
.tenant-request-panel,
.tenant-module-list,
.tenant-plan-card {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.tenant-subscription-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  grid-gap: 16px;
  gap: 16px;
  align-items: start;
}

.tenant-subscription-main,
.tenant-subscription-side {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.tenant-subscription-side {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: start;
  min-width: 0;
}

.tenant-subscription-focus-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.tenant-subscription-focus-card {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  position: relative;
  text-align: left;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  padding: 14px 14px 16px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.tenant-subscription-focus-card:hover {
  border-color: var(--brand-300);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
  transform: translateY(-2px);
}

.tenant-subscription-focus-card.is-active {
  border-color: var(--brand-400);
  background: linear-gradient(180deg, var(--brand-50) 0%, var(--surface) 100%);
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.12);
}

.tenant-subscription-focus-card span,
.tenant-subscription-focus-card small {
  margin: 0;
  color: var(--ink-2);
}

.tenant-subscription-focus-card span {
  font-size: 12px;
  font-weight: 800;
}

.tenant-subscription-focus-card strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1.1;
}

.tenant-subscription-focus-card small {
  font-size: 13px;
  line-height: 1.5;
}

.tenant-subscription-focus-card em {
  justify-self: start;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.tenant-subscription-focus-card em.tone-default {
  background: var(--brand-100);
  color: var(--cyan-600);
}

.tenant-subscription-focus-card em.tone-warning {
  background: var(--accent-50);
  color: var(--accent-600);
}

.tenant-subscription-focus-card em.tone-success {
  background: var(--surface-soft);
  color: var(--c-success-ink);
}

.tenant-subscription-summary-bar {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 16px;
}

.tenant-subscription-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.tenant-subscription-task-panel {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.tenant-subscription-guide {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.tenant-subscription-checklist {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.tenant-subscription-checklist p {
  margin: 0;
  border: 1px solid var(--brand-100);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
  padding: 10px 12px;
}

.tenant-subscription-side-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.tenant-subscription-helper {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.tenant-change-row,
.tenant-module-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 8px;
  gap: 8px;
  border-bottom: 1px solid var(--surface-soft);
  padding: 10px 0;
}

/* 平台办理队列:三段(标题/原因/日期)在 1fr+auto 网格里会被长原因挤得标题竖排。
   改成「标题 | 日期」一行、原因整宽下排,标题截断不再竖排。 */
.tenant-change-row {
  grid-template-areas:
    "title date"
    "reason reason";
  column-gap: 8px;
  row-gap: 3px;
  align-items: center;
}

.tenant-change-row > strong {
  grid-area: title;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-change-row > span {
  grid-area: reason;
  min-width: 0;
}

.tenant-change-row > em {
  grid-area: date;
}

.tenant-change-row strong,
.tenant-module-row strong {
  color: var(--ink);
}

.tenant-change-row em,
.tenant-module-row em {
  align-self: start;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  padding: 4px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.tenant-module-row.is-pending em {
  background: var(--accent-50);
  color: var(--accent-600);
}

.tenant-first-run-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tenant-first-run-strip article.ready {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.tenant-first-run-strip article.pending {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.tenant-ops-wide {
  min-width: 0;
}

.tenant-module-list-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tenant-request-panel label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.tenant-request-panel label span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.tenant-request-panel input,
.tenant-request-panel select,
.tenant-request-panel textarea {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 10px 12px;
}

.tenant-request-panel textarea {
  min-height: 96px;
  resize: vertical;
}

.tenant-module-selector,
.tenant-capacity-form {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.tenant-module-selector button {
  text-align: left;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface-sunk);
  color: var(--ink);
  padding: 10px 12px;
  font-weight: 700;
}

.tenant-module-selector button.active {
  border-color: var(--brand-400);
  background: var(--brand-50);
  color: var(--brand-600);
}

.tenant-module-selector span {
  color: var(--ink-2);
  font-size: 13px;
}

.tenant-module-selector {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tenant-module-selector button {
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 10px;
  text-align: left;
}

.tenant-module-selector button.active {
  border-color: var(--brand-500);
  background: var(--brand-50);
  color: var(--brand-600);
  font-weight: 800;
}

.tenant-capacity-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tenant-plan-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tenant-plan-card {
  align-content: start;
}

.tenant-plan-card.current {
  border-color: var(--brand-300);
  background: var(--surface);
}

.tenant-plan-head,
.tenant-plan-scope,
.tenant-plan-capacity,
.tenant-plan-modules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.tenant-plan-head strong {
  display: block;
  color: var(--ink);
  font-size: 20px;
}

.tenant-plan-head span,
.tenant-plan-head em,
.tenant-plan-capacity span,
.tenant-plan-modules span {
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink-2);
  padding: 4px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.tenant-plan-modules span.enabled {
  background: var(--surface-soft);
  color: var(--c-success-ink);
}

.inline-permission-state {
  border: 1px solid var(--accent-200);
  border-radius: 8px;
  background: var(--accent-50);
  color: var(--accent-700);
  padding: 10px 12px;
  font-size: 13px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.kpi-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(240, 249, 255, 0.98));
  padding: 14px;
}

.kpi-card h2 {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.kpi-card p {
  margin: 8px 0 4px;
  font-size: 24px;
  font-weight: 700;
}

.kpi-card small {
  color: var(--text-secondary);
}

.panel-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-gap: 12px;
  gap: 12px;
}

.panel {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.panel header h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  letter-spacing: 0.01em;
}

.panel header a,
.panel header .panel-subtitle {
  color: var(--brand-700);
  font-size: 13px;
  font-weight: 700;
}

.panel header .panel-subtitle {
  color: var(--ink-2);
  font-weight: 600;
}

.chart-placeholder {
  border: 1px dashed var(--brand-200);
  border-radius: var(--radius-sm);
  padding: 16px;
  color: var(--text-secondary);
}

.todo-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.tenant-start-strip {
  display: grid;
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 14px;
}

.tenant-start-title,
.tenant-start-tasks a {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 14px;
}

.tenant-start-title {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  background: var(--grad-brand-soft);
  border-color: var(--brand-200);
}

.tenant-start-title span,
.tenant-start-tasks span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.tenant-start-title strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.25;
}

.tenant-start-tasks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.tenant-start-tasks a {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.tenant-start-tasks a:hover {
  transform: translateY(-2px);
  border-color: var(--brand-200);
  box-shadow: var(--shadow-sm);
}

.tenant-start-tasks a.ready {
  border-color: var(--c-success-border);
  background: var(--c-success-soft);
}

.tenant-start-tasks strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-command-center {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.72fr);
  grid-gap: 14px;
  gap: 14px;
  margin-bottom: 14px;
}

.electrical-kpi-grid,
.dashboard-quick-actions {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  margin: 14px 0;
}

.electrical-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.electrical-kpi-card {
  position: relative;
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  min-height: 88px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 13px 14px 13px 17px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.electrical-kpi-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: var(--brand-400);
}

.electrical-kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-200);
  box-shadow: var(--shadow-md);
}

.electrical-kpi-card.tone-info::before {
  background: var(--brand-500);
}

.electrical-kpi-card.tone-warning::before {
  background: var(--accent-400);
}

.electrical-kpi-card.tone-success::before {
  background: var(--c-success);
}

.electrical-kpi-card.tone-danger::before {
  background: var(--c-danger);
}

.electrical-kpi-card span,
.electrical-kpi-card small,
.dashboard-quick-action small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.electrical-kpi-card small {
  color: var(--ink-3);
  font-weight: 600;
}

.electrical-kpi-card strong {
  color: var(--ink);
  font-size: 25px;
  line-height: 1.1;
  font-weight: 720;
  letter-spacing: -0.01em;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.electrical-kpi-card em {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-700);
  padding: 3px 9px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.electrical-kpi-card.tone-warning em {
  background: var(--accent-50);
  color: var(--accent-700);
}

.electrical-kpi-card.tone-danger em {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

.electrical-kpi-card.tone-success em {
  background: var(--c-success-soft);
  color: var(--c-success-ink);
}

.dashboard-quick-actions {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dashboard-quick-action {
  display: grid;
  align-content: start;
  grid-gap: 4px;
  gap: 4px;
  min-height: 64px;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--brand-300);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: inherit;
  padding: 11px 13px;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dashboard-quick-action:hover {
  transform: translateY(-2px);
  border-color: var(--brand-200);
  border-left-color: var(--brand-500);
  box-shadow: var(--shadow-md);
}

.dashboard-quick-action strong,
.dashboard-quick-action small {
  display: block;
}

.dashboard-quick-action strong {
  margin-bottom: 5px;
  color: var(--ink);
  font-size: 14px;
}

.dashboard-quick-action.primary {
  border-color: var(--accent-200);
  border-left-color: var(--accent-400);
  background: linear-gradient(100deg, var(--accent-50), var(--surface) 62%);
}

.dashboard-quick-action.primary:hover {
  border-left-color: var(--accent-500);
}

.dashboard-more {
  margin: 14px 0;
}

.dashboard-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
  list-style: none;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-700);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 800;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.dashboard-more > summary:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
}

.dashboard-more > summary::-webkit-details-marker {
  display: none;
}

.dashboard-more > summary::before {
  content: "▸";
  font-size: 11px;
  transition: transform 150ms ease;
}

.dashboard-more[open] > summary::before {
  transform: rotate(90deg);
}

.dashboard-more[open] > summary {
  margin-bottom: 12px;
}

.dashboard-status-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin: 14px 0;
}

.dashboard-status-card {
  position: relative;
  display: grid;
  grid-template-rows: 16px 28px minmax(28px, auto) 8px;
  align-content: start;
  grid-gap: 5px;
  gap: 5px;
  overflow: hidden;
  min-height: 100px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: inherit;
  padding: 12px;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dashboard-status-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.dashboard-status-card span,
.dashboard-status-card small {
  position: relative;
  z-index: 1;
  display: block;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.dashboard-status-card small {
  font-weight: 600;
  color: var(--ink-3);
}

.dashboard-status-card strong {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 28px;
  align-items: center;
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.dashboard-status-card i {
  position: relative;
  z-index: 1;
  display: block;
  height: 8px;
  margin-top: 0;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-sunk);
}

.dashboard-status-card b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-500);
}

.dashboard-status-card.tone-active {
  border-color: var(--brand-200);
}

.dashboard-status-card.tone-active b {
  background: var(--brand-600);
}

.dashboard-queue-row.tone-active em {
  background: var(--brand-50);
  color: var(--brand-700);
}

.dashboard-status-card.tone-done {
  border-color: var(--c-success-border);
}

.dashboard-status-card.tone-done b {
  background: var(--c-success);
}

.dashboard-status-card.tone-draft b {
  background: var(--ink-3);
}

.dashboard-status-card.tone-sent {
  border-color: var(--brand-200);
}

.dashboard-status-card.tone-sent b {
  background: var(--brand-400);
}

.dashboard-command-panel,
.dashboard-action-queue {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.dashboard-command-head,
.dashboard-action-queue header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.dashboard-command-head h2,
.dashboard-action-queue h3 {
  margin: 0;
  color: var(--ink);
  line-height: 1.25;
}

.dashboard-command-head p,
.dashboard-action-queue p {
  margin: 5px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.dashboard-action-queue header a {
  flex: 0 0 auto;
  color: var(--brand-700);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.dashboard-command-head > span {
  flex: 0 0 auto;
  align-self: flex-start;
  border-radius: 999px;
  border: 1px solid var(--brand-200);
  background: var(--brand-50);
  color: var(--brand-700);
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.dashboard-executive-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
}

.dashboard-executive-metric {
  min-width: 0;
  border-right: 1px solid var(--hairline);
  padding: 12px;
}

.dashboard-executive-metric:last-child {
  border-right: 0;
}

.dashboard-executive-metric span,
.dashboard-executive-metric small,
.dashboard-chain-node span,
.dashboard-chain-node small {
  display: block;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.dashboard-executive-metric strong {
  display: block;
  margin: 8px 0 5px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.15;
}

/* —— 销售→交付链路：以「母线导体」为隐喻 —— */
.dashboard-chain-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
}

.dashboard-chain-rail::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 10px;
  right: 10px;
  height: 4px;
  border-radius: 999px;
  background: var(--grad-rail);
}

.dashboard-chain-node {
  position: relative;
  display: grid;
  grid-template-rows: 18px 34px minmax(34px, auto);
  align-content: start;
  grid-gap: 6px;
  gap: 6px;
  min-width: 0;
  min-height: 112px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: inherit;
  padding: 12px;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dashboard-chain-node::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 18px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--brand-300);
  box-shadow: 0 0 0 3px var(--surface-page);
}

.dashboard-chain-node:hover {
  transform: translateY(-2px);
  border-color: var(--brand-200);
  box-shadow: var(--shadow-md);
}

.dashboard-chain-node strong {
  display: flex;
  min-height: 34px;
  align-items: center;
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  overflow-wrap: anywhere;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.dashboard-chain-node.status-active {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.dashboard-chain-node.status-active::before {
  background: var(--brand-600);
  box-shadow: 0 0 0 3px var(--surface-page), 0 0 0 6px rgba(63, 116, 136, 0.18);
}

.dashboard-chain-node.status-risk {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.dashboard-chain-node.status-risk::before {
  background: var(--accent-400);
}

.dashboard-chain-node.status-done {
  border-color: var(--c-success-border);
  background: var(--c-success-soft);
}

.dashboard-chain-node.status-done::before {
  background: var(--c-success);
}

.dashboard-queue-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.dashboard-queue-row {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: inherit;
  padding: 12px;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.dashboard-queue-row:hover {
  transform: translateX(2px);
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.dashboard-queue-row strong,
.dashboard-queue-row span {
  display: block;
}

.dashboard-queue-row strong {
  color: var(--ink);
  line-height: 1.35;
}

.dashboard-queue-row span {
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.4;
}

.dashboard-queue-row em {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  min-width: 62px;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent-50);
  color: var(--accent-700);
  padding: 0 10px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.dashboard-visual-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin: 14px 0;
}

.dashboard-visual-grid .data-chart-panel {
  min-height: 308px;
}

.dashboard-control-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.dashboard-control-card {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-height: 112px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: inherit;
  padding: 12px;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.dashboard-control-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.dashboard-control-card span,
.dashboard-control-card small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.dashboard-control-card small {
  font-weight: 600;
  color: var(--ink-3);
}

.dashboard-control-card strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.dashboard-control-card.tone-info {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.dashboard-control-card.tone-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.dashboard-control-card.tone-success {
  border-color: var(--c-success-border);
  background: var(--c-success-soft);
}

.customer-toolbar {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.filter-grid-actions {
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.7fr) auto;
  align-items: end;
}

.filter-field {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.filter-field span {
  font-size: 12px;
  color: var(--ink-2);
}

.customer-search {
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 0 12px;
}

.filter-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  min-width: 1120px;
}

.data-table th,
.data-table td {
  text-align: left;
  font-size: 14px;
  padding: 12px;
  border-bottom: 1px solid var(--surface-soft);
}

.data-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--ink-2);
  background: var(--surface);
  font-weight: 600;
}

.data-table .first-column {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--surface);
  box-shadow: 8px 0 12px rgba(15, 23, 42, 0.04);
}

.data-table thead .first-column {
  z-index: 4;
  background: var(--surface);
}

.data-table .action-column {
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  z-index: 3;
  min-width: 158px;
  background: var(--surface);
  box-shadow: -8px 0 12px rgba(15, 23, 42, 0.06);
}

.data-table thead .action-column {
  z-index: 4;
  background: var(--surface);
}

.data-table td > span,
.data-table td > small {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.35;
}

.data-table td > span.risk-badge {
  display: inline-flex;
  margin-top: 0;
}

.data-table td > .risk-badge-row {
  display: inline-flex !important;
  margin-top: 0 !important;
}

.data-table .selection-cell {
  width: 74px;
  min-width: 74px;
  text-align: center;
}

.data-table .selection-cell input {
  width: 16px;
  height: 16px;
  accent-color: var(--brand);
}

.data-table .empty-table-cell {
  padding: 28px 16px;
  color: var(--text-secondary);
  text-align: center;
}

.selection-all-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 24px;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}

.selection-all-control span {
  font-size: 13px;
  font-weight: 600;
}

.inline-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 132px;
  flex-wrap: wrap;
}

.quotation-cell-stack {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  min-width: 0;
}

.quotation-cell-stack small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
}

.inline-btn {
  min-height: 30px;
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-600);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.inline-btn:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
}

.inline-btn:disabled {
  color: var(--ink-3);
  border-color: var(--hairline);
  background: var(--surface-sunk);
  cursor: not-allowed;
}

.link-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--brand-600);
  font-size: 13px;
  font-family: inherit;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}

.link-btn:disabled {
  color: var(--ink-3);
  cursor: not-allowed;
}

.danger-link {
  color: var(--c-danger-ink);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
}

.status-badge::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.status-active::before,
.status-effective::before,
.status-confirmed::before,
.status-approved::before,
.status-paid::before,
.status-published::before,
.status-won::before {
  content: "✓";
  background: var(--c-success-border);
  color: var(--c-success-ink);
}

.status-draft::before,
.status-planned::before,
.status-not_started::before {
  content: "✎";
  background: var(--brand-100);
  color: var(--brand-600);
}

.status-pending_approval::before,
.status-processing::before,
.status-in_progress::before {
  content: "◷";
  background: var(--brand-100);
  color: var(--brand-600);
}

.status-overdue::before,
.status-blocked::before,
.status-rejected::before,
.status-failed::before,
.status-terminated::before {
  content: "!";
  background: var(--c-danger-border);
  color: var(--c-danger-ink);
}

.status-lost::before,
.status-closed::before,
.status-cancelled::before,
.status-inactive::before,
.status-archived::before,
.status-completed::before {
  content: "□";
  background: var(--hairline);
  color: var(--ink-2);
}

.status-changed::before {
  content: "↺";
  background: var(--brand-100);
  color: var(--brand-700);
}

.status-draft {
  background: var(--brand-50);
  color: var(--brand-600);
}

.status-active {
  background: var(--surface-soft);
  color: var(--c-success-ink);
}

.status-effective {
  background: var(--surface-soft);
  color: var(--c-success-ink);
}

.status-confirmed,
.status-approved {
  background: var(--surface-soft);
  color: var(--c-success-ink);
}

.status-planned {
  background: var(--brand-50);
  color: var(--brand-600);
}

.status-overdue {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

.status-paid {
  background: var(--surface-soft);
  color: var(--c-success-ink);
}

.status-published {
  background: var(--surface-soft);
  color: var(--c-success-ink);
}

.status-pending_approval {
  background: var(--brand-50);
  color: var(--brand-600);
}

.status-processing {
  background: var(--brand-50);
  color: var(--brand-600);
}

.status-in_progress {
  background: var(--brand-50);
  color: var(--brand-600);
}

.status-not_started {
  background: var(--surface-sunk);
  color: var(--ink-2);
}

.status-blocked {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

.status-won {
  background: var(--c-success-soft);
  color: var(--c-success-ink);
}

.status-lost,
.status-closed,
.status-cancelled,
.status-failed {
  background: var(--surface-sunk);
  color: var(--ink);
}

.status-rejected {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

.status-inactive {
  background: var(--surface-sunk);
  color: var(--ink-2);
}

.status-changed {
  background: var(--brand-50);
  color: var(--brand-700);
}

.status-terminated {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

.status-archived {
  background: var(--surface-sunk);
  color: var(--ink);
}

.status-completed {
  background: var(--surface-sunk);
  color: var(--ink);
}

.pagination-meta {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.pagination-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 10px;
}

.tender-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.tender-kpi-card {
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
  min-height: 104px;
}

.tender-kpi-card span {
  display: block;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.tender-kpi-card strong {
  display: block;
  margin-top: 8px;
  font-size: 26px;
  color: var(--ink);
}

.tender-kpi-card small {
  display: block;
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}

.tender-insight-strip {
  margin-top: 10px;
  border: 1px dashed var(--brand-200);
  border-radius: 10px;
  background: linear-gradient(145deg, var(--brand-50), #ffffff);
  padding: 10px 12px;
  color: var(--brand-800);
  font-size: 13px;
}

.tender-identity-cell {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.tender-identity-cell span {
  color: var(--ink-2);
  font-size: 12px;
}

.tender-deadline-cell {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.deadline-tag {
  display: inline-flex;
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
}

.deadline-critical,
.deadline-overdue {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

.deadline-warning {
  background: var(--accent-50);
  color: var(--accent-600);
}

.deadline-healthy {
  background: var(--c-success-soft);
  color: var(--c-success-ink);
}

.deadline-none {
  background: var(--surface-sunk);
  color: var(--ink-2);
}

.workflow-signal {
  display: inline-flex;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  background: var(--surface-sunk);
  color: var(--ink-2);
}

.workflow-signal-linked {
  background: var(--brand-100);
  color: var(--brand-800);
}

.customer-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.customer-form label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.customer-form span {
  font-size: 13px;
  color: var(--ink);
}

.customer-form input,
.customer-form select,
.customer-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface);
  font-size: 14px;
}

.customer-form textarea {
  min-height: 110px;
  resize: vertical;
}

.customer-form .textarea-field,
.customer-form .page-header-actions,
.customer-form .customer-form-footer-bar,
.customer-form .contract-date-group {
  grid-column: 1 / -1;
}

.opportunity-form {
  gap: 16px 20px;
}

.opportunity-form label {
  align-content: start;
}

.opportunity-form .contract-status-field,
.opportunity-form .opportunity-status-summary {
  align-self: stretch;
}

.opportunity-customer-combobox .custom-combobox-control input {
  min-height: 46px;
}

.opportunity-customer-combobox .custom-combobox-control button {
  width: 44px;
  font-size: 16px;
}

.opportunity-customer-combobox .custom-combobox-menu {
  max-width: none;
  padding: 10px;
}

.opportunity-customer-options {
  gap: 6px;
  max-height: 360px;
}

.opportunity-customer-options button {
  min-height: 68px;
  gap: 6px;
  padding: 12px 14px;
}

.opportunity-customer-options strong {
  font-size: 16px;
  line-height: 1.35;
  white-space: normal;
}

.opportunity-customer-options span {
  font-size: 13px;
  line-height: 1.5;
  white-space: normal;
}

.opportunity-customer-hint {
  min-height: 18px;
}

.opportunity-customer-field {
  grid-column: 1 / -1;
}
.opportunity-status-summary {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  align-content: start;
  min-height: 100%;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--surface) 0%, #ffffff 100%);
  padding: 12px 14px;
}

.opportunity-status-summary span {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}

.opportunity-status-summary strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}

.opportunity-status-summary small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.55;
}

.opportunity-status-target {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  min-width: min(320px, 100%);
}

.opportunity-status-target-head {
  display: flex;
  align-items: center;
  gap: 6px;
}

.opportunity-status-target-head span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.opportunity-status-target-head b {
  color: var(--danger-700, #dc2626);
}

.opportunity-status-target-control {
  position: relative;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) 22px;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  width: min(320px, 100%);
  min-height: 50px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 251, 255, 0.96) 100%);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  padding: 9px 12px;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.opportunity-status-target-control:hover {
  border-color: rgba(43, 111, 237, 0.32);
  box-shadow: 0 12px 28px rgba(43, 111, 237, 0.12);
}

.opportunity-status-target-control:focus-within {
  border-color: rgba(43, 111, 237, 0.62);
  box-shadow: 0 0 0 3px rgba(43, 111, 237, 0.14), 0 14px 30px rgba(43, 111, 237, 0.12);
}

.opportunity-status-target-control::after {
  content: "";
  width: 7px;
  height: 7px;
  justify-self: center;
  border-right: 2px solid var(--ink-2);
  border-bottom: 2px solid var(--ink-2);
  transform: translateY(-2px) rotate(45deg);
  pointer-events: none;
}

.opportunity-status-target-dot {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--ink-3);
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.12);
}

.opportunity-status-target-copy {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  min-width: 0;
}

.opportunity-status-target-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.opportunity-status-target-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.3;
}

.opportunity-status-target-control select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: transparent;
  cursor: pointer;
  opacity: 0;
}

.opportunity-status-target-control select:disabled {
  cursor: not-allowed;
}

.opportunity-status-target-control:has(select:disabled) {
  opacity: 0.62;
}

.opportunity-status-target-control.is-draft .opportunity-status-target-dot,
.opportunity-status-target-control.is-closed .opportunity-status-target-dot {
  background: var(--ink-3);
}

.opportunity-status-target-control.is-pending_approval .opportunity-status-target-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
}

.opportunity-status-target-control.is-active .opportunity-status-target-dot {
  background: var(--brand-600);
  box-shadow: 0 0 0 4px rgba(43, 111, 237, 0.14);
}

.opportunity-status-target-control.is-won .opportunity-status-target-dot {
  background: #16a34a;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.14);
}

.opportunity-status-target-control.is-lost .opportunity-status-target-dot {
  background: #dc2626;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12);
}

@media (max-width: 560px) {
  .opportunity-status-target,
  .opportunity-status-target-control {
    width: 100%;
  }
}

.opportunity-notes-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 16px 20px;
  gap: 16px 20px;
}

.opportunity-notes-grid .textarea-field {
  grid-column: auto;
}

.opportunity-notes-grid textarea {
  min-height: 124px;
}

.customer-form-page-hero {
  position: relative;
  overflow: hidden;
  max-width: 1220px;
  margin: 0 auto 18px;
  padding: 22px 28px;
  border: 0;
  border-radius: 22px;
  background: linear-gradient(118deg, var(--brand-900) 0%, var(--brand-700) 52%, var(--brand-600) 100%);
  box-shadow: 0 22px 48px rgba(21, 50, 91, 0.2);
}

.customer-form-page-hero-head {
  position: relative;
  z-index: 1;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.customer-form-page-hero-main {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-width: 0;
}

.customer-form-page-breadcrumb {
  margin: 0;
  color: rgba(239, 246, 255, 0.82);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.customer-form-page-hero-main h1 {
  margin: 0;
  color: var(--ink-inverse);
}

.customer-form-page-hero .desc {
  color: rgba(239, 246, 255, 0.88);
}

.customer-form-page-hero .page-header-actions .btn {
  border-color: rgba(191, 219, 254, 0.4);
  background: rgba(255, 255, 255, 0.14);
  color: var(--ink-inverse) !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}

.customer-form-page-hero .page-header-actions .btn:hover {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.2);
  color: var(--ink-inverse) !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

.customer-form-shell {
  max-width: 1220px;
  margin: 0 auto;
  gap: 0;
  background: transparent;
}

.customer-form-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-gap: 0;
  gap: 0;
}

.customer-form-card {
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
  padding: 24px;
  min-width: 0;
}

.customer-form-primary-card {
  padding: 0;
  overflow: hidden;
}

.customer-form-group-head {
  margin-bottom: 16px;
}

.customer-form-group-head strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.3;
}

.customer-form-group-head p {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.6;
}

.customer-form-setting-grid .customer-form-field > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.customer-form-footer-bar {
  position: static;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  border-top: 1px solid var(--surface-soft);
  background: var(--surface);
  padding: 18px 24px 24px;
}

.customer-form-footer-meta {
  min-width: 0;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.customer-form-footer-meta strong {
  color: var(--ink);
  font-size: 14px;
}

.customer-form-footer-meta p {
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.6;
}

.customer-form-footer-status {
  min-width: min(100%, 280px);
}

.customer-form-section-stack {
  display: grid;
}

.customer-form-subsection {
  padding: 24px;
  border-top: 1px solid var(--surface-soft);
}

.customer-form-subsection:first-child {
  border-top: 0;
}

.customer-form-subsection-last {
  padding-bottom: 28px;
}

.customer-form-guide-panel {
  overflow: hidden;
}

.customer-form-section legend {
  padding: 0 8px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
}

.customer-form-card-hint {
  margin: 0 0 14px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.6;
}

.customer-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 18px 20px;
  gap: 18px 20px;
}

.customer-form-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.customer-form-field {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  min-width: 0;
}

.customer-form-field-wide {
  grid-column: 1 / -1;
}

.customer-form-field > span {
  font-size: 13px;
  color: var(--ink);
  font-weight: 700;
}

.customer-form-field input,
.customer-form-field select,
.customer-form-field textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--surface);
  font-size: 14px;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.customer-form-field input:focus,
.customer-form-field select:focus,
.customer-form-field textarea:focus {
  border-color: var(--brand-300);
  box-shadow: 0 0 0 4px rgba(191, 219, 254, 0.3);
  background: var(--surface);
  outline: 0;
}

.customer-form-field textarea {
  min-height: 156px;
  resize: vertical;
}

.customer-form-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 24px 24px 18px;
  border-bottom: 1px solid var(--surface-soft);
}

.customer-form-card-head strong {
  color: var(--ink);
  font-size: 18px;
}

.customer-form-card-head p {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.6;
}

.customer-form-canvas-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.32fr);
  align-items: start;
}

.customer-form-governance-strip {
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.customer-form-progress-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 13px;
  font-weight: 800;
}

.customer-form-progress-badge.tone-success {
  background: #f0fdf4;
  color: #15803d;
}

.customer-form-progress-badge.tone-warning {
  background: #fffbeb;
  color: #b45309;
}

.customer-form-progress-badge.tone-danger {
  background: #fff5f5;
  color: #b42318;
}

.customer-form-progress-badge.tone-info {
  background: #eff6ff;
  color: #1d4ed8;
}

.customer-form-progress-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.customer-form-progress-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--surface);
  padding: 12px;
}

.customer-form-progress-item strong,
.customer-form-progress-item small,
.customer-form-progress-item span {
  display: block;
}

.customer-form-progress-item strong {
  color: var(--ink);
  font-size: 14px;
}

.customer-form-progress-item small {
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}

.customer-form-progress-item span {
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
}

.customer-form-progress-item.tone-success {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.customer-form-progress-item.tone-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.customer-form-progress-item.tone-danger {
  border-color: var(--c-danger-border);
  background: var(--surface-sunk);
}


.customer-form-action-card {
  position: -webkit-sticky;
  position: sticky;
  top: 86px;
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  margin: 24px 24px 24px 0;
  border: 1px solid #dbeafe;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  padding-bottom: 14px;
  overflow: hidden;
}

.customer-form-guide-rail {
  margin: 0;
  padding: 0 14px;
}

.customer-form-guide-focus {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
  grid-gap: 14px;
  gap: 14px;
  margin-bottom: 14px;
  border: 1px solid var(--brand-100);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.96), rgba(255, 255, 255, 0.98)),
    linear-gradient(90deg, rgba(37, 99, 235, 0.08), rgba(34, 184, 198, 0.06));
  padding: 14px 16px;
}

.customer-form-guide-focus.is-done {
  border-color: var(--c-success-border);
  background: linear-gradient(135deg, rgba(240, 253, 244, 0.98), rgba(255, 255, 255, 0.98));
}

.customer-form-guide-focus.is-pending {
  border-color: var(--hairline);
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.98));
}

.customer-form-guide-focus-main,
.customer-form-guide-focus-side {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-width: 0;
}

.customer-form-guide-focus-main span {
  color: var(--brand-500);
  font-size: 12px;
  font-weight: 800;
}

.customer-form-guide-focus-main strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.2;
}

.customer-form-guide-focus-main p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
}

.customer-form-guide-focus-side {
  align-content: space-between;
  justify-items: flex-start;
}

.customer-form-guide-focus-side small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.6;
}

.customer-form-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.customer-form-guide-step {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
}

.customer-form-guide-step.is-done {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.customer-form-guide-step.is-current {
  border-color: var(--brand-200);
  background: var(--brand-50);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
}

.customer-form-guide-step.is-pending {
  background: var(--surface-sunk);
}

.customer-form-guide-step-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.customer-form-guide-step-head > span {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ink-inverse);
  font-size: 11px;
  font-weight: 800;
}

.customer-form-guide-step.is-done .customer-form-guide-step-head > span {
  background: var(--c-success);
}

.customer-form-guide-step.is-current .customer-form-guide-step-head > span {
  background: var(--brand-500);
}

.customer-form-guide-step-head div {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  min-width: 0;
}

.customer-form-guide-step-head strong {
  color: var(--ink);
  font-size: 14px;
}

.customer-form-guide-step-head small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}

.customer-form-guide-step-action {
  display: flex;
  justify-content: flex-end;
}

.customer-form-checklist {
  margin-top: 14px;
}

.customer-form-outcome-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-top: 14px;
}

.customer-form-outcome-card {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
}

.customer-form-outcome-card.is-done {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.customer-form-outcome-card.is-current {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.customer-form-outcome-card span {
  color: var(--brand-500);
  font-size: 12px;
  font-weight: 800;
}

.customer-form-outcome-card strong {
  color: var(--ink);
  font-size: 14px;
}

.customer-form-outcome-card small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.6;
}

.customer-form-action-note {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
  margin: 0 14px;
}

.customer-form-action-note strong {
  color: var(--ink);
  font-size: 14px;
}

.customer-form-action-note small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.6;
}

.customer-form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.form-hint {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 13px;
}

.contract-date-group {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
}

.contract-date-group legend {
  padding: 0 6px;
  color: var(--brand-600);
  font-size: 13px;
  font-weight: 700;
}

.contract-date-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.date-field {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-width: 0;
}

.date-field-label {
  font-size: 13px;
  color: var(--ink);
}

.date-input-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: stretch;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

.date-input-shell input {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.date-input-shell .date-text-input {
  min-height: 42px;
  padding: 10px 12px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.date-text-input::placeholder {
  color: var(--ink-3);
  letter-spacing: 0;
}

.date-text-input:focus {
  outline: 2px solid var(--brand-300);
  outline-offset: -2px;
}

.native-date-picker {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 42px;
  height: 42px;
  opacity: 0;
  pointer-events: none;
}

.date-picker-button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--surface);
  color: var(--brand-600);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.date-picker-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.date-picker-button:disabled {
  cursor: not-allowed;
  color: var(--ink-3);
  background: var(--surface-sunk);
}

.field-hint {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}

.field-hint-box {
  border: 1px solid var(--brand-100);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-2);
  padding: 9px 11px;
}

.field-error {
  color: #dc2626;
  font-size: 12px;
}

.form-error {
  border: 1px solid var(--c-danger-border);
  border-radius: 10px;
  background: var(--c-danger-soft);
  padding: 10px 12px;
}

.dirty-warning,
.result-hint {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--accent-700);
}

.detail-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.detail-grid div {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
}

.detail-grid dt {
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
}

.detail-grid dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 14px;
}

.flow-workbench {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.flow-workbench-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

.flow-workbench-header p {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.flow-workbench-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.sales-flow-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.sales-flow-node {
  position: relative;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-height: 94px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
}

.sales-flow-node strong {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--hairline);
  color: var(--ink-2);
  font-size: 13px;
}

.sales-flow-node span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.sales-flow-node small {
  color: var(--ink-2);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.sales-flow-node.is-done {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.sales-flow-node.is-done strong {
  background: var(--c-success-soft);
  color: var(--c-success-ink);
}

.sales-flow-node.is-active {
  border-color: var(--cyan-500);
  background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.2);
}

.sales-flow-node.is-active strong {
  background: var(--cyan-100);
  color: var(--c-success-ink);
}

.inheritance-grid,
.inheritance-callout dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.inheritance-grid div,
.inheritance-callout dl div {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px;
}

.inheritance-grid dt,
.inheritance-callout dt {
  color: var(--ink-2);
  font-size: 12px;
}

.inheritance-grid dd,
.inheritance-callout dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.inheritance-callout {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 12px;
  border: 1px solid var(--c-success-border);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 12px;
}

.inheritance-callout strong {
  display: block;
  color: var(--ink);
}

.inheritance-callout span {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 13px;
}

.compact-state-block {
  margin-bottom: 14px;
}

.opportunity-detail-flow {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.opportunity-overview-panel {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.opportunity-overview-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  grid-gap: 14px;
  gap: 14px;
  align-items: stretch;
}

.opportunity-overview-main > div,
.opportunity-overview-amount {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px 16px;
}

.opportunity-overview-main > div {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.opportunity-overview-main span,
.opportunity-overview-amount span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.opportunity-overview-main strong {
  display: block;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.opportunity-overview-main small {
  display: block;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
}

.opportunity-overview-amount {
  display: grid;
  align-content: center;
  grid-gap: 6px;
  gap: 6px;
}

.opportunity-overview-amount strong {
  color: var(--brand-600);
  font-size: 32px;
  line-height: 1.1;
  font-weight: 800;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.opportunity-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin: 0;
}

.opportunity-overview-grid > div {
  min-width: 0;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px 16px;
}

.opportunity-overview-grid dt {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.opportunity-overview-grid dd {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.opportunity-followup-form {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 14px;
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 14px;
}

.opportunity-followup-head,
.opportunity-followup-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.opportunity-followup-head strong,
.opportunity-followup-history-head strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
}

.opportunity-followup-head span,
.opportunity-followup-history-head span {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}

.opportunity-followup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.opportunity-followup-wide {
  grid-column: 1 / -1;
}

.opportunity-followup-history {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 14px;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}

.opportunity-followup-history ol {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.opportunity-followup-history li {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
}

.opportunity-followup-history li > div {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.opportunity-followup-history li strong {
  color: var(--ink);
  font-size: 14px;
  overflow-wrap: anywhere;
}

.opportunity-followup-history time {
  flex: 0 0 auto;
  color: var(--ink-2);
  font-size: 12px;
}

.opportunity-followup-history p,
.opportunity-followup-history small {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.business-flow,
.pipeline-grid,
.policy-grid,
.capacity-grid,
.production-grid,
.delivery-board,
.production-board {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.business-flow {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: 14px;
}

.flow-step {
  min-height: 86px;
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
  color: var(--text-primary);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.flow-step:hover {
  border-color: var(--brand-300);
  transform: translateY(-1px);
}

.flow-step span,
.pipeline-card span,
.record-row span,
.record-row small,
.risk-row span,
.production-card span,
.policy-card span,
.delivery-card > span {
  color: var(--text-secondary);
}

.flow-step strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
}

.flow-step small {
  display: block;
  margin-top: 4px;
  color: var(--text-secondary);
  line-height: 1.35;
}

.flow-info {
  border-color: var(--brand-200);
}

.flow-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.flow-success {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.flow-danger {
  border-color: var(--c-danger-border);
  background: var(--c-danger-soft);
}

.workbench-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 14px;
}

.workbench-grid.dashboard-analysis-entry {
  grid-template-columns: minmax(0, 1fr);
}

.dashboard-analysis-entry .panel-wide {
  grid-column: 1 / -1;
}

.dashboard-analysis-entry .dashboard-control-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.sales-link-rail:has(> :only-child),
.quotation-source-grid:has(> :only-child),
.user-access-metrics:has(> :only-child),
.organization-detail-grid:has(> :only-child),
.quotation-rule-summary-strip:has(> :only-child) {
  grid-template-columns: minmax(0, min(100%, 320px));
  justify-content: start;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 14px;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-top: 14px;
}

.customer-profile-grid,
.opportunity-readiness-grid {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.customer-profile-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.customer-profile-card,
.opportunity-readiness-card {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px;
}

.customer-profile-card span,
.customer-profile-card small,
.opportunity-readiness-card span,
.opportunity-readiness-card small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.customer-profile-card strong,
.opportunity-readiness-card strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
}

.customer-profile-card em,
.opportunity-readiness-card em {
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  padding: 3px 9px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.customer-ledger-page {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.customer-ledger-page .module-block {
  margin-top: 0;
}

.customer-ledger-hero {
  margin-bottom: 0;
  border-color: var(--hairline-strong);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(239, 250, 255, 0.96)),
    linear-gradient(90deg, rgba(37, 99, 235, 0.08), rgba(20, 184, 166, 0.08));
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.customer-ledger-hero .desc {
  max-width: 680px;
}

.customer-command-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.35fr);
  grid-gap: 12px;
  gap: 12px;
  align-items: stretch;
}

.customer-chain-panel {
  display: grid;
  align-content: space-between;
  grid-gap: 16px;
  gap: 16px;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 16px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.05);
}

.customer-chain-panel span,
.customer-chain-panel p,
.customer-chain-panel small {
  color: var(--ink-2);
}

.customer-chain-panel > div > span {
  font-size: 12px;
  font-weight: 800;
}

.customer-chain-panel strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.25;
}

.customer-chain-panel p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.55;
}

.customer-chain-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.customer-chain-steps li {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.customer-chain-steps li span {
  font-size: 11px;
  font-weight: 900;
}

.customer-chain-steps li strong {
  margin: 0;
  font-size: 15px;
}

.customer-chain-steps li small {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.customer-kpi-card {
  display: grid;
  align-content: space-between;
  grid-gap: 8px;
  gap: 8px;
  min-width: 0;
  min-height: 124px;
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--brand-500);
  border-radius: 12px;
  background: var(--surface);
  padding: 13px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.customer-kpi-card.tone-success {
  border-top-color: var(--cyan-500);
}

.customer-kpi-card.tone-warning {
  border-top-color: var(--c-warning);
}

.customer-kpi-card.tone-danger {
  border-top-color: var(--c-danger);
}

.customer-kpi-card span,
.customer-kpi-card small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.customer-kpi-card strong {
  color: var(--ink);
  font-size: 27px;
  line-height: 1.05;
}

.customer-profile-grid-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.customer-list-panel {
  border-color: var(--brand-100);
  background: var(--surface);
  padding: 16px;
}

.customer-list-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.customer-list-head .module-title {
  margin-bottom: 5px;
}

.customer-list-head p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
}

.customer-selection-hint {
  flex: 0 0 auto;
  border: 1px solid var(--brand-200);
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 800;
}

.customer-status-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 12px;
}

.customer-status-tab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 3px 10px;
  gap: 3px 10px;
  min-height: 70px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.customer-status-tab:hover,
.customer-status-tab.active {
  border-color: var(--brand-300);
  background: var(--brand-50);
}

.customer-status-tab.tone-success.active {
  border-color: var(--cyan-300);
  background: var(--surface-sunk);
}

.customer-status-tab.tone-warning.active {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.customer-status-tab span,
.customer-status-tab small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.customer-status-tab strong {
  grid-row: span 2;
  align-self: center;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.customer-toolbar-elevated {
  margin-bottom: 12px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 12px;
}

.customer-table {
  min-width: 1160px;
}

.customer-table th,
.customer-table td {
  vertical-align: top;
}

.customer-table tbody tr:hover td {
  background: var(--surface);
}

.customer-table .selection-cell {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--surface);
}

.customer-table thead .selection-cell {
  z-index: 5;
  background: var(--surface);
}

.customer-table .customer-main-column {
  min-width: 280px;
}

.customer-table .first-column {
  left: 0;
}

.customer-table.has-selection .first-column {
  left: 74px;
}

.customer-main-cell {
  min-width: 280px;
}

.customer-identity,
.customer-profile-stack,
.customer-contact-stack,
.customer-status-stack,
.customer-date-stack {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-width: 0;
}

.contact-summary-cell {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  min-width: 0;
}

.contact-summary-cell strong,
.contact-summary-cell small,
.contact-summary-cell em {
  min-width: 0;
  overflow: hidden;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.contact-summary-cell strong {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.contact-summary-cell strong i {
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-700);
  padding: 1px 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.contact-summary-cell small,
.contact-summary-cell em {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
  color: var(--ink-2);
  font-size: 12px;
}

.contact-summary-cell small b,
.contact-summary-cell em b {
  color: var(--ink-3);
  font-weight: 700;
}

.contact-summary-cell em {
  color: var(--ink-3);
  font-style: normal;
}

.customer-identity a {
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-identity a:hover {
  color: var(--brand-600);
}

.customer-identity small,
.customer-contact-stack small,
.customer-status-stack small,
.customer-date-stack small,
.customer-profile-stack span {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.35;
}

.customer-tag-row,
.customer-mini-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.customer-detail-flow {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

.contact-address-card {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.customer-overview-panel {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

.customer-overview-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 16px;
  gap: 16px;
  align-items: start;
}

.customer-overview-main > div:first-child {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-width: 0;
}

.customer-overview-main > div:first-child span,
.customer-overview-main > div:first-child small {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.customer-overview-main > div:first-child strong {
  color: var(--ink);
  font-size: 32px;
  line-height: 1.2;
}

.customer-overview-health {
  min-width: 168px;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  border: 1px solid var(--brand-100);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface), #ffffff);
  padding: 14px 16px;
}

.customer-overview-health span,
.customer-overview-health small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}

.customer-overview-health strong {
  color: var(--ink);
  font-size: 28px;
  line-height: 1.1;
}

.customer-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.customer-overview-grid > div {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px 14px;
}

.customer-overview-grid dt {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.customer-overview-grid dd {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

.customer-risk-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--brand-100);
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 800;
}

.customer-risk-pill.risk-low {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
  color: var(--c-success-ink);
}

.customer-risk-pill.risk-medium {
  border-color: var(--accent-200);
  background: var(--accent-50);
  color: var(--accent-700);
}

.customer-risk-pill.risk-high,
.customer-risk-pill.risk-critical {
  border-color: var(--c-danger-border);
  background: var(--surface-sunk);
  color: var(--c-danger-ink);
}

.customer-tag-row span,
.customer-mini-badges em {
  max-width: 116px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-700);
  padding: 2px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.customer-tag-row .is-muted {
  background: var(--surface-sunk);
  color: var(--ink-2);
}

.customer-signal-list {
  margin: 0;
  padding-left: 20px;
  color: var(--ink);
}

.customer-signal-row {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin-top: -4px;
}

.customer-signal-list li {
  line-height: 1.65;
}

.customer-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.customer-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-activity-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.customer-activity-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px 16px;
}

.customer-activity-list li > div:first-child,
.customer-activity-list li > div:last-child {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.customer-activity-list span,
.customer-activity-list small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}

.customer-activity-list strong,
.customer-activity-list b {
  color: var(--ink);
}

.customer-activity-list b {
  font-size: 18px;
  text-align: right;
}

.customer-mini-badges .risk-high,
.customer-mini-badges .risk-critical {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

.customer-mini-badges .risk-medium {
  background: var(--accent-50);
  color: var(--accent-600);
}

.customer-profile-stack strong,
.customer-contact-stack strong,
.customer-date-stack strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.customer-chain-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(54px, 1fr));
  grid-gap: 6px;
  gap: 6px;
}

.customer-chain-stats span {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 7px 8px;
  text-align: center;
}

.customer-chain-stats strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
}

.customer-chain-stats small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
}

.customer-row-actions {
  min-width: 112px;
}

.customer-analytics-grid,
.customer-attention-grid {
  margin-top: 0;
}

.opportunity-readiness-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.opportunity-convert-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 999px;
  border: 1px solid var(--brand-200);
  background: var(--brand-50);
  color: var(--brand-600);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.data-chart-panel {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 14px;
  box-shadow: var(--shadow-sm);
}

.data-chart-panel header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.data-chart-panel h3 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}

.data-chart-panel header span {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.data-chart-action {
  flex: 0 0 auto;
}

.data-chart-canvas {
  width: 100%;
  min-width: 0;
}

.panel-wide {
  min-height: 260px;
}

.panel a {
  color: var(--brand);
  font-weight: 700;
}

.panel-subtitle {
  color: var(--text-secondary);
  font-size: 13px;
  text-align: right;
}

.record-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.empty-state-inline {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-sunk);
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.6;
  padding: 14px 16px;
  text-align: center;
}

.task-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.task-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 70px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
  color: var(--text-primary);
}

.task-row strong,
.task-row span {
  display: block;
}

.task-row span {
  margin-top: 4px;
  color: var(--text-secondary);
}

.task-row em {
  flex: 0 0 auto;
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border-radius: 999px;
  background: var(--accent-50);
  color: var(--accent-700);
  padding: 0 9px;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.spec-card {
  min-height: 116px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 12px;
}

.spec-card span,
.spec-card strong,
.spec-card small {
  display: block;
}

.spec-card span,
.spec-card small {
  color: var(--text-secondary);
}

.spec-card strong {
  margin: 8px 0 4px;
  color: var(--ink);
  font-size: 26px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.record-row,
.risk-row,
.policy-card,
.production-card,
.pipeline-card,
.delivery-card,
.capacity-grid article {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 12px;
}

.record-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(128px, auto);
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  min-height: 82px;
}

.record-row strong,
.record-row span,
.record-row small,
.risk-row strong,
.risk-row span,
.production-card strong,
.production-card span,
.production-card em,
.policy-card strong,
.policy-card span,
.policy-card em {
  display: block;
}

.record-row small {
  margin-top: 4px;
}

.record-meta {
  min-width: 128px;
  text-align: right;
}

.record-meta em,
.status-pill,
.delivery-card-head em {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

.record-meta span {
  margin-top: 6px;
  color: var(--text-primary);
  font-weight: 700;
  white-space: nowrap;
}

.record-action-button {
  height: 28px;
  margin-top: 8px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 12px;
}

.inline-badge {
  display: inline-flex !important;
  min-height: 20px;
  align-items: center;
  margin-left: 8px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--c-success-ink) !important;
  font-size: 11px !important;
  font-weight: 700;
  vertical-align: middle;
}

.inline-badge.is-warning {
  background: var(--accent-50);
  color: var(--accent-600) !important;
}

.inline-badge.is-danger {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink) !important;
}

.dense {
  min-height: 92px;
}

.progress-track {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-sunk);
  overflow: hidden;
  margin-top: 10px;
}

.progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
}

.production-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.production-card em {
  margin-top: 10px;
  color: var(--c-success-ink);
  font-style: normal;
  font-weight: 700;
}

.dashboard-home {
  --dashboard-gap: 16px;
  --dashboard-panel-padding: 18px;
  --dashboard-panel-radius: 12px;
  --dashboard-panel-border: var(--hairline);
}

.dashboard-home .electrical-kpi-card {
  grid-template-rows: 20px 34px 20px 24px;
  align-content: start;
  min-height: 140px;
  gap: 6px;
}

.dashboard-home .electrical-kpi-card span,
.dashboard-home .electrical-kpi-card strong,
.dashboard-home .electrical-kpi-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-home .electrical-kpi-card span {
  line-height: 20px;
}

.dashboard-home .electrical-kpi-card strong {
  line-height: 34px;
}

.dashboard-home .electrical-kpi-card small {
  line-height: 20px;
}

.dashboard-home .electrical-kpi-card em {
  height: 24px;
  align-self: end;
  display: inline-flex;
  align-items: center;
}

.dashboard-home .dashboard-quick-action {
  grid-template-rows: 22px 40px;
  min-height: 86px;
  align-content: start;
}

.dashboard-home .dashboard-quick-action strong,
.dashboard-home .dashboard-quick-action small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard-home .dashboard-quick-action strong {
  margin: 0;
  line-height: 22px;
  white-space: nowrap;
}

.dashboard-home .dashboard-quick-action small {
  display: -webkit-box;
  line-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dashboard-home .tenant-start-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: stretch;
}

.dashboard-home .tenant-start-tasks {
  display: contents;
}

.dashboard-home .tenant-start-title,
.dashboard-home .tenant-start-tasks a {
  display: grid;
  grid-template-rows: 20px 30px;
  align-content: center;
  min-width: 0;
  min-height: 80px;
}

.dashboard-home .tenant-start-title span,
.dashboard-home .tenant-start-title strong,
.dashboard-home .tenant-start-tasks span,
.dashboard-home .tenant-start-tasks strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-home .dashboard-status-card {
  grid-template-rows: 20px 34px 20px 8px;
  min-height: 140px;
}

.dashboard-home .dashboard-status-card span,
.dashboard-home .dashboard-status-card strong,
.dashboard-home .dashboard-status-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-home .dashboard-executive-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-home .dashboard-executive-metric {
  display: grid;
  grid-template-rows: 20px 30px 20px;
  align-content: center;
  min-height: 94px;
}

.dashboard-home .dashboard-executive-metric span,
.dashboard-home .dashboard-executive-metric strong,
.dashboard-home .dashboard-executive-metric small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-home .dashboard-executive-metric strong {
  margin: 0;
  line-height: 30px;
}

.dashboard-home .dashboard-grid,
.dashboard-home .workbench-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--dashboard-gap);
  align-items: start;
}

.dashboard-home .dashboard-grid > .panel-wide,
.dashboard-home .workbench-grid > .panel-wide {
  grid-column: span 8;
}

.dashboard-home .dashboard-grid > .panel:not(.panel-wide),
.dashboard-home .workbench-grid > .panel:not(.panel-wide) {
  grid-column: span 4;
}

.dashboard-home .workbench-grid.dashboard-analysis-entry {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.dashboard-home .dashboard-analysis-entry .panel-wide {
  grid-column: 1 / -1;
}

.dashboard-home .panel,
.dashboard-home .dashboard-command-panel,
.dashboard-home .dashboard-action-queue {
  border-color: var(--dashboard-panel-border);
  border-radius: var(--dashboard-panel-radius);
  background: var(--surface);
  padding: var(--dashboard-panel-padding);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.dashboard-home .panel header,
.dashboard-home .dashboard-command-head,
.dashboard-home .dashboard-action-queue header {
  min-height: 32px;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.dashboard-home .panel header h3,
.dashboard-home .dashboard-command-head h2,
.dashboard-home .dashboard-action-queue h3 {
  line-height: 1.3;
}

.dashboard-home .dashboard-chain-rail {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 12px;
  align-items: stretch;
}

.dashboard-home .dashboard-chain-node {
  position: relative;
  grid-template-rows: 20px 34px 40px;
  gap: 6px;
  align-content: start;
  min-height: 128px;
  overflow: hidden;
  border-radius: 12px;
  padding: 14px 14px 34px;
}

.dashboard-home .dashboard-chain-node::before {
  content: none;
  display: none;
}

.dashboard-home .dashboard-chain-node > span:first-child {
  height: 20px;
  line-height: 20px;
}

.dashboard-home .dashboard-chain-node > strong {
  display: block;
  height: 34px;
  min-height: 34px;
  line-height: 34px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-home .dashboard-chain-node > small {
  display: -webkit-box;
  min-height: 36px;
  overflow: hidden;
  color: var(--ink-2);
  line-height: 18px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dashboard-home .dashboard-chain-state-mark {
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--ink-2);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

.dashboard-home .dashboard-chain-node.status-active .dashboard-chain-state-mark {
  background: var(--brand-500);
}

.dashboard-home .dashboard-chain-node.status-risk .dashboard-chain-state-mark {
  background: var(--c-danger);
}

.dashboard-home .dashboard-chain-node.status-done .dashboard-chain-state-mark {
  background: var(--cyan-500);
}

.dashboard-home .dashboard-control-grid,
.dashboard-home .spec-grid {
  gap: 12px;
}

.dashboard-home .dashboard-control-card,
.dashboard-home .spec-card {
  display: grid;
  grid-template-rows: 20px 34px 32px;
  align-content: start;
  min-height: 104px;
  padding: 14px 16px;
}

.dashboard-home .dashboard-control-card span,
.dashboard-home .spec-card span {
  overflow: hidden;
  color: var(--ink-2);
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-home .dashboard-control-card strong,
.dashboard-home .spec-card strong {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 24px;
  line-height: 34px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-home .dashboard-control-card small,
.dashboard-home .spec-card small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink-2);
  line-height: 16px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.dashboard-home .record-list {
  gap: 10px;
}

.dashboard-home .record-row {
  grid-template-columns: minmax(0, 1fr) 150px;
  min-height: 72px;
  padding: 14px 16px;
}

.dashboard-home .record-row.dense {
  min-height: 78px;
}

.dashboard-home .record-row strong,
.dashboard-home .record-row span,
.dashboard-home .record-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-home .record-row strong {
  color: var(--ink);
}

.dashboard-home .record-row small {
  color: var(--ink-2);
  line-height: 1.45;
}

.dashboard-home .record-meta {
  min-width: 150px;
  display: grid;
  justify-items: end;
  grid-gap: 6px;
  gap: 6px;
  text-align: right;
}

.dashboard-home .record-meta em {
  min-width: 52px;
  justify-content: center;
}

.dashboard-home .record-meta span {
  margin-top: 0;
  color: var(--ink);
  font-weight: 800;
}

.dashboard-home .panel a,
.dashboard-home .dashboard-chain-node,
.dashboard-home .record-row {
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.dashboard-home .panel a:hover,
.dashboard-home .dashboard-chain-node:hover,
.dashboard-home .record-row:hover {
  border-color: var(--brand-300);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.08);
  transform: translateY(-1px);
}

@media (max-width: 1440px) {
  .dashboard-home .dashboard-chain-rail {
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
    overflow-x: visible;
    padding-bottom: 0;
  }
}

@media (max-width: 1280px) {
  .dashboard-home .dashboard-grid > .panel-wide,
  .dashboard-home .workbench-grid > .panel-wide,
  .dashboard-home .dashboard-grid > .panel:not(.panel-wide),
  .dashboard-home .workbench-grid > .panel:not(.panel-wide) {
    grid-column: span 12;
  }

  .dashboard-home .tenant-start-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .dashboard-home .tenant-start-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-home .record-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-home .record-meta {
    min-width: 0;
    justify-items: start;
    text-align: left;
  }
}

.pipeline-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pipeline-card strong {
  display: block;
  margin-top: 8px;
  font-size: 28px;
}

.pipeline-card small {
  display: block;
  margin-top: 4px;
  color: var(--c-success-ink);
}

.table-wrap {
  overflow: auto;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

.business-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  background: var(--surface);
}

.business-table th,
.business-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--surface-soft);
  vertical-align: top;
}

.business-table th {
  color: var(--ink-2);
  background: var(--surface-sunk);
  font-size: 13px;
}

.business-table tr:last-child td {
  border-bottom: 0;
}

.business-table td strong,
.business-table td span {
  display: block;
}

.business-table td span {
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 13px;
}

.quotation-layout {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  grid-gap: 12px;
  gap: 12px;
}

.quotation-view-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-soft);
}

.quotation-view-switch button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  min-width: 180px;
  border: 0;
  background: var(--surface);
  padding: 10px 14px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.quotation-view-switch button.active {
  background: var(--ink);
}

.quotation-view-switch span,
.quotation-view-switch small {
  display: block;
}

.quotation-view-switch span {
  color: var(--ink);
  font-weight: 800;
}

.quotation-view-switch small {
  margin-top: 3px;
  color: var(--ink-2);
  font-size: 12px;
}

.quotation-view-switch button.active span,
.quotation-view-switch button.active small {
  color: var(--ink-inverse);
}

.quotation-workspace-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-top: 12px;
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-sunk);
}

.quotation-workspace-nav a {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  min-height: 58px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 10px;
  color: var(--ink);
  text-decoration: none;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease;
}

.quotation-workspace-nav a:hover {
  border-color: var(--hairline-strong);
  background: var(--surface);
}

.quotation-workspace-nav a.active {
  border-color: var(--brand-300);
  background: var(--brand-50);
  color: var(--brand-600);
}

.quotation-workspace-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.quotation-workspace-nav a.active .quotation-workspace-icon {
  color: var(--brand-500);
  box-shadow: inset 0 0 0 1px var(--brand-200);
}

.quotation-workspace-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quotation-workspace-nav strong,
.quotation-workspace-nav small {
  display: block;
}

.quotation-workspace-nav strong {
  overflow: hidden;
  color: inherit;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quotation-workspace-nav small {
  overflow: hidden;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quotation-workspace-nav a.active small {
  color: var(--brand-500);
}

.quotation-dashboard-view,
.quotation-list-view {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
  margin-top: 14px;
}

.quotation-notice-stack {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 14px;
}

.quotation-notice-stack .notice-bar {
  margin: 0;
}

.quotation-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.quotation-section-head p {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.quotation-summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 1px;
  gap: 1px;
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--hairline);
  box-shadow: var(--shadow-soft);
}

.quotation-summary-item {
  min-width: 0;
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  align-content: start;
  border-top: 3px solid transparent;
  background: var(--surface);
  padding: 12px 14px;
}

/* KPI strip accent收口到 token 调色板:中性/正向 = 钢蓝,只有风险态(warning/danger)才出暖色,
   避免一排 KPI 蓝/青/橙/红的"色带"。teal(var(--cyan-500))不在 steel-blue+copper-gold token 内,统一为钢蓝。 */
.quotation-summary-item.tone-info {
  border-top-color: var(--brand-700);
}

.quotation-summary-item.tone-success {
  border-top-color: var(--brand-700);
}

.quotation-summary-item.tone-warning {
  border-top-color: var(--accent-500);
}

.quotation-summary-item.tone-danger {
  border-top-color: #dc2626;
}

.quotation-summary-item span {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-summary-item strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.quotation-summary-item small {
  overflow: hidden;
  color: var(--ink-2);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
  list-style: none;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-600);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 800;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.quotation-more > summary::-webkit-details-marker {
  display: none;
}

.quotation-more > summary::before {
  content: "▸";
  font-size: 11px;
  transition: transform 150ms ease;
}

.quotation-more[open] > summary::before {
  transform: rotate(90deg);
}

.quotation-more[open] > summary {
  margin-bottom: 12px;
}

.quotation-dashboard-filters {
  margin-top: 0;
}

.quotation-dashboard-filter-grid,
.quotation-quality-grid,
.quotation-dashboard-two-column,
.quotation-mini-metrics,
.quotation-action-center-grid,
.quotation-risk-reason-grid {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.quotation-dashboard-filter-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quotation-quality-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.quotation-quality-card,
.quotation-mini-metric,
.quotation-action-card {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.quotation-quality-card,
.quotation-mini-metric {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  border-left: 4px solid var(--hairline-strong);
}

.quotation-quality-card.tone-info,
.quotation-mini-metric.tone-info {
  border-left-color: var(--brand-500);
}

.quotation-quality-card.tone-success,
.quotation-mini-metric.tone-success {
  border-left-color: var(--cyan-500);
}

.quotation-quality-card.tone-warning,
.quotation-mini-metric.tone-warning {
  border-left-color: var(--c-warning);
}

.quotation-quality-card.tone-danger,
.quotation-mini-metric.tone-danger {
  border-left-color: var(--c-danger);
}

.quotation-quality-card span,
.quotation-quality-card small,
.quotation-mini-metric span,
.quotation-mini-metric small,
.quotation-action-card span,
.quotation-action-card small,
.quotation-risk-reason-grid span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-quality-card strong,
.quotation-mini-metric strong,
.quotation-action-card strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.15;
}

.quotation-dashboard-two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quotation-mini-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quotation-risk-reason-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quotation-risk-reason-grid span {
  border: 1px solid var(--accent-200);
  border-radius: 999px;
  background: var(--accent-50);
  color: var(--accent-700);
  padding: 8px 10px;
  text-align: center;
}

.quotation-action-center-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.quotation-action-card {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.quotation-action-card:hover {
  border-color: var(--brand-300);
  transform: translateY(-1px);
}

.quotation-action-card em {
  color: var(--brand-600);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.quotation-action-card.tone-success {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.quotation-action-card.tone-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.quotation-action-card.tone-danger {
  border-color: var(--c-danger-border);
  background: var(--surface);
}

.bid-dashboard-filters {
  margin-top: 0;
}

.bid-dashboard-filter-grid,
.bid-guide-actions,
.bid-decision-grid,
.bid-dashboard-two-column,
.bid-timeline-list,
.bid-readiness-grid,
.bid-competitor-grid,
.bid-risk-grid,
.bid-action-grid,
.bid-lost-reasons {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.bid-dashboard-filter-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bid-empty-guide .quotation-section-head {
  margin-bottom: 0;
}

.bid-guide-actions {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
}

.bid-guide-actions span {
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  background: var(--surface);
  color: var(--brand-600);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.bid-decision-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bid-decision-card,
.bid-readiness-card,
.bid-timeline-row,
.bid-competitor-grid article,
.bid-risk-card,
.bid-action-card {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.bid-decision-card,
.bid-action-card {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.bid-decision-card:hover,
.bid-action-card:hover {
  border-color: var(--brand-300);
  transform: translateY(-1px);
}

.bid-decision-card.tone-success,
.bid-action-card.tone-success,
.bid-readiness-card.tone-success,
.bid-risk-card.tone-success {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.bid-decision-card.tone-warning,
.bid-action-card.tone-warning,
.bid-readiness-card.tone-warning,
.bid-risk-card.tone-warning,
.bid-timeline-row.tone-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.bid-decision-card.tone-danger,
.bid-action-card.tone-danger,
.bid-readiness-card.tone-danger,
.bid-risk-card.tone-danger,
.bid-timeline-row.tone-danger {
  border-color: var(--c-danger-border);
  background: var(--surface);
}

.bid-decision-card span,
.bid-decision-card small,
.bid-decision-card dt,
.bid-readiness-card span,
.bid-readiness-card small,
.bid-timeline-row span,
.bid-timeline-row small,
.bid-competitor-grid span,
.bid-competitor-grid small,
.bid-risk-card p,
.bid-action-card span,
.bid-action-card small,
.bid-lost-reasons span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.bid-decision-card strong,
.bid-readiness-card strong,
.bid-timeline-row strong,
.bid-competitor-grid strong,
.bid-action-card strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.25;
}

.bid-decision-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin: 0;
}

.bid-decision-card dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.bid-dashboard-two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bid-timeline-list {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.bid-timeline-row {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  border-top: 3px solid var(--brand-500);
}

.bid-timeline-row em {
  color: var(--brand-600);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.bid-readiness-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bid-readiness-card {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  border-left: 4px solid var(--brand-500);
}

.bid-readiness-card.tone-success {
  border-left-color: var(--cyan-500);
}

.bid-readiness-card.tone-warning {
  border-left-color: var(--c-warning);
}

.bid-readiness-card.tone-danger {
  border-left-color: var(--c-danger);
}

.bid-competitor-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bid-competitor-grid article {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.bid-lost-reasons {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 12px;
}

.bid-lost-reasons span {
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  padding: 7px 9px;
  text-align: center;
}

.bid-risk-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bid-risk-card {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.bid-risk-card header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
}

.bid-risk-card header strong {
  color: var(--ink);
  font-size: 14px;
}

.bid-risk-card header span,
.bid-risk-card em {
  border-radius: 999px;
  background: var(--accent-50);
  color: var(--accent-700);
  padding: 4px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.bid-risk-card p {
  margin: 0;
}

.bid-action-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.finance-analysis-filters {
  margin-top: 0;
}

.finance-filter-grid,
.finance-metric-grid,
.finance-milestone-grid,
.finance-two-column,
.finance-action-grid {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

/* Consolidated "经营分析" tabbed panel: folds 5 scattered metric grids into one. */
.finance-analysis-head {
  flex-wrap: wrap;
  gap: 10px;
}

.finance-analysis-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  background: var(--surface-sunk);
}

.finance-analysis-tabs button {
  min-height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-2);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.finance-analysis-tabs button:hover {
  color: var(--brand-600);
}

.finance-analysis-tabs button.active {
  background: var(--surface);
  color: var(--brand-600);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

/* 报价分析: lifecycle flow folded into the chain cockpit as a divided sub-block. */
.quotation-chain-lifecycle {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--hairline);
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.quotation-chain-lifecycle .module-title {
  font-size: 13px;
}

/* C/P0-3: 跨页 KPI/指标数字统一 tabular-nums,列对齐、刷新不跳动。 */
.kpi-card p,
.kpi-card strong,
.tenant-health-card strong,
.business-check-card strong,
.flow-step strong,
.user-overview-stats strong,
.finance-project-row span,
.budget-project-row span {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* Bottom row: project cashflow table beside the risk queue. */
.finance-bottom-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

@media (max-width: 1180px) {
  .finance-bottom-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.finance-bottom-grid > .finance-bottom-panel {
  min-width: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 0;
}

.finance-bottom-panel .module-title {
  flex: 0 0 auto;
}

.finance-bottom-panel .quotation-section-head {
  flex: 0 0 auto;
}

.finance-filter-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.finance-aging-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.finance-metric-card,
.finance-milestone-card,
.finance-action-card {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.finance-metric-card,
.finance-milestone-card {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  border-left: 4px solid var(--brand-500);
}

/* Calm palette: keep semantic accent on the 4px left-border only; cards stay white
   so a grid of mixed tones reads as one ordered system, not a color band. */
.finance-metric-card.tone-success,
.finance-milestone-card.tone-success,
.finance-action-card.tone-success {
  border-left-color: var(--cyan-600);
}

.finance-metric-card.tone-warning,
.finance-milestone-card.tone-warning,
.finance-action-card.tone-warning {
  border-left-color: var(--accent-500);
}

.finance-metric-card.tone-danger,
.finance-milestone-card.tone-danger,
.finance-action-card.tone-danger {
  border-left-color: #dc2626;
}

.finance-metric-card.tone-danger strong,
.finance-milestone-card.tone-danger strong {
  color: var(--c-danger-ink);
}

.finance-metric-card span,
.finance-metric-card small,
.finance-milestone-card span,
.finance-milestone-card small,
.finance-milestone-card dt,
.finance-action-card span,
.finance-action-card small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.finance-metric-card strong,
.finance-milestone-card strong,
.finance-action-card strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.15;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* 应收分析顶部金额条:计数 chip(24px)装大额 ¥ 会被裁,这里缩到 18px 让金额单行完整显示。
   仅作用于本页金额条,不动其它页用 .quotation-summary-item 装计数(24px 正合适)。 */
.finance-money-strip .quotation-summary-item strong {
  font-size: 18px;
  letter-spacing: -0.01em;
}

.finance-milestone-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.finance-milestone-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin: 0;
}

.finance-milestone-card dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.finance-project-table {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
}

.finance-project-row {
  display: grid;
  grid-template-columns:
    minmax(160px, 1.4fr)
    repeat(3, minmax(92px, 0.9fr))
    minmax(58px, 0.55fr)
    minmax(108px, 1fr)
    minmax(72px, 0.65fr);
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
  min-width: 720px;
  border-bottom: 1px solid var(--surface-soft);
  padding: 11px 12px;
}

.finance-project-row:last-child {
  border-bottom: 0;
}

.finance-project-head {
  color: var(--brand-800);
  background: var(--surface-sunk);
  font-size: 12px;
  font-weight: 800;
}

.finance-project-row strong {
  color: var(--ink);
  font-size: 13px;
}

.finance-project-row span {
  color: var(--ink-2);
  font-size: 13px;
  white-space: nowrap;
}

.finance-project-row em {
  justify-self: start;
  white-space: nowrap;
  border-radius: 999px;
  padding: 4px 9px;
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.finance-project-row.tone-danger em {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

.finance-project-row.tone-warning em {
  background: var(--accent-50);
  color: var(--accent-600);
}

.finance-project-row.tone-success em {
  background: var(--c-success-soft);
  color: var(--c-success-ink);
}

.finance-two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.finance-two-column .finance-metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.finance-risk-panel .record-list {
  flex: 1 1 auto;
  min-height: 0;
}

.finance-action-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.finance-action-card {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.finance-action-card:hover,
.quotation-summary-item:hover {
  border-color: var(--brand-300);
  transform: translateY(-1px);
}

.quotation-list-shell {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.quotation-list-status-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.quotation-list-status-chip {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: grid;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.quotation-list-status-chip span,
.quotation-list-status-chip small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.quotation-list-status-chip strong {
  margin: 5px 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.quotation-list-status-chip.active {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.quotation-list-status-chip.tone-warning.active {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.quotation-list-status-chip.tone-danger.active {
  border-color: var(--c-danger-border);
  background: var(--c-danger-soft);
}

.quotation-list-status-chip.tone-success.active {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.quotation-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 0;
  margin-bottom: 10px;
}

.quotation-list-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.quotation-list-toolbar-group + .quotation-list-toolbar-group {
  padding-left: 16px;
  border-left: 1px solid var(--hairline);
}

/* 列设置靠左、操作组靠右（用户约定）。order:-1 把列设置排到最前，margin-right:auto 把其余推到右侧。 */
.quotation-list-toolbar-spacer {
  order: -1;
  margin-right: auto;
  padding-left: 0;
  border-left: none;
  color: var(--ink-2);
  font-size: 12px;
}

/* 视觉重排后，第一个操作组（录入）不再需要左分隔线。 */
.quotation-list-toolbar-spacer + .quotation-list-toolbar-group {
  padding-left: 0;
  border-left: none;
}

.quotation-task-table-block {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.quotation-task-table-block.is-empty {
  min-height: 660px;
  align-content: start;
}

.quotation-task-table-head {
  align-items: center;
  gap: 16px;
}

.quotation-task-table-head > div:first-child {
  min-width: 180px;
}

.quotation-task-heading {
  min-width: 360px;
}

.quotation-task-title-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  min-width: 0;
}

.quotation-task-section-head > .quotation-task-title-line {
  align-items: center;
}

.quotation-task-title-line .module-title {
  display: block;
  margin: 0;
  min-height: 0;
  line-height: 1.18;
  white-space: nowrap;
}

.quotation-task-title-line .muted-text {
  display: block;
  min-height: 0;
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.18;
  white-space: nowrap;
}

.quotation-task-header-tools {
  display: flex;
  flex-wrap: nowrap; /* 禁止换行:搜索框可收缩、控件固定,始终单行 */
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  min-width: 0;
}

/* 队列表工具条（WorkbenchQueueTable，任意页面，不限 .quotation-cockpit）统一 flex 右对齐：
   搜索 →〔日期〕→ 列设置 → N条 贴右、等高、间距一致；不再落进报价工作台 4 列(含日期)grid 的
   空日期列里导致搜索框过宽、列设置/条数位置发飘。搜索框收成合理定宽。 */
.quotation-task-header-tools.quotation-queue-tools {
  display: flex;
  grid-template-columns: none;
  flex-wrap: nowrap; /* 禁止换行:N条/列设置不再掉到第二行 */
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  /* 工具条吃掉标题之外的全部剩余宽度，避免内容放得下却被挤得内部换行(N条掉到第二行)。 */
  flex: 1 1 auto;
  min-width: 0;
}

/* 标题只占自身内容宽度、不与工具条抢空间,且不被压缩到换行(标题 nowrap + 不收缩)。 */
.document-section-head.quotation-task-table-head .quotation-task-heading {
  flex: 0 0 auto;
  min-width: 0;
}

/* 搜索框定基 200px、不增长(避免吃掉空间把「N条」挤换行)、必要时可收到 150px。 */
.quotation-task-header-tools.quotation-queue-tools .quotation-filter-field-keyword {
  flex: 0 1 200px;
  min-width: 150px;
  max-width: 240px;
  width: auto;
}

.quotation-task-header-tools.quotation-queue-tools .quotation-filter-field {
  align-self: center;
}

/* 列设置 / N条 下拉不参与收缩、不换行，始终贴在工具条最右。 */
.quotation-task-header-tools.quotation-queue-tools .quotation-task-dropdown {
  flex: 0 0 auto;
}

/* 工具条里所有控件等高（34px），让搜索框、下拉与日期控件在一条基线上。 */
.quotation-task-header-tools.quotation-queue-tools .quotation-filter-field input,
.quotation-task-header-tools.quotation-queue-tools .quotation-filter-field select,
.quotation-task-header-tools.quotation-queue-tools .quotation-task-dropdown summary {
  height: 34px;
}

/* 工具条内置「日期范围」筛选(开始 ~ 结束)，放在搜索之后、列设置之前。 */
.quotation-task-header-tools .quotation-filter-field-date {
  display: flex;
  align-items: center;
  gap: 6px;
}

.quotation-filter-field-date input[type="date"] {
  width: 120px;
  height: 34px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 8px;
  font-family: var(--ui-font-family-base, var(--font-sans));
  font-size: 13px;
  font-weight: 650;
}

.quotation-date-range-sep {
  color: var(--ink-3);
  font-size: 13px;
}

.business-queue-header-tools {
  flex: 1 1 980px;
}

.business-queue-header-tools-compact {
  flex: 1 1 760px;
}

.quotation-filter-field {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  min-width: 0;
}

.quotation-filter-field-keyword {
  flex: 1 1 260px;
  width: min(28vw, 320px);
}

.quotation-task-header-tools > .quotation-filter-field:not(.quotation-filter-field-keyword) {
  flex: 0 0 180px;
}

.quotation-task-header-tools > .inline-actions {
  flex: 0 0 auto;
  min-width: max-content;
}

.quotation-filter-field span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
}

.quotation-filter-field input,
.quotation-filter-field select {
  width: 100%;
  height: 34px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 10px;
  font-family: var(--ui-font-family-base, var(--font-sans));
  font-size: 13px;
  font-weight: 650;
}

.quotation-date-range-filter {
  position: relative;
  display: grid;
  align-items: center;
  flex: 0 0 330px;
  min-width: 300px;
  max-width: 100%;
}

.quotation-date-range-filter.is-disabled {
  min-width: 240px;
}

.quotation-date-range-trigger {
  display: grid;
  grid-template-columns: minmax(88px, 1fr) auto minmax(88px, 1fr) 18px;
  width: 100%;
  height: 40px;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 10px;
  font-family: var(--ui-font-family-base, var(--font-sans));
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.quotation-date-range-trigger span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

.quotation-date-range-trigger em {
  color: var(--ink-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  line-height: 1;
}

.quotation-date-range-trigger svg {
  width: 16px;
  height: 16px;
  stroke: var(--ink-2);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quotation-date-range-trigger:hover,
.quotation-date-range-trigger:focus-visible {
  border-color: var(--brand-300);
  background: var(--surface);
  outline: 0;
}

.date-field {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  min-width: 0;
}

.date-field-label {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.2;
}

.date-input-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  width: 100%;
  min-width: 0;
  height: 40px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
}

.date-input-shell:focus-within {
  border-color: var(--brand-300);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.date-text-input {
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0 10px;
  font-family: var(--ui-font-family-base, var(--font-sans));
  font-size: 13px;
  font-weight: 850;
  outline: 0;
}

.date-text-input::placeholder {
  color: var(--ink-3);
  font-weight: 750;
}

.native-date-picker {
  position: absolute;
  inset: auto 0 0 auto;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.date-picker-button {
  display: inline-grid;
  width: 34px;
  height: 100%;
  place-items: center;
  border: 0;
  border-left: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}

.date-picker-button:hover,
.date-picker-button:focus-visible {
  background: var(--brand-50);
  color: var(--brand-500);
  outline: 0;
}

.date-picker-button svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.date-field:has(:disabled) {
  opacity: 0.72;
}

.date-field:has(:disabled) .date-input-shell {
  background: var(--surface-sunk);
}

.date-field:has(:disabled) .date-picker-button {
  cursor: not-allowed;
}

.quotation-date-range-filter.is-disabled .quotation-date-range-trigger {
  cursor: not-allowed;
  opacity: 0.72;
}

.quotation-date-range-filter.is-disabled .quotation-date-range-trigger:hover {
  border-color: var(--hairline);
  background: var(--surface);
}

.quotation-date-range-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: min(720px, calc(100vw - 80px));
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
}

.quotation-date-range-popover::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 142px;
  width: 12px;
  height: 12px;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
  background: var(--surface);
  transform: rotate(45deg);
}

.quotation-date-range-toolbar {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  align-items: center;
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 10px;
}

.quotation-date-range-toolbar button {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 20px;
  font-weight: 800;
  cursor: pointer;
}

.quotation-date-range-toolbar span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.quotation-date-range-calendars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 16px;
  gap: 16px;
}

.quotation-date-range-calendar {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  min-width: 0;
}

.quotation-date-range-calendar > strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}

.quotation-date-range-weekdays,
.quotation-date-range-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.quotation-date-range-weekdays span {
  display: grid;
  height: 28px;
  place-items: center;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 850;
}

.quotation-date-range-days button {
  position: relative;
  z-index: 0;
  display: grid;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--ui-font-family-base, var(--font-sans));
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.quotation-date-range-empty-day {
  display: block;
  height: 34px;
}

.quotation-date-range-days button:hover {
  background: var(--brand-50);
  color: var(--brand-600);
}

.quotation-date-range-days button.is-outside {
  color: var(--hairline-strong);
}

.quotation-date-range-days button.is-in-range {
  background: transparent;
  color: var(--ink);
}

.quotation-date-range-days button.is-in-range::before {
  content: none;
}

.quotation-date-range-days button.is-in-range:not(.is-start):not(.is-end) {
  background: var(--brand-50);
}

.quotation-date-range-days button.is-start,
.quotation-date-range-days button.is-end {
  border-radius: 7px;
  background: var(--brand-500);
  color: var(--ink-inverse);
  font-weight: 900;
}

.quotation-task-dropdown {
  position: relative;
  align-self: center;
  flex: 0 0 auto;
}

.quotation-task-dropdown summary {
  display: inline-flex;
  min-width: 88px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brand-200);
  border-radius: 8px;
  background: var(--brand-50);
  color: var(--brand-600);
  padding: 0 12px;
  font-family: var(--ui-font-family-base, var(--font-sans));
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.quotation-task-dropdown summary::-webkit-details-marker {
  display: none;
}

.quotation-task-dropdown summary::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 8px;
  border-top: 5px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.quotation-task-dropdown[open] summary {
  border-color: var(--brand-500);
  background: var(--brand-100);
}

.quotation-task-dropdown > div {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: grid;
  min-width: 136px;
  grid-gap: 4px;
  gap: 4px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 6px;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
}

.quotation-task-dropdown button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  min-height: 32px;
  align-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-2);
  padding: 0 8px;
  font-family: var(--ui-font-family-base, var(--font-sans));
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.quotation-task-dropdown button span {
  color: var(--brand-500);
  font-weight: 900;
}

.quotation-task-dropdown button.active,
.quotation-task-dropdown button:hover {
  background: var(--brand-50);
  color: var(--brand-600);
}

.quotation-task-pagination button {
  min-height: 32px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-2);
  padding: 0 10px;
  font-family: var(--ui-font-family-base, var(--font-sans));
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.quotation-task-pagination button.active {
  border-color: var(--brand-300);
  background: var(--brand-50);
  color: var(--brand-800);
}

.quotation-task-pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.quotation-task-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink-2);
  font-family: var(--ui-font-family-base, var(--font-sans));
  font-size: 12px;
  font-weight: 750;
}

.quotation-task-pagination div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* 分页按钮接入 <Button>/.btn 原语：覆盖 .btn 默认高度/字重，保留原分页观感（与 WorkbenchQueueTable 原生分页一致） */
.quotation-task-pagination .btn {
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 850;
}

.quotation-task-pagination .btn.active {
  border-color: var(--brand-300);
  background: var(--brand-50);
  color: var(--brand-800);
}

.quotation-task-pagination .btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.quotation-task-footer {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin: 0 -32px -24px;
  /* 顶到容器底部：内容短时也贴在页面最下面，而不是停在中间。 */
  margin-top: auto;
  border-top: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink-2);
  padding: 0 16px;
  font-family: var(--ui-font-family-base, var(--font-sans));
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.business-list-breathing-footer {
  min-height: 48px;
  gap: 0;
  margin: auto -32px -24px;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink-2);
  padding: 0 16px;
  box-shadow: none;
  letter-spacing: 0;
}

.business-list-breathing-footer::before {
  content: none;
}

.business-list-breathing-footer span + span::before {
  content: "·";
  margin: 0 10px 0 0;
  color: var(--hairline-strong);
}

@media (max-width: 760px) {
  .business-list-breathing-footer {
    min-height: 48px;
    margin: auto -24px -24px;
    padding: 0 12px;
  }
}

.app-shell .content:has(.report-analysis-footer),
.app-shell .content:has(.business-list-breathing-footer),
.app-shell .content:has(.compact-copyright-footer) {
  display: flex;
  flex-direction: column;
}

.report-analysis-footer.quotation-task-footer.business-list-breathing-footer,
.compact-copyright-footer,
.quotation-task-footer.business-list-breathing-footer.compact-copyright-footer,
.ac-breathing-footer.compact-copyright-footer,
.cw-breathing-footer.compact-copyright-footer,
.hrw-breathing-footer.compact-copyright-footer,
.sw-breathing-footer.compact-copyright-footer {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-height: 48px;
  margin: auto -32px -24px;
  margin-top: auto;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink-2);
  padding: 0 16px;
  box-shadow: none;
  font-family: var(--ui-font-family-base, var(--font-sans));
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-align: center;
  gap: 0;
}

.report-analysis-footer.business-list-breathing-footer::before,
.compact-copyright-footer::before,
.ac-breathing-footer.compact-copyright-footer::before,
.cw-breathing-footer.compact-copyright-footer::before,
.hrw-breathing-footer.compact-copyright-footer::before,
.sw-breathing-footer.compact-copyright-footer::before {
  content: none;
}

.report-analysis-footer.business-list-breathing-footer span + span::before,
.compact-copyright-footer span + span::before {
  content: "·";
  margin: 0 8px;
  color: var(--ink-3);
}

@media (max-width: 760px) {
  .report-analysis-footer.quotation-task-footer.business-list-breathing-footer,
  .compact-copyright-footer,
  .quotation-task-footer.business-list-breathing-footer.compact-copyright-footer,
  .ac-breathing-footer.compact-copyright-footer,
  .cw-breathing-footer.compact-copyright-footer,
  .hrw-breathing-footer.compact-copyright-footer,
  .sw-breathing-footer.compact-copyright-footer {
    min-height: 48px;
    max-width: none;
    margin: auto -24px -24px;
    padding: 0 12px;
  }
}

.quotation-horizontal-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: auto;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  scrollbar-gutter: stable;
}

.quotation-task-table-block.is-empty .quotation-horizontal-table {
  min-height: 380px;
}

.quotation-compare-matrix {
  min-width: 760px;
}

.quotation-compare-matrix td:first-child strong {
  display: block;
  overflow: hidden;
  max-width: 300px;
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quotation-compare-matrix td:first-child span {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 12px;
}

.quotation-cost-compare-matrix {
  min-width: 1040px;
}

.quotation-cost-compare-matrix th,
.quotation-cost-compare-matrix td {
  vertical-align: top;
}

.quotation-cost-compare-matrix th:first-child,
.quotation-cost-compare-matrix td:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
}

.quotation-cost-compare-matrix th:nth-child(2),
.quotation-cost-compare-matrix td:nth-child(2) {
  position: -webkit-sticky;
  position: sticky;
  left: 58px;
  z-index: 1;
  min-width: 220px;
  background: var(--surface);
}

.quotation-cost-compare-matrix th:first-child,
.quotation-cost-compare-matrix th:nth-child(2) {
  z-index: 2;
  background: var(--surface-sunk);
}

.quotation-cost-compare-matrix td:nth-child(2) strong,
.quotation-cost-compare-matrix td:nth-child(2) span,
.quotation-cost-compare-matrix td:nth-child(2) small {
  display: block;
}

.quotation-cost-compare-matrix td:nth-child(2) strong {
  max-width: 220px;
  overflow: hidden;
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quotation-cost-compare-matrix td:nth-child(2) span,
.quotation-cost-compare-matrix td:nth-child(2) small {
  margin-top: 3px;
  color: var(--ink-2);
  font-size: 12px;
}

.quotation-cost-compare-matrix .is-selected-brand {
  background: var(--surface-sunk);
}

.quotation-cost-compare-matrix tr.is-comprehensive-bundle td {
  background: var(--surface);
}

.quotation-cost-compare-matrix tr.is-comprehensive-bundle td:first-child,
.quotation-cost-compare-matrix tr.is-comprehensive-bundle td:nth-child(2) {
  background: var(--surface);
}

.quotation-cost-compare-matrix tr.is-comprehensive-child td {
  background: var(--surface);
  border-top-color: var(--surface-soft);
}

.quotation-cost-compare-matrix tr.is-comprehensive-child td:first-child,
.quotation-cost-compare-matrix tr.is-comprehensive-child td:nth-child(2) {
  background: var(--surface);
}

.quotation-compare-item-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-gap: 8px;
  gap: 8px;
  align-items: start;
}

.quotation-compare-item-title > div {
  min-width: 0;
}

.quotation-compare-expand {
  width: 28px;
  height: 28px;
  border-color: var(--brand-200);
  background: var(--brand-50);
  color: var(--brand-600);
  font-weight: 900;
}

.quotation-compare-child-line,
.quotation-compare-child-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  color: var(--brand-500);
  font-size: 12px;
  font-weight: 900;
}

.quotation-compare-child-badge {
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--brand-50);
  padding: 3px 7px;
}

.quotation-compare-row-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.quotation-compare-row-select input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.quotation-compare-bundle-parts {
  max-width: 220px;
  white-space: normal !important;
}

.quotation-compare-ungroup {
  margin-top: 6px;
}

.quotation-compare-group-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.quotation-compare-group-actions input,
.quotation-compare-group-actions select {
  min-height: 34px;
  min-width: 138px;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  padding: 6px 10px;
}

.quotation-compare-group-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--brand-200);
  border-radius: 10px;
  background: var(--brand-50);
  color: var(--brand-800);
  font-size: 13px;
}

.quotation-compare-group-panel strong {
  color: var(--ink);
}

.quotation-brand-metric {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  min-width: 138px;
}

.quotation-brand-metric strong {
  color: var(--ink);
  font-size: 13px;
}

.quotation-simulation-price-editor {
  align-items: center;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  grid-template-columns: minmax(104px, 1fr) auto;
}

.quotation-simulation-price-editor input {
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  min-height: 32px;
  min-width: 0;
  padding: 5px 8px;
  text-align: right;
}

.quotation-simulation-price-editor input:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
  outline: none;
}

.quotation-simulation-price-editor input:disabled {
  background: var(--surface-sunk);
  color: var(--ink-2);
}

.quotation-brand-metric span {
  color: var(--c-success-ink);
  font-size: 12px;
  font-weight: 700;
}

.quotation-brand-metric .quotation-brand-metric-coefficient {
  color: var(--ink);
}

.quotation-brand-metric small {
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.35;
}

.quotation-quote-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  align-items: start;
  grid-gap: 12px;
  gap: 12px;
}

.quotation-quote-list-table tbody tr {
  cursor: pointer;
}

.quotation-quote-list-table tbody tr.is-compare-selected td {
  background: color-mix(in srgb, var(--brand-50) 72%, var(--surface));
}

.quotation-quote-list-table tbody tr.is-compare-selected td:first-child {
  box-shadow: inset 3px 0 0 var(--brand-500);
}

.quotation-quote-compare-aside {
  position: -webkit-sticky;
  position: sticky;
  top: 12px;
  min-width: 0;
}

.quotation-quote-compare-aside-card,
.quotation-quote-compare-empty {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.quotation-quote-compare-aside-card {
  overflow: hidden;
}

.quotation-quote-compare-aside-head {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  border-bottom: 1px solid var(--hairline);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-50) 78%, var(--surface)) 0%, var(--surface) 100%);
  padding: 12px 14px;
}

.quotation-quote-compare-aside-head span {
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 900;
}

.quotation-quote-compare-aside-head strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.quotation-quote-compare-aside-head small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}

.quotation-quote-brand-stack {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  padding: 10px;
}

.quotation-quote-brand-stack .quotation-quote-brand-card {
  border-radius: 10px;
  padding: 10px;
}

.quotation-quote-compare-empty {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  min-height: 136px;
  place-content: center;
  padding: 16px;
  text-align: center;
}

.quotation-quote-compare-empty strong {
  color: var(--ink);
}

.quotation-quote-compare-empty span {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}

.quotation-quote-compare-inline-row > td {
  padding: 0 !important;
  background: var(--surface-sunk);
}

.quotation-quote-compare-panel {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--hairline);
  background: linear-gradient(180deg, var(--surface-sunk) 0%, var(--surface) 100%);
}

.quotation-quote-compare-panel-head,
.quotation-quote-compare-panel-meta,
.quotation-quote-brand-card header {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.quotation-quote-compare-panel-head {
  justify-content: space-between;
  gap: 12px;
}

.quotation-quote-compare-panel-head strong,
.quotation-quote-brand-card strong {
  color: var(--ink);
}

.quotation-quote-compare-panel-meta {
  margin-top: 4px;
  flex-wrap: wrap;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.quotation-quote-compare-panel-spec {
  font-style: normal;
  color: var(--ink-3);
}

.quotation-quote-brand-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(210px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.quotation-quote-brand-card {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.quotation-quote-brand-card.is-selected-brand {
  border-color: var(--brand-300);
  background: linear-gradient(180deg, var(--brand-50) 0%, var(--surface) 100%);
  box-shadow: inset 3px 0 0 var(--brand-500);
}

.quotation-quote-brand-card header {
  justify-content: space-between;
}

.quotation-quote-brand-card header span {
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 7px;
  white-space: nowrap;
}

.quotation-quote-brand-card.is-selected-brand header span {
  background: var(--brand-100);
  color: var(--brand-700);
}

.quotation-quote-brand-card .quotation-brand-metric {
  min-width: 0;
}

.quotation-cockpit .quotation-quote-workspace {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.quotation-cockpit .quotation-quote-list-table tbody tr.is-compare-selected td {
  background: #eef6ff;
}

.quotation-cockpit .quotation-quote-list-table tbody tr.is-compare-selected td.first-column {
  box-shadow:
    inset 4px 0 0 #0f72c9,
    10px 0 14px rgba(15, 23, 42, 0.06);
}

.quotation-cockpit .quotation-quote-compare-aside {
  position: static;
  top: auto;
  min-width: 0;
}

.quotation-cockpit .quotation-quote-inline-compare-row > td {
  padding: 0;
  border-top: 0;
  background: #ffffff;
}

.quotation-cockpit .brand-compare-panel {
  margin: 0 12px 10px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #f8fafc;
  padding: 10px 12px 12px;
}

.quotation-cockpit .brand-compare-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.quotation-cockpit .brand-compare-title {
  color: #1f2937;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.4;
}

.quotation-cockpit .brand-compare-subtitle {
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  line-height: 1.35;
}

.quotation-cockpit .brand-compare-collapse {
  min-height: 28px;
  padding: 4px 10px;
}

.quotation-cockpit .brand-compare-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  border-radius: 999px;
  background: #eef6ff;
  padding: 4px 10px;
  color: #334155;
  font-size: 13px;
}

.quotation-cockpit .brand-compare-summary strong {
  color: #0f72c9;
  font-weight: 900;
}

.quotation-cockpit .brand-compare-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
}

.quotation-cockpit .brand-compare-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 14px;
}

.quotation-cockpit .brand-compare-table th {
  border-bottom: 1px solid #e5eaf3;
  background: #f1f5f9;
  height: 34px;
  padding: 0 12px;
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
  line-height: 34px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.quotation-cockpit .brand-compare-table th:last-child {
  text-align: center;
}

.quotation-cockpit .brand-compare-table td {
  border-bottom: 1px solid #edf2f7;
  padding: 8px 12px;
  color: #334155;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}

.quotation-cockpit .brand-compare-table td:last-child {
  text-align: center;
}

.quotation-cockpit .brand-compare-table tr:last-child td {
  border-bottom: 0;
}

.quotation-cockpit .brand-row.is-current {
  background: #eff6ff;
}

.quotation-cockpit .brand-compare-name {
  color: #16233a;
  font-size: 14px;
  font-weight: 900;
}

.quotation-cockpit .brand-compare-detail-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(96px, 1fr));
  grid-gap: 6px;
  gap: 6px;
  min-width: 312px;
}

.quotation-cockpit .brand-compare-detail-stack > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  border-radius: 6px;
  background: #f6f9fc;
  padding: 5px 8px;
}

.quotation-cockpit .brand-compare-detail-stack small {
  overflow: hidden;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-cockpit .brand-compare-detail-stack strong {
  overflow: hidden;
  color: #16233a;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-cockpit .compare-tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.quotation-cockpit .brand-compare-table .btn {
  min-height: 30px;
  padding: 5px 12px;
  font-size: 13px;
}

.quotation-cockpit .compare-tag-current {
  border-color: #91caff;
  background: #e6f4ff;
  color: #1677ff;
}

.quotation-cockpit .compare-tag-recommend {
  border-color: #86efac;
  background: #dcfce7;
  color: #15803d;
}

.quotation-cockpit .compare-tag-warning {
  border-color: #fcd34d;
  background: #fef3c7;
  color: #b45309;
}

.quotation-cockpit .compare-tag-neutral {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #475569;
}

.quotation-cockpit .margin-success {
  color: #059669;
  font-weight: 900;
}

.quotation-cockpit .margin-warning {
  color: #d97706;
  font-weight: 900;
}

.quotation-cockpit .margin-danger {
  color: #dc2626;
  font-weight: 900;
}

.quotation-cockpit .quotation-quote-total-panel {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 10px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #f8fafc;
  padding: 12px;
}

.quotation-cockpit details.quotation-quote-total-panel:not([open]) {
  gap: 0;
}

.quotation-cockpit details.quotation-quote-total-panel > summary {
  cursor: pointer;
  list-style: none;
}

.quotation-cockpit details.quotation-quote-total-panel > summary::-webkit-details-marker {
  display: none;
}

.quotation-cockpit details.quotation-quote-total-panel > summary::before {
  content: "▾";
  flex: 0 0 auto;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  transform: rotate(-90deg);
  transition: transform 0.16s ease;
}

.quotation-cockpit details.quotation-quote-total-panel[open] > summary::before {
  transform: rotate(0deg);
}

.quotation-cockpit .quotation-quote-total-head,
.quotation-cockpit .quotation-quote-fee-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quotation-cockpit .quotation-quote-total-head > div {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  min-width: 0;
}

.quotation-cockpit .quotation-quote-total-head strong,
.quotation-cockpit .quotation-quote-fee-head strong {
  color: #16233a;
  font-size: 14px;
  font-weight: 900;
}

.quotation-cockpit .quotation-quote-total-head span,
.quotation-cockpit .quotation-quote-fee-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.quotation-cockpit .quotation-quote-total-head .btn.is-active {
  border-color: #91caff;
  background: #e6f4ff;
  color: #1677ff;
}

.quotation-cockpit .quotation-quote-total-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.quotation-cockpit .quotation-quote-total-metrics article {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  border: 1px solid #edf2f7;
  border-radius: 7px;
  background: #ffffff;
  padding: 9px 10px;
}

.quotation-cockpit .quotation-quote-total-metrics span {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.quotation-cockpit .quotation-quote-total-metrics strong {
  color: #16233a;
  font-size: 15px;
  font-weight: 900;
}

.quotation-cockpit .quotation-quote-total-table-wrap {
  overflow-x: auto;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
}

.quotation-cockpit .quotation-quote-total-table,
.quotation-cockpit .quotation-quote-fee-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.quotation-cockpit .quotation-quote-total-table th,
.quotation-cockpit .quotation-quote-fee-table th {
  border-bottom: 1px solid #e5eaf3;
  background: #f1f5f9;
  padding: 7px 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
}

.quotation-cockpit .quotation-quote-total-table td,
.quotation-cockpit .quotation-quote-fee-table td {
  border-bottom: 1px solid #edf2f7;
  padding: 8px 10px;
  color: #334155;
  font-weight: 700;
  white-space: nowrap;
}

.quotation-cockpit .quotation-quote-total-table tr:last-child td,
.quotation-cockpit .quotation-quote-fee-table tr:last-child td {
  border-bottom: 0;
}

.quotation-cockpit .quotation-quote-total-table tr.is-current td {
  background: #eff6ff;
}

.quotation-cockpit .quotation-quote-total-table td:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
}

.quotation-cockpit .quotation-quote-total-table td:first-child strong {
  color: #16233a;
  font-weight: 900;
}

.quotation-cockpit .quotation-quote-total-table td:first-child em {
  border-radius: 999px;
  background: #e6f4ff;
  color: #1677ff;
  padding: 2px 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.quotation-cockpit .quotation-quote-fee-panel {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  border: 1px solid #e5eaf3;
  border-radius: 8px;
  background: #ffffff;
  padding: 10px;
}

.quotation-cockpit .quotation-quote-fee-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 7px;
  background: #f8fafc;
  color: #64748b;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
}

.quotation-cockpit .quotation-quote-plan-list {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(520px, 1.65fr);
  align-items: stretch;
  grid-gap: 10px 18px;
  gap: 10px 18px;
  position: relative;
  margin-top: 10px;
  border: 1px solid #d8e6f7;
  border-radius: 10px;
  background:
    linear-gradient(90deg, rgba(22, 119, 255, 0.045), rgba(255, 255, 255, 0.96) 42%),
    #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.045);
  padding: 14px 16px 12px 18px;
  overflow: hidden;
}

.quotation-cockpit .quotation-quote-plan-list::before {
  content: "";
  position: absolute;
  inset: 14px auto 14px 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, #22c7d8, #1677ff);
}

.quotation-cockpit .quotation-quote-plan-list-head {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-left: 2px;
}

.quotation-cockpit .quotation-quote-plan-list-head > div {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  min-width: 0;
}

.quotation-cockpit .quotation-quote-plan-list-head strong {
  color: #16233a;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
}

.quotation-cockpit .quotation-quote-plan-list-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.quotation-cockpit .quotation-quote-plan-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border-left: 1px solid #edf2f7;
  padding-left: 10px;
}

.quotation-cockpit .quotation-quote-plan-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

.quotation-cockpit .quotation-quote-save-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(132px, 1fr));
  align-items: stretch;
  grid-gap: 10px;
  gap: 10px;
  margin: 0;
  min-width: 0;
  flex: 1 1 520px;
}

.quotation-cockpit .quotation-quote-save-summary > div {
  display: grid;
  align-content: center;
  grid-gap: 5px;
  gap: 5px;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid #dbe7f5;
  border-radius: 9px;
  background: rgba(248, 251, 255, 0.92);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.quotation-cockpit .quotation-quote-save-summary > div.is-quote {
  border-color: #c9ddff;
  background: #f3f8ff;
}

.quotation-cockpit .quotation-quote-save-summary > div.is-margin {
  border-color: #cdeee5;
  background: #f3fbf8;
}

.quotation-cockpit .quotation-quote-save-summary dt {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.quotation-cockpit .quotation-quote-save-summary dd {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  color: #16233a;
  font-size: 15px;
  font-weight: 900;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  white-space: nowrap;
}

.quotation-cockpit .quotation-quote-save-summary .is-quote dd {
  color: #0f5fd7;
}

.quotation-cockpit .quotation-quote-save-summary .is-margin dd {
  color: #047857;
}

.quotation-cockpit .quotation-quote-save-summary dd small {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(22, 119, 255, 0.08);
  color: #1677ff;
  font-size: 11px;
  font-weight: 900;
}

.quotation-cockpit .quotation-quote-plan-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
  white-space: nowrap;
}

.quotation-cockpit .quotation-quote-plan-buttons .btn {
  min-height: 34px;
  border-radius: 8px;
  padding: 7px 14px;
  font-weight: 900;
}

.quotation-cockpit .quotation-quote-plan-step {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.quotation-cockpit .quotation-quote-plan-step > span {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
}

.quotation-cockpit .quotation-quote-plan-step > span.is-done {
  background: #dcfce7;
  color: #15803d;
}

.quotation-cockpit .quotation-quote-plan-step > span.is-pending {
  background: #e6f4ff;
  color: #1677ff;
}

.quotation-cockpit .quotation-quote-plan-step > div {
  display: grid;
  grid-gap: 1px;
  gap: 1px;
  min-width: 0;
}

.quotation-cockpit .quotation-quote-plan-step strong {
  color: #16233a;
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.quotation-cockpit .quotation-quote-plan-step small {
  overflow: hidden;
  max-width: 260px;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-cockpit .quotation-quote-plan-input {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.quotation-cockpit .quotation-quote-plan-input span,
.quotation-cockpit .quotation-quote-plan-input small {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.quotation-cockpit .quotation-quote-plan-input input {
  width: 86px;
  height: 28px;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #ffffff;
  color: #16233a;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 900;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.quotation-cockpit .quotation-quote-plan-input input:focus {
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.12);
  outline: none;
}

.quotation-cockpit .quotation-quote-plan-action {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.quotation-cockpit .quotation-quote-plan-action .btn {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 12px;
}

.quotation-cockpit .quotation-quote-plan-list-note {
  grid-column: 2;
  justify-self: end;
  max-width: 100%;
  color: #53657d;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
}

.quotation-cockpit .quotation-quote-plan-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.quotation-cockpit .quotation-quote-plan-status.is-done {
  background: #dcfce7;
  color: #15803d;
}

.quotation-cockpit .quotation-quote-plan-status.is-wait {
  background: #fff7e6;
  color: #b45309;
}

@media (max-width: 1180px) {
  .quotation-cockpit .quotation-quote-plan-list {
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 14px;
  }

  .quotation-cockpit .quotation-quote-plan-list-head {
    grid-row: auto;
  }

  .quotation-cockpit .quotation-quote-plan-actions {
    align-items: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .quotation-cockpit .quotation-quote-save-summary {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    flex: 1 1 100%;
  }

  .quotation-cockpit .quotation-quote-plan-buttons {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .quotation-cockpit .quotation-quote-plan-row {
    border-left: 0;
    border-top: 1px solid #edf2f7;
    padding: 8px 0 0;
  }

  .quotation-cockpit .quotation-quote-plan-list-note {
    grid-column: 1;
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 720px) {
  .quotation-cockpit .quotation-quote-save-summary {
    grid-template-columns: 1fr;
  }
}

.quotation-cockpit .quotation-quote-inline-compare {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  border-top: 1px solid #dbe6f4;
  border-bottom: 1px solid #dbe6f4;
  background: #f7fbff;
  padding: 7px 12px 9px;
}

.quotation-cockpit .quotation-quote-inline-compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 28px;
}

.quotation-cockpit .quotation-quote-inline-compare-head > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.quotation-cockpit .quotation-quote-inline-compare-head span {
  color: #0f72c9;
  font-size: 12px;
  font-weight: 900;
}

.quotation-cockpit .quotation-quote-inline-compare-head strong {
  color: #16233a;
  font-size: 14px;
  line-height: 1.35;
}

.quotation-cockpit .quotation-quote-inline-compare-head small {
  color: #6b7a8d;
  font-size: 12px;
}

.quotation-cockpit .quotation-quote-inline-brand-grid {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.quotation-cockpit .quotation-quote-inline-brand {
  display: grid;
  grid-template-columns: minmax(132px, 0.5fr) minmax(420px, 1.7fr);
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  min-width: 0;
  border: 1px solid #e3edf8;
  border-radius: 8px;
  background: #ffffff;
  padding: 6px 10px;
}

.quotation-cockpit .quotation-quote-inline-brand.is-selected-brand {
  border-color: #72a8ff;
  background: linear-gradient(90deg, #eef6ff 0%, #ffffff 70%);
  box-shadow: inset 3px 0 0 #1d6ff2;
}

.quotation-cockpit .quotation-quote-inline-brand.is-recommended-brand {
  border-color: #b7ead0;
  background: linear-gradient(90deg, #f1fdf7 0%, #ffffff 70%);
  box-shadow: inset 3px 0 0 #16a36b;
}

.quotation-cockpit .quotation-quote-inline-brand-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.quotation-cockpit .quotation-quote-inline-brand-head strong {
  overflow: hidden;
  color: #16233a;
  font-size: 13px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-cockpit .quotation-quote-inline-brand-head span {
  width: -moz-fit-content;
  width: fit-content;
  flex: none;
  border-radius: 999px;
  background: #f1f5f9;
  color: #506176;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 800;
}

.quotation-cockpit .quotation-quote-inline-brand.is-selected-brand .quotation-quote-inline-brand-head span {
  background: #dbeafe;
  color: #0f72c9;
}

.quotation-cockpit .quotation-quote-inline-brand.is-recommended-brand .quotation-quote-inline-brand-head span {
  background: #dcfce7;
  color: #087045;
}

.quotation-cockpit .quotation-quote-inline-brand-primary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 4px;
  gap: 4px;
  min-width: 0;
}

.quotation-cockpit .quotation-quote-inline-brand-primary > span {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  border-left: 1px solid #e5edf7;
  padding-left: 8px;
}

.quotation-cockpit .quotation-quote-inline-brand-primary small {
  flex: none;
  overflow: hidden;
  color: #6b7a8d;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-cockpit .quotation-quote-inline-brand-primary strong {
  overflow: hidden;
  color: #16233a;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-cockpit .quotation-quote-inline-brand-primary > span:first-child strong {
  color: #0f72c9;
}

.quotation-cockpit .quotation-quote-inline-brand-primary strong.quotation-brand-metric-margin {
  color: #087045;
}

.quotation-cockpit .quotation-quote-inline-brand-primary strong.quotation-brand-metric-margin.is-loss {
  color: #c0392b;
}

.quotation-cockpit .quotation-quote-inline-brand-primary strong.quotation-brand-metric-margin.is-thin {
  color: #b9770e;
}

.quotation-cockpit .quotation-quote-inline-empty {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  border: 1px dashed #cfe0f5;
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
  text-align: center;
}

.quotation-cockpit .quotation-quote-inline-empty strong {
  color: #16233a;
}

.quotation-cockpit .quotation-quote-inline-empty span {
  color: #6b7a8d;
  font-size: 12px;
}

.quotation-cockpit .quotation-quote-compare-aside-card,
.quotation-cockpit .quotation-quote-compare-empty {
  border-color: #dbe6f4;
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.quotation-cockpit .quotation-quote-compare-aside-head {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  background:
    linear-gradient(135deg, #eef6ff 0%, #ffffff 70%);
  padding: 14px 16px;
}

.quotation-cockpit .quotation-quote-compare-aside-title {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  min-width: 0;
}

.quotation-cockpit .quotation-quote-compare-aside-title > span {
  color: #0f72c9;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.quotation-cockpit .quotation-quote-compare-aside-title > strong {
  color: #0f172a;
  font-size: 16px;
  line-height: 1.35;
}

.quotation-cockpit .quotation-quote-compare-toggle {
  align-self: start;
  min-height: 30px;
  border: 1px solid #cfe0f5;
  border-radius: 8px;
  background: #ffffff;
  color: #0f72c9;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.quotation-cockpit .quotation-quote-compare-toggle:hover {
  border-color: #9fc5ff;
  background: #f8fbff;
}

.quotation-cockpit .quotation-quote-compare-aside-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  grid-column: 1 / -1;
  margin-top: 2px;
}

.quotation-cockpit .quotation-quote-compare-aside-tags em {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  background: #f8fafc;
  color: #506176;
  padding: 0 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.quotation-cockpit .quotation-quote-brand-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  grid-gap: 10px;
  gap: 10px;
  padding: 12px;
}

.quotation-cockpit .quotation-quote-brand-stack .quotation-quote-brand-card {
  gap: 10px;
  border-color: #dbe6f4;
  border-radius: 12px;
  padding: 12px;
}

.quotation-cockpit .quotation-quote-brand-card.is-selected-brand {
  border-color: #72a8ff;
  background: linear-gradient(180deg, #eef6ff 0%, #ffffff 100%);
  box-shadow:
    inset 4px 0 0 #1d6ff2,
    0 10px 24px rgba(29, 111, 242, 0.08);
}

.quotation-cockpit .quotation-quote-brand-card header {
  align-items: flex-start;
}

.quotation-cockpit .quotation-quote-brand-card header div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.quotation-cockpit .quotation-quote-brand-card header strong {
  font-size: 16px;
  line-height: 1.25;
}

.quotation-cockpit .quotation-quote-brand-card header span {
  order: 2;
  flex: none;
  min-height: 22px;
  background: #f1f5f9;
  color: #506176;
}

.quotation-cockpit .quotation-quote-brand-card.is-selected-brand header span {
  background: #dbeafe;
  color: #0f72c9;
}

.quotation-cockpit .quotation-brand-metric {
  gap: 10px;
}

.quotation-cockpit .quotation-brand-metric-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.quotation-cockpit .quotation-brand-metric-main small,
.quotation-cockpit .quotation-brand-metric-grid small,
.quotation-cockpit .quotation-brand-metric-foot,
.quotation-cockpit .quotation-brand-metric-foot small {
  color: #6b7a8d;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.quotation-cockpit .quotation-brand-metric-main > span {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  min-width: 0;
}

.quotation-cockpit .quotation-brand-metric-main strong {
  color: #0f172a;
  font-size: 18px;
  line-height: 1.15;
  white-space: nowrap;
}

.quotation-cockpit .quotation-brand-metric-main > span:first-child strong {
  color: #0f72c9;
}

.quotation-cockpit .quotation-brand-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.quotation-cockpit .quotation-brand-metric-grid > span {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  min-width: 0;
  border-radius: 8px;
  background: #f8fafc;
  color: #16233a;
  padding: 8px;
}

.quotation-cockpit .quotation-brand-metric-grid > span strong {
  overflow: hidden;
  color: #16233a;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-cockpit .quotation-brand-metric-grid > span strong.quotation-brand-metric-margin {
  color: #087045;
}

.quotation-cockpit .quotation-brand-metric-grid > span strong.quotation-brand-metric-margin.is-loss {
  color: #c0392b;
}

.quotation-cockpit .quotation-brand-metric-grid > span strong.quotation-brand-metric-margin.is-thin {
  color: #b9770e;
}

.quotation-cockpit .quotation-brand-metric-foot {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  border-top: 1px dashed #dbe6f4;
  padding-top: 8px;
}

.quotation-cockpit .quotation-brand-metric-foot > span {
  color: #16233a;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 820px) {
  .quotation-cockpit .quotation-quote-workspace,
  .quotation-quote-workspace {
    grid-template-columns: 1fr;
  }

  .quotation-cockpit .quotation-quote-compare-aside,
  .quotation-quote-compare-aside {
    position: static;
  }

  .quotation-quote-compare-panel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .quotation-quote-brand-compare-grid {
    grid-template-columns: 1fr;
  }

  .quotation-cockpit .quotation-quote-brand-stack {
    grid-template-columns: 1fr;
  }

  .quotation-cockpit .quotation-quote-inline-brand-grid {
    grid-template-columns: 1fr;
  }

  .quotation-cockpit .quotation-quote-inline-brand {
    grid-template-columns: 1fr;
  }

  .quotation-cockpit .quotation-quote-inline-brand-primary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quotation-cockpit .quotation-quote-inline-brand-secondary {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

.quotation-chain-layout {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.quotation-chain-command {
  border-bottom: 1px solid var(--hairline);
  background: linear-gradient(90deg, var(--surface) 0%, #fff 58%);
}

.quotation-chain-command {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 14px;
  border-top: 0;
  border-right: 0;
  border-left: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

.quotation-chain-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
}

.quotation-chain-stage {
  position: relative;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  grid-gap: 10px;
  gap: 10px;
  min-width: 0;
  min-height: 138px;
  padding: 14px 12px 12px;
  border: 0;
  border-right: 1px solid var(--surface-soft);
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

.quotation-chain-stage:last-child {
  border-right: 0;
}

.quotation-chain-stage::after {
  position: absolute;
  right: -7px;
  top: 50%;
  z-index: 1;
  width: 14px;
  height: 14px;
  border-top: 1px solid var(--surface-soft);
  border-right: 1px solid var(--surface-soft);
  background: var(--surface);
  content: "";
  transform: translateY(-50%) rotate(45deg);
}

.quotation-chain-stage:last-child::after {
  display: none;
}

.quotation-chain-icon {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--surface-sunk);
  color: var(--brand-500);
}

.quotation-chain-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quotation-chain-command span:not(.quotation-chain-icon),
.quotation-chain-stage span:not(.quotation-chain-icon),
.quotation-chain-stage small,
.quotation-chain-action span {
  color: var(--ink-2);
  line-height: 1.45;
}

.quotation-chain-stage small,
.quotation-chain-action em {
  display: block;
  font-size: 12px;
  font-weight: 800;
}

.quotation-chain-command strong,
.quotation-chain-stage strong,
.quotation-chain-action strong {
  display: block;
  color: var(--ink);
  line-height: 1.35;
}

.quotation-chain-command span:not(.quotation-chain-icon),
.quotation-chain-stage span:not(.quotation-chain-icon),
.quotation-chain-action span:not(.quotation-chain-icon) {
  display: block;
  margin-top: 3px;
}

.quotation-chain-stage em {
  grid-column: 1 / -1;
  align-self: end;
  color: var(--ink);
  font-size: 24px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.quotation-chain-stage small {
  grid-column: 1 / -1;
  align-self: end;
  color: var(--brand-500);
}

.quotation-chain-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  grid-gap: 0;
  gap: 0;
  background: var(--surface);
}

.quotation-chain-queue-title {
  display: block;
  grid-column: 1 / -1;
  padding: 10px 14px;
  border-bottom: 1px solid var(--surface-soft);
  color: var(--ink);
  font-size: 13px;
  background: var(--surface);
}

.quotation-chain-action {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  grid-gap: 10px;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 116px;
  padding: 12px;
  border: 0;
  border-right: 1px solid var(--surface-soft);
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

.quotation-chain-action:last-child {
  border-right: 0;
}

.quotation-chain-command em {
  grid-column: auto;
  justify-self: end;
  color: var(--brand-500);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.quotation-chain-action em {
  grid-column: 1 / -1;
  color: var(--brand-500);
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.quotation-chain-command.tone-success .quotation-chain-icon,
.quotation-chain-stage.tone-success .quotation-chain-icon,
.quotation-chain-action.tone-success .quotation-chain-icon {
  background: var(--surface-sunk);
  color: var(--c-success);
}

.quotation-chain-command.tone-warning .quotation-chain-icon,
.quotation-chain-stage.tone-warning .quotation-chain-icon,
.quotation-chain-action.tone-warning .quotation-chain-icon {
  background: var(--accent-50);
  color: var(--accent-500);
}

.quotation-chain-command.tone-danger .quotation-chain-icon,
.quotation-chain-stage.tone-danger .quotation-chain-icon,
.quotation-chain-action.tone-danger .quotation-chain-icon {
  background: var(--c-danger-soft);
  color: #e11d48;
}

.quotation-chain-command.tone-info .quotation-chain-icon,
.quotation-chain-stage.tone-info .quotation-chain-icon,
.quotation-chain-action.tone-info .quotation-chain-icon {
  background: var(--brand-50);
  color: var(--brand-500);
}

.chain-handoff-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
}

.chain-handoff-item {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: start;
  grid-gap: 10px;
  gap: 10px;
  min-width: 0;
  min-height: 130px;
  padding: 14px 12px;
  border: 0;
  border-right: 1px solid var(--surface-soft);
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: none;
}

.chain-handoff-item:last-child {
  border-right: 0;
}

.chain-handoff-item strong,
.chain-handoff-item span:not(.quotation-chain-icon) {
  display: block;
}

.chain-handoff-item strong {
  color: var(--ink);
  line-height: 1.35;
}

.chain-handoff-item span:not(.quotation-chain-icon) {
  margin-top: 3px;
  color: var(--ink-2);
  line-height: 1.45;
}

.chain-handoff-item em,
.chain-handoff-item small {
  grid-column: 1 / -1;
  display: block;
}

.chain-handoff-item em {
  align-self: end;
  color: var(--ink);
  font-size: 24px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

.chain-handoff-item small {
  color: var(--brand-500);
  font-size: 12px;
  font-weight: 800;
}

.chain-handoff-item.tone-success .quotation-chain-icon {
  background: var(--surface-sunk);
  color: var(--c-success);
}

.chain-handoff-item.tone-warning .quotation-chain-icon {
  background: var(--accent-50);
  color: var(--accent-500);
}

.chain-handoff-item.tone-danger .quotation-chain-icon {
  background: var(--c-danger-soft);
  color: #e11d48;
}

.chain-handoff-item.tone-info .quotation-chain-icon {
  background: var(--brand-50);
  color: var(--brand-500);
}

.business-check-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.business-check-card {
  min-width: 0;
  min-height: 136px;
  padding: 14px;
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.98)),
    #fff;
}

.business-check-card span,
.business-check-card strong,
.business-check-card small {
  display: block;
}

.business-check-card span {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
}

.business-check-card strong {
  margin-top: 6px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.business-check-card p {
  min-height: 42px;
  margin: 8px 0 10px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.business-check-card small {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 800;
}

.quotation-analytics-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quotation-analytics-grid .data-chart-panel {
  padding: 12px;
}

.quotation-row {
  min-height: 108px;
}

.pricing-stack {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.pricing-stack div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--surface-soft);
  padding: 0 0 10px;
}

.pricing-stack div:last-child {
  border-bottom: 0;
}

.policy-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.policy-card em {
  margin-top: 8px;
  color: var(--c-success-ink);
  font-style: normal;
  font-weight: 700;
}

/* ── ProjectDeliveryPage layout helpers ── */
/* Explicit grid wrapper so delivery-board cards align in a 3-col equal grid */
.delivery-board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-top: 8px;
}

/* 2-col equal-width chart grid for the delivery page (mirrors analytics-grid) */
.delivery-charts-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.delivery-board,
.production-board {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.production-record-block {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.production-board-featured {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-items: stretch;
}

.production-board-featured .production-card {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  padding: 16px;
  border-color: var(--hairline);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.production-board-featured .production-card.large {
  min-height: 0;
}

.production-board-featured .delivery-card-head {
  align-items: center;
}

.production-board-featured .delivery-card-head strong {
  font-size: 16px;
  line-height: 1.45;
}

.production-board-featured .production-card > span {
  margin-top: -4px;
}

.delivery-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.delivery-card dl,
.production-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin: 14px 0 0;
}

.production-card dl {
  grid-template-columns: 1fr;
}

.production-board-featured .production-card dl {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 0;
  padding-top: 4px;
}

.production-board-featured .production-card dl div {
  min-width: 0;
  border-top: 1px solid var(--surface-soft);
  padding-top: 10px;
}

.delivery-card dt,
.production-card dt {
  color: var(--text-secondary);
  font-size: 12px;
}

.delivery-card dd,
.production-card dd {
  margin: 4px 0 0;
  font-weight: 700;
}

.delivery-card p,
.production-card p {
  margin: 12px 0 0;
  color: var(--accent-700);
}

.production-board-featured .production-card p {
  margin: 0;
  border-radius: 8px;
  background: var(--accent-50);
  padding: 10px 12px;
  line-height: 1.55;
}

.production-card.large {
  min-height: 260px;
}

.capacity-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.capacity-grid article strong {
  display: block;
  margin-top: 8px;
  font-size: 24px;
}

.project-filter-grid {
  grid-template-columns: 1.5fr 0.75fr 0.75fr 0.8fr;
}

.project-gantt-board {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
  overflow: auto;
}

.project-gantt-scale {
  display: grid;
  grid-template-columns: 220px repeat(6, minmax(78px, 1fr));
  align-items: center;
  min-width: 860px;
  color: var(--ink-2);
  font-size: 12px;
}

.project-gantt-scale::before {
  content: "项目";
  font-weight: 800;
}

.project-gantt-row {
  display: grid;
  grid-template-columns: 220px minmax(620px, 1fr);
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  min-width: 860px;
}

.project-gantt-title {
  min-width: 0;
}

.project-gantt-title strong,
.project-gantt-title span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-gantt-title strong {
  color: var(--ink);
  font-size: 13px;
}

.project-gantt-title span {
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 12px;
}

.project-gantt-track {
  position: relative;
  height: 48px;
  border-radius: 10px;
  background: repeating-linear-gradient(
    90deg,
    var(--surface-sunk) 0,
    var(--surface-sunk) calc(16.666% - 1px),
    var(--hairline) calc(16.666% - 1px),
    var(--hairline) 16.666%
  );
}

.project-gantt-plan,
.project-gantt-milestone {
  position: absolute;
  border-radius: 999px;
}

.project-gantt-plan {
  display: flex;
  align-items: center;
  top: 8px;
  z-index: 2;
  height: 22px;
  padding: 0;
  min-width: 10px;
  background: linear-gradient(90deg, var(--brand-500), var(--cyan-500));
  color: var(--ink-inverse);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  overflow: visible;
  white-space: nowrap;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
}

.project-gantt-plan span {
  display: inline-flex;
  flex: 0 0 auto;
  min-width: max-content;
  max-width: none;
  align-items: center;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.28);
  padding: 1px 8px;
  overflow: visible;
  text-shadow: 0 1px 2px rgba(15, 23, 42, 0.36);
}

.project-gantt-milestone {
  top: 35px;
  z-index: 1;
  height: 5px;
  background: rgba(71, 85, 105, 0.54);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.project-gantt-row.risk-high .project-gantt-plan {
  background: linear-gradient(90deg, var(--c-danger), var(--c-warning));
}

.project-gantt-row.risk-medium .project-gantt-plan {
  background: linear-gradient(90deg, var(--c-warning), var(--cyan-500));
}

.project-table {
  min-width: 1160px;
}

.project-table td span {
  display: block;
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 13px;
}

.project-table td .status-badge,
.project-table td .risk-badge {
  display: inline-flex;
  margin-top: 0;
}

.project-table td .status-draft {
  color: var(--brand-600);
}

.project-table td .status-active {
  color: var(--c-success-ink);
}

.project-table td .status-inactive,
.project-table td .risk-medium {
  color: var(--accent-700);
}

.project-table td .status-archived {
  color: var(--ink);
}

.project-table td .risk-low {
  color: var(--c-success-ink);
}

.project-table td .risk-high {
  color: var(--c-danger-ink);
}

.project-phase-flow {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.project-plan-kpi-grid {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.project-execution-kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.project-fund-plan-kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.project-expense-kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.cost-planning-kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.project-profit-sharing-kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.department-budget-report-kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.budget-analysis-filters {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.budget-filter-grid,
.budget-analysis-kpi-grid,
.budget-material-grid,
.budget-two-column,
.budget-action-grid {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.budget-filter-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.budget-filter-grid article {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 12px;
}

.budget-filter-grid span,
.budget-filter-grid small,
.budget-material-card small,
.budget-material-card p,
.budget-reason-row em,
.budget-action-card span,
.budget-action-card p,
.budget-project-row small {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.budget-filter-grid strong {
  display: block;
  margin: 5px 0;
  color: var(--ink);
  font-size: 14px;
}

.budget-analysis-kpi-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.budget-project-table {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.budget-project-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(120px, 0.75fr)) minmax(110px, 0.55fr);
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
  color: inherit;
  text-decoration: none;
}

.budget-project-row strong,
.budget-project-row span,
.budget-project-row em {
  min-width: 0;
}

.budget-project-row strong small,
.budget-project-row span small {
  display: block;
  margin-top: 4px;
}

.budget-project-row em {
  justify-self: start;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  padding: 4px 9px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.budget-project-row.tone-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.budget-project-row.tone-danger {
  border-color: var(--c-danger-border);
  background: var(--surface);
}

.budget-project-row.tone-success {
  border-color: var(--c-success-border);
  background: var(--surface);
}

.budget-project-head {
  border: none;
  background: var(--surface-sunk);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.budget-project-reason {
  grid-column: 1 / -1;
}

.budget-two-column {
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.55fr);
}

.budget-material-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.budget-material-card,
.budget-action-card {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.budget-material-card header,
.budget-action-card header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.budget-material-card header em,
.budget-action-card header em {
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--ink);
  padding: 4px 9px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.budget-material-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin: 12px 0;
}

.budget-material-card dt {
  color: var(--ink-3);
  font-size: 12px;
}

.budget-material-card dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.budget-material-card.tone-warning,
.budget-action-card.tone-warning,
.budget-reason-row.tone-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.budget-material-card.tone-danger,
.budget-action-card.tone-danger,
.budget-reason-row.tone-danger {
  border-color: var(--c-danger-border);
  background: var(--surface);
}

.budget-material-card.tone-success,
.budget-action-card.tone-success,
.budget-reason-row.tone-success {
  border-color: var(--c-success-border);
  background: var(--surface);
}

.budget-reason-list {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.budget-reason-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-gap: 8px;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.budget-reason-row span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.budget-reason-row strong {
  color: var(--ink);
  font-size: 14px;
}

.budget-reason-row em {
  border-radius: 999px;
  background: var(--surface-sunk);
  padding: 3px 8px;
  font-style: normal;
  white-space: nowrap;
}

.budget-action-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.budget-action-card {
  color: inherit;
  text-decoration: none;
}

.budget-action-card span {
  display: block;
  margin-top: 8px;
  font-weight: 800;
}

.budget-action-card p {
  margin: 8px 0 0;
}

.contract-kpi-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.contract-flow {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.flow-step-button {
  width: 100%;
  cursor: pointer;
  font: inherit;
  text-align: left;
  min-height: 132px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  transform: none;
  -webkit-tap-highlight-color: transparent;
}

.flow-step-button:hover,
.flow-step-button:active,
.flow-step-button:focus-visible {
  transform: none;
}

.flow-step-button.active {
  border-color: var(--brand-500);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.16);
}

.contract-flow .flow-step,
.contract-flow .flow-step-button {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  transform: none;
}

.contract-flow .flow-step:hover,
.contract-flow .flow-step-button:hover,
.contract-flow .flow-step-button:active,
.contract-flow .flow-step-button:focus-visible {
  transform: none;
}

.summary-loading-tip {
  min-height: 20px;
  visibility: hidden;
  margin-top: 8px;
}

.summary-loading-tip.visible {
  visibility: visible;
}

.contract-filter-grid {
  grid-template-columns: 0.85fr 1.2fr 1fr 0.8fr;
}

.project-plan-flow,
.project-execution-flow,
.project-fund-plan-flow,
.project-expense-flow,
.cost-planning-flow,
.project-profit-sharing-flow {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.project-plan-table,
.project-execution-table,
.project-fund-plan-table,
.project-expense-table,
.cost-planning-table,
.project-profit-sharing-table {
  min-width: 1460px;
}

.contract-table {
  min-width: 1380px;
}

.project-plan-milestone-table,
.project-execution-log-table,
.project-fund-node-table,
.project-expense-line-table,
.cost-planning-item-table,
.project-profit-sharing-line-table {
  min-width: 1080px;
}

.contract-table td strong,
.contract-table td span,
.project-plan-table td span,
.project-plan-milestone-table td span,
.project-execution-table td span,
.project-execution-log-table td span,
.project-fund-plan-table td span,
.project-fund-node-table td span,
.project-expense-table td span,
.project-expense-line-table td span,
.cost-planning-table td span,
.cost-planning-item-table td span,
.project-profit-sharing-table td span,
.project-profit-sharing-line-table td span,
.department-budget-report-table td span,
.department-budget-line-table td span {
  display: block;
  margin-top: 5px;
  color: var(--text-secondary);
  font-size: 13px;
}

.department-budget-report-table,
.department-budget-line-table {
  min-width: 1280px;
}

.forecast-metric-grid,
.budget-driver-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.forecast-metric-grid article,
.budget-driver-grid article {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
}

.forecast-metric-grid span,
.budget-driver-grid span,
.budget-trend-row span {
  color: var(--text-secondary);
  font-size: 13px;
}

.forecast-metric-grid strong,
.budget-driver-grid strong,
.budget-trend-row strong {
  display: block;
  margin-top: 6px;
}

.budget-driver-grid article header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
}

.budget-driver-grid article p {
  margin: 10px 0 6px;
  font-weight: 700;
}

.budget-trend-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.budget-trend-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
}

.budget-trend-bars {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.budget-trend-bars span {
  display: block;
  max-width: 100%;
  min-width: 72px;
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--brand-50);
  color: var(--brand-600);
  white-space: nowrap;
}

.budget-trend-bars span:nth-child(2) {
  background: var(--surface-soft);
  color: var(--c-success-ink);
}

.budget-trend-bars span:nth-child(3) {
  background: var(--accent-50);
  color: var(--accent-700);
}

.contract-table td strong {
  margin-top: 0;
  color: var(--text-primary);
  font-size: 14px;
}

.contract-table td .status-badge,
.contract-table td .status-pill {
  display: inline-flex;
  margin-top: 0;
}

/* 金额列右对齐 + 等宽数字，使各行小数点纵向对齐。
   `.data-table td.numeric-cell` 提高特异度盖过 `.data-table td{text-align:left}`；
   `:has(.aligned-money-cell)` 兜住用 AlignedMoneyText 渲染的金额单元格。 */
.numeric-cell,
.data-table td.numeric-cell,
.data-table td:has(.aligned-money-cell) {
  text-align: right;
  white-space: nowrap;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.aligned-money-cell {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.aligned-money-currency {
  margin-right: 3px;
  color: var(--ink-2);
  font-weight: 600;
}
.aligned-money-integer,
.aligned-money-decimal {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.contract-action-info {
  background: var(--brand-50);
  color: var(--brand-600);
}

.contract-action-warning {
  background: var(--accent-50);
  color: var(--accent-700);
}

.reason-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.reason-tags em {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-700);
  padding: 2px 8px;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
}

.contract-action-success {
  background: var(--surface-soft);
  color: var(--c-success-ink);
}

.contract-action-danger {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

.quotation-next-action-link {
  border: 1px solid transparent;
  text-decoration: none;
}

.quotation-next-action-link:hover,
.quotation-next-action-link:focus-visible {
  border-color: currentColor;
}

.contract-risk-warning {
  border-color: var(--accent-200);
}

.contract-risk-danger {
  border-color: var(--c-danger-border);
}

.contract-risk-info {
  border-color: var(--brand-200);
}

.quotation-workbench-block {
  padding: 12px;
}

.quotation-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-gap: 14px;
  gap: 14px;
  align-items: start;
}

.quotation-command-strip {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-gap: 12px;
  gap: 12px;
  align-items: stretch;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(240, 253, 250, 0.94), rgba(255, 255, 255, 0.98)),
    #fff;
  padding: 12px;
}

.quotation-health-card,
.quotation-command-metrics > div,
.quotation-preset-btn,
.quotation-side-section {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
}

.quotation-health-card {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  padding: 12px;
}

.quotation-health-card span,
.quotation-command-metrics span,
.quotation-preset-btn span,
.quotation-side-section h4,
.quotation-waterfall span,
.quotation-category-stack span,
.quotation-approval-list span {
  color: var(--text-secondary);
  font-size: 12px;
}

.quotation-health-card strong {
  font-size: 34px;
  line-height: 1;
  color: var(--ink);
}

.quotation-health-card small,
.quotation-command-metrics small,
.quotation-category-stack small,
.quotation-approval-list small {
  color: var(--ink-2);
  line-height: 1.4;
}

.quotation-health-meter {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--hairline);
}

.quotation-create-flow-map {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.quotation-create-flow-map header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.quotation-create-flow-map h3 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 16px;
}

.quotation-create-flow-map header span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.quotation-create-flow-map header strong {
  white-space: nowrap;
  border: 1px solid var(--brand-200);
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  padding: 5px 10px;
  font-size: 12px;
}

.quotation-create-flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  grid-gap: 0;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
}

.quotation-create-flow-step {
  display: grid;
  align-content: center;
  justify-items: center;
  grid-gap: 5px;
  gap: 5px;
  min-height: 82px;
  border: 0;
  border-right: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
  padding: 9px 8px;
  text-align: center;
  cursor: pointer;
}

.quotation-create-flow-step:last-child {
  border-right: 0;
}

.quotation-create-flow-icon,
.quotation-source-icon,
.quotation-intake-icon {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  background: var(--brand-100);
  color: var(--cyan-600);
}

.quotation-create-flow-icon svg,
.quotation-source-icon svg,
.quotation-intake-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quotation-create-flow-step:hover {
  background: var(--brand-50);
}

.quotation-create-flow-step.is-done {
  background: var(--surface-sunk);
}

.quotation-create-flow-step.is-active {
  background: var(--brand-50);
  box-shadow: inset 0 -3px 0 var(--brand-500);
}

.quotation-create-flow-step.is-pending {
  background: var(--surface-sunk);
}

.quotation-create-flow-step span {
  color: var(--brand-500);
  font-size: 11px;
  font-weight: 800;
}

.quotation-create-flow-step strong {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
}

.quotation-create-flow-step strong small {
  color: var(--brand-500);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

.quotation-create-flow-step em,
.quotation-create-flow-step small {
  color: var(--ink-2);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-active-step-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 14px;
  gap: 14px;
  align-items: center;
  border: 1px solid var(--hairline-strong);
  border-left: 4px solid var(--cat-cyan);
  border-radius: 8px;
  background: var(--surface);
  padding: 11px 12px;
}

.quotation-active-step-strip div {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  min-width: 0;
}

.quotation-active-step-strip span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.quotation-active-step-strip strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quotation-active-step-strip small {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.4;
}

.quotation-active-step-next {
  min-width: 188px;
  border-left: 1px solid var(--hairline);
  padding-left: 14px;
}

.quotation-create-flow-step b {
  margin-top: auto;
  color: var(--c-success-ink);
  font-size: 12px;
}

.quotation-health-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c-success-ink);
}

.quotation-command-warning .quotation-health-meter i {
  background: var(--accent-500);
}

.quotation-command-danger .quotation-health-meter i {
  background: #dc2626;
}

.quotation-command-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.quotation-command-metrics > div {
  display: grid;
  align-content: center;
  grid-gap: 6px;
  gap: 6px;
  padding: 12px;
}

.quotation-command-metrics strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.15;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.quotation-preset-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.quotation-preset-btn {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
}

.quotation-preset-btn:hover:not(:disabled) {
  border-color: var(--cyan-500);
  background: var(--surface-sunk);
}

.quotation-preset-btn:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.quotation-preset-btn strong {
  color: var(--ink);
  font-size: 13px;
}

.quotation-stepper,
.quotation-summary-panel,
.quotation-section,
.quotation-item-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.quotation-stepper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr));
  grid-gap: 8px;
  gap: 8px;
  padding: 8px;
}

.quotation-step-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
}

.quotation-step-form-layout .quotation-stepper {
  position: -webkit-sticky;
  position: sticky;
  top: 88px;
  grid-template-columns: 1fr;
  align-content: start;
}

.quotation-step-form-main {
  min-width: 0;
}

.quotation-step-form-layout > .quotation-summary-panel,
.quotation-step-form-layout > .quotation-wizard-actions {
  min-width: 0;
  width: 100%;
}

.quotation-step-form-layout.is-edit > .quotation-summary-panel,
.quotation-step-form-layout.is-edit > .quotation-wizard-actions {
  grid-column: 1 / -1;
}

.quotation-step-focus {
  display: grid;
  align-content: center;
  grid-gap: 4px;
  gap: 4px;
  min-width: 0;
  border-right: 1px solid var(--hairline);
  padding-right: 8px;
}

.quotation-step-focus span,
.quotation-step-focus small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.35;
}

.quotation-step-focus strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.2;
}

.quotation-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-gap: 3px 8px;
  gap: 3px 8px;
  align-items: center;
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.quotation-step.active {
  border-color: var(--cyan-500);
  background: var(--surface-sunk);
  box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.18);
}

.quotation-step strong {
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--brand-50);
  color: var(--brand-600);
}

.quotation-step.active strong {
  background: var(--cyan-100);
  color: var(--c-success-ink);
}

.quotation-step span {
  font-weight: 700;
  color: var(--ink);
}

.quotation-step small {
  grid-column: 2;
  color: var(--text-secondary);
  line-height: 1.35;
}

.quotation-editor {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  min-width: 0;
}

.quotation-source-grid,
.quotation-source-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.quotation-source-list {
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
}

.quotation-source-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 140px) minmax(0, 1fr) auto;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  background: var(--surface);
  padding: 12px 14px;
}

.quotation-source-list .quotation-source-card:last-child {
  border-bottom: 0;
}

.quotation-source-card .btn {
  justify-self: end;
}

.quotation-source-primary {
  border-color: var(--cyan-500);
  background: var(--surface-sunk);
}

.quotation-source-card strong,
.quotation-template-block h4 {
  color: var(--ink);
}

.quotation-source-card span,
.quotation-template-block p {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.quotation-source-card > span:not(.quotation-source-icon) {
  min-width: 0;
}

.quotation-template-block {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-gap: 14px;
  gap: 14px;
  align-items: start;
  margin-top: 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 12px;
}

.quotation-template-block h4,
.quotation-template-block p {
  margin: 0;
}

.quotation-template-block h4 {
  margin-bottom: 6px;
}

.quotation-section {
  padding: 12px;
}

.quotation-section header,
.quotation-summary-panel h3 {
  margin: 0 0 10px;
}

.quotation-section header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.quotation-section h3,
.quotation-summary-panel h3 {
  margin: 0;
}

.quotation-section header span {
  color: var(--text-secondary);
  font-size: 13px;
}

.quotation-field-grid,
.quotation-link-grid,
.quotation-object-picker,
.quotation-item-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.quotation-field-grid label,
.quotation-link-grid label,
.quotation-object-picker label,
.quotation-item-grid label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.quotation-field-grid span,
.quotation-link-grid span,
.quotation-object-picker span,
.quotation-item-grid span {
  color: var(--ink);
  font-size: 13px;
}

.quotation-field-grid input,
.quotation-field-grid select,
.quotation-field-grid textarea,
.quotation-link-grid select,
.quotation-object-picker select,
.quotation-item-grid input,
.quotation-item-grid select,
.quotation-item-grid textarea,
.quotation-item-head select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
  font-size: 14px;
}

/* 「深圳项目：是/否」自动标记：收进项目地址标签行(不再单独占一行的 hint)，
 * 避免该字段比同行控件更高、把相邻下拉框拉得过高。 */
.quotation-shenzhen-flag {
  margin-left: 8px;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--surface-sunk);
  padding: 1px 8px;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}
.quotation-shenzhen-flag.is-yes {
  color: var(--accent-700);
  background: var(--accent-50);
}

.quotation-field-grid-compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 12px;
}

.quotation-inline-toggles {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.quotation-inline-toggles label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: 13px;
}

.quotation-inline-toggles input {
  width: auto;
}

.risk-text-normal {
  color: var(--c-success-ink);
}

.risk-text-warning {
  color: var(--accent-600);
}

.risk-text-danger {
  color: var(--c-danger-ink);
}

.quotation-archive-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
  align-items: start;
}

.quotation-archive-grid h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

/* 报价版本块跨满两列、置于次级记录之上：版本再多也不会把右侧「成本选择/导出」列撑得忽高忽矮。 */
.quotation-version-archive {
  grid-column: 1 / -1;
}

/* 版本列表封顶高度 + 内部滚动，版本很多时也不会把整页拉得过长（约露出 2 个完整版本再滚动）。 */
.quotation-version-scroll {
  max-height: 440px;
  overflow-y: auto;
  padding-right: 4px;
}

.quotation-version-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.quotation-account-hub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 12px;
}

@media (max-width: 900px) {
  .quotation-account-hub {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 商机摘要块：与客户卡的联系人块视觉对位(同一 .quotation-contact-context 底盒)，
 * 预计金额作主数值，让商机卡与客户卡结构对称、双栏等高。 */
.quotation-deal-summary {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
}
.quotation-deal-summary > strong {
  color: var(--ink);
  font-size: 18px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.quotation-deal-summary > span {
  color: var(--ink-2);
  font-size: 13px;
}
.quotation-deal-summary > small {
  color: var(--text-secondary);
  font-size: 12px;
}

/* 两卡等高(stretch)成对齐矩形；内容一律顶端排布(align-content:start)——多余高度落在卡底成
 * 规整留白，不再摊进行间形成中部空白。配合客户卡内联系人/地址并排压缩高度，两卡高度接近。 */
.quotation-account-card {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  align-content: start;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.quotation-account-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.quotation-account-card-head h4,
.quotation-account-card-head p,
.quotation-object-facts {
  margin: 0;
}

.quotation-account-card-head h4 {
  color: var(--ink);
  font-size: 15px;
}

.quotation-account-card-head p {
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.quotation-account-status {
  flex: 0 0 auto;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink-2);
  padding: 4px 9px;
  font-size: 12px;
  line-height: 1;
}

.quotation-account-status.is-linked {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
  color: var(--c-success-ink);
}

.quotation-object-picker {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.quotation-object-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}

.quotation-contact-context {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  align-items: start;
  border: 1px solid var(--surface-soft);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 10px;
}

.quotation-address-summary {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-gap: 8px;
  gap: 8px;
  align-items: start;
  min-width: 0;
}

.quotation-address-summary__icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  background: var(--brand-50);
  color: var(--brand-700);
}

.quotation-address-summary__icon svg {
  width: 16px;
  height: 16px;
}

.quotation-address-summary strong,
.quotation-address-summary small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-address-summary strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.quotation-address-summary small {
  margin-top: 3px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.35;
}

.quotation-object-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.quotation-object-facts div {
  border: 1px solid var(--surface-soft);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 8px;
  min-width: 0;
}

.quotation-object-facts dt {
  color: var(--ink-2);
  font-size: 12px;
}

.quotation-object-facts dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 报价表「客户 / 区域」格:只显示客户名 + 区域两行(联系人/电话/邮箱等明细下沉到详情页)。 */
.quotation-customer-cell {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  min-width: 0;
}

.quotation-customer-cell > strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-customer-cell > span {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 报价表「业务名称」格的关联商机副标题(灰色小字,贴在报价名下)。 */
.quotation-business-sub {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 回款台账「方向/业务」格:回款是默认值不再逐行标注,仅对例外的「汇款」加徽标。 */
.remittance-direction-flag {
  justify-self: start;
  margin-top: 2px;
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--ui-color-warning-soft, #fdecd4);
  color: var(--ui-color-warning-ink, #92600a);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

.quotation-link-grid {
  margin-bottom: 12px;
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.quotation-link-grid small {
  color: var(--ink-2);
  line-height: 1.45;
}

.quotation-create-link-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 4px 12px;
  gap: 4px 12px;
  align-items: center;
  border: 1px dashed var(--brand-300);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.quotation-create-link-card strong {
  color: var(--ink);
}

.quotation-create-link-card span {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.quotation-create-link-card .btn {
  grid-row: 1 / 3;
  grid-column: 2;
}

/* 新建报价「报价范围」三分组卡：报价范围 / 铜铝取价 / 项目选项，整列堆叠、每张卡内用紧凑网格。 */
.quotation-create-scope {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}
/* 报价范围分组内字段用 3 列均分：项目地址整行 + 其余 6 项排成 2 行 3 列，无半空尾行更规整。 */
.quotation-scope-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1080px) {
  .quotation-scope-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .quotation-scope-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* 铜铝取价：同步行情价/读取价格中心两个按钮占第二行后两列，让 4 列网格填满不留空。 */
.quotation-price-sync-actions {
  grid-column: span 2;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
@media (max-width: 720px) {
  .quotation-price-sync-actions {
    grid-column: 1 / -1;
  }
}
/* 项目选项：作为报价范围卡底部的一行(标签 + 勾选项)，不再单独占一张稀疏的卡。 */
.quotation-scope-options {
  display: flex;
  align-items: center;
  gap: 8px 16px;
  flex-wrap: wrap;
}
.quotation-scope-options-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}
.quotation-scope-options .quotation-inline-toggles {
  margin: 0;
}
/* 项目地址：标签行「项目地址」靠左、「深圳项目」标记靠右上对齐（不再占下方单独一行）。 */
.quotation-address-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.quotation-pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-gap: 12px;
  gap: 12px;
}

.quotation-pricing-panel,
.quotation-manager-card {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
}

.quotation-pricing-panel {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  padding: 12px;
}

.quotation-panel-title {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.quotation-panel-title h4 {
  margin: 0;
  color: var(--ink);
}

.quotation-panel-title span {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.quotation-market-grid,
.quotation-bom-plan-list,
.quotation-manager-grid {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.quotation-market-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quotation-market-card,
.quotation-bom-plan {
  width: 100%;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.quotation-market-card:hover:not(:disabled),
.quotation-bom-plan:hover:not(:disabled) {
  border-color: var(--cyan-500);
  background: var(--surface-sunk);
}

.quotation-market-card:disabled,
.quotation-bom-plan:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

.quotation-market-card span,
.quotation-market-card small,
.quotation-market-card em,
.quotation-bom-plan span,
.quotation-manager-card span,
.quotation-manager-card small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}

.quotation-market-card strong,
.quotation-bom-plan strong,
.quotation-manager-card strong {
  color: var(--ink);
}

.quotation-market-card strong {
  font-size: 22px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.quotation-market-card em {
  font-style: normal;
}

.quotation-manager-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}

.quotation-manager-card {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  padding: 12px;
}

.quotation-manager-card strong {
  font-size: 20px;
}

.quotation-manager-low {
  border-color: #86efac;
  background: var(--surface-sunk);
}

.quotation-manager-medium {
  border-color: var(--accent-300);
  background: var(--accent-50);
}

.quotation-manager-high {
  border-color: var(--c-danger-border);
  background: var(--c-danger-soft);
}

.quotation-field-grid textarea,
.quotation-item-grid textarea {
  min-height: 88px;
  resize: vertical;
}

.quotation-wide-field {
  grid-column: 1 / -1;
}

.quotation-item-toolbar,
.quotation-summary-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.quotation-intake-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 12px;
}

.quotation-intake-grid article {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.quotation-intake-grid strong {
  color: var(--ink);
  font-size: 14px;
}

.quotation-intake-grid small {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.quotation-create-plan-rail {
  margin-bottom: 12px;
}

.quotation-intake-table {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.quotation-intake-table-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.quotation-intake-table-head strong,
.quotation-intake-empty strong {
  color: var(--ink);
  font-size: 14px;
}

.quotation-intake-table-head span,
.quotation-intake-empty span {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.quotation-intake-rows {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.quotation-intake-row {
  display: grid;
  grid-template-columns: 132px minmax(140px, 1.2fr) minmax(160px, 1.5fr) 90px 76px 54px;
  grid-gap: 8px;
  gap: 8px;
  align-items: center;
  border-top: 1px solid var(--surface-soft);
  padding-top: 8px;
}

.quotation-intake-row input,
.quotation-intake-row select {
  width: 100%;
  min-width: 0;
}

.quotation-intake-empty {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  border: 1px dashed var(--hairline-strong);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 14px;
}

.quotation-paste-import {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 12px;
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.quotation-combination-builder {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 12px;
  border: 1px solid var(--brand-200);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 12px;
}

.quotation-combination-builder h4 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

.quotation-combination-builder p {
  margin: 2px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.quotation-combination-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.quotation-combination-controls label {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}

.quotation-combination-controls select,
.quotation-combination-controls input {
  min-width: 200px;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px 10px;
  font-size: 14px;
}

.quotation-combination-controls input {
  min-width: 140px;
}

.quotation-combination-preview {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px 12px;
}

.quotation-combination-preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.quotation-combination-preview-head span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.quotation-combination-preview-head strong {
  color: var(--brand-600);
  font-size: 15px;
}

.quotation-combination-preview ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.quotation-combination-preview li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--ink);
}

.quotation-combination-preview li em {
  flex: 0 0 auto;
  color: var(--ink-2);
  font-style: normal;
  font-size: 12px;
}

.quotation-combination-message {
  color: var(--c-success-ink);
  font-size: 13px;
  font-weight: 700;
}

.quotation-checklist {
  margin-top: 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px 14px;
}

.quotation-checklist-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.quotation-checklist-head strong {
  color: var(--ink);
  font-size: 14px;
}

.quotation-checklist-head span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.quotation-checklist ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.quotation-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.quotation-checklist li > div {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
}

.quotation-checklist li strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.quotation-checklist li small {
  color: var(--accent-600);
  font-size: 12px;
  line-height: 1.4;
}

.quotation-checklist-mark {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.quotation-checklist li.is-ok .quotation-checklist-mark {
  background: var(--surface-soft);
  color: var(--c-success-ink);
}

.quotation-checklist li.is-todo .quotation-checklist-mark {
  background: var(--accent-50);
  color: var(--accent-600);
}

.quotation-checklist li.is-ok strong {
  color: var(--c-success-ink);
}

.quotation-formula-hint {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 2px 0 4px;
}

.quotation-formula-hint small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.4;
}

.quotation-guide-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 12px 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--surface), #ffffff);
  padding: 12px 16px;
}

.quotation-guide-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quotation-guide-steps li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3);
}

.quotation-guide-steps li::after {
  content: "›";
  margin-left: 6px;
  color: var(--hairline-strong);
}

.quotation-guide-steps li:last-child::after {
  content: "";
  margin: 0;
}

.quotation-guide-dot {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  background: var(--hairline);
  color: var(--ink-2);
}

.quotation-guide-steps li.is-done {
  color: var(--c-success-ink);
}

.quotation-guide-steps li.is-done .quotation-guide-dot {
  background: var(--c-success-soft);
  color: var(--c-success-ink);
}

.quotation-guide-steps li.is-current {
  color: var(--brand-600);
}

.quotation-guide-steps li.is-current .quotation-guide-dot {
  background: var(--brand-600);
  color: var(--ink-inverse);
}

.quotation-guide-next {
  display: flex;
  align-items: center;
  gap: 14px;
}

.quotation-guide-next > div {
  display: grid;
  grid-gap: 1px;
  gap: 1px;
}

.quotation-guide-next span {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
}

.quotation-guide-next strong {
  color: var(--ink);
  font-size: 15px;
}

.quotation-guide-next small {
  color: var(--ink-2);
  font-size: 12px;
}

.quotation-paste-import h4,
.quotation-paste-import p {
  margin: 0;
}

.quotation-paste-import h4 {
  color: var(--ink);
  font-size: 15px;
}

.quotation-paste-import p,
.quotation-paste-import-actions span {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.quotation-paste-import textarea {
  width: 100%;
  min-height: 88px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px 12px;
  font-size: 14px;
  resize: vertical;
}

.quotation-paste-import-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.quotation-items {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.quotation-item-row {
  padding: 10px;
}

.quotation-item-context {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  margin-bottom: 10px;
  border: 1px solid var(--brand-100);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
}

.quotation-item-context strong {
  color: var(--ink);
}

.quotation-item-context span {
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.45;
}

.quotation-item-context-accessory {
  border-color: var(--brand-200);
  background: var(--surface-sunk);
}

.quotation-item-context-project_fee {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.quotation-item-context-adjustment {
  border-color: var(--accent-200);
  background: var(--surface);
}

.quotation-hidden-field {
  display: none !important;
}

.quotation-item-head {
  display: grid;
  grid-template-columns: 44px minmax(160px, 220px) minmax(140px, 1fr) auto;
  grid-gap: 8px;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.quotation-item-head strong {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
}

.quotation-item-head-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 2px 10px;
  gap: 2px 10px;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 8px 10px;
}

.quotation-item-head-meta span,
.quotation-item-head-meta small {
  color: var(--ink-2);
  font-size: 12px;
}

.quotation-item-head-meta strong {
  width: auto;
  height: auto;
  grid-row: auto;
  place-items: unset;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.quotation-item-head-meta small {
  grid-column: 1 / -1;
  text-align: right;
}

.quotation-summary-panel {
  padding: 12px;
}

.quotation-summary-panel dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin: 0;
}

.quotation-summary-panel dl div {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 10px;
  background: var(--surface);
}

.quotation-summary-panel dt {
  color: var(--text-secondary);
  font-size: 12px;
}

.quotation-summary-panel dd {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 800;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.quotation-summary-panel .summary-total {
  border-color: var(--brand-300);
  background: var(--brand-50);
}

.quotation-draft-flow {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.quotation-draft-flow span {
  min-width: 0;
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-800);
  padding: 8px 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}

.quotation-side-section {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 12px;
  padding: 10px;
}

.quotation-summary-panel {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.quotation-summary-panel .quotation-side-section {
  margin-top: 0;
}

.quotation-summary-panel .quotation-risk-list,
.quotation-summary-panel .quotation-summary-actions {
  margin: 0;
}

.quotation-summary-panel .quotation-side-section:nth-of-type(1),
.quotation-summary-panel .quotation-side-section:nth-of-type(2),
.quotation-summary-panel .quotation-side-section:nth-of-type(3) {
  min-width: 0;
}

.quotation-summary-panel {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quotation-summary-panel > h3,
.quotation-summary-panel > dl,
.quotation-summary-panel > .quotation-risk-list,
.quotation-summary-panel > .quotation-summary-actions {
  grid-column: 1 / -1;
}

.quotation-side-section h4 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.quotation-side-section p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
}

.quotation-waterfall,
.quotation-category-stack,
.quotation-approval-list {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
}

.quotation-waterfall > div,
.quotation-category-stack > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 4px 8px;
  gap: 4px 8px;
  align-items: center;
  border-bottom: 1px dashed var(--hairline);
  padding-bottom: 7px;
}

.quotation-waterfall > div:last-child,
.quotation-category-stack > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.quotation-waterfall strong,
.quotation-category-stack strong {
  color: var(--ink);
  font-size: 13px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.quotation-waterfall-total strong {
  color: var(--c-success-ink);
  font-size: 16px;
}

.quotation-waterfall-discount strong {
  color: var(--accent-600);
}

.quotation-category-stack small {
  grid-column: 1 / -1;
}

.quotation-approval-list > div {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-gap: 2px 8px;
  gap: 2px 8px;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 8px;
}

.quotation-approval-list strong {
  grid-row: 1 / 3;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 13px;
}

.quotation-approval-list small {
  grid-column: 2;
}

.approval-pass {
  background: var(--surface-sunk);
}

.approval-pass strong {
  background: var(--c-success-soft);
  color: var(--c-success-ink);
}

.approval-block {
  background: var(--accent-50);
}

.approval-block strong {
  background: var(--accent-200);
  color: var(--accent-700);
}

.quotation-risk-list {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin: 12px 0;
}

.quotation-risk-card-body {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  min-width: 0;
}

.quotation-risk-card-body small,
.quotation-risk-card-body em {
  display: block;
  margin: 0;
  line-height: 1.5;
}

.quotation-risk-card-body small {
  color: var(--ink-2);
}

.quotation-risk-card-body em {
  color: var(--ink-3);
  font-style: normal;
  font-size: 12px;
}

.quotation-risk-card-tag {
  width: -moz-fit-content;
  width: fit-content;
  border: 1px solid var(--accent-200);
  border-radius: 999px;
  background: var(--accent-50);
  color: var(--accent-700);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
}

/* 系统价格库:品牌维护面板迁移提示 */
.price-library-brand-redirect {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  justify-items: start;
  border: 1px dashed var(--hairline-strong);
  border-radius: 10px;
  background: var(--surface-sunk);
  padding: 16px;
}

.price-library-brand-redirect p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* 品牌报备策略管理页 */
.brand-policy-create {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 1.6fr) auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: end;
}

@media (max-width: 900px) {
  .brand-policy-create {
    grid-template-columns: minmax(0, 1fr);
  }
}

.brand-policy-toggle {
  display: inline-flex;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-sunk);
}

.brand-policy-toggle button {
  border: 0;
  background: transparent;
  color: var(--ink-2);
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 800;
  cursor: pointer;
}

.brand-policy-toggle button.active {
  background: var(--surface);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.brand-policy-toggle button:first-child.active {
  color: var(--accent-600);
}

.brand-policy-toggle button:last-child.active {
  color: var(--c-success-ink);
}

.brand-policy-toggle button:disabled {
  cursor: default;
  opacity: 0.6;
}

.brand-policy-table td {
  vertical-align: middle;
}

.brand-policy-empty {
  text-align: center;
  color: var(--text-secondary);
  padding: 22px 12px;
}

/* 品牌报备：把"逐行点小按钮"改成"按品牌分组 + 说明 + 明显操作",让用户一看就知道怎么处理。 */
.quotation-brand-reg {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  border: 1px solid var(--accent-200);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
}

.quotation-brand-reg-intro {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.quotation-brand-reg-intro > div {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.quotation-brand-reg-intro strong {
  font-size: 14px;
  color: var(--accent-700);
}

.quotation-brand-reg-intro p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--accent-700);
}

.quotation-brand-reg-intro .btn {
  flex: none;
  white-space: nowrap;
}

.quotation-brand-reg-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--accent-100);
  border-left: 4px solid var(--accent-500);
  border-radius: 9px;
  background: var(--surface);
  padding: 10px 12px;
}

.quotation-brand-reg-card-info {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  min-width: 0;
}

.quotation-brand-reg-card-info strong {
  font-size: 14px;
  color: var(--ink);
}

.quotation-brand-reg-card-info small {
  font-size: 12px;
  color: var(--ink-2);
}

.quotation-brand-reg-card .btn {
  flex: none;
  white-space: nowrap;
}

.quotation-brand-reg-locked {
  flex: none;
  font-size: 11.5px;
  color: var(--ink-3);
  text-align: right;
  max-width: 180px;
}

.quotation-risk-list p {
  margin: 0;
  border: 1px solid var(--accent-200);
  border-radius: 10px;
  background: var(--accent-50);
  color: var(--accent-700);
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.5;
}

.quotation-wizard-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.quotation-submit-notice {
  margin-right: auto;
  display: flex;
  flex: 1 1 360px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: min(100%, 280px);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 9px 10px;
}

.quotation-submit-notice div {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  min-width: 0;
}

.quotation-submit-notice strong {
  color: var(--ink);
  font-size: 13px;
}

.quotation-submit-notice span {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}

.quotation-submit-notice.is-error {
  border-color: var(--c-danger-border);
  background: var(--c-danger-soft);
}

.quotation-submit-notice.is-error strong,
.quotation-submit-notice.is-error span {
  color: var(--c-danger-ink);
}

.quotation-submit-notice.is-saving {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.quotation-submit-notice.is-success {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.quotation-submit-notice.is-success strong,
.quotation-submit-notice.is-success span {
  color: var(--c-success-ink);
}

.quotation-create-steps {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin: 14px 0;
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-sunk);
}

.quotation-create-steps span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-2);
  padding: 10px;
  font-size: 12px;
  font-weight: 800;
}

.quotation-create-steps span.active {
  border-color: var(--brand-200);
  background: var(--brand-50);
  color: var(--brand-600);
}

.quotation-create-steps em {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--hairline);
  color: var(--ink);
  font-style: normal;
  font-size: 12px;
}

.quotation-create-steps span.active em {
  background: var(--brand-500);
  color: var(--ink-inverse);
}

.quotation-detail-table {
  min-width: 1480px;
}

.risk-badge {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  flex: 0 0 auto;
  max-width: 100%;
  overflow: hidden;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.risk-low {
  background: var(--surface-soft);
  color: var(--c-success-ink);
}

.risk-medium {
  background: var(--accent-50);
  color: var(--accent-700);
}

.risk-high {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

.risk-normal {
  background: var(--surface-sunk);
  color: var(--ink);
}

.risk-warning {
  background: var(--accent-50);
  color: var(--accent-700);
}

.risk-danger {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

.risk-badge-row {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 4px;
  max-width: 100%;
  margin-top: 6px !important;
  overflow: hidden;
  white-space: nowrap;
}

.project-spec-grid,
.project-spec-grid article {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
}

.project-spec-grid span {
  display: block;
  color: var(--text-secondary);
  font-size: 13px;
}

.attendance-workbench {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.project-spec-grid strong {
  display: block;
  margin-top: 8px;
  font-size: 18px;
}

.project-plan-command-grid {
  grid-template-columns: 1.35fr 0.65fr;
}

.project-plan-health-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.project-plan-health-grid article {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
}

.project-plan-health-grid span,
.project-plan-health-grid small {
  display: block;
  color: var(--text-secondary);
  font-size: 13px;
}

.attendance-create-grid input,
.attendance-create-grid select,
.attendance-create-grid textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text-primary);
}

.attendance-create-grid input,
.attendance-create-grid select {
  height: 40px;
  padding: 0 10px;
}

.attendance-create-panel {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.attendance-create-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.attendance-create-grid label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 13px;
}

.attendance-create-grid textarea {
  min-height: 88px;
  resize: vertical;
  padding: 10px;
}

.attendance-create-wide {
  grid-column: 1 / -1;
}

.attendance-empty {
  padding: 20px;
  text-align: center;
  color: var(--text-secondary);
}

.attendance-filters-inline {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.attendance-filters-inline label {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}

.attendance-filters-inline select {
  min-height: 34px;
  min-width: 132px;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  background: var(--surface);
  padding: 0 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
}

.attendance-page .module-block {
  border: 2px solid var(--brand-300);
  box-shadow: 0 14px 32px rgba(37, 99, 235, 0.1);
}

.attendance-page .module-title {
  border-left-width: 4px;
  color: var(--brand-600);
}

.project-plan-health-grid strong {
  display: block;
  margin: 6px 0 4px;
  font-size: 20px;
}


.hr-workbench.attendance-page {
  --attendance-soft-blue: #eef6ff;
  --attendance-soft-green: #eefaf5;
  --attendance-soft-amber: #fff7e8;
  --attendance-soft-red: #fff1f1;
}

.hr-workbench.attendance-page .hrw-page {
  gap: 12px;
}

.hr-workbench.attendance-page .hrw-hero {
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 46, 92, 0.14);
}

.hr-workbench.attendance-page .hrw-hero h1 {
  font-size: 23px;
}

.hr-workbench.attendance-page .hrw-hero p {
  max-width: 760px;
}

.hr-workbench.attendance-page .hrw-metrics {
  border-top: 1px solid var(--hrw-line);
  border-radius: 8px;
}

.hr-workbench.attendance-page .hrw-metric {
  min-height: 84px;
  padding: 13px 16px;
}

.hr-workbench.attendance-page .hrw-metric strong {
  font-size: 28px;
}

.attendance-command-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.8fr) minmax(280px, 0.8fr);
  grid-gap: 12px;
  gap: 12px;
  align-items: stretch;
}

.hr-workbench .attendance-command-panel,
.hr-workbench .attendance-workbench,
.hr-workbench .attendance-create-panel {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--hrw-line);
  border-radius: 8px;
  background: var(--hrw-panel);
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
}

.attendance-panel-head,
.attendance-table-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.attendance-panel-head > div,
.attendance-table-head > div {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  min-width: 0;
}

.attendance-panel-head p,
.attendance-table-head p {
  margin: 0;
  color: var(--hrw-text-dim);
  font-size: 12.5px;
  line-height: 1.45;
}

.attendance-status-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.attendance-status-card {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  min-height: 92px;
  border: 1px solid var(--hrw-line);
  border-radius: 8px;
  background: var(--hrw-panel-soft);
  color: var(--hrw-text);
  padding: 11px;
  text-align: left;
  cursor: pointer;
}

.attendance-status-card:hover,
.attendance-status-card.active {
  border-color: var(--hrw-blue);
  background: var(--attendance-soft-blue);
  box-shadow: inset 0 3px 0 var(--hrw-blue);
}

.attendance-status-card.tone-warning:hover,
.attendance-status-card.tone-warning.active {
  border-color: #f2bd61;
  background: var(--attendance-soft-amber);
  box-shadow: inset 0 3px 0 var(--hrw-amber);
}

.attendance-status-card.tone-danger:hover,
.attendance-status-card.tone-danger.active {
  border-color: #f2a4a4;
  background: var(--attendance-soft-red);
  box-shadow: inset 0 3px 0 var(--hrw-red);
}

.attendance-status-card.tone-success:hover,
.attendance-status-card.tone-success.active {
  border-color: #8bd8ba;
  background: var(--attendance-soft-green);
  box-shadow: inset 0 3px 0 var(--hrw-green);
}

.attendance-status-card span,
.attendance-status-card small,
.attendance-scene-list span,
.attendance-scene-list small {
  color: var(--hrw-text-dim);
  font-size: 12px;
  line-height: 1.35;
}

.attendance-status-card strong {
  color: var(--hrw-blue);
  font-family: var(--hrw-mono);
  font-size: 24px;
  line-height: 1;
}

.attendance-status-card.tone-warning strong {
  color: var(--hrw-amber);
}

.attendance-status-card.tone-danger strong {
  color: var(--hrw-red);
}

.attendance-status-card.tone-success strong {
  color: var(--hrw-green);
}

.attendance-scene-list {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.attendance-scene-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 2px 10px;
  gap: 2px 10px;
  align-items: center;
  min-height: 54px;
  border: 1px solid var(--hrw-line);
  border-radius: 8px;
  background: var(--hrw-panel-soft);
  color: var(--hrw-text);
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.attendance-scene-list button:hover,
.attendance-scene-list button.active {
  border-color: var(--hrw-blue);
  background: var(--attendance-soft-blue);
}

.attendance-scene-list strong {
  grid-row: 1 / 3;
  grid-column: 2;
  color: var(--hrw-blue);
  font-family: var(--hrw-mono);
  font-size: 20px;
  line-height: 1;
}

.attendance-focus-panel {
  align-content: start;
}

.attendance-focus-list {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.attendance-focus-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 4px 10px;
  gap: 4px 10px;
  align-items: center;
  border: 1px solid var(--hrw-line);
  border-radius: 8px;
  background: var(--hrw-panel-soft);
  padding: 9px 10px;
}

.attendance-focus-list article div {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  min-width: 0;
}

.attendance-focus-list article strong,
.attendance-member-cell strong {
  color: var(--hrw-text);
  font-size: 13px;
  font-weight: 800;
}

.attendance-focus-list article span,
.attendance-member-cell span {
  overflow: hidden;
  color: var(--hrw-text-dim);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendance-focus-list article small {
  grid-column: 1 / -1;
  overflow: hidden;
  color: var(--hrw-text-faint);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendance-focus-empty {
  border: 1px dashed var(--hrw-line-strong);
  border-radius: 8px;
  background: var(--hrw-panel-soft);
  color: var(--hrw-text-dim);
  padding: 16px;
  text-align: center;
  font-size: 13px;
}

.hr-workbench .attendance-create-panel {
  padding: 14px;
}

.hr-workbench .attendance-create-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.hr-workbench .attendance-create-grid label {
  color: var(--hrw-text-dim);
  font-size: 12px;
  font-weight: 700;
}

.hr-workbench .attendance-create-grid input,
.hr-workbench .attendance-create-grid select,
.hr-workbench .attendance-create-grid textarea {
  border-color: var(--hrw-line-strong);
  border-radius: 8px;
  background: var(--hrw-panel);
}

.hr-workbench .attendance-create-grid textarea {
  min-height: 76px;
}

.hr-workbench .attendance-create-wide {
  grid-column: span 2;
}

.hr-workbench .attendance-workbench {
  padding: 14px;
}

.attendance-table-head {
  align-items: end;
}

.attendance-queue-panel {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--hrw-line);
  border-radius: 8px;
  background: var(--hrw-panel);
  padding: 12px;
}

.attendance-queue-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: end;
}

.attendance-queue-head > div:first-child {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  min-width: 0;
}

.attendance-queue-head strong {
  color: var(--hrw-text);
  font-size: 15px;
  line-height: 1.25;
}

.attendance-queue-head span {
  color: var(--hrw-text-dim);
  font-size: 12.5px;
  line-height: 1.45;
}

.attendance-queue-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.attendance-queue-tools input {
  height: 34px;
  min-width: 138px;
  border: 1px solid var(--hrw-line-strong);
  border-radius: 8px;
  background: var(--hrw-panel);
  color: var(--hrw-text);
  padding: 0 10px;
  font-size: 13px;
}

.attendance-queue-tools input[type="search"] {
  width: 220px;
}

.attendance-queue-tools > span {
  color: var(--hrw-text-dim);
  font-size: 12px;
  font-weight: 700;
}

.attendance-queue-tools button,
.attendance-queue-pagination button {
  min-height: 32px;
  border: 1px solid var(--hrw-line-strong);
  border-radius: 8px;
  background: var(--hrw-panel);
  color: var(--hrw-blue);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.attendance-queue-tools button:hover,
.attendance-queue-pagination button:hover:not(:disabled) {
  border-color: var(--hrw-blue);
  background: var(--attendance-soft-blue);
}

.attendance-queue-table-wrap {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--hrw-line);
  border-radius: 8px;
  background: var(--hrw-panel);
}

.attendance-queue-table {
  width: 100%;
  min-width: 920px;
  border-collapse: collapse;
}

.attendance-queue-table th,
.attendance-queue-table td {
  border-bottom: 1px solid var(--hrw-line);
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
}

.attendance-queue-table th {
  background: var(--hrw-panel-soft);
  color: var(--hrw-text-dim);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.attendance-queue-table td {
  color: var(--hrw-text);
  font-size: 13px;
}

.attendance-queue-table tr:last-child td {
  border-bottom: 0;
}

.attendance-queue-table tbody tr:hover td {
  background: #f8fbff;
}

.attendance-queue-table tbody tr.is-risk td {
  background: #fffafa;
}

.attendance-row-index {
  width: 54px;
  color: var(--hrw-text-faint);
  font-family: var(--hrw-mono);
  text-align: center;
}

.attendance-person-cell,
.attendance-type-stack,
.attendance-time-stack {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  min-width: 0;
}

.attendance-person-cell strong {
  color: var(--hrw-text);
  font-size: 13.5px;
}

.attendance-person-cell span,
.attendance-type-stack small,
.attendance-time-stack small {
  max-width: 220px;
  overflow: hidden;
  color: var(--hrw-text-dim);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendance-time-stack small {
  color: var(--hrw-text-faint);
  font-family: var(--hrw-mono);
}

.attendance-row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.attendance-row-actions .btn {
  min-height: 30px;
}

.attendance-queue-pagination {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  color: var(--hrw-text-dim);
  font-size: 12px;
}

.attendance-queue-pagination > div {
  display: flex;
  gap: 6px;
}

.attendance-queue-pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.attendance-stats-table {
  min-width: 720px;
}

.attendance-stats-table td:not(:first-child) {
  font-family: var(--hrw-mono);
}

.hr-workbench .attendance-filters-inline {
  align-items: end;
}

.hr-workbench .attendance-filters-inline select {
  border-color: var(--hrw-line-strong);
  border-radius: 8px;
}

.hr-workbench .attendance-table-wrap {
  border-color: var(--hrw-line);
  border-radius: 8px;
}

.hr-workbench .attendance-table {
  min-width: 920px;
}

.hr-workbench .attendance-table th {
  border-bottom: 1px solid var(--hrw-line);
  background: var(--hrw-panel-soft);
  color: var(--hrw-text-dim);
  font-size: 12px;
  font-weight: 800;
}

.hr-workbench .attendance-table td {
  border-bottom-color: var(--hrw-line);
  color: var(--hrw-text);
  vertical-align: middle;
}

.attendance-member-cell {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  min-width: 0;
}

.attendance-type-chip,
.attendance-scene-chip {
  display: inline-flex;
  max-width: 100%;
  min-height: 24px;
  align-items: center;
  overflow: hidden;
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--hrw-panel-soft);
  color: var(--hrw-text-dim);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attendance-scene-chip {
  background: var(--attendance-soft-blue);
  color: var(--hrw-blue);
}

.attendance-site-text {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  color: var(--hrw-text-dim);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hr-workbench .attendance-empty {
  border: 1px dashed var(--hrw-line-strong);
  border-radius: 8px;
  background: var(--hrw-panel-soft);
  color: var(--hrw-text-dim);
  padding: 18px;
}

@media (max-width: 1180px) {
  .attendance-command-grid {
    grid-template-columns: 1fr;
  }

  .attendance-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hr-workbench .attendance-create-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .attendance-status-grid,
  .hr-workbench .attendance-create-grid {
    grid-template-columns: 1fr;
  }

  .attendance-table-head,
  .attendance-panel-head,
  .attendance-queue-head,
  .attendance-queue-pagination {
    display: grid;
  }

  .attendance-queue-tools {
    justify-content: stretch;
  }

  .attendance-queue-tools input,
  .attendance-queue-tools input[type="search"],
  .attendance-queue-tools button {
    width: 100%;
  }

  .hr-workbench .attendance-create-wide {
    grid-column: 1;
  }
}


@media (max-width: 1180px) {
  .customer-command-grid {
    grid-template-columns: 1fr;
  }

  .customer-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .customer-status-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .panel-grid,
  .dashboard-grid,
  .dashboard-command-center,
  .file-detail-grid,
  .analytics-grid,
  .tenant-settings-command,
  .tenant-settings-health,
  .tenant-settings-lanes,
  .tenant-settings-active-list,
  .tenant-settings-flow-steps,
  .workbench-grid,
  .quotation-workbench,
  .quotation-analytics-grid,
  .quotation-layout,
  .delivery-board,
  .production-board,
  .capacity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .business-flow,
  .electrical-kpi-grid,
  .dashboard-quick-actions,
  .customer-profile-grid,
  .opportunity-readiness-grid,
  .quotation-preflight-grid,
  .quotation-priority-grid,
  .workflow-business-group-grid,
  .dashboard-status-overview,
  .dashboard-visual-grid,
  .tenant-start-tasks,
  .dashboard-executive-strip,
  .dashboard-chain-rail,
  .dashboard-control-grid,
  .message-type-grid,
  .project-phase-flow,
  .project-plan-flow,
  .project-execution-flow,
  .project-fund-plan-flow,
  .project-expense-flow,
  .cost-planning-flow,
  .project-profit-sharing-flow,
  .department-budget-report-flow,
  .contract-flow,
  .quotation-list-status-row,
  .quotation-chain-process,
  .chain-handoff-grid,
  .business-check-grid,
  .policy-grid,
  .production-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .business-flow:has(> :last-child:nth-child(3n + 1)),
  .electrical-kpi-grid:has(> :last-child:nth-child(3n + 1)),
  .dashboard-quick-actions:has(> :last-child:nth-child(3n + 1)),
  .customer-profile-grid:has(> :last-child:nth-child(3n + 1)),
  .opportunity-readiness-grid:has(> :last-child:nth-child(3n + 1)),
  .quotation-priority-grid:has(> :last-child:nth-child(3n + 1)),
  .workflow-business-group-grid:has(> :last-child:nth-child(3n + 1)),
  .tenant-start-tasks:has(> :last-child:nth-child(3n + 1)),
  .dashboard-executive-strip:has(> :last-child:nth-child(3n + 1)),
  .dashboard-chain-rail:has(> :last-child:nth-child(3n + 1)),
  .dashboard-control-grid:has(> :last-child:nth-child(3n + 1)),
  .message-type-grid:has(> :last-child:nth-child(3n + 1)),
  .project-phase-flow:has(> :last-child:nth-child(3n + 1)),
  .project-plan-flow:has(> :last-child:nth-child(3n + 1)),
  .project-execution-flow:has(> :last-child:nth-child(3n + 1)),
  .project-fund-plan-flow:has(> :last-child:nth-child(3n + 1)),
  .project-expense-flow:has(> :last-child:nth-child(3n + 1)),
  .cost-planning-flow:has(> :last-child:nth-child(3n + 1)),
  .project-profit-sharing-flow:has(> :last-child:nth-child(3n + 1)),
  .department-budget-report-flow:has(> :last-child:nth-child(3n + 1)),
  .contract-flow:has(> :last-child:nth-child(3n + 1)),
  .chain-handoff-grid:has(> :last-child:nth-child(3n + 1)),
  .business-check-grid:has(> :last-child:nth-child(3n + 1)),
  .policy-grid:has(> :last-child:nth-child(3n + 1)),
  .production-grid:has(> :last-child:nth-child(3n + 1)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .project-spec-grid,
  .project-filter-grid,
  .project-plan-command-grid,
  .forecast-metric-grid,
  .budget-driver-grid,
  .contract-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .attendance-create-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-status-overview,
  .dashboard-visual-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quotation-command-strip {
    grid-template-columns: 1fr;
  }

  .quotation-stepper,
  .quotation-create-flow-grid,
  .quotation-source-grid,
  .quotation-source-list,
  .quotation-template-block,
  .quotation-account-hub,
  .quotation-intake-grid,
  .quotation-intake-row,
  .quotation-pricing-grid,
  .quotation-market-grid,
  .quotation-manager-grid,
  .quotation-summary-panel,
  .quotation-summary-panel dl {
    grid-template-columns: 1fr;
  }

  .quotation-summary-strip,
  .quotation-dashboard-filter-grid,
  .quotation-quality-grid,
  .quotation-action-center-grid,
  .bid-dashboard-filter-grid,
  .bid-guide-actions,
  .bid-decision-grid,
  .bid-timeline-list,
  .bid-readiness-grid,
  .bid-action-grid,
  .budget-analysis-kpi-grid,
  .budget-filter-grid,
  .budget-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .quotation-summary-strip {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  .quotation-dashboard-two-column,
  .bid-dashboard-two-column,
  .budget-two-column {
    grid-template-columns: 1fr;
  }

  .quotation-mini-metrics,
  .quotation-risk-reason-grid,
  .bid-competitor-grid,
  .bid-risk-grid,
  .budget-material-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bid-lost-reasons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finance-filter-grid,
  .finance-aging-grid,
  .finance-milestone-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .finance-two-column {
    grid-template-columns: 1fr;
  }

  .finance-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .report-overview-kpis,
  .report-risk-grid,
  .report-common-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .report-directory-group header {
    display: grid;
    grid-gap: 4px;
    gap: 4px;
  }

  .report-directory-group header small {
    max-width: none;
    text-align: left;
  }

  .report-funnel-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .content {
    padding: 16px;
  }

  .topbar {
    min-height: 0;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 10px;
  }

  .search {
    order: 3;
    flex: 1 0 100%;
  }

  .tenant-welcome {
    display: none;
  }

  .top-actions {
    margin-left: auto;
  }

  .topbar-user-copy,
  .topbar-user-caret {
    display: none;
  }

  .topbar-popover,
  .profile-popover {
    right: -8px;
    width: min(310px, calc(100vw - 24px));
  }

  .sider {
    position: fixed;
    left: -260px;
    width: 240px;
    height: 100vh;
    transition: left 0.2s ease;
    z-index: 20;
  }

  .app-shell.sider-open .sider {
    left: 0;
  }

  .app-shell.sider-collapsed {
    grid-template-columns: 1fr;
  }

  .sider-toggle {
    display: inline-flex;
    align-items: center;
  }

  .sider-collapse-btn {
    display: none;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-header-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-header > .page-header-actions .btn {
    min-width: 0;
    width: 100%;
  }

  .customer-command-grid,
  .customer-chain-steps,
  .customer-kpi-grid,
  .customer-profile-grid-compact,
  .customer-status-tabs,
  .customer-list-head {
    grid-template-columns: 1fr;
  }

  .customer-list-head {
    display: grid;
  }

  .customer-selection-hint {
    width: -moz-fit-content;
    width: fit-content;
  }

  .kpi-grid {
    grid-template-columns: 1fr;
  }

  .customer-form,
  .opportunity-notes-grid,
  .customer-form-workbench,
  .customer-form-canvas-grid,
  .customer-form-intro-banner,
  .customer-form-intro-metrics,
  .customer-form-guide-focus,
  .customer-form-grid,
  .customer-form-guide-grid,
  .customer-form-outcome-strip,
  .detail-grid,
  .filter-grid,
  .tenant-settings-command,
  .tenant-settings-health,
  .tenant-settings-hero,
  .tenant-settings-ops,
  .tenant-settings-lanes,
  .tenant-settings-active-list,
  .tenant-settings-flow-steps,
  .organization-tree-summary,
  .organization-governance-strip,
  .organization-summary-grid,
  .message-stat-grid,
  .message-type-grid,
  .quotation-command-metrics,
  .quotation-create-flow-map header,
  .quotation-preset-rail,
  .quotation-create-flow-grid,
  .quotation-step-form-layout,
  .quotation-stepper,
  .quotation-account-hub,
  .quotation-object-picker,
  .quotation-source-card,
  .quotation-active-step-strip,
  .quotation-intake-grid,
  .quotation-intake-row,
  .quotation-field-grid,
  .quotation-link-grid,
  .quotation-pricing-grid,
  .quotation-market-grid,
  .quotation-manager-grid,
  .quotation-item-grid,
  .quotation-item-head,
  .file-detail-grid {
    grid-template-columns: 1fr;
  }

  .customer-form-page-hero-head {
    flex-direction: column;
  }

  .customer-form-page-hero .page-header-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .customer-form-card-head {
    flex-direction: column;
  }

  .customer-form-action-card {
    position: static;
    margin: 0 24px 24px;
  }

  .customer-form-primary-head .customer-form-summary-tags {
    justify-content: flex-start;
  }

  .customer-form-footer-bar {
    position: static;
    flex-direction: column;
    align-items: stretch;
  }

  .notice-bar {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .notice-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .message-type-card {
    grid-template-columns: 32px minmax(0, 1fr) auto;
  }

  .message-type-icon {
    width: 32px;
    height: 32px;
  }

  .file-detail-hero,
  .file-attention-strip {
    flex-direction: column;
    align-items: flex-start;
  }

  .file-detail-status {
    justify-content: flex-start;
    min-width: 0;
  }

  .quotation-create-link-card {
    grid-template-columns: 1fr;
  }

  .quotation-create-link-card .btn {
    grid-row: auto;
    grid-column: auto;
    width: 100%;
  }

  .quotation-account-card-head {
    display: grid;
  }

  .quotation-object-actions,
  .quotation-object-actions .btn {
    width: 100%;
  }

  .quotation-object-actions {
    display: grid;
  }

  .quotation-object-facts {
    grid-template-columns: 1fr;
  }

  .quotation-step-focus {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    padding-right: 0;
    padding-bottom: 8px;
  }

  .contract-date-fields {
    grid-template-columns: 1fr;
  }

  .business-flow,
  .electrical-kpi-grid,
  .dashboard-quick-actions,
  .customer-profile-grid,
  .opportunity-readiness-grid,
  .quotation-preflight-grid,
  .quotation-priority-grid,
  .workflow-business-group-grid,
  .dashboard-status-overview,
  .dashboard-visual-grid,
  .tenant-start-strip,
  .tenant-start-tasks,
  .dashboard-command-center,
  .dashboard-executive-strip,
  .dashboard-chain-rail,
  .dashboard-control-grid,
  .project-phase-flow,
  .project-plan-flow,
  .project-execution-flow,
  .project-fund-plan-flow,
  .project-expense-flow,
  .cost-planning-flow,
  .project-profit-sharing-flow,
  .department-budget-report-flow,
  .contract-flow,
  .quotation-list-status-row,
  .quotation-dashboard-filter-grid,
  .quotation-quality-grid,
  .quotation-dashboard-two-column,
  .quotation-mini-metrics,
  .quotation-action-center-grid,
  .quotation-risk-reason-grid,
  .bid-dashboard-filter-grid,
  .bid-guide-actions,
  .bid-decision-grid,
  .bid-dashboard-two-column,
  .bid-timeline-list,
  .bid-readiness-grid,
  .bid-competitor-grid,
  .bid-risk-grid,
  .bid-action-grid,
  .bid-lost-reasons,
  .finance-filter-grid,
  .finance-aging-grid,
  .finance-milestone-grid,
  .finance-two-column,
  .finance-metric-grid,
  .finance-action-grid,
  .budget-filter-grid,
  .budget-analysis-kpi-grid,
  .budget-two-column,
  .budget-material-grid,
  .budget-action-grid,
  .budget-project-row,
  .spec-grid,
  .workbench-grid,
  .analytics-grid,
  .quotation-summary-strip,
  .quotation-chain-layout,
  .quotation-chain-process,
  .quotation-chain-actions,
  .chain-handoff-grid,
  .business-check-grid,
  .panel-grid,
  .quotation-workbench,
  .quotation-analytics-grid,
  .pipeline-grid,
  .policy-grid,
  .production-grid,
  .quotation-layout,
  .delivery-board,
  .production-board,
  .capacity-grid,
  .project-spec-grid,
  .project-filter-grid,
  .project-plan-command-grid,
  .project-plan-health-grid,
  .forecast-metric-grid,
  .budget-driver-grid,
  .contract-filter-grid {
    grid-template-columns: 1fr;
  }

  .quotation-stepper,
  .quotation-summary-panel {
    position: static;
  }

  .quotation-chain-action {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .quotation-chain-command {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .quotation-chain-actions {
    min-height: 0;
  }

  .quotation-chain-command em,
  .quotation-chain-action em {
    grid-column: 2;
  }

  .quotation-chain-stage,
  .quotation-chain-action,
  .chain-handoff-item {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--surface-soft);
  }

  .quotation-chain-action:last-child {
    border-bottom: 0;
  }

  .quotation-chain-stage::after {
    display: none;
  }

  .quotation-view-switch,
  .quotation-section-head {
    width: 100%;
  }

  .quotation-view-switch,
  .quotation-section-head {
    display: grid;
  }

  .quotation-view-switch button {
    min-width: 0;
  }

  .project-plan-kpi-grid,
  .project-execution-kpi-grid,
  .project-fund-plan-kpi-grid,
  .project-expense-kpi-grid,
  .cost-planning-kpi-grid,
  .project-profit-sharing-kpi-grid,
  .department-budget-report-kpi-grid {
    grid-template-columns: 1fr;
  }

  .budget-trend-row,
  .contract-kpi-grid {
    grid-template-columns: 1fr;
  }

  .record-row {
    flex-direction: column;
  }

  .record-meta {
    text-align: left;
  }

  .attendance-create-grid {
    grid-template-columns: 1fr;
  }

  .business-flow:has(> :last-child:nth-child(3n + 1)),
  .tenant-start-tasks:has(> :last-child:nth-child(3n + 1)),
  .dashboard-executive-strip:has(> :last-child:nth-child(3n + 1)),
  .dashboard-chain-rail:has(> :last-child:nth-child(3n + 1)),
  .dashboard-control-grid:has(> :last-child:nth-child(3n + 1)),
  .message-type-grid:has(> :last-child:nth-child(3n + 1)),
  .project-phase-flow:has(> :last-child:nth-child(3n + 1)),
  .project-plan-flow:has(> :last-child:nth-child(3n + 1)),
  .project-execution-flow:has(> :last-child:nth-child(3n + 1)),
  .project-fund-plan-flow:has(> :last-child:nth-child(3n + 1)),
  .project-expense-flow:has(> :last-child:nth-child(3n + 1)),
  .cost-planning-flow:has(> :last-child:nth-child(3n + 1)),
  .project-profit-sharing-flow:has(> :last-child:nth-child(3n + 1)),
  .department-budget-report-flow:has(> :last-child:nth-child(3n + 1)),
  .contract-flow:has(> :last-child:nth-child(3n + 1)),
  .chain-handoff-grid:has(> :last-child:nth-child(3n + 1)),
  .policy-grid:has(> :last-child:nth-child(3n + 1)),
  .production-grid:has(> :last-child:nth-child(3n + 1)) {
    grid-template-columns: 1fr;
  }
}

.platform-page,
.role-page {
  display: grid;
  grid-gap: 18px;
  gap: 18px;
}

.platform-hero,
.role-hero {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 18px;
}

.platform-governance-grid,
.platform-metrics,
.role-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.platform-command-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.platform-setting-health {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.platform-setting-sections {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

.platform-setting-section {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.platform-command-card {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  min-height: 118px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  padding: 16px;
  text-decoration: none;
}

.platform-command-card span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.platform-command-card strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.2;
}

.platform-command-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.platform-command-card:hover,
.platform-governance-card:hover {
  border-color: var(--brand-300);
  background: var(--surface);
}

.platform-governance-card,
.platform-metric,
.role-metric {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
  text-decoration: none;
  color: inherit;
}

.platform-governance-card {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.platform-governance-card span,
.platform-metric span,
.role-metric span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.platform-governance-card strong,
.platform-metric strong,
.role-metric strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.2;
}

.platform-governance-card p,
.platform-metric small,
.role-metric small {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.platform-workbench,
.platform-industry-grid,
.role-workbench {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
  grid-gap: 14px;
  gap: 14px;
  align-items: start;
}

.platform-risk-panel,
.platform-principle-panel,
.platform-stage-panel,
.platform-blueprint-panel,
.role-list-panel,
.role-editor {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.platform-risk-list,
.role-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.platform-risk-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  border-bottom: 1px solid var(--surface-soft);
  padding: 10px 0;
  text-decoration: none;
}

.platform-risk-item span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--c-success-ink);
  font-weight: 800;
}

.platform-risk-item strong,
.platform-principle-panel p {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}

.platform-risk-item p,
.platform-muted {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.platform-risk-item em {
  display: inline-block;
  margin-top: 6px;
  color: var(--c-success-ink);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.platform-risk-item.severity-critical span,
.platform-metric.tone-danger {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

.platform-risk-item.severity-high span,
.platform-metric.tone-warning {
  background: var(--accent-50);
  color: var(--accent-600);
}

.platform-metric {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  min-height: 92px;
}

.platform-metric.tone-success {
  background: var(--surface-sunk);
  border-color: var(--c-success-border);
}

.platform-metric.tone-danger,
.platform-metric.tone-warning {
  border-color: currentColor;
}

.platform-roadmap {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.platform-roadmap-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  grid-gap: 9px;
  gap: 9px;
  align-items: start;
}

.platform-roadmap-item span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 12px;
  font-weight: 900;
}

.platform-roadmap-item p {
  margin: 0;
}

.platform-coverage {
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}

.platform-coverage-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--surface-soft);
  padding: 8px 0;
}

.platform-coverage-row strong {
  color: var(--ink);
  font-size: 13px;
}

.platform-coverage-row span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.platform-stage-list,
.platform-blueprint-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.platform-stage-row {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
  color: inherit;
  text-decoration: none;
}

.platform-stage-row > span {
  border-radius: 999px;
  background: var(--accent-50);
  color: var(--accent-600);
  padding: 5px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
}

.platform-stage-row.status-ready > span {
  background: var(--c-success-soft);
  color: var(--c-success-ink);
}

.platform-stage-row.status-needs_user_setup > span {
  background: var(--brand-50);
  color: var(--brand-600);
}

.platform-stage-row strong,
.platform-blueprint-row strong {
  color: var(--ink);
  font-size: 14px;
}

.platform-stage-row p,
.platform-blueprint-row p {
  margin: 5px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.platform-blueprint-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(0, 1.2fr) auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--surface-soft);
  padding: 10px 0;
}

.platform-blueprint-row span,
.platform-blueprint-row em {
  display: block;
  color: var(--ink-2);
  font-size: 12px;
  font-style: normal;
}

.platform-blueprint-row em {
  border-radius: 999px;
  background: var(--surface-sunk);
  padding: 5px 8px;
  font-weight: 800;
  white-space: nowrap;
}

.platform-template-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  grid-gap: 14px;
  gap: 14px;
  align-items: start;
}

.platform-template-panel {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.platform-template-panel.compact {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.platform-template-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 12px;
}

.platform-template-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.72fr);
  grid-gap: 14px;
  gap: 14px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 14px;
  color: inherit;
  text-decoration: none;
}

.platform-template-card.status-recommended {
  border-color: var(--cyan-500);
  background: var(--surface-sunk);
}

.platform-template-card span,
.platform-bundle-card span,
.platform-bundle-card small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.platform-template-card strong,
.platform-bundle-card strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 15px;
}

.platform-template-card p,
.platform-bundle-card p,
.platform-bundle-card em {
  margin: 6px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  font-style: normal;
  line-height: 1.5;
}

.platform-template-card ol {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  font-size: 13px;
}

.platform-bundle-card {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 12px;
}

.platform-bundle-card.risk-critical {
  border-color: var(--c-danger-border);
  background: var(--c-danger-soft);
}

.platform-bundle-card.risk-high {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.platform-template-governance {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.platform-template-table {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.template-governance-row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(180px, 0.6fr) minmax(180px, auto);
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 12px;
}

.template-governance-row.status-draft {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.template-governance-row.status-deprecated {
  background: var(--surface-sunk);
}

.template-governance-row span,
.template-governance-meta span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.template-governance-row strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
}

.template-governance-row p {
  margin: 5px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.template-governance-meta,
.template-governance-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.template-governance-actions {
  justify-content: flex-end;
}

.template-governance-actions button {
  min-height: 30px;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}

.template-governance-actions button:disabled {
  color: var(--ink-3);
  background: var(--surface-sunk);
}

.platform-operations {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.platform-operation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
}

.platform-operation-panel {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.platform-operation-panel.risks {
  background: var(--surface);
}

.platform-operation-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.operation-metric {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  min-height: 92px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.operation-metric span,
.operation-metric small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.operation-metric strong {
  color: var(--ink);
  font-size: 22px;
}

.operation-metric.tone-success {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.operation-metric.tone-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.operation-metric.tone-danger {
  border-color: var(--c-danger-border);
  background: var(--c-danger-soft);
}

.platform-operation-risk-list {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.platform-operation-risk {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  border-left: 4px solid var(--ink-3);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 10px;
  color: inherit;
  text-decoration: none;
}

.platform-operation-risk.severity-critical {
  border-color: #dc2626;
  background: var(--c-danger-soft);
}

.platform-operation-risk.severity-high {
  border-color: var(--accent-500);
  background: var(--accent-50);
}

.platform-operation-risk strong {
  color: var(--ink);
  font-size: 14px;
}

.platform-operation-risk p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.platform-operation-risk span {
  color: var(--c-success-ink);
  font-size: 12px;
  font-weight: 900;
}

.status-transition-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-top: 12px;
}

.status-transition-card {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 13px;
  color: inherit;
  text-decoration: none;
}

.status-transition-card.risk-critical {
  border-color: var(--c-danger-border);
}

.status-transition-card.risk-high {
  border-color: var(--accent-200);
}

.status-transition-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.status-transition-head span {
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-700);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 900;
}

.status-transition-head strong {
  color: var(--ink);
  font-size: 15px;
}

.status-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.status-flow span {
  position: relative;
  border: 1px solid var(--hairline-strong);
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
}

.status-transition-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
}

.status-transition-foot {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  border-top: 1px solid var(--surface-soft);
  padding-top: 9px;
}

.status-transition-foot span,
.status-transition-foot em,
.status-transition-foot small {
  color: var(--ink-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.approval-policy-workbench {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  grid-gap: 16px;
  gap: 16px;
  align-items: start;
}

.approval-policy-list,
.approval-policy-detail {
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.99), rgba(249, 251, 255, 0.98));
  padding: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 12px 28px rgba(15, 23, 42, 0.05);
}

.approval-policy-list {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.approval-policy-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-gap: 8px 12px;
  gap: 8px 12px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  padding: 12px 14px;
  text-align: left;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease,
    transform 0.16s ease;
}

.approval-policy-row:hover {
  border-color: var(--brand-200);
  background: linear-gradient(180deg, #ffffff 0%, var(--brand-50) 100%);
  box-shadow: 0 14px 28px rgba(59, 130, 246, 0.1);
  transform: translateY(-1px);
}

.approval-policy-row.selected {
  border-color: var(--brand-600);
  background:
    radial-gradient(circle at top right, rgba(44, 110, 164, 0.1), transparent 36%),
    linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
  box-shadow: 0 14px 28px rgba(15, 46, 92, 0.1);
}

.approval-policy-row.selected::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--brand-600), var(--brand-700));
}

.approval-policy-row strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.approval-policy-row small,
.approval-policy-row em {
  grid-column: 2 / -1;
  color: var(--ink-2);
  font-size: 12px;
  font-style: normal;
  line-height: 1.55;
}

.policy-risk {
  align-self: start;
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink-2);
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 900;
}

.policy-risk.risk-high {
  background: var(--accent-50);
  color: var(--accent-600);
}

.policy-risk.risk-critical {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

.approval-policy-detail {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: start;
  height: -moz-fit-content;
  height: fit-content;
}

.approval-policy-detail .role-section-title {
  margin-bottom: 16px;
}

.approval-policy-detail .role-section-title strong {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.approval-policy-detail .role-section-title span {
  font-size: 13px;
  font-weight: 700;
}

.approval-policy-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin: 0 0 16px;
}

.approval-policy-meta div {
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  padding: 12px 14px;
}

.approval-policy-meta dt {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.approval-policy-meta dd {
  margin: 6px 0 0;
  color: var(--ink);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.4;
}

.approval-policy-section {
  border-top: 1px solid var(--surface-soft);
  padding: 14px 0;
}

.approval-policy-section strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}

.approval-policy-section p {
  margin: 8px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.75;
}

.approval-policy-tags,
.approval-policy-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 8px;
}

.approval-policy-tags span,
.approval-policy-codes code,
.approval-policy-codes span {
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-800);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 800;
}

.approval-policy-codes code {
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.approval-policy-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--surface-soft);
  padding-top: 14px;
}

.approval-policy-actions .btn {
  max-width: 100%;
}

.approval-policy-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin: -2px 0 12px;
}

.approval-policy-field {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.approval-policy-field input,
.approval-policy-field select,
.approval-policy-field textarea,
.approval-policy-node-editor select {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  outline: none;
}

.approval-policy-field input,
.approval-policy-field select,
.approval-policy-node-editor select {
  min-height: 38px;
  padding: 8px 10px;
}

.approval-policy-field textarea {
  min-height: 88px;
  resize: vertical;
  padding: 10px 12px;
  line-height: 1.55;
}

.approval-policy-description-field {
  margin-top: 10px;
}

.approval-policy-node-editor-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 10px;
}

.approval-policy-node-editor {
  display: grid;
  grid-template-columns: 76px minmax(160px, 1fr) auto;
  grid-gap: 8px;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 9px;
}

.approval-policy-node-index {
  color: var(--brand-800);
  font-size: 12px;
  font-weight: 900;
}

.approval-policy-node-actions,
.approval-policy-editor-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.approval-policy-editor-tools {
  justify-content: space-between;
}

.approval-policy-editor-tools small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.platform-principle-panel {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.platform-principle-panel strong {
  color: var(--ink);
  font-size: 18px;
}

.role-metric {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.role-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, auto) auto auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
}

.role-search {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px 12px;
}

.role-search span {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}

.role-search input,
.role-toolbar select,
.role-form-grid input,
.role-form-grid select {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  outline: none;
}

.role-toolbar select,
.role-form-grid input,
.role-form-grid select {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px 12px;
}

.role-segment {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 4px;
}

.role-segment button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 7px 11px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}

.role-segment button.active {
  background: var(--ink);
  color: var(--ink-inverse);
}

.role-notice {
  margin: 0;
  border: 1px solid var(--c-success-border);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 10px 12px;
  color: var(--c-success-ink);
  font-weight: 700;
}

.role-notice.warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
  color: var(--accent-700);
}

.role-section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.role-section-title strong {
  color: var(--ink);
  font-size: 16px;
}

.role-section-title span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.role-row {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) minmax(100px, 0.8fr);
  grid-gap: 7px 10px;
  gap: 7px 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
  text-align: left;
}

.role-row.selected {
  border-color: var(--c-success-ink);
  background: var(--surface-sunk);
}

.role-row strong {
  color: var(--ink);
}

.role-row small,
.role-row em,
.role-row span:last-child {
  color: var(--ink-2);
  font-size: 12px;
  font-style: normal;
}

.role-row span:last-child {
  grid-column: 2 / -1;
}

.role-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.role-form-grid label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.role-form-grid label > span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.role-description-field {
  grid-column: 1 / -1;
}

.role-access-panel {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 16px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 14px;
}

.role-access-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.7fr) minmax(220px, 0.9fr);
  grid-gap: 10px;
  gap: 10px;
}

.role-access-map,
.role-boundary-card {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.role-access-map {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.role-access-map > strong,
.role-boundary-card > strong {
  color: var(--ink);
  font-size: 13px;
}

.role-access-group {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  border-top: 1px solid var(--surface-soft);
  padding-top: 9px;
}

.role-access-group span {
  color: var(--brand-800);
  font-size: 12px;
  font-weight: 800;
}

.role-access-group p,
.role-access-empty,
.role-boundary-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.55;
}

.role-boundary-card {
  display: grid;
  align-content: start;
  grid-gap: 8px;
  gap: 8px;
}

.role-boundary-card p {
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
}

.role-boundary-card span {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}

.role-boundary-card.warning {
  background: var(--accent-50);
  border-color: var(--accent-200);
}

.role-boundary-card.warning p {
  color: var(--accent-700);
  font-size: 12px;
  font-weight: 700;
}

.permission-matrix {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 16px;
}

.role-template-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.role-template-strip button {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
  text-align: left;
}

.role-template-strip button:disabled {
  color: var(--ink-3);
  background: var(--surface-sunk);
}

.role-template-strip strong {
  color: var(--ink);
  font-size: 13px;
}

.role-template-strip span {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.4;
}

.permission-tools {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 150px auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: end;
}

.permission-search {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.permission-search span,
.permission-selected-toggle span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.permission-search input,
.permission-tools select {
  width: 100%;
  height: 38px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 0 10px;
}

.permission-selected-toggle {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 0 10px;
}

.permission-risk-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.permission-risk-summary span {
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink-2);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 800;
}

/* —— 角色详情重设计：概览卡(状态徽标 + 风险条) + 权限按模块分组卡片，替代原 245 条扁平网格 —— */
.rd-hero-badges {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.role-overview-card,
.role-perm-card {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.rd-overview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rd-risk-strip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.rd-risk-total {
  margin-right: 2px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.rd-risk {
  border-radius: 999px;
  padding: 3px 9px;
  background: var(--surface-sunk);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.rd-risk.is-medium {
  background: var(--ui-color-warning-soft, #fdf3e0);
  color: var(--ui-color-warning-ink, #c98a16);
}

.rd-risk.is-high {
  background: var(--accent-50, #fdeede);
  color: var(--accent-700, #b5560f);
}

.rd-risk.is-critical {
  background: var(--c-danger-soft, #ffe8ea);
  color: var(--c-danger-ink, #d92d20);
}

.detail-kv-wide {
  grid-column: 1 / -1;
}

.role-perm-modules {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.role-perm-module {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  align-content: start;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
}

.role-perm-module-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.role-perm-module-head strong {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 800;
}

.role-perm-module-head span {
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.role-perm-flag {
  color: var(--c-danger-ink, #d92d20);
  font-style: normal;
}

.role-perm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.role-perm-chip {
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 700;
}

/* 已授予：亮色（钢蓝底） */
.role-perm-chip.is-on {
  border-color: var(--brand-200, var(--brand-100));
  background: var(--brand-50);
  color: var(--brand-700, var(--brand-600));
}

/* 已授予且高危：橙色强调 */
.role-perm-chip.is-on.is-risk {
  border-color: var(--accent-100, #f4cfa6);
  background: var(--accent-50, #fdeede);
  color: var(--accent-700, #b5560f);
}

/* 未授予：灰、虚线、留白（一眼区分能/不能） */
.role-perm-chip.is-off {
  border-style: dashed;
  border-color: var(--hairline);
  background: transparent;
  color: var(--ink-3);
}

.role-perm-empty {
  margin: 0;
  color: var(--ink-3);
  font-size: 13px;
}

/* —— 角色页就地编辑（查看⇄编辑同页）—— */
.rd-mode-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ui-color-warning-soft, #fdf3e0);
  color: var(--ui-color-warning-ink, #c98a16);
  font-size: 11px;
  font-weight: 800;
}

.rd-inline-input {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 6px 9px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
}

/* 编辑态：权限 chip 是可点按钮 */
button.role-perm-chip {
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
}

button.role-perm-chip:hover {
  border-color: var(--brand-400, var(--brand-300));
}

/* 本次新增（原未授→现授予）：绿色 + ＋ */
.role-perm-chip.is-added {
  border-style: solid;
  border-color: var(--c-success-ink, #1f9d6b);
  background: var(--c-success-soft, #e7f6ef);
  color: var(--c-success-ink, #1f9d6b);
  opacity: 1;
}

.role-perm-chip.is-added::before {
  content: "＋";
  margin-right: 1px;
  font-weight: 900;
}

/* 本次取消（原授予→现未授）：红色 + 删除线 + − */
.role-perm-chip.is-removed {
  border-style: solid;
  border-color: var(--c-danger-ink, #d92d20);
  background: var(--c-danger-soft, #ffe8ea);
  color: var(--c-danger-ink, #d92d20);
  text-decoration: line-through;
  opacity: 1;
}

.role-perm-chip.is-removed::before {
  content: "−";
  margin-right: 1px;
  font-weight: 900;
  text-decoration: none;
}

.rd-module-toggle {
  margin-left: 8px;
  border: 1px solid var(--brand-200, var(--brand-100));
  border-radius: 6px;
  padding: 1px 8px;
  background: var(--surface);
  color: var(--brand-600);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

/* 套用模板下拉 */
.rd-template-menu {
  position: relative;
}

.rd-template-menu > summary {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.rd-template-menu > summary::-webkit-details-marker {
  display: none;
}

.rd-template-list {
  position: absolute;
  right: 0;
  z-index: 20;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  width: 320px;
  max-height: 360px;
  margin-top: 6px;
  overflow: auto;
  padding: 6px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(15, 46, 92, 0.16);
}

.rd-template-list button {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.rd-template-list button:hover {
  border-color: var(--brand-100);
  background: var(--surface-soft);
}

.rd-template-list strong {
  color: var(--ink);
  font-size: 13px;
}

.rd-template-list span {
  color: var(--ink-3);
  font-size: 11px;
}

/* 底部保存条 */
.role-page.is-editing {
  padding-bottom: 124px;
}

.rd-savebar {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 16px -32px -24px;
  padding: 14px 32px;
  border-top: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: 0 -8px 24px rgba(15, 46, 92, 0.08);
}

.rd-savebar-changes {
  flex: 1 1;
  min-width: 280px;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.rd-chg-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.rd-chg-line strong {
  color: var(--ink);
}

.rd-chg-add {
  color: var(--c-success-ink, #1f9d6b);
  font-weight: 800;
}

.rd-chg-del {
  color: var(--c-danger-ink, #d92d20);
  font-weight: 800;
}

.rd-chg-field {
  color: var(--ui-color-warning-ink, #c98a16);
  font-weight: 700;
}

.rd-chg-risk {
  color: var(--ink-3);
  font-size: 12px;
}

.rd-chg-none {
  color: var(--ink-3);
}

.rd-chg-detail {
  margin: 0;
  max-height: 48px;
  overflow: auto;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}

.rd-chg-detail b {
  margin-right: 4px;
}

.rd-savebar-side {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.rd-savebar-side .role-approval-reason {
  margin: 0;
}

.rd-savebar-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.permission-empty {
  margin: 0;
  border: 1px dashed var(--hairline-strong);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 14px;
  color: var(--ink-2);
  font-size: 13px;
}

.permission-group {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 12px;
}

.permission-group.disabled-group {
  border-style: dashed;
  background: var(--surface-sunk);
  opacity: 0.78;
}

.permission-group.disabled-group .permission-item {
  background: var(--surface-sunk);
}

.permission-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.permission-group-head button {
  border: 1px solid var(--hairline-strong);
  border-radius: 6px;
  background: var(--surface);
  padding: 6px 9px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.permission-group-head strong {
  flex: 1 1;
  color: var(--ink);
}

.permission-group-head span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.permission-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-gap: 9px;
  gap: 9px;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.permission-item input {
  width: 16px;
  height: 16px;
}

.permission-item strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.permission-item small {
  display: block;
  color: var(--ink-2);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.permission-item em {
  border-radius: 999px;
  padding: 4px 7px;
  background: var(--surface-sunk);
  color: var(--ink-2);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.permission-item.risk-high em {
  background: var(--accent-50);
  color: var(--accent-600);
}

.permission-item.risk-critical em {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

/* —— 编辑页权限矩阵：未勾选权限项明显置灰、已勾选高亮（钢蓝底），一眼分清启用/未启用 —— */
.permission-matrix .permission-item {
  background: var(--surface-sunk);
  opacity: 0.55;
  transition: opacity 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.permission-matrix .permission-item:has(input:checked) {
  background: var(--brand-50);
  border-color: var(--brand-200, var(--brand-100));
  opacity: 1;
}

/* 快速模板：17 个卡片压扁 + 限高滚动，给权限矩阵让出空间 */
.role-template-strip {
  max-height: 192px;
  overflow-y: auto;
}

.role-template-strip button {
  padding: 8px 10px;
}

.role-template-strip span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.user-create-roles {
  grid-column: 1 / -1;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.user-create-roles > span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.user-role-head {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(160px, 0.8fr);
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
}

.user-role-head.compact {
  grid-template-columns: 72px minmax(0, 1fr);
}

.user-role-head span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.user-role-head input {
  width: 100%;
  height: 34px;
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  background: var(--surface);
  padding: 0 10px;
}

.user-role-bundles {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.user-role-bundles button {
  min-height: 30px;
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-600);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
}

.user-role-bundles button:disabled {
  color: var(--ink-3);
  background: var(--surface-sunk);
}

.user-role-picker {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.user-role-picker.compact {
  grid-template-columns: 1fr;
}

.user-role-picker label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-gap: 4px 8px;
  gap: 4px 8px;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 9px;
}

.user-role-picker input {
  grid-row: 1 / 3;
  width: 16px;
  height: 16px;
}

.user-role-picker strong {
  color: var(--ink);
  font-size: 13px;
}

.user-role-picker small {
  color: var(--ink-2);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.user-role-picker p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
}

.user-role-assignment-panel {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
}

@media (max-width: 1100px) {
  .platform-command-strip,
  .platform-governance-grid,
  .platform-metrics,
  .role-metrics,
  .role-access-layout,
  .role-template-strip,
  .permission-grid,
  .user-role-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .platform-workbench,
  .platform-industry-grid,
  .platform-operation-grid,
  .platform-template-grid,
  .approval-policy-workbench,
  .role-workbench {
    grid-template-columns: 1fr;
  }

  .approval-policy-detail {
    position: static;
  }
}

@media (max-width: 860px) {
  .quotation-column-panel,
  .quotation-table-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .quotation-column-list {
    grid-template-columns: 1fr;
  }

  .approval-designer-shell,
  .approval-progress-summary,
  .approval-config-grid,
  .approval-add-role-row {
    grid-template-columns: 1fr;
  }

  .approval-designer-sidebar,
  .approval-node-config-panel {
    position: static;
    max-height: none;
  }

  .approval-policy-list-scroll {
    max-height: none;
  }

  .approval-designer-titlebar,
  .approval-audit-hero,
  .approval-hub-head,
  .approval-progress-summarybar,
  .approval-progress-head {
    flex-direction: column;
  }

  .approval-progress-summarybar {
    grid-template-columns: 1fr;
  }

  .approval-progress-facts {
    align-items: stretch;
    flex-direction: column;
  }

  .approval-progress-facts > div {
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }

  .approval-role-node-list article {
    grid-template-columns: 1fr;
  }

  .approval-designer-actions,
  .approval-audit-actions,
  .approval-hub-actions,
  .approval-progress-actions,
  .approval-role-node-list article > div {
    justify-content: flex-start;
  }

  .approval-template-grid,
  .approval-audit-metrics,
  .approval-audit-coverage-grid,
  .approval-hub-flow,
  .approval-readiness-grid {
    grid-template-columns: 1fr;
  }

  .approval-hub-flow article::after {
    display: none;
  }
}

.price-library-kpis {
  margin-bottom: 14px;
}

.page-more-menu {
  position: relative;
}

.page-more-menu summary {
  list-style: none;
}

.page-more-menu summary::-webkit-details-marker {
  display: none;
}

.page-more-menu-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 180px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
  padding: 6px;
}

.page-more-menu-list button,
.page-more-menu-list a {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  padding: 9px 10px;
  text-align: left;
  text-decoration: none;
}

.page-more-menu-list button:hover,
.page-more-menu-list a:hover {
  background: var(--brand-50);
  color: #165dff;
}

.price-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 10px;
}

.price-summary-card {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  min-height: 94px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px 14px;
}

.price-summary-card span {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
}

.price-summary-card strong {
  color: var(--ink);
  font-size: 19px;
  line-height: 1.25;
}

.price-summary-card small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.55;
}

.price-summary-card.tone-success {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.price-summary-card.tone-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.price-summary-card.tone-info {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.price-material-strip article,
.price-action-card,
.template-download-card,
.cost-trace-card,
.price-version-row {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 12px;
}

.price-material-strip article,
.price-action-card,
.template-download-card,
.price-version-row {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.price-material-strip span,
.price-action-card span,
.template-download-card span,
.price-version-row span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.price-material-strip strong,
.price-action-card strong,
.template-download-card strong,
.price-version-row strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.3;
}

.price-material-strip small,
.price-action-card small,
.template-download-card small,
.price-version-row small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}

.standard-template-callout {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  border: 1px solid var(--brand-200);
  border-left: 4px solid var(--brand-500);
  border-radius: 8px;
  background: var(--brand-50);
  padding: 12px 14px;
}

.standard-template-callout strong {
  color: var(--brand-800);
  font-size: 14px;
}

.standard-template-callout span {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
}

.price-library-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 7px;
  margin: 8px 0 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-gutter: stable;
}

.price-library-tabs button {
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 11px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.price-library-tabs button.active {
  border-color: #165dff;
  background: var(--brand-50);
  color: #165dff;
}

.price-library-grid,
.price-library-rules {
  display: grid;
  grid-template-columns: minmax(360px, 0.85fr) minmax(0, 1.15fr);
  grid-gap: 14px;
  gap: 14px;
  align-items: start;
}

.price-library-rules {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.price-version-create {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-gap: 14px;
  gap: 14px;
  align-items: start;
}

.version-create-layout {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1180px;
}

.price-version-create-card {
  max-width: none;
}

.version-create-main {
  display: grid;
  min-width: 0;
  grid-gap: 12px;
  gap: 12px;
}

.price-version-guidance {
  margin: 0;
}

.version-form-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.version-form-section {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  border-top: 1px solid var(--surface-soft);
  padding-top: 12px;
}

.version-form-section h3 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.25;
}

.version-form-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) minmax(180px, 0.8fr) minmax(150px, 0.6fr);
  grid-gap: 10px;
  gap: 10px;
}

.version-form-grid .wide {
  min-width: 0;
}

.build-method-context {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.build-method-template {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(220px, 1fr) auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: start;
}

.build-method-copy,
.field-structure-grid article {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 10px;
}

.build-method-copy strong,
.field-structure-grid strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.build-method-copy span,
.field-structure-grid span,
.field-structure-grid small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}

.field-structure-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.version-remark-field textarea {
  min-height: 88px;
}

.version-create-reference {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-gap: 12px;
  gap: 12px;
}

.version-flow-panel,
.version-import-panel,
.version-recent-panel {
  align-content: start;
}

.version-import-panel {
  border-color: var(--brand-200);
  background: var(--surface);
}

.version-import-grid {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(260px, 1fr) minmax(220px, 0.9fr);
  grid-gap: 10px;
  gap: 10px;
  align-items: start;
}

.custom-combobox-field {
  position: relative;
  min-width: 0;
}

.custom-combobox-field > label,
.custom-combobox-field > span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.custom-combobox-control {
  display: flex;
  position: relative;
  min-width: 0;
}

.custom-combobox-control input {
  border-radius: 10px;
  padding-right: 38px;
}

.custom-combobox-control button {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 36px;
  border: 0;
  border-radius: 0 9px 9px 0;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 14px;
}

.custom-combobox-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  width: 100%;
  min-width: 100%;
  max-width: min(520px, calc(100vw - 48px));
  border: 1px solid var(--brand-200);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);
  padding: 8px;
}

.custom-combobox-search {
  min-height: 36px;
}

.custom-combobox-options {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  max-height: 260px;
  overflow: auto;
}

.custom-combobox-options button {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  min-width: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  padding: 8px 9px;
  cursor: pointer;
  text-align: left;
}

.custom-combobox-options button:hover,
.custom-combobox-options button.active {
  background: var(--brand-50);
  color: #165dff;
}

.custom-combobox-options strong,
.custom-select-trigger strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-combobox-options span,
.custom-select-trigger span {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-combobox-options button.active strong,
.custom-combobox-options button:hover strong {
  color: #165dff;
}

.custom-combobox-options .custom-option {
  border-top: 1px solid var(--surface-soft);
  border-radius: 0;
  margin-top: 4px;
  padding-top: 10px;
}

.template-options button {
  min-height: 58px;
}

.template-options span {
  display: -webkit-box;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.custom-select-trigger {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 38px;
  grid-template-columns: minmax(0, 1fr) 20px;
  grid-gap: 2px 8px;
  gap: 2px 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  padding: 7px 10px;
  cursor: pointer;
  text-align: left;
}

.custom-select-trigger strong,
.custom-select-trigger span {
  grid-column: 1;
}

.custom-select-trigger em {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--ink-2);
  font-style: normal;
  text-align: center;
}

.version-import-panel input[type="file"] {
  min-height: 38px;
  padding: 7px;
}

.version-import-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 9px 10px;
}

.version-import-preview strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.version-import-preview span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.version-flow-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 6px;
  gap: 6px;
}

.version-flow-list div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-gap: 6px;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 7px 8px;
}

.version-flow-list div.active {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.version-flow-list span {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: var(--hairline);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.version-flow-list div.active span {
  background: #165dff;
  color: var(--ink-inverse);
}

.version-flow-list strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.3;
}

.version-recent-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-gap: 8px;
  gap: 8px;
}

.version-recent-list article {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  align-content: start;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px;
}

.version-recent-list article > div {
  min-width: 0;
}

.version-recent-list article:last-child {
  padding-bottom: 8px;
}

.version-recent-list strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  max-width: 100%;
}

.version-recent-list small {
  display: block;
  margin-top: 3px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.35;
}

.version-recent-list .panel-note {
  grid-column: 1 / -1;
}

.price-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.price-library-current {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.cost-detail-page {
  gap: 12px;
}

.cost-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
}

.cost-detail-content {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  min-width: 0;
}

.cost-detail-overview {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  padding: 14px;
}

.cost-version-summary-panel {
  padding: 12px 14px;
}

.cost-version-tabs {
  margin-top: 0;
}

.cost-version-tabs button {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  min-width: 128px;
  min-height: 52px;
  align-content: center;
  text-align: left;
}

.cost-version-tabs button strong {
  font-size: 13px;
  line-height: 1.3;
}

.cost-version-tabs button span {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.35;
}

.cost-version-tabs button.active span {
  color: #165dff;
}

.cost-detail-overview-main {
  display: grid;
  grid-template-columns: minmax(240px, 0.35fr) minmax(0, 1fr) auto;
  grid-gap: 14px;
  gap: 14px;
  align-items: start;
}

.cost-detail-nav-panel {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.cost-detail-nav-head {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  min-width: 0;
}

.cost-detail-nav-head strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.28;
}

.cost-detail-nav-head small {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.cost-detail-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.cost-detail-metrics article,
.cost-detail-meta-list div {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 9px 10px;
}

.cost-detail-metrics span,
.cost-detail-meta-list dt {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.35;
}

.cost-detail-metrics strong,
.cost-detail-meta-list dd {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.cost-detail-meta-list {
  display: grid;
  grid-template-columns: minmax(92px, 0.35fr) minmax(0, 1fr);
  grid-gap: 8px;
  gap: 8px;
  margin: 0;
}

.cost-detail-meta-list.version-summary-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cost-detail-meta-list.version-summary-list div {
  padding: 7px 8px;
}

.cost-detail-overview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.cost-detail-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  border-top: 1px solid var(--surface-soft);
  padding-top: 10px;
  scrollbar-width: thin;
}

.cost-detail-nav button {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  flex: 0 0 auto;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  color: var(--ink);
  padding: 8px 14px;
  text-align: center;
  cursor: pointer;
}

.cost-detail-nav button strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.cost-detail-nav button span {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.35;
}

.cost-detail-nav button.active {
  border-color: var(--brand-300);
  background: var(--brand-50);
  box-shadow: inset 0 -3px 0 #165dff;
}

.cost-detail-nav button.active strong,
.cost-detail-nav button.active span {
  color: #165dff;
}

.cost-detail-surface {
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

.cost-detail-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
}

.cost-detail-maintain-panel {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  position: -webkit-sticky;
  position: sticky;
  top: 12px;
  align-content: start;
}

.cost-detail-maintain-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: start;
}

.cost-detail-maintain-head strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.cost-detail-maintain-head span {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}

.cost-detail-focus-card {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.cost-detail-focus-card > div {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
}

.cost-detail-focus-card strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.cost-detail-focus-card small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.4;
}

.cost-detail-focus-card dl {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin: 0;
}

.cost-detail-focus-strip {
  grid-template-columns: minmax(220px, 0.6fr) minmax(0, 1fr);
  align-items: start;
}

.cost-detail-focus-strip dl {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cost-detail-focus-card dl div {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
}

.cost-detail-focus-card dt {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.35;
}

.cost-detail-focus-card dd {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.cost-detail-maintain-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cost-template-workspace {
  grid-template-columns: minmax(390px, 0.8fr) minmax(0, 1.2fr);
}

.cost-template-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cost-template-steps li {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  min-height: 62px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 8px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.cost-template-steps li span {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--hairline);
  color: var(--ink-2);
}

.cost-template-steps li.active {
  border-color: var(--brand-200);
  background: var(--brand-50);
  color: var(--brand-600);
}

.cost-template-steps li.active span {
  background: #165dff;
  color: var(--ink-inverse);
}

.cost-template-field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 10px;
}

.cost-template-table {
  min-width: 1680px;
}

.cost-library-version-table {
  min-width: 820px;
  table-layout: fixed;
}

.cost-library-version-table th:first-child,
.cost-library-version-table td:first-child {
  width: 250px;
}

.cost-library-version-table th:nth-child(2),
.cost-library-version-table td:nth-child(2) {
  width: 260px;
}

.cost-library-version-table th:nth-child(3),
.cost-library-version-table td:nth-child(3) {
  width: 170px;
}

.cost-library-version-table th:nth-child(4),
.cost-library-version-table td:nth-child(4) {
  width: 170px;
}

.cost-library-version-table th:nth-child(5),
.cost-library-version-table td:nth-child(5) {
  width: 72px;
}

.cost-library-version-table td {
  height: 44px;
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: top;
}

.cost-library-compact-data {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.cost-library-compact-data strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.cost-library-compact-data span {
  color: var(--muted);
  font-size: 12px;
}

.database-version-table {
  min-width: 1060px;
  table-layout: fixed;
}

.database-version-table td {
  height: 44px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.database-meta-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cost-library-panel-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.cost-library-panel-head .panel-title {
  min-width: 0;
}

.cost-library-source {
  display: -webkit-box;
  margin-top: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cost-library-name {
  display: block;
  max-width: 100%;
}

.cost-library-name strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.cost-detail-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 14px;
  gap: 14px;
  align-items: start;
}

.cost-detail-title-block {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  min-width: 0;
}

.cost-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.cost-version-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 10px;
}

.cost-detail-toolbar,
.cost-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 8px;
}

.cost-detail-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cost-detail-toolbar-note {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
}

.cost-detail-toolbar-note strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.cost-detail-toolbar-note span {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.4;
}

.cost-detail-toolbar-group.secondary {
  justify-content: flex-end;
}

.cost-inline-editor {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  border: 1px solid var(--brand-200);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.cost-detail-editor {
  background: var(--surface);
  border-color: var(--brand-100);
  box-shadow: inset 3px 0 0 #165dff;
  padding: 12px;
}

.cost-inline-editor-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.cost-inline-editor-head strong {
  color: var(--ink);
  font-size: 14px;
}

.cost-editor-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1.1fr) minmax(170px, 1fr) minmax(130px, 0.75fr) minmax(130px, 0.75fr) minmax(140px, 0.8fr);
  grid-gap: 10px;
  gap: 10px;
}

.cost-editor-grid .form-field:nth-child(4) {
  grid-column: span 2;
}

.cost-editor-grid .form-field:last-child {
  grid-column: span 2;
}

.cost-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid var(--surface-soft);
  padding-top: 10px;
}

.cost-detail-table-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--surface-soft);
  padding-top: 10px;
}

.cost-detail-table-head div {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
}

.cost-detail-table-head strong {
  color: var(--ink);
  font-size: 14px;
}

.cost-detail-table-head span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 750;
}

.cost-detail-table-region {
  min-width: 0;
}

.cost-detail-table-wrap {
  max-height: min(64vh, 720px);
  border: 1px solid var(--hairline);
  border-radius: 8px;
}

.full-span {
  grid-column: 1 / -1;
}

.import-export-stack {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.template-detail-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.price-cost-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "summary"
    "guidance"
    "filters"
    "table";
  grid-gap: 10px;
  gap: 10px;
  align-items: start;
}

.price-cost-workspace > .price-summary-grid {
  grid-area: summary;
}

.cost-library-guidance {
  grid-area: guidance;
  display: grid;
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.cost-library-guidance > div {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  min-width: 0;
}

.cost-library-guidance strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.cost-library-guidance span,
.cost-library-guidance small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}

.cost-library-guidance ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cost-library-guidance li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-gap: 2px 8px;
  gap: 2px 8px;
  align-items: start;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 9px 10px;
}

.cost-library-guidance li span {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: #165dff;
  color: var(--ink-inverse);
  font-weight: 800;
}

.cost-library-guidance li small {
  grid-column: 2;
}

.price-cost-workspace > .price-library-panel:first-child {
  grid-area: filters;
}

.price-cost-workspace > .price-filter-panel {
  grid-area: filters;
}

.price-filter-toolbar {
  display: grid;
  grid-template-columns: minmax(190px, 1.1fr) minmax(140px, 0.7fr) minmax(170px, 0.8fr) minmax(130px, 0.65fr) minmax(130px, 0.65fr) auto;
  grid-gap: 8px;
  gap: 8px;
  align-items: end;
}

.price-filter-panel {
  padding: 10px 12px;
}

.price-filter-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-bottom: 1px;
}

.cost-filter-result {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  background: var(--brand-50);
  color: var(--brand-600);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.price-filter-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(118px, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.price-filter-keyword {
  min-width: 0;
}

.price-filter-advanced {
  border-top: 1px solid var(--surface-soft);
  padding-top: 8px;
}

.price-filter-advanced summary {
  width: -moz-fit-content;
  width: fit-content;
  cursor: pointer;
  color: #165dff;
  font-size: 13px;
  font-weight: 800;
  list-style: none;
}

.price-filter-advanced summary::-webkit-details-marker {
  display: none;
}

.price-filter-advanced summary::after {
  content: " +";
}

.price-filter-advanced[open] summary {
  margin-bottom: 8px;
}

.price-filter-advanced[open] summary::after {
  content: " -";
}

.price-library-panel {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.price-library-grid > .price-library-preview-panel {
  grid-column: 1 / -1;
}

.price-cost-workspace > .price-library-preview-panel {
  grid-area: table;
}

.panel-title h2 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
}

.panel-title p,
.panel-note {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
}

.panel-note-warning {
  border: 1px solid var(--accent-200);
  border-radius: 8px;
  background: var(--accent-50);
  color: var(--accent-700);
  padding: 10px 12px;
}

.checkbox-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 14px;
}

.checkbox-field input {
  width: 16px;
  height: 16px;
  accent-color: #165dff;
}

.inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.price-row-actions {
  flex-wrap: nowrap;
  gap: 6px;
}

.quotation-row-icon-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.data-table tr.is-selected-row td {
  background: var(--brand-50);
}

.data-table tr.is-selected-row .first-column {
  box-shadow: inset 3px 0 0 var(--brand-500);
}

.btn-icon {
  display: inline-grid;
  width: 32px;
  min-width: 32px;
  height: 32px;
  place-items: center;
  padding: 0;
}

.btn-icon .action-glyph,
.row-more-menu-list .action-glyph {
  display: inline-grid;
  width: 14px;
  height: 14px;
  place-items: center;
  flex: 0 0 auto;
}

.btn-icon svg,
.row-more-menu-list .action-glyph svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quotation-task-table .inline-actions .btn-icon {
  border-radius: 8px;
  box-shadow: none;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.quotation-task-table .inline-actions .btn-primary.btn-icon {
  border-color: var(--brand-600);
  background: var(--brand-500);
  color: var(--ink-inverse) !important;
  -webkit-text-fill-color: #ffffff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
}

.quotation-task-table .inline-actions .btn-primary.btn-icon:hover,
.quotation-task-table .inline-actions .btn-primary.btn-icon:focus-visible {
  border-color: var(--brand-700);
  background: var(--brand-600);
  color: var(--ink-inverse) !important;
  -webkit-text-fill-color: #ffffff;
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.24);
}

.quotation-task-table .inline-actions .btn-primary.btn-icon .action-glyph,
.quotation-task-table .inline-actions .btn-primary.btn-icon svg {
  color: var(--ink-inverse) !important;
  stroke: #ffffff;
  opacity: 1;
}

.quotation-task-table .inline-actions .btn-ghost.btn-icon {
  border-color: var(--brand-200);
  background: var(--surface);
  color: var(--ink-2);
  -webkit-text-fill-color: var(--ink-2);
}

.quotation-task-table .inline-actions .btn-ghost.btn-icon:hover,
.quotation-task-table .inline-actions .btn-ghost.btn-icon:focus-visible {
  border-color: var(--brand-400);
  background: var(--brand-50);
  color: var(--brand-600);
  -webkit-text-fill-color: var(--brand-600);
}

.quotation-task-table .inline-actions .btn-ghost.btn-icon .action-glyph,
.quotation-task-table .inline-actions .btn-ghost.btn-icon svg {
  color: currentColor;
  stroke: currentColor;
  opacity: 1;
}

.row-more-menu {
  position: relative;
}

.row-more-menu-trigger {
  position: relative;
  z-index: 1;
}

.row-more-menu summary {
  list-style: none;
}

.row-more-menu summary::-webkit-details-marker {
  display: none;
}

.row-more-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: grid;
  min-width: 124px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
  padding: 5px;
}

.row-more-menu-floating-list {
  position: fixed;
  right: auto;
  z-index: 1000;
  min-width: 160px;
  max-height: min(320px, calc(100vh - 16px));
  overflow: auto;
}

.row-more-menu-list button {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 9px;
  text-align: left;
  white-space: nowrap;
}

.row-more-menu-list button:hover {
  background: var(--brand-50);
  color: #165dff;
}

.row-more-menu-list button:disabled {
  color: var(--ink-3);
  cursor: not-allowed;
}

.link-button {
  border: 0;
  background: transparent;
  color: #165dff;
  padding: 0;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.selected-row td {
  background: var(--surface);
}

.price-library-table {
  min-width: 760px;
}

.rule-parameter-group {
  margin-top: 18px;
}

.rule-parameter-group-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
}

.rule-parameter-group-title small {
  font-weight: 400;
}

.rule-parameter-input {
  width: 140px;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--border, var(--hairline-strong));
  border-radius: 6px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.rule-parameter-input:disabled {
  background: var(--surface-muted, var(--surface-sunk));
  color: var(--text-muted, var(--ink-3));
}

.price-library-small-table {
  max-height: 430px;
  overflow: auto;
}

.price-current-cost-table {
  min-width: 1120px;
  table-layout: fixed;
}

.price-current-cost-table th,
.price-current-cost-table td {
  vertical-align: top;
  white-space: normal;
  word-break: break-word;
}

.price-current-cost-table th:nth-child(1),
.price-current-cost-table td:nth-child(1) {
  width: 190px;
}

.price-current-cost-table th:nth-child(2),
.price-current-cost-table td:nth-child(2) {
  width: 160px;
}

.price-current-cost-table th:nth-child(3),
.price-current-cost-table td:nth-child(3) {
  width: 190px;
}

.price-current-cost-table th:nth-child(4),
.price-current-cost-table td:nth-child(4) {
  width: 130px;
}

.price-current-cost-table th:nth-child(5),
.price-current-cost-table td:nth-child(5) {
  width: 115px;
}

.price-current-cost-table th:nth-child(6),
.price-current-cost-table td:nth-child(6) {
  width: 170px;
}

.price-current-cost-table th:nth-child(7),
.price-current-cost-table td:nth-child(7) {
  width: 128px;
}

.price-current-cost-table th:nth-child(8),
.price-current-cost-table td:nth-child(8) {
  width: 126px;
}

.price-current-cost-table th:nth-child(9),
.price-current-cost-table td:nth-child(9) {
  width: 160px;
}

.cost-money-stack {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
}

.cost-money-stack strong {
  color: var(--ink);
  font-size: 14px;
}

.cost-money-stack span {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.35;
}

.price-current-cost-table .first-column {
  box-shadow: 6px 0 10px rgba(15, 23, 42, 0.035);
}

.price-current-cost-table .action-column {
  box-shadow: -6px 0 10px rgba(15, 23, 42, 0.04);
}

.cost-version-detail-table {
  min-width: 960px;
  table-layout: fixed;
}

.cost-version-detail-table th:first-child,
.cost-version-detail-table td:first-child {
  width: 270px;
}

.cost-version-detail-table th:nth-child(2),
.cost-version-detail-table td:nth-child(2) {
  width: 230px;
}

.cost-version-detail-table th:nth-child(3),
.cost-version-detail-table td:nth-child(3) {
  width: 180px;
}

.cost-version-detail-table th:nth-child(4),
.cost-version-detail-table td:nth-child(4) {
  width: 120px;
}

.cost-version-detail-table th:nth-child(5),
.cost-version-detail-table td:nth-child(5) {
  width: 132px;
}

.cost-version-detail-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

.cost-version-detail-table tbody tr {
  cursor: pointer;
}

.cost-version-detail-table tbody .cost-item-group-row {
  cursor: default;
}

.cost-version-detail-table tbody tr:hover td {
  background: var(--surface-sunk);
}

.cost-version-detail-table tbody .cost-item-group-row:hover td {
  background: var(--surface-sunk);
}

.cost-version-detail-table td {
  padding-top: 10px;
  padding-bottom: 10px;
}

.cost-version-detail-table .cost-item-group-row td {
  padding: 8px 12px;
  border-top: 1px solid var(--brand-100);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface-sunk);
}

.cost-item-group-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

.cost-item-group-head strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
}

.cost-item-group-head span {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.4;
}

/* 成本项 Excel 式展示：每个「品牌·系列·品类」一块，母线/连接器走电流×相线矩阵。 */
.cost-item-group-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cost-item-group-block {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}

.cost-item-group-block > .cost-item-group-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--surface-soft);
  background: var(--surface-sunk);
  border-left: 3px solid var(--brand-700);
}

.cost-matrix-table th.first-column,
.cost-matrix-table td.first-column {
  white-space: nowrap;
  font-weight: 750;
  color: var(--ink);
}

.cost-matrix-table thead th:not(.first-column),
.cost-matrix-table td.cost-matrix-cell,
.cost-matrix-table td.cost-matrix-empty {
  text-align: right;
  width: 1%;
  white-space: nowrap;
}

.cost-matrix-cell {
  position: relative;
}

.cost-matrix-cell-btn {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 0;
  background: transparent;
  padding: 2px 4px;
  margin: 0;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  border-radius: 6px;
}

.cost-matrix-cell-btn:hover {
  background: var(--surface-soft);
  color: var(--brand-700);
}

.cost-matrix-table td.selected-cost-cell {
  background: var(--surface-soft);
  box-shadow: inset 0 0 0 1px var(--brand-200);
}

.cost-matrix-empty {
  color: var(--hairline-strong);
}

.cost-version-detail-table .first-column strong,
.cost-version-detail-table td > strong {
  display: block;
  overflow-wrap: anywhere;
}

.cost-version-detail-table .price-row-actions {
  justify-content: flex-end;
}

.price-material-strip,
.price-action-grid,
.template-download-grid,
.price-version-list,
.cost-trace-steps,
.price-detail-grid {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.price-material-strip,
.price-action-grid,
.template-download-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.template-download-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.price-action-card {
  border-color: var(--hairline);
  cursor: pointer;
  text-align: left;
}

.price-action-card.tone-success,
.kpi-card.tone-success {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.price-action-card.tone-warning,
.kpi-card.tone-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.price-action-card.tone-danger,
.kpi-card.tone-danger {
  border-color: var(--c-danger-border);
  background: var(--c-danger-soft);
}

.price-action-card.tone-info,
.kpi-card.tone-info {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.price-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.price-detail-grid div {
  border-bottom: 1px solid var(--surface-soft);
  padding-bottom: 8px;
}

.price-detail-grid dt {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.price-detail-grid dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

.cost-trace-card {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.cost-trace-drawer {
  grid-area: trace;
  position: -webkit-sticky;
  position: sticky;
  top: 12px;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.1);
}

.cost-trace-steps {
  grid-template-columns: 1fr;
}

.cost-source-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.price-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.28);
  padding: 24px;
}

.cost-formula-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 270;
  display: flex;
  justify-content: flex-end;
  background: rgba(15, 23, 42, 0.24);
}

.cost-formula-drawer {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(720px, 100vw);
  height: 100%;
  border-left: 1px solid var(--hairline);
  background: var(--surface);
  box-shadow: -18px 0 54px rgba(15, 23, 42, 0.22);
}

.cost-formula-drawer-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid var(--hairline);
  padding: 16px;
}

.cost-formula-drawer-head span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.cost-formula-drawer-head h2 {
  margin: 2px 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.25;
}

.cost-formula-drawer-head p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
}

.cost-formula-drawer-body {
  overflow: auto;
  padding: 14px;
}

.cost-formula-panel {
  border: 0;
  padding: 0;
}

.cost-formula-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cost-formula-quick-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin: 12px 0;
}

.cost-formula-quick-cards article {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px 12px;
}

.cost-formula-quick-cards span {
  display: block;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.cost-formula-quick-cards strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.3;
}

.price-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(840px, calc(100vw - 48px));
  max-height: min(780px, calc(100vh - 48px));
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
}

.price-modal-header,
.price-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--hairline);
  padding: 14px 16px;
}

.price-modal-header span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.price-modal-header h2 {
  margin: 2px 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.25;
}

.price-modal-header p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
}

.price-modal-body {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  overflow: auto;
  padding: 14px 16px;
}

.price-modal-footer {
  justify-content: flex-end;
  border-top: 1px solid var(--hairline);
  border-bottom: 0;
  background: var(--surface-sunk);
}

.price-modal-callout {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  border: 1px solid var(--brand-200);
  border-radius: 8px;
  background: var(--brand-50);
  padding: 12px;
}

.price-modal-callout.warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.price-modal-callout strong {
  color: var(--ink);
  font-size: 14px;
}

.price-modal-callout span {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
}

.form-field.full-span {
  grid-column: 1 / -1;
}

.price-timeline {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.price-timeline article {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  border-left: 3px solid var(--brand-200);
  background: var(--surface-sunk);
  padding: 10px 12px;
}

.price-timeline strong {
  color: var(--ink);
  font-size: 14px;
}

.price-timeline span {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
}

.price-modal-action-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.price-modal-action-list button {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  cursor: pointer;
  padding: 12px;
  text-align: left;
}

.price-modal-action-list button:hover {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.price-modal-action-list button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.price-modal-action-list strong {
  color: var(--ink);
  font-size: 14px;
}

.price-modal-action-list span {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.5;
}

.price-empty-state {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  justify-items: center;
  max-width: 560px;
  margin: 0 auto;
  color: var(--ink);
  white-space: normal;
}

.price-empty-state strong {
  color: var(--ink);
  font-size: 15px;
}

.price-empty-state.compact {
  gap: 6px;
  padding: 6px 0;
}

.price-empty-state span {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
}

.import-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.import-steps li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 8px 10px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.import-steps li span {
  display: inline-grid;
  place-items: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--hairline);
  color: var(--ink-2);
  font-size: 12px;
}

.import-steps li.active {
  border-color: var(--brand-200);
  background: var(--brand-50);
  color: var(--brand-600);
}

.import-steps li.active span {
  background: #165dff;
  color: var(--ink-inverse);
}

.excel-preview-wrap {
  max-height: 520px;
}

.excel-preview-table {
  min-width: 1080px;
}

.excel-preview-table th:first-child,
.excel-preview-table td:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
  width: 72px;
  background: var(--surface-sunk);
}

.excel-preview-table td {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-preview {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  border: 1px solid var(--brand-200);
  border-radius: 8px;
  background: var(--brand-50);
  padding: 12px;
}

.import-preview strong,
.import-preview span {
  overflow-wrap: anywhere;
}

.import-preview span {
  color: var(--ink);
  font-size: 13px;
}

.status-draft {
  color: var(--brand-600);
  background: var(--brand-100);
}

.status-pending_review {
  color: var(--accent-700);
  background: var(--accent-100);
}

.status-published {
  color: var(--c-success-ink);
  background: var(--c-success-soft);
}

.status-disabled {
  color: var(--ink-2);
  background: var(--hairline);
}

@media (max-width: 1100px) {
  .price-summary-grid,
  .price-library-grid,
  .price-library-rules,
  .price-version-create,
  .version-create-layout,
  .version-create-reference,
  .version-form-grid,
  .build-method-template,
  .field-structure-grid,
  .version-import-grid,
  .version-import-preview,
  .version-flow-list,
  .version-recent-list,
  .price-cost-workspace,
  .cost-template-workspace,
  .cost-template-steps,
  .cost-template-field-grid,
  .price-filter-toolbar,
  .price-filter-grid,
  .template-download-grid,
  .template-detail-grid,
  .cost-trace-steps,
  .cost-source-grid,
  .import-steps {
    grid-template-columns: 1fr;
  }

  .cost-detail-header,
  .cost-detail-layout,
  .cost-detail-overview-main,
  .cost-library-guidance,
  .cost-detail-workspace,
  .cost-detail-focus-strip,
  .cost-detail-focus-strip dl,
  .cost-detail-metrics,
  .cost-detail-meta-list,
  .cost-detail-meta-list.version-summary-list,
  .cost-formula-quick-cards,
  .cost-formula-summary,
  .cost-editor-grid {
    grid-template-columns: 1fr;
  }

  .cost-library-guidance ol {
    grid-template-columns: 1fr;
  }

  .cost-detail-maintain-panel {
    position: static;
  }

  .cost-editor-grid .form-field:nth-child(4),
  .cost-editor-grid .form-field:last-child {
    grid-column: auto;
  }

  .cost-detail-actions,
  .cost-detail-overview-actions,
  .cost-detail-toolbar-group.secondary,
  .cost-editor-actions {
    justify-content: flex-start;
  }

  .price-cost-workspace {
    grid-template-areas:
      "summary"
      "guidance"
      "filters"
      "table";
  }

  .cost-trace-drawer {
    position: static;
  }

  .price-filter-keyword {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .platform-command-strip,
  .platform-governance-grid,
  .platform-metrics,
  .status-transition-board,
  .role-metrics,
  .role-toolbar,
  .role-form-grid,
  .role-access-layout,
  .role-template-strip,
  .permission-tools,
  .permission-grid,
  .user-role-head,
  .user-role-picker {
    grid-template-columns: 1fr;
  }

  .role-row {
    grid-template-columns: 1fr;
  }

  .role-row span:last-child {
    grid-column: auto;
  }

  .platform-stage-row,
  .platform-blueprint-row,
  .platform-template-card,
  .platform-operation-metrics,
  .template-governance-row,
  .approval-policy-meta {
    grid-template-columns: 1fr;
  }

  .platform-blueprint-row em {
    width: -moz-fit-content;
    width: fit-content;
    white-space: normal;
  }
}

@media (max-width: 420px) {
  .page-header-actions {
    display: none;
  }

  .customer-form-page-hero .page-header-actions,
  .customer-form-shell .page-header-actions,
  .customer-form-actions {
    display: flex;
  }
}

.state-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.permission-switches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip-switch {
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--brand-100);
  background: var(--surface);
  color: var(--ink);
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.chip-switch input {
  margin: 0;
}

.hint-text {
  margin: 10px 0 0;
  color: var(--ink);
  line-height: 1.6;
}

.filter-bar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.filter-item {
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.filter-item-grow {
  flex: 1 1;
  min-width: 240px;
}

.filter-item span {
  font-size: 12px;
  color: var(--text-secondary);
}

.filter-item input,
.filter-item select,
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 0 10px;
  color: var(--ink);
}

.form-field textarea {
  min-height: auto;
  padding: 8px 10px;
  resize: vertical;
}

.pricing-table-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}

.table-toolbar {
  border-bottom: 1px solid var(--surface-soft);
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.column-chooser {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.column-chooser label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink);
}

.pricing-table {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface-soft);
  text-align: left;
  vertical-align: top;
}

.data-table th {
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 600;
  background: var(--surface);
}

.align-right {
  text-align: right !important;
}

.state-card {
  border: 1px dashed var(--brand-100);
  border-radius: 10px;
  padding: 10px;
  background: var(--surface);
  color: var(--ink-2);
}

.row-selected {
  background: var(--surface);
}

.table-actions {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.link-btn {
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-600);
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  cursor: pointer;
}

.link-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.link-btn-danger {
  border-color: var(--c-danger-border);
  color: var(--c-danger-ink);
}

.status-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
}

.status-draft {
  background: var(--brand-50);
  color: #4338ca;
}

.status-pending {
  background: var(--accent-50);
  color: var(--accent-600);
}

.user-page {
  --user-surface: #ffffff;
  --user-surface-soft: var(--surface-sunk);
  --user-border: var(--brand-100);
  --user-border-strong: var(--brand-200);
  --user-text: var(--ink);
  --user-text-secondary: var(--ink-2);
  --user-brand: var(--brand-600);
  --user-radius: 14px;
  --user-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
  display: grid;
  grid-gap: 14px;
  gap: 14px;
  background: linear-gradient(180deg, var(--surface-sunk) 0%, var(--surface) 100%);
  padding: 2px;
}

.user-hero {
  min-height: 104px;
  border: 1px solid var(--user-border);
  border-radius: var(--user-radius);
  background: var(--user-surface);
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  box-shadow: var(--user-shadow);
}

.user-hero h1 {
  margin: 4px 0;
  font-size: 28px;
  line-height: 1.15;
}

.user-hero p {
  margin: 0;
  color: var(--user-text-secondary);
}

.user-hero-actions,
.user-toolbar-actions,
.user-create-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.user-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.user-metric {
  min-height: 88px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px 14px;
  display: grid;
  align-content: space-between;
}

.user-metric span,
.user-metric small {
  color: var(--ink-2);
}

.user-metric strong {
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
}

.user-overview-grid {
  display: grid;
  /* 两栏：主链路稍宽 + 办理队列；治理提醒下沉为整宽 strip，不再把三类内容硬挤一排发飘。 */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-gap: 16px;
  gap: 16px;
  align-items: stretch;
}

@media (max-width: 1080px) {
  .user-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.user-focus-strip-full {
  margin-top: 16px;
}

.user-focus-strip-full .user-focus-list.horizontal {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.user-overview-panel,
.user-chart-panel,
.user-onboarding-board,
.user-focus-strip,
.user-create-impact-panel {
  border: 1px solid var(--user-border);
  border-radius: var(--user-radius);
  background: var(--user-surface);
  padding: 14px;
  box-shadow: var(--user-shadow);
}

.user-overview-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.user-overview-stats div {
  min-height: 74px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 10px;
  display: grid;
  align-content: space-between;
}

.user-overview-stats span,
.user-overview-stats small {
  color: var(--ink-2);
  font-size: 12px;
}

.user-overview-stats strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.user-capacity-strip {
  margin-top: 12px;
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 10px;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.user-capacity-strip div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.user-capacity-strip strong {
  color: var(--ink);
  font-size: 13px;
}

.user-capacity-strip span,
.user-capacity-strip small {
  color: var(--ink-2);
  font-size: 12px;
}

.user-capacity-strip i {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--hairline);
}

.user-capacity-strip em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-500);
}

.user-capacity-strip.warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.user-capacity-strip.warning em {
  background: var(--c-warning);
}

.user-capacity-strip.danger {
  border-color: var(--c-danger-border);
  background: var(--c-danger-soft);
}

.user-capacity-strip.danger em {
  background: var(--c-danger);
}

.user-toolbar {
  border: 1px solid var(--user-border);
  border-radius: var(--user-radius);
  background: var(--user-surface);
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: end;
}

.user-search {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.user-search span {
  color: var(--user-text-secondary);
  font-size: 12px;
}

.user-search input,
.user-create-form input,
.user-create-form select {
  width: 100%;
  height: 40px;
  border: 1px solid var(--brand-100);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 12px;
}

.user-search input:focus,
.user-create-form input:focus,
.user-create-form select:focus {
  outline: 2px solid var(--brand-300);
  outline-offset: 1px;
}

.user-search input:focus-visible,
.user-create-form input:focus-visible,
.user-create-form select:focus-visible,
.user-segment button:focus-visible,
.user-row-actions a:focus-visible,
.user-row-actions button:focus-visible,
.user-onboarding-action:focus-visible,
.user-focus-list.horizontal a:focus-visible {
  outline: 2px solid var(--brand-400);
  outline-offset: 2px;
}

.user-segment {
  min-height: 40px;
  border: 1px solid var(--user-border);
  border-radius: 10px;
  background: var(--user-surface-soft);
  padding: 3px;
  display: inline-flex;
  gap: 3px;
}

.user-segment button {
  min-width: 70px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  padding: 0 10px;
  font-weight: 700;
}

.user-segment button.active {
  background: var(--user-surface);
  color: var(--user-brand);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.user-create-panel,
.user-list-panel,
.user-inspector {
  border: 1px solid var(--user-border);
  border-radius: var(--user-radius);
  background: var(--user-surface);
  box-shadow: var(--user-shadow);
}

.user-create-panel {
  padding: 14px;
}

.user-section-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.user-section-title strong {
  color: var(--ink);
  font-size: 20px;
  letter-spacing: -0.01em;
}

.user-section-title span {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}

.user-create-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: end;
}

.user-create-form label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.user-create-form label span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.user-create-remark {
  grid-column: span 2;
}

.user-create-actions {
  align-self: end;
}

.user-create-page-layout,
.user-detail-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-gap: 14px;
  gap: 14px;
  align-items: start;
}

.detail-kv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.detail-kv-grid.compact {
  grid-template-columns: 1fr;
}

.detail-kv-grid div {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 10px;
  min-width: 0;
}

.detail-kv-grid dt {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.detail-kv-grid dd {
  margin: 5px 0 0;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.45;
  word-break: break-word;
}

.user-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-gap: 14px;
  gap: 14px;
  align-items: start;
}

.user-list-headline {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.user-list-caption {
  margin: -6px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
}

.user-list-panel {
  min-width: 0;
  padding: 16px;
}

.user-list-layout.single-column {
  display: block;
}

.user-list-main-panel {
  overflow: hidden;
}

.user-queue-strip {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.user-command-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.user-command-card {
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  padding: 14px;
  text-align: left;
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  color: inherit;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.user-command-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-200);
  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.08);
}

.user-command-card.active {
  border-color: var(--brand-600);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 42%),
    linear-gradient(180deg, #ffffff 0%, var(--brand-50) 100%);
  box-shadow: 0 18px 30px rgba(37, 99, 235, 0.12);
}

.user-command-card span,
.user-command-card small,
.user-command-card em {
  display: block;
}

.user-command-card span {
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.user-command-card strong {
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
}

.user-command-card small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.65;
}

.user-command-card em {
  margin-top: auto;
  justify-self: start;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.user-queue-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.user-queue-card,
.user-queue-empty {
  min-height: 112px;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 10px 24px rgba(15, 23, 42, 0.05);
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease,
    background 0.16s ease;
}

.user-queue-card strong,
.user-queue-card small,
.user-queue-card span {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.user-queue-card strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.user-queue-card small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.user-queue-card span {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.user-queue-card em {
  margin-top: auto;
  justify-self: start;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--brand-100);
  background: var(--brand-50);
  color: var(--brand-600);
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.user-queue-card:hover {
  border-color: var(--brand-200);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.14), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, var(--brand-50) 100%);
  box-shadow: 0 16px 30px rgba(37, 99, 235, 0.1);
  transform: translateY(-2px);
}

.user-queue-empty {
  margin: 0;
  color: var(--ink-2);
}

.user-onboarding-board {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.user-join-alert {
  border: 1px solid var(--brand-200);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 36%),
    linear-gradient(180deg, var(--surface) 0%, var(--brand-50) 100%);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.user-join-alert strong,
.user-join-alert span {
  display: block;
}

.user-join-alert strong {
  color: var(--ink);
  font-size: 15px;
}

.user-join-alert span {
  margin-top: 4px;
  color: var(--ink-2);
  line-height: 1.65;
  font-size: 13px;
}

/* 开通主链路是 5 级漏斗(待复核→待提交→审批中→待激活→可登录)；
   竖排紧凑列表比窄列里塞 5 张细高卡更易读,也不再重复展示级别名。 */
.user-onboarding-stages {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 8px;
  gap: 8px;
}

.user-onboarding-stage {
  min-height: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface-sunk);
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-onboarding-stage > span {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid rgba(49, 84, 125, 0.18);
  color: var(--brand-800);
  display: inline-grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.user-onboarding-stage-body {
  min-width: 0;
  display: grid;
  grid-gap: 1px;
  gap: 1px;
}

.user-onboarding-stage-body strong {
  color: var(--ink);
  font-size: 13px;
}

.user-onboarding-stage-body small {
  color: var(--ink-2);
  font-size: 12px;
}

.stage-pending_review {
  background: var(--accent-50);
  border-color: var(--accent-200);
}

.stage-role_ready {
  background: var(--brand-50);
  border-color: var(--brand-200);
}

.stage-approval_pending {
  background: var(--accent-50);
  border-color: var(--accent-200);
}

.stage-login_ready {
  background: var(--surface-soft);
  border-color: var(--c-success-border);
}

.stage-rejected {
  background: var(--c-danger-soft);
  border-color: var(--c-danger-border);
}

.user-onboarding-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.user-onboarding-actions > p {
  margin: 0;
  color: var(--ink-2);
}

.user-onboarding-action {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.user-onboarding-action strong,
.user-onboarding-action small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-onboarding-action strong {
  color: var(--ink);
}

.user-onboarding-action small {
  color: var(--ink-2);
  margin-top: 2px;
}

.user-onboarding-action em {
  min-width: 44px;
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--brand-600);
  padding: 5px 8px;
  text-align: center;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
}

.user-focus-list.horizontal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.user-focus-list.horizontal a,
.user-focus-list.horizontal p {
  min-height: 92px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.user-focus-list.horizontal p {
  margin: 0;
  color: var(--ink-2);
}

.user-focus-list.horizontal a:hover {
  border-color: var(--brand-100);
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
}

.user-focus-card.tone-warning {
  border-color: var(--accent-200);
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-50) 100%);
}

.user-focus-card.tone-danger {
  border-color: var(--c-danger-border);
  background: linear-gradient(180deg, #ffffff 0%, var(--c-danger-soft) 100%);
}

.user-focus-card.tone-success {
  border-color: var(--c-success-border);
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
}

.user-focus-list.horizontal strong,
.user-focus-list.horizontal span {
  display: block;
}

.user-focus-list.horizontal strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}

.user-focus-list.horizontal span {
  color: var(--ink-2);
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.65;
}

.user-workbench-checklist {
  margin-top: 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 12px;
}

.user-workbench-checklist strong {
  display: block;
  color: var(--ink);
}

.user-workbench-checklist ul {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--ink-2);
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  font-size: 13px;
  line-height: 1.6;
}

.user-workbench-shortcuts {
  margin-top: 14px;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.user-workbench-shortcuts a {
  min-height: 38px;
  border: 1px solid var(--brand-100);
  border-radius: 10px;
  background: var(--surface);
  color: var(--brand-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}

.user-workbench-shortcuts a:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
}

.user-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

.user-table-wrap-modern {
  border-color: var(--user-border);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.user-table {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
  background: var(--surface);
}

.user-table-modern {
  table-layout: fixed;
  min-width: 1560px;
}

.user-table-modern .col-user {
  width: 440px;
}

.user-table-modern .col-governance {
  width: 250px;
}

.user-table-modern .col-org-role {
  width: 330px;
}

.user-table-modern .col-contact {
  width: 280px;
}

.user-table-modern .col-handover {
  width: 240px;
}

.user-table-modern .col-actions {
  width: 120px;
}

.user-table th,
.user-table td {
  text-align: left;
  border-bottom: 1px solid var(--surface-soft);
  padding: 16px 14px;
  vertical-align: middle;
}

.user-table th {
  color: var(--ink-2);
  background: var(--user-surface-soft);
  font-size: 12px;
  font-weight: 800;
}

.user-table-modern th {
  letter-spacing: 0.02em;
}

.user-table th.user-col-actions,
.user-table td.user-cell-actions {
  text-align: center;
}

.user-table tbody tr:hover,
.user-table tbody tr.selected {
  background: var(--surface);
}

.user-table tbody tr:nth-child(even) {
  background: rgba(248, 250, 252, 0.55);
}

.user-table-modern td.user-cell-contact,
.user-table-modern td.user-cell-handover {
  border-left: 1px solid var(--surface-sunk);
}

.user-table-modern td:first-child {
  background: linear-gradient(90deg, rgba(248, 251, 255, 0.75) 0%, rgba(255, 255, 255, 0) 72%);
}

.user-identity-cell,
.user-inspector-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.user-identity-cell > div {
  min-width: 0;
}

.user-avatar {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 auto;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  margin-top: 0;
}

.user-avatar:not(.user-avatar-card) {
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.96) 0 26%, transparent 38%),
    linear-gradient(150deg, var(--brand-100) 0%, var(--brand-100) 58%, var(--brand-100) 100%);
  border: 1px solid var(--brand-200);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 6px 14px rgba(37, 99, 235, 0.14);
}

.user-avatar-card {
  position: relative;
  border-radius: 15px;
  border: 1px solid var(--brand-200);
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    0 12px 24px rgba(148, 163, 184, 0.16);
}

.user-avatar-card::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 12px;
  height: 12px;
  border-radius: 12px 0 12px 0;
  background: rgba(255, 255, 255, 0.86);
  pointer-events: none;
}

.user-avatar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  position: relative;
  z-index: 1;
}

.user-avatar-icon svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.user-avatar-status-dot {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid #ffffff;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.12);
}

.user-avatar-card.tone-active {
  border-color: var(--brand-200);
  background: linear-gradient(180deg, #ffffff 0%, var(--brand-50) 100%);
  color: var(--brand-500);
}

.user-avatar-card.tone-active .user-avatar-status-dot {
  background: var(--brand-400);
}

.user-avatar-card.tone-pending {
  border-color: var(--brand-100);
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
  color: var(--brand-500);
}

.user-avatar-card.tone-pending .user-avatar-status-dot {
  background: var(--brand-400);
}

.user-avatar-card.tone-warning {
  border-color: var(--accent-300);
  background: linear-gradient(180deg, var(--surface) 0%, var(--accent-50) 100%);
  color: var(--accent-500);
}

.user-avatar-card.tone-warning .user-avatar-status-dot {
  background: var(--accent-500);
}

.user-avatar-card.tone-muted {
  border-color: var(--hairline-strong);
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
  color: var(--ink-2);
}

.user-avatar-card.tone-muted .user-avatar-status-dot {
  background: var(--ink-3);
}

.user-avatar-glyph {
  display: inline-block;
  color: var(--brand-800);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  letter-spacing: -0.02em;
  margin: 0;
  transform: translateY(-1px);
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.user-avatar.large {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

.user-identity-cell strong,
.user-identity-cell > div > span,
.user-identity-cell small,
.user-status-cell small,
.user-org-cell strong,
.user-contact-cell span,
.user-contact-cell small,
.user-contact-cell em,
.user-inspector-head strong,
.user-inspector-head span {
  display: block;
}

.user-identity-cell strong,
.user-org-cell strong,
.user-inspector-head strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}

.user-identity-cell > div > span,
.user-contact-cell small,
.user-inspector-head span {
  color: var(--ink-2);
  margin-top: 4px;
  font-size: 13px;
}

.user-identity-cell strong,
.user-identity-cell > div > span,
.user-identity-cell > div > small {
  white-space: normal;
  overflow-wrap: anywhere;
}

.user-identity-cell > div > small,
.user-status-cell small,
.user-contact-cell em {
  color: var(--ink-3);
  font-size: 12px;
  margin-top: 4px;
  font-style: normal;
}

.user-status-cell,
.user-org-cell,
.user-contact-cell {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.user-contact-public span,
.user-contact-public small,
.user-contact-public em,
.user-contact-handover span,
.user-contact-handover small,
.user-contact-handover em {
  white-space: normal;
  overflow: hidden;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

.user-contact-handover .handover-status-chip {
  justify-self: start;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--user-border-strong);
  background: var(--brand-50);
  color: var(--user-brand);
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
}

.user-role-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.user-role-tags span {
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-800);
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 700;
}

.user-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 220px;
  justify-content: center;
}

.user-row-actions button,
.user-row-actions a {
  min-height: 32px;
  min-width: 60px;
  border: 1px solid var(--user-border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--user-brand);
  padding: 0 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.user-row-actions button:hover,
.user-row-actions a:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
}

.user-table td.user-cell-actions,
.user-table th.user-col-actions {
  border-left: 1px solid var(--surface-sunk);
}

.user-row-actions button:disabled {
  color: var(--ink-3);
  background: var(--surface-sunk);
}

@media (max-width: 1600px) {
  .user-page {
    gap: 12px;
  }

  .user-overview-grid {
    grid-template-columns: minmax(260px, 0.9fr) repeat(2, minmax(220px, 1fr));
    gap: 12px;
  }

  .user-table-modern .col-user {
    width: 400px;
  }

  .user-table-modern .col-governance {
    width: 220px;
  }

  .user-table-modern .col-org-role {
    width: 300px;
  }

  .user-table-modern .col-contact {
    width: 240px;
  }

  .user-table-modern .col-handover {
    width: 210px;
  }
}

.user-inspector {
  position: -webkit-sticky;
  position: sticky;
  top: 82px;
  padding: 14px;
}

.user-inspector-list {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin: 14px 0;
}

.user-inspector-list div {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface-sunk);
  padding: 10px;
}

.user-inspector-list dt {
  color: var(--ink-2);
  font-size: 12px;
}

.user-inspector-list dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-weight: 700;
}

.user-inspector-note {
  border: 1px solid var(--brand-200);
  border-radius: 12px;
  background: var(--brand-50);
  padding: 12px;
}

.user-inspector-note strong {
  color: var(--brand-700);
}

.user-inspector-note p {
  margin: 6px 0 0;
  color: var(--ink);
  line-height: 1.55;
}

.user-password-reset-panel {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 12px;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.user-password-reset-panel label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.user-password-reset-panel label span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.user-password-reset-panel input {
  width: 100%;
  height: 38px;
  border: 1px solid var(--brand-100);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 11px;
}

.user-password-reset-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.user-detail-profile-panel,
.user-detail-action-panel,
.user-detail-access-panel {
  min-width: 0;
}

.user-detail-profile-panel {
  grid-row: span 2;
}

.user-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.user-detail-head strong,
.user-detail-head span,
.user-detail-head small {
  display: block;
}

.user-detail-head strong {
  color: var(--ink);
  font-size: 18px;
}

.user-detail-head span {
  color: var(--ink-2);
}

.user-detail-head small {
  color: var(--ink-3);
  margin-top: 2px;
}

.user-detail-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.user-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.user-onboarding-current {
  margin-top: 10px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 10px;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.user-onboarding-current span,
.user-onboarding-current small {
  color: var(--ink-2);
  font-size: 12px;
}

.user-onboarding-current strong {
  color: var(--ink);
}

.user-workflow-note {
  align-items: start;
}

.user-workflow-note .btn {
  justify-self: end;
  margin-top: 4px;
}

.user-detail-page .user-detail-hero {
  color: var(--ink-inverse);
  border-color: rgba(255, 255, 255, 0.2);
  background: linear-gradient(118deg, #15325b 0%, #1f4d86 52%, #2c6ea4 100%);
  box-shadow: 0 16px 34px rgba(15, 46, 92, 0.18);
}

.user-detail-page .user-detail-hero h1,
.user-detail-page .user-detail-hero .breadcrumb {
  color: var(--ink-inverse);
}

.user-detail-page .user-detail-hero .desc {
  color: rgba(255, 255, 255, 0.84);
}

.user-detail-page .user-detail-hero .page-header-actions .btn {
  color: #12325c !important;
  -webkit-text-fill-color: #12325c !important;
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 18px rgba(8, 23, 55, 0.14);
}

.user-detail-page .user-detail-flow {
  grid-template-columns: minmax(0, 1fr) minmax(400px, 0.34fr);
}

.user-detail-page .user-detail-action-panel,
.user-detail-page .user-detail-access-panel {
  padding: 16px;
}

.user-detail-page .user-detail-action-panel {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.user-detail-page .user-detail-action-panel .user-section-title,
.user-detail-page .user-detail-access-panel .user-section-title {
  margin-bottom: 0;
}

.user-detail-page .user-detail-action-panel .user-inspector-note {
  margin: 0;
}

.user-detail-page .user-governance-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-top: 0;
}

.user-detail-page .user-governance-actions .btn {
  width: 100%;
  min-height: 38px;
  justify-content: center;
  white-space: nowrap;
}

.user-detail-page .user-governance-actions .btn-primary {
  grid-column: 1 / -1;
  min-height: 42px;
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.16);
}

.user-detail-page .user-password-reset-panel {
  margin-top: 0;
}

.user-access-summary-card {
  display: grid;
  grid-template-columns: minmax(118px, 0.8fr) minmax(0, 1fr);
  grid-gap: 12px;
  gap: 12px;
  align-items: stretch;
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.12), transparent 46%),
    linear-gradient(180deg, #ffffff 0%, var(--brand-50) 100%);
  padding: 12px;
}

.user-access-summary-card > div {
  display: grid;
  align-content: center;
  grid-gap: 4px;
  gap: 4px;
}

.user-access-summary-card span,
.user-access-summary-card small,
.user-access-summary-card dt {
  color: var(--ink-2);
  font-size: 12px;
}

.user-access-summary-card > div strong {
  color: var(--brand-900);
  font-size: 32px;
  line-height: 1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.user-access-summary-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 6px;
  gap: 6px;
}

.user-access-summary-card dl div {
  min-width: 0;
  border: 1px solid rgba(44, 110, 164, 0.14);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.78);
  padding: 8px;
}

.user-access-summary-card dd {
  margin: 3px 0 0;
  color: var(--brand-800);
  font-size: 16px;
  font-weight: 900;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.user-detail-page .user-detail-access-panel {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.user-detail-page .user-detail-access-panel .user-role-tags.large {
  gap: 6px;
}

.user-detail-page .user-access-scope-grid {
  grid-template-columns: 1fr;
}

.user-detail-page .user-access-scope-grid div {
  background: var(--surface-sunk);
}

.user-access-module-list {
  gap: 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}

.user-access-module-list div {
  border-top: 0;
  border-bottom: 1px solid var(--surface-soft);
  padding: 10px 12px;
}

.user-access-module-list div:last-child {
  border-bottom: 0;
}

.user-access-module-list strong {
  display: block;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
}

.user-access-module-list p {
  margin-top: 5px;
  line-height: 1.55;
}

.user-field-permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 6px;
  gap: 6px;
}

.user-field-permission-grid span {
  justify-content: center;
  min-width: 0;
  text-align: center;
}

@media (max-width: 1180px) {
  .user-detail-page .user-detail-flow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .user-access-summary-card,
  .user-detail-page .user-governance-actions,
  .user-field-permission-grid {
    grid-template-columns: 1fr;
  }
}

.organization-page {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.organization-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.organization-metrics div,
.organization-editor,
.organization-tree-panel {
  border: 1px solid var(--brand-100);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.organization-metrics div {
  min-height: 86px;
  display: grid;
  align-content: space-between;
}

.organization-metrics span,
.organization-metrics small {
  color: var(--ink-2);
  font-size: 12px;
}

.organization-metrics strong {
  color: var(--brand-900);
  font-size: 26px;
  line-height: 1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.organization-list-heading {
  align-items: center;
}

.organization-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.36fr);
  grid-gap: 14px;
  gap: 14px;
  align-items: start;
}

.organization-detail-card,
.organization-context-card {
  border: 1px solid var(--brand-100);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.organization-context-card {
  position: -webkit-sticky;
  position: sticky;
  top: 82px;
}

.organization-action-strip {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.organization-action-strip a,
.organization-action-strip button {
  min-height: 40px;
  border: 1px solid var(--brand-100);
  border-radius: 10px;
  background: var(--surface);
  color: var(--brand-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  text-decoration: none;
  font-weight: 800;
}

.organization-action-strip button {
  cursor: pointer;
}

.organization-action-strip button:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.organization-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.organization-form-grid label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.organization-form-grid label span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.organization-form-grid input,
.organization-form-grid select {
  width: 100%;
  height: 40px;
  border: 1px solid var(--brand-100);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 12px;
}

.organization-remark {
  grid-column: span 2;
}

.organization-editor-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.organization-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

.organization-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  background: var(--surface);
}

.organization-table.compact {
  min-width: 720px;
}

.organization-table th,
.organization-table td {
  border-bottom: 1px solid var(--surface-soft);
  padding: 12px;
  text-align: left;
  vertical-align: middle;
}

.organization-table th {
  background: var(--surface-sunk);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 900;
}

.organization-table tbody tr:hover {
  background: var(--surface);
}

.organization-name-cell {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
}

.organization-name-cell strong {
  color: var(--ink);
}

.organization-name-cell span,
.organization-name-cell small {
  color: var(--ink-2);
  font-size: 12px;
}

.user-access-preview {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
  margin-top: 12px;
}

.user-access-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  grid-gap: 6px;
  gap: 6px;
}

.user-access-metrics span {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  color: var(--brand-800);
  padding: 7px 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

.user-access-groups {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.user-access-groups div {
  border-top: 1px solid var(--surface-soft);
  padding-top: 8px;
}

.user-access-groups strong {
  color: var(--ink);
  font-size: 12px;
}

.user-access-groups p {
  margin: 4px 0 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}

.user-permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.user-permission-grid div {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px;
}

.user-permission-grid strong {
  color: var(--ink);
  font-size: 12px;
}

.user-permission-grid p {
  margin: 5px 0 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}

.user-field-permission-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.user-field-permission-list span {
  border: 1px solid var(--c-danger-border);
  border-radius: 999px;
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 800;
}

.user-field-permission-list span.allowed {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
  color: var(--c-success-ink);
}

.user-risk-note {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.user-risk-note strong {
  color: var(--accent-700);
}

.status-active {
  background: var(--surface-soft);
  color: var(--c-success-ink);
}

.status-inactive {
  background: var(--surface-sunk);
  color: var(--ink-2);
}

.status-expired {
  background: var(--accent-100);
  color: var(--accent-700);
}

.status-rejected {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.module-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-grid {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pricing-form-sections {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.pricing-form-section {
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
}

.pricing-form-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.pricing-form-section-head strong {
  color: var(--ink);
  font-size: 14px;
}

.pricing-form-section-head span {
  color: var(--ink-2);
  font-size: 12px;
  text-align: right;
}

.pricing-form-next-step {
  border: 1px solid var(--brand-200);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.pricing-form-next-step strong {
  color: var(--brand-600);
  font-size: 13px;
}

.pricing-form-next-step span {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.55;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-field span {
  font-size: 13px;
}

.required-mark {
  color: var(--c-danger-ink);
}

.field-error {
  color: var(--c-danger-ink);
  font-size: 12px;
}

.form-error,
.form-success,
.dirty-warning {
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
}

.form-error {
  color: var(--c-danger-ink);
  border-color: var(--c-danger-border);
  background: var(--c-danger-soft);
}

.form-success {
  color: var(--c-success-ink);
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.dirty-warning {
  color: var(--accent-700);
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.form-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.detail-grid {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
}

.detail-card-wide {
  grid-column: 1 / -1;
}

.detail-card h3 {
  margin: 0 0 10px;
}

.detail-list {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.detail-list dt {
  color: var(--text-secondary);
  font-size: 12px;
}

.detail-list dd {
  margin: 2px 0 0;
}

.status-flow {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-flow li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.status-flow span {
  color: var(--text-secondary);
  font-size: 13px;
}

.audit-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.audit-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.audit-list span {
  color: var(--text-secondary);
  font-size: 13px;
}

.audit-list small {
  color: var(--ink-2);
  font-size: 12px;
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  display: flex;
  justify-content: flex-end;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.drawer-backdrop-open {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  width: min(460px, 100%);
  background: var(--surface);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: -12px 0 32px rgba(15, 23, 42, 0.18);
}

.drawer-backdrop-open .drawer {
  transform: translateX(0);
}

.drawer-header {
  border-bottom: 1px solid var(--surface-soft);
  padding: 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.drawer-header h3 {
  margin: 0 0 6px;
}

.drawer-header p {
  margin: 0;
  color: var(--text-secondary);
}

.drawer-body {
  padding: 12px 14px 16px;
  overflow: auto;
}

.drawer-loading-state {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.drawer-skeleton-line {
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--surface-soft) 20%, var(--surface-sunk) 50%, var(--surface-soft) 80%);
  background-size: 220% 100%;
  animation: drawer-skeleton 1.2s ease-in-out infinite;
}

.drawer-skeleton-line-short {
  width: 68%;
}

.drawer-empty-state {
  border: 1px dashed var(--brand-200);
  border-radius: 12px;
  padding: 16px;
  background: linear-gradient(145deg, var(--surface), #ffffff);
}

.drawer-empty-state strong {
  display: block;
  margin-bottom: 6px;
  color: var(--brand-800);
}

.drawer-empty-state p {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.6;
}

.audit-records {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.audit-record {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: var(--surface);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.04);
}

.audit-record p {
  margin: 6px 0;
  color: var(--text-secondary);
}

.audit-record-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.audit-record-meta {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.audit-record small {
  display: block;
  color: var(--ink-2);
}

.audit-record-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@keyframes drawer-skeleton {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: 0 0;
  }
}
.workflow-hero {
  border-color: var(--brand-200);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(236, 253, 245, 0.9)),
    linear-gradient(90deg, rgba(37, 99, 235, 0.08), rgba(20, 184, 166, 0.1));
}

.muted-text {
  margin: -4px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.quotation-detail-flow {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
  min-width: 0;
}

.quotation-detail-flow > * {
  min-width: 0;
}

.quotation-overview-main,
.document-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.quotation-overview-main span,
.quotation-overview-grid dt,
.document-action-card span,
.quotation-governance-card span,
.quotation-approval-step span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.quotation-overview-main strong,
.quotation-overview-amount strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
}

.quotation-overview-main strong {
  font-size: 24px;
  overflow-wrap: anywhere;
}

.quotation-overview-amount {
  min-width: 180px;
  text-align: right;
}

.quotation-overview-amount strong {
  font-size: 28px;
}

.quotation-overview-next {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  min-width: 220px;
  max-width: 320px;
  border-left: 1px solid var(--hairline);
  padding-left: 16px;
}

.quotation-overview-next strong {
  font-size: 18px;
  overflow-wrap: anywhere;
}

.quotation-overview-next-action {
  display: flex;
  justify-content: flex-start;
  margin-top: 4px;
}

.quotation-overview-main small {
  display: block;
  margin-top: 6px;
  color: var(--text-secondary);
}

.quotation-tool-dock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
  border-color: var(--brand-100);
  background: var(--surface);
}

.quotation-tool-card {
  min-width: 0;
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: var(--surface);
  color: inherit;
  padding: 14px;
  text-decoration: none;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.quotation-tool-card:hover {
  border-color: var(--brand-400);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.quotation-tool-card span,
.quotation-tool-card small {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-tool-card strong {
  display: block;
  margin: 8px 0 6px;
  color: var(--ink);
  font-size: 18px;
}

.quotation-tool-card.is-active {
  border-color: var(--brand-200);
}

.quotation-tool-card.is-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.quotation-tool-card.is-locked {
  border-color: var(--hairline);
  background: var(--surface-sunk);
}

.quotation-detail-subnav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 5px;
}

.quotation-detail-subnav a {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  flex: 1 0 112px;
  min-height: 46px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 6px;
  color: inherit;
  padding: 8px 10px 6px;
  text-decoration: none;
}

.quotation-detail-subnav a.active {
  border-bottom-color: var(--brand-500);
  background: var(--surface);
}

.quotation-detail-subnav span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.quotation-detail-subnav small {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.quotation-manager-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-gap: 1px;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--hairline);
}

.quotation-manager-strip-item {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  min-width: 0;
  border-left: 4px solid var(--hairline-strong);
  background: var(--surface);
  color: inherit;
  padding: 12px 12px 11px;
  text-decoration: none;
}

.quotation-manager-strip-item.is-ready {
  border-left-color: var(--cyan-500);
}

.quotation-manager-strip-item.is-warning {
  border-left-color: var(--c-warning);
}

.quotation-manager-strip-item.is-blocked {
  border-left-color: var(--c-danger);
}

.quotation-manager-strip-item.is-pending {
  border-left-color: var(--ink-3);
}

.quotation-manager-strip-item span,
.quotation-manager-strip-item small {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-manager-strip-item strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-manager-strip-item:hover {
  background: var(--surface);
}

.quotation-business-flow {
  border-color: var(--hairline);
  background: var(--surface);
}

.quotation-business-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-top: 12px;
}

.quotation-business-step {
  display: grid;
  align-content: space-between;
  grid-gap: 10px;
  gap: 10px;
  min-width: 0;
  min-height: 152px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
}

.quotation-business-step.is-done {
  border-color: var(--cyan-300);
  background: var(--surface-sunk);
}

.quotation-business-step.is-active {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.quotation-business-step.is-blocked {
  border-color: var(--c-danger-border);
  background: var(--surface);
}

.quotation-business-step.is-pending {
  background: var(--surface-sunk);
}

.quotation-business-step-head {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  min-width: 0;
}

.quotation-business-step-head > span {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ink-inverse);
  font-size: 11px;
  font-weight: 800;
}

.quotation-business-step-head div {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  min-width: 0;
}

.quotation-business-step strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
}

.quotation-business-step small,
.quotation-business-step p,
.quotation-flow-static {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-business-step-action {
  display: flex;
  justify-content: flex-end;
  min-height: 30px;
}

.quotation-flow-static {
  align-self: center;
  color: var(--c-success-ink);
}

.quotation-process-map {
  border-color: var(--hairline);
  background: var(--surface);
}

.quotation-process-current {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 16px;
  gap: 16px;
  align-items: center;
  margin-top: 12px;
  border: 1px solid var(--brand-100);
  border-radius: 10px;
  background: var(--brand-50);
  padding: 12px;
}

.quotation-process-current.is-blocked {
  border-color: var(--c-danger-border);
  background: var(--surface);
}

.quotation-process-current.is-done {
  border-color: var(--cyan-300);
  background: var(--surface-sunk);
}

.quotation-process-current.is-pending {
  border-color: var(--hairline);
  background: var(--surface-sunk);
}

.quotation-process-current span,
.quotation-process-current small,
.quotation-process-step small {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-process-current strong {
  display: block;
  margin: 4px 0;
  color: var(--ink);
  font-size: 18px;
}

.quotation-process-current-action {
  display: flex;
  justify-content: flex-end;
}

.quotation-process-rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-gap: 0;
  gap: 0;
  position: relative;
  margin-top: 12px;
  padding: 8px 0 2px;
}

.quotation-process-rail::before {
  content: "";
  position: absolute;
  top: 25px;
  right: 7%;
  left: 7%;
  height: 2px;
  background: var(--hairline);
}

.quotation-process-step {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
  justify-items: center;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 4px 8px;
  position: relative;
  text-align: center;
  z-index: 1;
}

.quotation-process-step.is-done {
  background: transparent;
}

.quotation-process-step.is-active {
  background: transparent;
}

.quotation-process-step.is-blocked {
  background: transparent;
}

.quotation-process-step > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--ink-inverse);
  font-size: 10px;
  font-weight: 800;
}

.quotation-process-step.is-done > span {
  background: var(--c-success-ink);
}

.quotation-process-step.is-active > span {
  background: var(--brand-500);
}

.quotation-process-step.is-blocked > span {
  background: #dc2626;
}

.quotation-process-step strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quotation-process-step small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quotation-workbench-command {
  border-color: var(--brand-100);
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
}

.quotation-workbench-command-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.quotation-workbench-command-grid article {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  padding: 12px;
}

.quotation-workbench-command-grid span,
.quotation-workbench-command-grid small {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-workbench-command-grid strong {
  color: var(--ink);
  overflow-wrap: anywhere;
  font-size: 18px;
}

/* 出单页（审批通过后）正式出单卡 */
.quotation-export-hero {
  border-color: var(--brand-200);
  background: linear-gradient(180deg, var(--brand-50) 0%, var(--surface) 58%);
}

.quotation-export-hero-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.quotation-export-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

/* 出单卡：下载按钮靠右；「导出含报价系数」开关靠左（占满左侧剩余空间把按钮推到右边）。 */
.quotation-export-coeff-toggle {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}

.quotation-export-coeff-toggle input {
  margin: 0;
  cursor: pointer;
}

.quotation-export-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-top: 16px;
}

.quotation-export-facts article {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
}

.quotation-export-facts article.is-warn {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.quotation-export-facts span,
.quotation-export-facts small {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-export-facts strong {
  color: var(--ink);
  font-size: 16px;
  overflow-wrap: anywhere;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.quotation-export-facts article.is-warn strong {
  color: var(--accent-700);
}

.quotation-export-readiness {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.quotation-export-readiness li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  grid-gap: 8px;
  gap: 8px;
  align-items: start;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
}

.quotation-export-readiness li > span {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.quotation-export-readiness li.is-ok {
  border-color: var(--c-success-border);
  background: var(--c-success-soft);
}

.quotation-export-readiness li.is-ok > span {
  background: var(--c-success-ink);
  color: var(--c-success-soft);
}

.quotation-export-readiness li.is-pending {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.quotation-export-readiness li.is-pending > span {
  background: var(--accent-200);
  color: var(--accent-700);
}

.quotation-export-readiness strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.quotation-export-readiness small {
  display: block;
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.quotation-export-blockers {
  margin-top: 14px;
  border: 1px solid var(--accent-200);
  border-radius: 10px;
  background: var(--accent-50);
  padding: 12px;
}

.quotation-export-blockers-label {
  display: block;
  margin-bottom: 8px;
  color: var(--accent-700);
  font-size: 12px;
  font-weight: 800;
}

.quotation-export-blockers .quotation-warning-list span {
  background: var(--surface);
}

/* 出单页「赢单·转为合同」成交卡——铜金 accent，区别于出单卡的钢蓝 */
.quotation-convert-card {
  border-color: var(--accent-200);
  background: linear-gradient(180deg, var(--accent-50) 0%, var(--surface) 60%);
}

.quotation-convert-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.quotation-convert-fields {
  margin-top: 14px;
}

.quotation-convert-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.quotation-convert-blocked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  width: 100%;
  border: 1px solid var(--accent-200);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px 14px;
}

.quotation-convert-blocked p {
  flex: 1 1 320px;
  margin: 0;
  color: var(--accent-700);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.quotation-compare-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-top: 12px;
}

.quotation-compare-mode-grid article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-gap: 2px 10px;
  gap: 2px 10px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.quotation-compare-mode-grid span {
  display: inline-flex;
  grid-row: span 2;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-500);
  font-size: 12px;
  font-weight: 800;
}

.quotation-compare-mode-grid strong {
  min-width: 0;
  color: var(--ink);
  font-size: 14px;
}

.quotation-compare-mode-grid small {
  min-width: 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-list-compare-bridge {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  margin: 12px 0;
  border: 1px solid var(--brand-100);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
}

.quotation-quote-mode-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 14px;
  gap: 14px;
  align-items: center;
  margin: 12px 0;
  border: 1px solid var(--brand-100);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
}

.quotation-quote-mode-panel span,
.quotation-quote-mode-panel small {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-quote-mode-panel strong {
  display: block;
  margin: 3px 0;
  color: var(--ink);
  font-size: 17px;
}

.quotation-quote-mode-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(116px, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.quotation-quote-mode-option {
  min-width: 0;
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  background: var(--surface);
  padding: 9px 11px;
  text-align: left;
  cursor: pointer;
}

.quotation-quote-mode-option:disabled {
  cursor: default;
  opacity: 1;
}

.quotation-quote-mode-option.is-active {
  border-color: var(--brand-500);
  background: var(--brand-50);
  box-shadow: inset 3px 0 0 var(--brand-500);
}

.quotation-quote-mode-option span {
  color: var(--brand-500);
}

.quotation-quote-mode-option strong {
  margin: 2px 0 0;
  font-size: 13px;
}

.quotation-comprehensive-list {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  margin: 12px 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
}

.quotation-comprehensive-mode-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  margin: 12px 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
}

.quotation-comprehensive-mode-panel span,
.quotation-comprehensive-mode-panel small {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-comprehensive-mode-panel strong {
  display: block;
  margin: 3px 0;
  color: var(--ink);
  font-size: 16px;
}

.quotation-comprehensive-mode-switch button:disabled {
  color: var(--ink-3);
  cursor: not-allowed;
}

.quotation-comprehensive-list-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
}

.quotation-comprehensive-list-head span,
.quotation-comprehensive-list-head small,
.quotation-comprehensive-card span,
.quotation-comprehensive-card small,
.quotation-comprehensive-empty span {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-comprehensive-list-head strong,
.quotation-comprehensive-card strong,
.quotation-comprehensive-empty strong {
  display: block;
  margin: 3px 0;
  color: var(--ink);
  font-size: 16px;
}

.quotation-comprehensive-card-list {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.quotation-comprehensive-card {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(120px, 0.7fr)) auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 10px;
}

.quotation-comprehensive-card > * {
  min-width: 0;
}

.quotation-comprehensive-card p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-comprehensive-card-remove {
  justify-self: end;
  color: var(--c-danger-ink);
}

.quotation-comprehensive-card-remove:hover:not(:disabled) {
  border-color: var(--c-danger-border);
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

.quotation-comprehensive-empty {
  border: 1px dashed var(--hairline-strong);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 16px;
}

.quotation-standalone-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
}

.quotation-comprehensive-internal-details {
  border-top: 1px solid var(--hairline);
  padding-top: 10px;
}

.quotation-comprehensive-internal-details summary {
  width: -moz-fit-content;
  width: fit-content;
  color: var(--brand-500);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.quotation-comprehensive-internal-details[open] summary {
  margin-bottom: 10px;
}

.quotation-combination-component-editor {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 12px;
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
}

.quotation-combination-component-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quotation-combination-component-head strong,
.quotation-combination-component-head span {
  display: block;
}

.quotation-combination-component-head strong {
  color: var(--ink);
  font-size: 14px;
}

.quotation-combination-component-head span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.quotation-combination-component-table {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  overflow-x: auto;
}

.quotation-combination-component-grid {
  display: grid;
  grid-template-columns: 58px minmax(140px, 1fr) minmax(150px, 1fr) minmax(104px, 0.65fr) minmax(112px, 0.7fr) minmax(78px, 0.45fr) minmax(108px, 0.65fr) 36px;
  grid-gap: 8px;
  gap: 8px;
  align-items: center;
  min-width: 960px;
}

.quotation-combination-component-grid.is-head {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.quotation-combination-component-grid input,
.quotation-combination-component-grid select {
  min-width: 0;
  width: 100%;
}

.quotation-combination-row-type,
.quotation-combination-price-source,
.quotation-combination-quantity-result {
  min-width: 0;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.quotation-combination-price-source {
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-500);
  padding: 5px 8px;
  text-align: center;
}

.quotation-combination-quantity-result {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-combination-empty-components {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 640px;
  border: 1px dashed var(--hairline-strong);
  border-radius: 8px;
  background: var(--surface-sunk);
  color: var(--ink-2);
  padding: 12px;
}

.quotation-combination-empty-components strong,
.quotation-combination-empty-components span {
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 720px) {
  .quotation-quote-mode-panel {
    grid-template-columns: 1fr;
  }

  .quotation-quote-mode-options {
    grid-template-columns: 1fr;
  }

  .quotation-comprehensive-list-head,
  .quotation-comprehensive-mode-panel,
  .quotation-comprehensive-card {
    grid-template-columns: 1fr;
  }

  .quotation-combination-component-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

.quotation-list-compare-bridge-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
}

.quotation-list-compare-bridge-head span,
.quotation-list-compare-bridge-head small {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-list-compare-bridge-head strong {
  display: block;
  margin: 3px 0;
  color: var(--ink);
  font-size: 17px;
}

.quotation-list-compare-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.quotation-list-compare-steps,
/* 表头列宽拖拽 + 列名（主题3）：拖拽/重排逻辑早已接好，只缺样式让手柄可见可用。 */
.data-table thead th {
  position: relative;
}

.quotation-column-heading {
  display: block;
  overflow: hidden;
  padding-right: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quotation-column-resizer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  touch-action: none;
}

.quotation-column-resizer::after {
  content: "";
  position: absolute;
  top: 25%;
  right: 3px;
  bottom: 25%;
  width: 2px;
  border-radius: 1px;
  background: transparent;
  transition: background 0.15s ease;
}

.data-table thead th:hover .quotation-column-resizer::after {
  background: var(--hairline-strong);
}

.quotation-column-resizer:hover::after {
  background: var(--brand-500);
}

body.is-resizing-table-column,
body.is-resizing-table-column * {
  cursor: col-resize !important;
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}

/* 列设置面板（主题3）：原本几乎无样式 → 干净浮层卡片，不再顶下表格。 */
.quotation-table-shell {
  position: relative;
}

.quotation-column-control {
  display: contents;
}

.quotation-column-toggle.is-open {
  border-color: var(--brand-500);
  color: var(--brand-500);
  background: var(--brand-50);
}

.quotation-column-panel {
  position: absolute;
  z-index: 50;
  top: 4px;
  left: 0;
  width: min(440px, 92vw);
  max-height: 340px;
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.16);
}

.quotation-column-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--surface-soft);
}

.quotation-column-panel-header span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}

.quotation-column-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 6px;
  gap: 6px;
}

.quotation-column-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--surface-soft);
  border-radius: 8px;
  background: var(--surface-sunk);
}

.quotation-column-list label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

.quotation-column-list label span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quotation-column-order {
  display: inline-flex;
  flex-shrink: 0;
  gap: 2px;
}

.quotation-column-order-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
}

.quotation-column-order-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.quotation-column-order-button:not(:disabled):hover {
  border-color: var(--brand-500);
  background: var(--brand-50);
}

.quotation-column-order-button span {
  display: inline-block;
  width: 0;
  height: 0;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

.quotation-column-order-button--up span {
  border-bottom: 5px solid var(--ink-2);
}

.quotation-column-order-button--down span {
  border-top: 5px solid var(--ink-2);
}

/* 空清单引导（0 行时给出明确的开始入口）。 */
.quotation-list-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 32px 16px;
  text-align: center;
}

.quotation-list-empty-state strong {
  font-size: 15px;
  color: var(--ink);
}

.quotation-list-empty-state span {
  font-size: 13px;
  color: var(--ink-2);
}

.quotation-list-empty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

/* 清单导入弹窗（点「导入」才打开，不再常驻明细页）。 */
.quotation-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  overflow-y: auto;
  background: rgba(15, 23, 42, 0.45);
}

.quotation-modal {
  width: 100%;
  max-width: 880px;
  max-height: calc(100vh - 96px);
  margin: 0;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
}

/* 成功反馈横幅（P0-2）：核算/选成本/存版本/提交 完成后醒目可见。 */
.quotation-success-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: var(--surface-sunk);
  color: var(--c-success-ink);
}

.quotation-success-banner > span {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c-success);
  color: var(--ink-inverse);
  font-size: 12px;
  font-weight: 700;
}

.quotation-success-banner p {
  margin: 0;
  font-size: 13px;
}

/* 成本就绪检查（P0-1 统一闸口）：一次列出全部前置，透明可见。 */
.quotation-cost-gates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.quotation-cost-gates li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
}

.quotation-cost-gates li.is-done {
  border-color: var(--hairline-strong);
  background: var(--surface-sunk);
}

.quotation-cost-gates li.is-blocked {
  border-color: var(--c-danger-border);
  background: var(--surface-sunk);
}

.quotation-cost-gates li.is-active {
  border-color: var(--brand-100);
  background: var(--surface-sunk);
}

.quotation-cost-gate-dot {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}

.quotation-cost-gates li.is-done .quotation-cost-gate-dot {
  background: var(--c-success);
  color: var(--ink-inverse);
}

.quotation-cost-gates li.is-blocked .quotation-cost-gate-dot {
  background: var(--c-danger);
  color: var(--ink-inverse);
}

.quotation-cost-gates li.is-active .quotation-cost-gate-dot {
  background: var(--brand-500);
  color: var(--ink-inverse);
}

.quotation-cost-gates li > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.quotation-cost-gates strong {
  font-size: 13px;
  color: var(--ink);
}

.quotation-cost-gates small {
  font-size: 12px;
  color: var(--ink-2);
}

.quotation-compare-process-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.quotation-compare-process-strip {
  margin-top: 12px;
}

.quotation-list-compare-steps article,
.quotation-compare-process-strip article {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.quotation-list-compare-steps article > span,
.quotation-compare-process-strip article > span {
  color: var(--brand-500);
  font-size: 12px;
  font-weight: 800;
}

.quotation-list-compare-steps article > strong,
.quotation-compare-process-strip article > strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quotation-list-compare-steps article > small,
.quotation-compare-process-strip article > small {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quotation-list-compare-steps article.is-done,
.quotation-compare-process-strip article.is-done {
  border-color: var(--cyan-300);
  background: var(--surface-sunk);
}

.quotation-list-compare-steps article.is-active,
.quotation-compare-process-strip article.is-active {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.quotation-list-compare-steps article.is-blocked,
.quotation-compare-process-strip article.is-blocked {
  border-color: var(--c-danger-border);
  background: var(--surface);
}

.quotation-list-center-closure {
  border-color: var(--brand-100);
  background: var(--surface);
}

.quotation-list-center-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--brand-50);
  color: var(--brand-500);
}

.quotation-list-center-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quotation-list-template-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 8px;
}

.quotation-list-template-strip > span {
  flex: 0 0 auto;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.quotation-list-template-chip {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 190px;
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  background: var(--surface);
  color: inherit;
  cursor: pointer;
  padding: 7px 9px;
  text-align: left;
}

.quotation-list-template-chip strong,
.quotation-list-template-chip small {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quotation-list-template-chip strong {
  color: var(--ink);
  font-size: 13px;
}

.quotation-list-template-chip small {
  color: var(--ink-2);
  font-size: 12px;
}

.quotation-list-template-chip:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
}

.quotation-list-focus-strip {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(360px, 0.9fr);
  grid-gap: 12px;
  gap: 12px;
  align-items: stretch;
  margin-top: 12px;
}

.quotation-list-focus-main,
.quotation-list-action-row > div {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.quotation-list-focus-main {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.quotation-list-focus-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.quotation-list-focus-main span,
.quotation-list-focus-main small,
.quotation-list-focus-metrics span,
.quotation-list-path-strip span,
.quotation-list-action-row small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-list-focus-main strong,
.quotation-list-action-row strong {
  color: var(--ink);
  overflow-wrap: anywhere;
  font-size: 18px;
  line-height: 1.25;
}

.quotation-list-focus-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.quotation-list-focus-metrics span {
  display: grid;
  align-content: center;
  justify-items: center;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px 8px;
  text-align: center;
}

.quotation-list-focus-metrics b {
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
}

.quotation-list-path-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-top: 10px;
}

.quotation-list-path-strip span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  background: var(--surface);
  color: var(--brand-600);
  text-align: center;
}

.quotation-list-action-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.quotation-list-action-row > div {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  align-content: start;
}

.quotation-list-action-row .quotation-card-actions {
  margin-top: 2px;
}

.quotation-list-overview-panel {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.quotation-list-overview-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.quotation-list-overview-meta article,
.quotation-list-preview-list article {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.quotation-list-overview-meta span,
.quotation-list-preview-list span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.quotation-list-overview-meta strong,
.quotation-list-preview-list strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-list-preview-list {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.quotation-list-preview-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, auto) minmax(78px, auto);
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
}

.quotation-list-preview-list b {
  color: var(--ink);
  font-size: 13px;
  text-align: right;
  white-space: nowrap;
}

.quotation-list-secondary-details {
  margin-top: 12px;
}

.quotation-list-secondary-details > summary,
.quotation-list-advanced-settings > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  min-height: 34px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  font-weight: 800;
  padding: 0 12px;
}

.quotation-list-secondary-details > summary::-webkit-details-marker,
.quotation-list-advanced-settings > summary::-webkit-details-marker {
  display: none;
}

.quotation-list-secondary-details > summary::after,
.quotation-list-advanced-settings > summary::after {
  content: "+";
  color: var(--brand-500);
  font-weight: 900;
}

.quotation-list-secondary-details[open] > summary::after,
.quotation-list-advanced-settings[open] > summary::after {
  content: "-";
}

.quotation-list-secondary-details > .muted-text,
.quotation-list-secondary-details > .quotation-list-template-strip,
.quotation-list-secondary-details > .quotation-rule-builder {
  margin-top: 10px;
}

.quotation-list-draft-primary-grid,
.quotation-list-advanced-grid {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.quotation-list-draft-primary-grid {
  grid-template-columns: 1.2fr minmax(180px, 0.8fr) 1fr;
}

.quotation-list-advanced-settings {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.quotation-list-advanced-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 10px;
}

.quotation-list-attach-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.quotation-list-attach-flow article,
.quotation-list-attach-panel,
.quotation-selected-list,
.quotation-list-option-row,
.quotation-list-option-empty {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
}

.quotation-list-attach-flow article {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-width: 0;
  padding: 12px;
}

.quotation-list-attach-flow article.is-active {
  border-color: var(--brand-300);
  background: var(--brand-50);
}

.quotation-list-attach-flow strong,
.quotation-list-attach-head strong,
.quotation-selected-list strong,
.quotation-list-option-row strong,
.quotation-list-option-empty strong {
  color: var(--ink);
}

.quotation-list-attach-flow small,
.quotation-list-attach-head span,
.quotation-selected-list span,
.quotation-selected-list small,
.quotation-list-option-row span,
.quotation-list-option-empty span {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}

.quotation-list-attach-panel {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  padding: 12px;
}

.quotation-list-build-cta {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.quotation-list-build-cta strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--text);
}

.quotation-list-build-cta span {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.quotation-list-attach-head,
.quotation-selected-list,
.quotation-list-option-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(110px, 0.65fr) minmax(90px, 0.55fr) minmax(110px, 0.65fr) auto;
  align-items: center;
  grid-gap: 10px;
  gap: 10px;
}

.quotation-list-attach-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

.quotation-list-attach-head > div:first-child,
.quotation-selected-list > div,
.quotation-list-option-row > div:first-child {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  min-width: 0;
}

.quotation-selected-list {
  grid-template-columns: minmax(0, 1fr) auto;
  border-color: var(--brand-200);
  background: var(--surface);
  padding: 10px;
}

.quotation-selected-list.is-success {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.quotation-selected-list.is-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.quotation-list-option-table {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.quotation-list-option-row {
  padding: 9px 10px;
}

.quotation-list-option-row.is-selected {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.16);
}

.quotation-list-option-row.is-danger {
  background: var(--surface);
}

.quotation-list-option-row.is-warning {
  background: var(--accent-50);
}

.quotation-list-option-empty {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  padding: 14px;
}

.quotation-list-pricing-card {
  border-color: var(--brand-200) !important;
  background: var(--brand-50) !important;
}

.quotation-costing-workbench,
.quotation-pricing-workbench {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.quotation-costing-selector,
.quotation-action-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.quotation-material-sync {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.quotation-market-select {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  min-width: 132px;
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}

.quotation-market-select select {
  min-height: 36px;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--ink);
}

.quotation-costing-selector {
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
}

.quotation-costing-selector label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-width: min(360px, 100%);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.quotation-costing-selector select {
  min-height: 36px;
  border: 1px solid var(--hairline-strong);
  border-radius: 8px;
  padding: 0 10px;
  background: var(--surface);
  color: var(--ink);
}

.quotation-costing-selector small {
  color: var(--ink-2);
}

.quotation-costing-start-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.quotation-costing-start-panel.is-needs_review {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.quotation-costing-start-panel.is-ready {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.quotation-costing-start-panel > div:first-child {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  min-width: 0;
}

.quotation-costing-start-panel span {
  color: var(--brand-500);
  font-size: 12px;
  font-weight: 900;
}

.quotation-costing-start-panel.is-needs_review span {
  color: var(--accent-600);
}

.quotation-costing-start-panel.is-ready span {
  color: var(--c-success-ink);
}

.quotation-costing-start-panel strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
}

.quotation-costing-start-panel small {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.quotation-costing-start-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.quotation-costing-summary-grid,
.quotation-material-snapshot-grid,
.quotation-costing-risk-grid,
.quotation-pricing-summary-grid,
.quotation-pricing-evidence-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.quotation-costing-summary-grid article,
.quotation-material-snapshot-grid article,
.quotation-costing-risk-grid article,
.quotation-pricing-summary-grid article,
.quotation-pricing-evidence-grid article {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.quotation-costing-summary-grid article span,
.quotation-costing-summary-grid article strong,
.quotation-costing-summary-grid article small,
.quotation-material-snapshot-grid article span,
.quotation-material-snapshot-grid article strong,
.quotation-material-snapshot-grid article small,
.quotation-costing-risk-grid article span,
.quotation-costing-risk-grid article strong,
.quotation-costing-risk-grid article small,
.quotation-pricing-summary-grid article span,
.quotation-pricing-summary-grid article strong,
.quotation-pricing-summary-grid article small,
.quotation-pricing-evidence-grid article span,
.quotation-pricing-evidence-grid article strong,
.quotation-pricing-evidence-grid article small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-costing-summary-grid,
.quotation-pricing-summary-grid {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
}

.quotation-costing-summary-grid article,
.quotation-pricing-summary-grid article {
  border: 0;
  border-right: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
}

.quotation-costing-summary-grid article:last-child,
.quotation-pricing-summary-grid article:last-child {
  border-right: 0;
}

.quotation-costing-risk-grid article.is-danger,
.quotation-costing-line.is-danger {
  border-color: var(--c-danger-border);
  background: var(--surface);
}

.quotation-costing-risk-grid article.is-warning,
.quotation-costing-line.is-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.quotation-costing-risk-grid article.is-normal {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.quotation-costing-summary-grid span,
.quotation-material-snapshot-grid span,
.quotation-costing-risk-grid span,
.quotation-pricing-summary-grid span,
.quotation-pricing-evidence-grid span,
.quotation-pricing-policy-grid dt,
.quotation-costing-line span,
.quotation-costing-line dt {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-costing-summary-grid strong,
.quotation-material-snapshot-grid strong,
.quotation-costing-risk-grid strong,
.quotation-pricing-summary-grid strong,
.quotation-pricing-evidence-grid strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.quotation-costing-summary-grid small,
.quotation-material-snapshot-grid small,
.quotation-costing-risk-grid small,
.quotation-pricing-summary-grid small,
.quotation-pricing-evidence-grid small {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-costing-result-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(2, minmax(180px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.quotation-costing-result-panel article,
.quotation-costing-source-panel article {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.quotation-costing-result-panel article.is-primary {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.quotation-costing-result-panel span,
.quotation-costing-source-panel span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.quotation-costing-result-panel strong,
.quotation-costing-source-panel strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.quotation-costing-source-panel strong {
  font-size: 15px;
}

.quotation-costing-result-panel small,
.quotation-costing-source-panel small {
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.45;
}

.quotation-costing-source-panel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.quotation-costing-breakdown {
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
}

.quotation-costing-breakdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
}

.quotation-costing-breakdown-head strong {
  color: var(--ink);
  font-size: 14px;
}

.quotation-costing-breakdown-head span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.quotation-costing-breakdown table {
  width: 100%;
  border-collapse: collapse;
}

.quotation-costing-breakdown th,
.quotation-costing-breakdown td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--surface-soft);
  text-align: left;
  vertical-align: top;
  font-size: 13px;
  line-height: 1.45;
}

.quotation-costing-breakdown tr:last-child th,
.quotation-costing-breakdown tr:last-child td {
  border-bottom: 0;
}

.quotation-costing-breakdown th {
  width: 132px;
  color: var(--ink);
  font-weight: 800;
}

.quotation-costing-breakdown td:nth-child(2) {
  width: 180px;
  color: var(--ink);
  font-weight: 800;
  white-space: nowrap;
}

.quotation-costing-breakdown td:nth-child(2) > span,
.quotation-costing-breakdown td:nth-child(2) > small {
  display: block;
}

.quotation-costing-share {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.quotation-costing-breakdown td:last-child {
  color: var(--text-secondary);
}

.quotation-combination-cost-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  padding: 12px;
}

.quotation-combination-cost-card {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 12px;
  overflow-x: auto;
}

.quotation-combination-cost-card header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, auto);
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
}

.quotation-combination-cost-card header span,
.quotation-combination-cost-card header small {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-combination-cost-card header strong {
  display: block;
  margin: 3px 0;
  color: var(--ink);
  font-size: 16px;
}

.quotation-combination-cost-card dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(88px, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin: 0;
}

.quotation-combination-cost-card dl div {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px;
}

.quotation-combination-cost-card dt,
.quotation-combination-cost-card dd {
  margin: 0;
}

.quotation-combination-cost-card dt {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.quotation-combination-cost-card dd {
  margin-top: 2px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.quotation-combination-cost-card table {
  width: 100%;
  background: var(--surface);
  table-layout: fixed;
}

.quotation-combination-cost-card th,
.quotation-combination-cost-card td {
  padding: 8px;
  font-size: 12px;
  vertical-align: middle;
}

.quotation-costing-formula-details {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
}

.quotation-costing-formula-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.quotation-costing-formula-details summary::-webkit-details-marker {
  display: none;
}

.quotation-costing-formula-details summary span {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
}

.quotation-costing-formula-details summary strong {
  color: var(--ink);
  font-size: 14px;
}

.quotation-costing-formula-details summary small,
.quotation-costing-formula-details summary em {
  color: var(--text-secondary);
  font-size: 12px;
  font-style: normal;
}

.quotation-costing-formula-details .quotation-formula-tree {
  margin: 0 12px 12px;
}

.quotation-formula-tree {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--surface-sunk);
}

.quotation-formula-tree-compact {
  margin-top: 12px;
  padding: 12px;
}

.quotation-formula-tree ul {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quotation-formula-tree li {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
}

.quotation-formula-tree li ul {
  margin-top: 6px;
  padding-left: 12px;
  border-left: 2px solid var(--brand-100);
}

.quotation-formula-tree div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.quotation-formula-tree span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}

.quotation-formula-tree strong {
  font-size: 14px;
  color: var(--ink);
}

.quotation-formula-tree small,
.quotation-formula-tree em {
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
  font-style: normal;
}

.quotation-costing-line-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.quotation-costing-line {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.quotation-costing-line header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}

.quotation-costing-line strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
}

.quotation-costing-line small {
  display: block;
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.quotation-trace-details {
  border-top: 1px solid var(--surface-soft);
  padding-top: 8px;
}

.quotation-trace-details summary {
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.quotation-trace-details ul {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.quotation-pricing-policy-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin: 0;
}

.quotation-pricing-policy-grid div {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 10px;
}

.quotation-pricing-policy-grid dd {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.quotation-quote-plan-control {
  display: grid;
  grid-template-columns: minmax(190px, 0.9fr) minmax(170px, 0.7fr) minmax(170px, 0.7fr) minmax(180px, 0.8fr);
  grid-gap: 12px;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 14px;
}

.quotation-quote-plan-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 6px;
  gap: 6px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 6px;
}

.quotation-quote-plan-mode button {
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  padding: 9px 10px;
}

.quotation-quote-plan-mode button.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.quotation-quote-plan-input,
.quotation-quote-plan-preview,
.quotation-quote-plan-advanced {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.quotation-quote-plan-input.is-primary {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.quotation-quote-plan-input span,
.quotation-quote-plan-preview span,
.quotation-quote-plan-preview small,
.quotation-quote-plan-input small {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.quotation-quote-plan-input input {
  width: 100%;
  border: 0;
  outline: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 800;
}

.quotation-quote-plan-preview strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.quotation-quote-plan-preview.is-readonly {
  background: var(--surface-sunk);
}

.quotation-quote-plan-advanced {
  align-content: start;
}

.quotation-quote-plan-advanced .btn {
  width: 100%;
  justify-content: center;
}

.quotation-quote-plan-advanced .quotation-quote-plan-input {
  border: 0;
  padding: 4px 0 0;
  background: transparent;
}

.quotation-task-workbench,
.quotation-settings-workbench {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

/* 报价工作台：撑满 cockpit 高度并改用 flex 列，使页脚可 margin-top:auto 顶到底部。 */
.quotation-task-workbench {
  flex: 1 1;
  display: flex;
  flex-direction: column;
}

.quotation-preflight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.quotation-preflight-card {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px;
}

.quotation-preflight-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.quotation-preflight-card strong {
  color: var(--ink);
  font-size: 15px;
}

.quotation-preflight-card em {
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  padding: 3px 9px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.quotation-preflight-card ul {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.quotation-preflight-card li,
.quotation-priority-item {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.quotation-priority-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.quotation-priority-item {
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface-sunk);
  padding: 8px 10px;
  text-align: center;
  font-weight: 800;
}

.quotation-task-lanes,
.quotation-settings-grid,
.quotation-template-settings-grid,
.quotation-settings-rule-grid,
.quotation-task-sequence-grid {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.quotation-task-lanes,
.quotation-settings-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 业务办理/列表页的任务分组卡(lane)统一用响应式 auto-fit：lane 数(4~7)在一行内自适应等宽
 * 排开，避免固定 6 列时第 7 个 lane(如报价工作台「风险报价」)被挤到第二行单独成行；lane 少于
 * 列数时也铺满整行不留右侧空档。≤1080 仍由下方媒体查询降为 2 列。 */
.quotation-task-lanes {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 8px;
}

.quotation-template-settings-grid,
.quotation-settings-rule-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quotation-task-lane,
.quotation-settings-grid article,
.quotation-template-setting-card,
.quotation-settings-rule-grid article {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
  text-decoration: none;
}

.quotation-task-lane {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 0;
  position: relative;
  grid-template-rows: auto auto auto;
  min-height: 64px;
  border-left: 4px solid var(--hairline-strong);
  border-radius: 8px;
  padding: 8px 12px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

/* 统一页头 hero：所有走 PageHeader(.page-header-unified) 或显式带 .quotation-task-page-hero
   的页面共用同一套紧凑深色钢蓝 hero（去掉原先末端的亮青 var(--cyan-400)，回归 workbench 钢蓝语言）。 */
.quotation-task-page-hero,
.page-header-unified {
  min-height: 96px;
  border: 0;
  border-radius: 14px;
  background:
    linear-gradient(118deg, var(--brand-900) 0%, var(--brand-700) 52%, var(--brand-600) 100%);
  box-shadow: 0 16px 34px rgba(21, 50, 91, 0.2);
  color: var(--ink-inverse);
  padding: 16px 24px;
}

.quotation-task-page-hero .breadcrumb,
.quotation-task-page-hero .desc,
.quotation-task-page-hero h1,
.page-header-unified .breadcrumb,
.page-header-unified .desc,
.page-header-unified h1 {
  color: var(--ink-inverse);
}

.quotation-task-page-hero h1,
.page-header-unified h1 {
  margin: 4px 0;
  font-size: 24px;
  font-weight: 800;
}

.quotation-task-page-hero .desc,
.quotation-task-page-hero .breadcrumb,
.page-header-unified .desc,
.page-header-unified .breadcrumb {
  opacity: 0.84;
}

/* hero 里的说明文字压成单行（去掉「页头塞 1~4 行业务说明」的臃肿），完整内容仍在 title 属性/详情 */
.quotation-task-page-hero .desc,
.page-header-unified .desc {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 760px;
  font-size: 13px;
}

.quotation-task-page-hero .page-header-actions .btn,
.quotation-task-page-hero .page-header-actions a,
.page-header-unified .page-header-actions .btn,
.page-header-unified .page-header-actions a {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.14);
  color: var(--ink-inverse);
}

/* 「新建报价」与相邻的「清单中心」(ghost) 保持一致：半透明玻璃底 + 深色字。
   注：.page-header-actions .btn-primary 带 color:var(--ink-inverse) !important，故此处也用 !important
   且选择器特异度更高(加了 .quotation-task-page-hero)，方能压过、避免白底/亮底上白字看不清。 */
.quotation-task-page-hero .page-header-actions .btn-primary,
.page-header-unified .page-header-actions .btn-primary {
  /* 主 CTA 用近实白底 + 深字，在深色 hero 上高对比、清晰可读（玻璃半透时深字会糊在深底上）。
     既有规则 .page-header-actions .btn-primary 设了 -webkit-text-fill-color:#fff 覆盖 color，
     必须一并改掉，否则字仍渲染成白色。 */
  border-color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
  font-weight: 700;
}

.quotation-task-page-hero .page-header-actions .btn-primary:hover,
.page-header-unified .page-header-actions .btn-primary:hover {
  background: var(--surface);
}

.quotation-task-hero-card {
  overflow: hidden;
  border-color: var(--brand-100);
  background: var(--surface);
  padding-top: 12px;
  padding-bottom: 12px;
}

.quotation-task-section-head {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
}

.document-section-head.quotation-task-table-head {
  align-items: center;
}

.quotation-task-table-head .quotation-task-heading {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.quotation-task-section-head > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.quotation-task-section-head .muted-text {
  margin: 0;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

.quotation-task-section-head .module-title,
.quotation-task-table-head .module-title {
  color: var(--ink);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.18;
}

.quotation-task-lane:hover {
  border-color: var(--brand-300);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.quotation-task-lane.active {
  border-color: var(--brand-500);
  border-left-color: var(--cyan-500);
  background: var(--brand-50);
  box-shadow:
    0 0 0 1px var(--brand-400) inset,
    0 10px 24px rgba(37, 99, 235, 0.16);
  outline: 0;
}

.quotation-task-lane.active::after {
  content: "✓";
  position: absolute;
  top: 9px;
  right: 10px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-500);
  color: var(--ink-inverse);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.quotation-task-lane.tone-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.quotation-task-lane.tone-danger {
  border-color: var(--c-danger-border);
  background: var(--surface-sunk);
}

.quotation-task-lane.tone-success {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.quotation-task-lane span,
.quotation-task-lane small,
.quotation-settings-grid span,
.quotation-settings-grid small,
.quotation-template-setting-card span,
.quotation-template-setting-card small,
.quotation-template-setting-card em,
.quotation-settings-rule-grid span {
  color: var(--text-secondary);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-task-lane span,
.quotation-task-lane small,
.quotation-settings-grid span,
.quotation-settings-grid small,
.quotation-template-setting-card span,
.quotation-template-setting-card small,
.quotation-template-setting-card em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-task-lane strong,
.quotation-settings-grid strong,
.quotation-template-setting-card strong,
.quotation-settings-rule-grid strong {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-task-lane strong,
.quotation-settings-grid strong {
  font-size: 22px;
}

.quotation-task-lane strong {
  justify-self: start;
  min-width: 0;
  margin: 5px 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  text-align: left;
}

.quotation-task-lane span,
.quotation-task-lane small {
  color: var(--ink-2);
  font-weight: 800;
}

.quotation-task-lane span,
.quotation-task-lane small {
  line-height: 1.2;
}

.quotation-task-lane.tone-success strong {
  background: transparent;
  color: var(--ink);
}

.quotation-task-lane.tone-warning strong {
  background: transparent;
  color: var(--ink);
}

.quotation-task-lane.tone-danger strong {
  background: transparent;
  color: var(--ink);
}

.quotation-task-lane strong {
  margin: 2px 0 3px;
  font-size: 20px;
  line-height: 1;
}

.quotation-task-lane span,
.quotation-task-lane small {
  line-height: 1.18;
}

.quotation-operating-model {
  overflow: hidden;
}

.quotation-operating-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.quotation-operating-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  grid-gap: 6px 10px;
  gap: 6px 10px;
  min-width: 0;
  min-height: 132px;
  overflow: hidden;
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 12px;
  text-decoration: none;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}

.quotation-operating-card:hover {
  border-color: var(--brand-300);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

.quotation-operating-index {
  color: var(--brand-500);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.quotation-operating-icon {
  display: inline-flex;
  width: 34px;
  height: 34px;
  min-width: 34px;
  max-width: 34px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--brand-50);
  color: var(--brand-500);
}

.quotation-operating-icon svg {
  display: block;
  width: 18px;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  min-height: 18px;
  max-height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quotation-operating-card strong,
.quotation-operating-card small,
.quotation-operating-card em {
  grid-column: 1 / -1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.quotation-operating-card strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}

.quotation-operating-card small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.quotation-operating-card em {
  align-self: end;
  color: var(--ink-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.35;
}

.work-interface-summary-strip {
  margin-top: 12px;
  margin-bottom: 14px;
}

.work-interface-summary-strip .quotation-summary-item,
.work-interface-kpi-grid .tender-kpi-card,
.work-interface-kpi-block .tender-kpi-card,
.report-overview-kpis.work-interface-summary-strip .report-overview-kpi {
  border-radius: 0;
  box-shadow: none;
}

.work-interface-lane-block,
.work-interface-filter-block,
.work-interface-check-block,
.work-interface-kpi-block,
.work-interface-attention-block {
  border-color: var(--brand-100);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.work-interface-lane-block .quotation-task-section-head,
.work-interface-check-block .quotation-task-section-head {
  margin-bottom: 10px;
}

.work-interface-status-lanes {
  gap: 8px;
}

.work-interface-status-lanes .flow-step {
  position: relative;
  min-height: 86px;
  align-content: start;
  border: 1px solid var(--hairline);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--surface);
  padding: 10px 12px;
  text-align: left;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.work-interface-status-lanes .flow-step:hover {
  border-color: var(--brand-300);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.work-interface-status-lanes .flow-step.active,
.work-interface-status-lanes .flow-step-button.active {
  border-color: var(--brand-500);
  border-left-color: var(--cyan-500);
  background: var(--brand-50);
  box-shadow:
    0 0 0 1px var(--brand-400) inset,
    0 10px 24px rgba(37, 99, 235, 0.14);
}

.work-interface-status-lanes .flow-step.active::after,
.work-interface-status-lanes .flow-step-button.active::after {
  content: "✓";
  position: absolute;
  top: 9px;
  right: 10px;
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 999px;
  background: var(--brand-500);
  color: var(--ink-inverse);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.work-interface-status-lanes .flow-warning {
  border-left-color: var(--c-warning);
  background: var(--accent-50);
}

.work-interface-status-lanes .flow-danger {
  border-left-color: var(--c-danger);
  background: var(--surface-sunk);
}

.work-interface-status-lanes .flow-success {
  border-left-color: var(--cyan-500);
  background: var(--surface-sunk);
}

.work-interface-filter-block .customer-toolbar,
.work-interface-filter-block .filter-grid,
.work-interface-filter-block .finance-filter-grid,
.work-interface-filter-block .project-filter-grid {
  margin-top: 0;
}

.work-interface-filter-block .customer-toolbar,
.work-interface-filter-block .finance-filter-grid,
.work-interface-filter-block .project-filter-grid {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
}

.work-interface-filter-block .filter-field span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 850;
}

.work-interface-table-wrap {
  border-color: var(--hairline);
  border-radius: 10px;
  background: var(--surface);
}

.work-interface-standard-panel {
  border-color: var(--brand-100);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.work-interface-standard-panel.is-empty .work-interface-table-wrap {
  min-height: 260px;
}

.work-interface-data-table {
  min-width: 1280px;
}

.work-interface-data-table th {
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 850;
}

.work-interface-data-table td {
  color: var(--ink);
  font-size: 13px;
}

.work-interface-data-table .empty-table-cell {
  height: 156px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.work-interface-data-table .inline-actions {
  justify-content: flex-start;
}

.work-interface-data-table .action-column {
  width: 138px;
  min-width: 138px;
}

.work-interface-data-table .quotation-row-icon-actions {
  width: 116px;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px 10px;
  white-space: normal;
}

.work-interface-pagination {
  margin-top: 10px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 8px 10px;
}

.report-standard-chart-grid .data-chart-panel,
.finance-two-column.work-interface-two-column .module-block,
.work-interface-attention-block .panel {
  border-color: var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.report-standard-chart-grid .data-chart-panel {
  padding: 14px;
}

.report-standard-chart-grid .data-chart-panel:hover {
  border-color: var(--brand-200);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.report-standard-chart-grid .data-chart-panel h3 {
  font-size: 16px;
  font-weight: 900;
}

@media (max-width: 1180px) {
  .quotation-task-table-head {
    align-items: stretch;
    flex-direction: column;
  }

  .quotation-task-header-tools {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  .quotation-filter-field-keyword {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .quotation-task-page-hero {
    min-height: 0;
    padding: 18px;
  }

  .quotation-task-header-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .quotation-date-range-filter {
    flex-basis: auto;
    min-width: 0;
    width: 100%;
  }

  .quotation-task-header-tools > .quotation-filter-field,
  .quotation-task-header-tools > .quotation-task-dropdown,
  .quotation-task-header-tools > .inline-actions {
    width: 100%;
  }

  .quotation-task-header-tools > .quotation-filter-field:not(.quotation-filter-field-keyword) {
    flex-basis: auto;
  }

  .quotation-date-range-popover {
    left: 0;
    right: auto;
    width: min(520px, calc(100vw - 40px));
  }

  .quotation-date-range-calendars {
    grid-template-columns: minmax(0, 1fr);
  }

  .quotation-task-pagination {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 1280px) {
  .quotation-operating-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .quotation-operating-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.quotation-process-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.quotation-process-tabs span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
}

.quotation-process-tabs span.active {
  border-color: var(--brand-300);
  background: var(--brand-50);
  color: var(--brand-600);
}

.quotation-task-list {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.quotation-task-table {
  min-width: 1080px;
  table-layout: fixed;
  font-family: var(--ui-font-family-base, var(--font-sans));
}

.quotation-task-table th,
.quotation-task-table td,
.quotation-task-table strong,
.quotation-task-table span,
.quotation-task-table small,
.quotation-task-table a,
.quotation-task-pagination,
.quotation-task-header-tools input,
.quotation-task-header-tools select,
.quotation-task-header-tools button,
.quotation-task-header-tools summary {
  font-family: var(--ui-font-family-base, var(--font-sans));
}

.quotation-task-table th,
.quotation-task-table td {
  padding-top: 10px;
  padding-bottom: 10px;
  vertical-align: middle;
}

.quotation-task-table .empty-table-cell {
  height: 316px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 750;
  text-align: center;
  vertical-align: middle;
}

.quotation-task-table th {
  position: relative;
}

.quotation-task-table th.quotation-task-draggable-column {
  cursor: -webkit-grab;
  cursor: grab;
}

.quotation-task-table th.quotation-task-draggable-column:active {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.quotation-task-table .first-column {
  min-width: 300px;
}

.quotation-task-table .row-index-column {
  width: 52px;
  min-width: 52px;
  text-align: center;
  color: var(--ink-3, var(--ink-3));
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* 多选列(WorkbenchQueueTable selectable)：首列复选框居中；选中行淡蓝底。 */
.quotation-task-table .queue-select-column {
  width: 44px;
  min-width: 44px;
  text-align: center;
}

.quotation-task-table .queue-select-column input[type="checkbox"] {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--brand-600);
  vertical-align: middle;
}

.quotation-task-table tbody tr.queue-row-selected > td {
  background: var(--brand-50, #eef4fb);
}

.queue-select-hint {
  margin: 8px 0 0;
  font-size: 12px;
}

.quotation-task-table td > strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 主标识列链接（<td><a><strong>名</strong></a>）：与 td>strong 同款单行省略，
   消除"链接名换行→行高参差→序号忽一行忽两行"；并统一品牌蓝(非浏览器默认 #00E)、可点击有 hover 下划线。 */
.quotation-task-table td > a {
  display: block;
  overflow: hidden;
  color: var(--brand-600);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quotation-task-table td > a:hover {
  text-decoration: underline;
}
.quotation-task-table td > a > strong {
  color: inherit;
  font-weight: inherit;
}
/* identity-cell 型主列（名+副标题双行，如 FinanceCenter/ReportCenter/报价工作台）：名也统一品牌蓝可点击。 */
.quotation-task-table .tender-identity-cell a,
.quotation-task-table [class*="identity-cell"] a {
  color: var(--brand-600);
}
.quotation-task-table .tender-identity-cell a:hover,
.quotation-task-table [class*="identity-cell"] a:hover {
  text-decoration: underline;
}

/* 行高一致：所有数据单元格单行省略，每行等高（长文靠 title/详情页承载）。仅操作列（图标按钮行）豁免。 */
.quotation-task-table tbody td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quotation-task-table tbody td.action-column {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}
/* identity-cell（名+副标题）在队列表里收成「单行」：名在前、副标题灰字同行紧随，整体省略，
   使带副标题的页(财务/投标/汇款/报表…)与纯单行页等高。详情语义不变(副标题仍在,只是同行)。 */
.quotation-task-table .tender-identity-cell {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}
.quotation-task-table .tender-identity-cell > a,
.quotation-task-table .tender-identity-cell > strong {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quotation-task-table .tender-identity-cell > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 行操作图标不换行：避免 4 个按钮在窄操作列里折成两行 → 行高翻倍（93px）。配合 actionsWidth=156 容纳。 */
.quotation-task-table .inline-actions {
  flex-wrap: nowrap;
}
/* 投标「截标节奏」等 日期+徽标 双行单元格 → 同行单行，使与其它页等高。 */
.quotation-task-table .tender-deadline-cell {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  white-space: nowrap;
}

.quotation-task-table td.numeric-cell strong {
  text-align: right;
}

.quotation-task-table .action-column {
  min-width: 124px;
}

.quotation-task-time-cell {
  min-width: 96px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

.quotation-task-primary-action {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
}

.quotation-task-primary-action .action-glyph {
  display: inline-grid;
  width: 14px;
  height: 14px;
  place-items: center;
  flex: 0 0 auto;
}

.quotation-task-primary-action svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quotation-task-primary-action span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-task-delete-action {
  width: 32px;
  min-width: 32px;
  height: 32px;
  border-color: var(--c-danger-border);
  background: var(--surface-sunk);
  color: #dc2626;
  padding: 0;
}

.quotation-task-delete-action:hover,
.quotation-task-delete-action:focus-visible {
  border-color: var(--c-danger);
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

.quotation-task-delete-action:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.quotation-task-delete-action .action-glyph,
.quotation-task-delete-action svg {
  width: 14px;
  height: 14px;
}

.quotation-task-delete-action svg {
  stroke: currentColor;
}

.quotation-task-row {
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(260px, 1.35fr)
    minmax(180px, 0.9fr)
    minmax(118px, auto)
    64px
    86px
    76px
    auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 9px 12px 9px 14px;
}

.quotation-task-row::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: var(--brand-500);
}

.quotation-task-row.task-approved::before,
.quotation-task-row.task-converted_to_contract::before {
  background: var(--c-success);
}

.quotation-task-row.task-pending_approval::before {
  background: var(--c-warning);
}

.quotation-task-row.task-rejected::before {
  background: #dc2626;
}

.quotation-task-row.task-cancelled::before {
  background: var(--ink-3);
}

.quotation-task-status-dot {
  display: inline-grid;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  place-items: center;
  padding: 0;
}

.quotation-task-status-dot::before {
  margin: 0;
}

.quotation-task-title-cell {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.quotation-task-title-cell strong,
.quotation-task-customer,
.quotation-task-amount,
.quotation-task-count,
.quotation-task-margin {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-task-title-cell strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.quotation-task-table .quotation-task-title-cell strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-task-customer,
.quotation-task-count,
.quotation-task-margin {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 750;
}

.quotation-task-amount {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  text-align: right;
}

.quotation-task-count,
.quotation-task-margin {
  text-align: center;
}

.quotation-task-row > .risk-badge {
  justify-self: start;
  min-height: 22px;
  padding: 1px 8px;
}

.quotation-task-row dl {
  display: grid;
  grid-template-columns: repeat(5, minmax(72px, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin: 0;
}

.quotation-task-row dl div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--surface-soft);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 8px;
}

.quotation-task-row dt {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.quotation-task-row dd {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quotation-task-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.quotation-task-sequence-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 10px;
}

.quotation-task-sequence-grid span {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  color: var(--ink);
  padding: 10px;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.quotation-settings-command {
  border-color: var(--brand-100);
  background: var(--surface);
}

.quotation-compare-workbench,
.quotation-compare-command {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.quotation-compare-queue {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.quotation-compare-queue-table {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
}

.quotation-compare-queue-head,
.quotation-compare-queue-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.35fr) minmax(160px, 0.7fr) minmax(220px, 1fr) 152px;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
}

.quotation-compare-queue-head {
  background: var(--surface-sunk);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.quotation-compare-queue-row {
  border-top: 1px solid var(--surface-soft);
}

.quotation-compare-queue-row.is-active {
  box-shadow: inset 3px 0 0 var(--brand-500);
}

.quotation-compare-queue-row.is-muted {
  background: var(--surface);
}

.quotation-compare-project-cell,
.quotation-compare-advice,
.quotation-compare-stack {
  min-width: 0;
}

.quotation-compare-queue-row strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quotation-compare-queue-row small,
.quotation-compare-advice span {
  display: block;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quotation-compare-stack {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
}

.quotation-cost-option-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.quotation-cost-option-strip span {
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  padding: 4px 8px;
}

.quotation-compare-queue-card {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
}

.quotation-compare-queue-card.is-active {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.quotation-compare-queue-card.is-muted {
  background: var(--surface-sunk);
}

.quotation-compare-queue-card span,
.quotation-compare-queue-card small,
.quotation-compare-queue-card dt {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-compare-queue-card strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.quotation-compare-queue-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin: 0;
}

.quotation-compare-queue-card dl div {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  padding: 8px;
}

.quotation-compare-queue-card dd {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.quotation-professional-context {
  border-color: var(--brand-100);
  background: var(--surface);
}

.quotation-binding-grid,
.quotation-professional-grid,
.quotation-price-node-grid {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.quotation-binding-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}

.quotation-professional-grid {
  grid-template-columns: minmax(280px, 0.95fr) minmax(320px, 1.05fr) minmax(320px, 1fr);
  margin-top: 12px;
}

.quotation-binding-card,
.quotation-professional-card,
.quotation-price-node {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
}

.quotation-binding-card {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
}

.quotation-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 2px;
}

.btn.btn-compact {
  min-height: 30px;
  padding: 6px 10px;
  font-size: 12px;
}

.quotation-binding-card.is-bound {
  border-color: var(--cyan-300);
  background: var(--surface-sunk);
}

.quotation-binding-card.is-candidate {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.quotation-binding-card.is-unresolved,
.quotation-binding-card.is-missing {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.quotation-binding-card span,
.quotation-binding-card small,
.quotation-binding-card em,
.quotation-professional-card p,
.quotation-price-node small {
  color: var(--text-secondary);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-binding-card strong,
.quotation-professional-card strong,
.quotation-price-node strong {
  display: block;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.quotation-professional-card {
  display: grid;
  align-content: start;
  grid-gap: 12px;
  gap: 12px;
}

.quotation-professional-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

.quotation-professional-card > strong {
  font-size: 20px;
}

.quotation-price-node-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quotation-price-node {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.quotation-price-node.is-ready {
  border-color: var(--cyan-100);
}

.quotation-price-node.is-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.quotation-price-node.is-blocked {
  border-color: var(--c-danger-border);
  background: var(--surface);
}

.record-row.is-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.record-row.is-passed,
.record-row.is-ready {
  border-color: var(--cyan-100);
  background: var(--surface-sunk);
}

.quotation-overview-grid,
.document-action-grid,
.quotation-governance-grid,
.quotation-approval-stepper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

/* 治理卡固定 3 张（审批结论/审批任务/随单资料）→ 占满整行，不在 4 列栅格里留空尾列 */
.quotation-governance-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.quotation-overview-grid {
  margin: 18px 0 0;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
}

.quotation-overview-grid > div,
.document-action-card,
.quotation-governance-card,
.quotation-approval-step {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
}

.quotation-overview-grid > div {
  border: 0;
  border-right: 1px solid var(--hairline);
  border-radius: 0;
  background: transparent;
}

.quotation-overview-grid > div:last-child {
  border-right: 0;
}

.quotation-overview-grid dt,
.quotation-overview-grid dd {
  margin: 0;
}

.quotation-overview-grid dd {
  margin-top: 8px;
  color: var(--ink);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.quotation-manager-board {
  display: grid;
  grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.8fr);
  grid-gap: 12px;
  gap: 12px;
  border-color: var(--brand-100);
  background: var(--surface);
}

.quotation-manager-board.is-ready {
  border-color: var(--cyan-300);
  background: var(--surface-sunk);
}

.quotation-manager-board.is-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.quotation-manager-board.is-blocked {
  border-color: var(--c-danger-border);
  background: var(--surface);
}

.quotation-manager-decision,
.quotation-manager-signal {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
}

.quotation-manager-decision {
  display: grid;
  align-content: start;
  grid-gap: 8px;
  gap: 8px;
}

.quotation-manager-decision span,
.quotation-manager-decision small,
.quotation-manager-signal span,
.quotation-manager-signal small {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-manager-decision strong {
  color: var(--ink);
  font-size: 24px;
}

.quotation-manager-signals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.quotation-manager-signal {
  position: relative;
  overflow: hidden;
}

.quotation-manager-signal::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--hairline-strong);
}

.quotation-manager-signal.is-ready::before {
  background: var(--cyan-500);
}

.quotation-manager-signal.is-warning::before {
  background: var(--c-warning);
}

.quotation-manager-signal.is-blocked::before {
  background: var(--c-danger);
}

.quotation-manager-signal strong {
  display: block;
  margin: 6px 0 4px;
  color: var(--ink);
  font-size: 15px;
  overflow-wrap: anywhere;
}

.document-section-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.quotation-closure-board {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.65fr);
  grid-gap: 14px;
  gap: 14px;
  margin: 14px 0;
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px;
}

.quotation-closure-board.is-blocked {
  border-color: var(--c-danger-border);
  background: var(--surface);
}

.quotation-closure-board.is-ready {
  border-color: var(--cyan-300);
  background: var(--surface-sunk);
}

.quotation-closure-primary {
  display: grid;
  align-content: start;
  grid-gap: 8px;
  gap: 8px;
  min-width: 0;
}

.quotation-closure-primary span,
.quotation-closure-primary small,
.quotation-closure-step span,
.quotation-closure-step small {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-closure-primary strong {
  color: var(--ink);
  font-size: 20px;
}

.quotation-closure-primary .btn {
  justify-self: start;
  margin-top: 4px;
}

.quotation-closure-secondary {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin: -2px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}

.quotation-closure-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.quotation-closure-step {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 10px 10px 14px;
}

.quotation-closure-step::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--hairline-strong);
}

.quotation-closure-step.is-done::before {
  background: var(--cyan-500);
}

.quotation-closure-step.is-active::before {
  background: var(--brand-500);
}

.quotation-closure-step.is-blocked::before {
  background: var(--c-danger);
}

.quotation-closure-step strong {
  display: block;
  margin: 5px 0 3px;
  color: var(--ink);
  font-size: 15px;
}

.quotation-recommendation-panel {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 1.6fr);
  grid-gap: 12px;
  gap: 12px;
  margin: 0 0 14px;
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px;
}

.quotation-recommendation-panel.is-ready {
  border-color: var(--cyan-300);
  background: var(--surface-sunk);
}

.quotation-recommendation-panel.is-active {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.quotation-recommendation-panel.is-empty {
  border-color: var(--hairline);
  background: var(--surface-sunk);
}

.quotation-recommendation-main {
  display: grid;
  align-content: start;
  grid-gap: 8px;
  gap: 8px;
  min-width: 0;
}

.quotation-recommendation-main span,
.quotation-recommendation-main small,
.quotation-recommendation-facts span,
.quotation-recommendation-facts small {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-recommendation-main strong {
  color: var(--ink);
  font-size: 22px;
}

.quotation-recommendation-main .btn {
  justify-self: start;
  margin-top: 4px;
}

.quotation-recommendation-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.quotation-recommendation-facts div {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
}

.quotation-recommendation-facts strong {
  display: block;
  margin: 6px 0 5px;
  color: var(--ink);
  font-size: 16px;
  overflow-wrap: anywhere;
}

.quotation-approval-stepper {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 14px 0;
}

.quotation-approval-step {
  position: relative;
  overflow: hidden;
}

.quotation-approval-step::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--hairline-strong);
}

.quotation-approval-step.is-done::before {
  background: var(--cyan-500);
}

.quotation-approval-step.is-active::before {
  background: var(--brand-500);
}

.quotation-approval-step.is-risk::before {
  background: var(--c-danger);
}

.quotation-approval-step strong,
.document-action-card strong,
.quotation-governance-card strong {
  display: block;
  margin: 8px 0 6px;
  color: var(--ink);
  font-size: 18px;
}

.quotation-approval-step small,
.document-action-card small,
.quotation-governance-card small {
  display: block;
  color: var(--text-secondary);
  line-height: 1.45;
}

.document-action-card.is-primary {
  border-color: var(--brand-200);
  background: var(--surface);
}

.document-card-link {
  display: inline-flex;
  margin-top: 10px;
}

.quotation-readiness-panel {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 14px;
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px;
}

.quotation-readiness-panel.is-blocked {
  border-color: var(--c-danger-border);
  background: var(--surface);
}

.quotation-readiness-panel.is-warning {
  border-color: var(--accent-200);
  background: var(--surface);
}

.quotation-readiness-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.quotation-readiness-head span,
.quotation-readiness-head small,
.quotation-readiness-facts dt,
.quotation-check-card span,
.quotation-check-card small,
.quotation-risk-pill span,
.quotation-risk-pill small {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-readiness-head strong,
.quotation-readiness-score strong,
.quotation-readiness-facts dd,
.quotation-check-card strong,
.quotation-risk-pill strong {
  display: block;
  margin: 5px 0 0;
  color: var(--ink);
}

.quotation-readiness-score {
  min-width: 140px;
  text-align: right;
}

.quotation-readiness-meter {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--hairline);
}

.quotation-readiness-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-500), var(--cyan-500));
}

.quotation-readiness-panel.is-blocked .quotation-readiness-meter i {
  background: linear-gradient(90deg, var(--c-danger), var(--accent-500));
}

.quotation-readiness-panel.is-warning .quotation-readiness-meter i {
  background: linear-gradient(90deg, var(--c-warning), var(--cyan-500));
}

.quotation-readiness-facts,
.quotation-check-grid,
.quotation-risk-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.quotation-readiness-facts {
  margin: 0;
}

.quotation-readiness-facts > div,
.quotation-check-card,
.quotation-risk-pill {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px;
}

.quotation-readiness-facts dt,
.quotation-readiness-facts dd {
  margin: 0;
}

.quotation-check-card.is-passed {
  border-color: var(--cyan-100);
}

.quotation-check-card.is-blocking,
.quotation-risk-pill.is-danger {
  border-color: var(--c-danger-border);
  background: var(--surface);
}

.quotation-check-card.is-warning,
.quotation-risk-pill.is-warning {
  border-color: var(--accent-200);
  background: var(--surface);
}

.quotation-risk-empty {
  margin: 0;
  color: var(--c-success-ink);
  font-size: 13px;
  font-weight: 700;
}

.quotation-compare-overview,
.quotation-compare-brand-grid {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 12px;
}

.quotation-compare-overview {
  grid-template-columns: minmax(260px, 1.4fr) repeat(3, minmax(160px, 1fr));
}

.quotation-compare-overview article,
.quotation-compare-brand {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px;
}

.quotation-compare-recommendation {
  background: linear-gradient(135deg, var(--brand-50), var(--surface-sunk)) !important;
  border-color: var(--brand-200) !important;
}

.quotation-compare-overview span,
.quotation-compare-overview small,
.quotation-compare-brand span,
.quotation-compare-brand small,
.quotation-compare-brand dt {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.quotation-compare-overview strong,
.quotation-compare-brand strong,
.quotation-compare-brand dd {
  display: block;
  margin: 6px 0 0;
  color: var(--ink);
}

.quotation-compare-overview small,
.quotation-compare-brand small {
  margin-top: 8px;
  line-height: 1.45;
}

.quotation-compare-brand-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 12px;
}

.quotation-compare-brand-table {
  display: grid;
  overflow: hidden;
  margin: 12px 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
}

.quotation-compare-brand-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.2fr) minmax(110px, 0.8fr) minmax(110px, 0.8fr) minmax(90px, 0.7fr) minmax(200px, 1.25fr) 126px;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--surface-soft);
  padding: 10px 12px;
}

.quotation-compare-brand-head {
  border-top: 0;
  background: var(--surface-sunk);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.quotation-compare-brand-row.is-warning {
  box-shadow: inset 3px 0 0 var(--c-warning);
}

.quotation-compare-brand-row.is-danger {
  box-shadow: inset 3px 0 0 #dc2626;
}

.quotation-compare-brand-row strong,
.quotation-compare-brand-row span,
.quotation-compare-brand-row small {
  min-width: 0;
}

.quotation-compare-brand-row strong {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--ink);
}

.quotation-compare-brand-row span,
.quotation-compare-brand-row small {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.quotation-compare-brand-row small {
  color: var(--ink-2);
  line-height: 1.45;
}

.quotation-compare-brand-row .btn {
  justify-self: end;
  white-space: nowrap;
}

.quotation-compare-brand {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.quotation-cost-choice-actions {
  justify-content: space-between;
  margin-top: 4px;
}

.quotation-compare-brand.is-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.quotation-compare-brand.is-danger {
  border-color: var(--c-danger-border);
  background: var(--c-danger-soft);
}

.quotation-compare-brand dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin: 0;
}

.quotation-compare-brand dt,
.quotation-compare-brand dd {
  margin: 0;
}

.quotation-import-workbench,
.quotation-compare-lab,
.quotation-template-preview {
  overflow: hidden;
}

.quotation-import-layout,
.quotation-compare-lab-grid,
.quotation-template-sheet-grid {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
  margin-top: 14px;
}

.quotation-import-layout {
  grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
  align-items: start;
}

.quotation-import-editor,
.quotation-import-preview,
.quotation-compare-card,
.quotation-template-sheet {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px;
}

.quotation-import-editor {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.quotation-import-editor label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.quotation-import-editor input,
.quotation-import-editor textarea {
  width: 100%;
  border: 1px solid var(--hairline-strong);
  border-radius: 10px;
  background: var(--surface-sunk);
  color: var(--ink);
  font: inherit;
  padding: 10px 12px;
}

.quotation-import-editor textarea {
  min-height: 180px;
  resize: vertical;
  line-height: 1.55;
}

.quotation-import-preview {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.quotation-import-summary,
.quotation-scenario-card,
.quotation-version-row {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface-sunk);
  padding: 12px;
}

.quotation-import-summary span,
.quotation-import-summary small,
.quotation-version-row span,
.quotation-version-row small,
.quotation-scenario-card span,
.quotation-scenario-card small,
.quotation-scenario-card dt,
.quotation-compare-card p,
.quotation-template-sheet small {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.quotation-import-summary strong,
.quotation-version-row strong,
.quotation-version-row em,
.quotation-scenario-card strong,
.quotation-scenario-card dd {
  display: block;
  margin: 6px 0 0;
  color: var(--ink);
  font-style: normal;
}

.quotation-warning-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quotation-warning-list span {
  border: 1px solid var(--accent-200);
  border-radius: 999px;
  background: var(--accent-50);
  color: var(--accent-700);
  font-size: 12px;
  font-weight: 700;
  padding: 5px 9px;
}

.quotation-export-consistency {
  display: grid;
  grid-template-columns: minmax(140px, 0.28fr) minmax(260px, 1fr) auto;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 12px;
  border: 1px solid var(--brand-200);
  border-radius: 10px;
  background: var(--brand-50);
  padding: 12px;
}

.quotation-export-consistency.is-mismatched {
  border-color: var(--c-danger-border);
  background: var(--surface);
}

.quotation-export-consistency span,
.quotation-export-consistency small {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.quotation-export-consistency strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
}

.quotation-export-consistency p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.compact-list .record-row {
  min-height: auto;
  padding: 10px;
}

.record-row.is-blocked {
  border-color: var(--c-danger-border);
  background: var(--surface);
}

.record-row.quotation-approval-check-row {
  grid-template-columns: minmax(0, 1fr);
}

.quotation-compare-lab-grid {
  grid-template-columns: minmax(300px, 0.9fr) minmax(420px, 1.1fr);
}

.quotation-compare-card {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.quotation-compare-card h3,
.quotation-template-sheet h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

.quotation-version-compare,
.quotation-scenario-grid {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.quotation-version-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quotation-version-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.quotation-version-row-head strong {
  margin: 0;
  font-size: 14px;
}

.quotation-version-row-head span {
  margin: 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.quotation-version-row-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin: 0;
}

.quotation-version-row-metrics > div {
  min-width: 0;
}

.quotation-version-row-metrics dt {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.quotation-version-row-metrics dd {
  margin: 2px 0 0;
  font-family: var(--ck-mono, "SFMono-Regular", ui-monospace, monospace);
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.quotation-version-row-metrics small {
  display: block;
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.quotation-version-row-note {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.quotation-version-row.is-up {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.quotation-version-row.is-down {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.quotation-scenario-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.quotation-scenario-card {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.quotation-scenario-card.is-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.quotation-scenario-card.is-danger {
  border-color: var(--c-danger-border);
  background: var(--c-danger-soft);
}

.quotation-scenario-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin: 0;
}

.quotation-scenario-card dt,
.quotation-scenario-card dd {
  margin: 0;
}

.quotation-template-sheet-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.quotation-template-sheet {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.mini-table {
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 10px;
}

.mini-table-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: 34px;
  border-top: 1px solid var(--hairline);
}

.mini-table-row:first-child {
  border-top: 0;
}

.mini-table-row span {
  min-width: 0;
  overflow: hidden;
  border-left: 1px solid var(--hairline);
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
  padding: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-table-row span:first-child {
  border-left: 0;
}

.mini-table-row.is-head span {
  background: var(--surface-sunk);
  color: var(--ink);
  font-weight: 800;
}

.quotation-line-list {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.quotation-line-card {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px;
}

.quotation-line-card header,
.quotation-line-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 12px;
  gap: 12px;
}

.quotation-line-title span,
.quotation-line-title small,
.quotation-line-amount span,
.quotation-line-facts dt,
.quotation-line-basis span {
  display: block;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
}

.quotation-line-title strong,
.quotation-line-amount strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
}

.quotation-line-amount {
  text-align: right;
}

.quotation-line-facts {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 14px;
}

.quotation-line-facts dt,
.quotation-line-facts dd {
  margin: 0;
}

.quotation-line-facts dd {
  margin-top: 6px;
  color: var(--ink);
}

.quotation-line-basis {
  margin: 12px 0 0;
  color: var(--ink);
  line-height: 1.5;
}

.workflow-metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.app-shell .content:has(.workflow-page-full) {
  padding: 16px 24px;
  background: var(--surface-sunk);
}

.workflow-page-full {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.workflow-page-full .page-header,
.workflow-page-full .module-block {
  width: 100%;
  max-width: none;
  margin: 0;
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: none;
}

.workflow-page-full .page-header {
  min-height: 112px;
  padding: 20px 24px;
}

.workflow-page-full .page-header h1 {
  font-size: 28px;
  line-height: 1.18;
}

.workflow-metric-grid.compact {
  gap: 8px;
}

.workflow-business-group-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.workflow-business-group-card {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-height: 112px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
}

.workflow-business-group-card span,
.workflow-business-group-card small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.workflow-business-group-card strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.workflow-business-group-card em {
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  padding: 3px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.workflow-business-group-card.tone-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.workflow-business-group-card.tone-warning em {
  background: var(--accent-50);
  color: var(--accent-700);
}

.workflow-metric {
  min-height: 64px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  padding: 2px 10px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.workflow-metric span,
.workflow-metric small {
  color: var(--text-secondary);
}

.workflow-metric strong {
  display: block;
  margin: 6px 0 4px;
  color: var(--ink);
  font-size: 24px;
}

.workflow-metric.tone-warning {
  background: transparent;
}

.workflow-metric.tone-danger {
  background: transparent;
}

.workflow-metric.tone-success {
  background: transparent;
}

.workflow-metric:hover {
  border-radius: 8px;
  background: var(--surface);
}

.workflow-metrics-band {
  padding: 12px 14px;
}

.workflow-metrics-band .workflow-metric-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.workflow-entry-panel {
  padding: 14px;
}

.workflow-entry-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.workflow-entry-card {
  display: grid;
  grid-template-rows: minmax(106px, auto) auto 30px;
  grid-gap: 10px;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
}

.workflow-entry-card.selected,
.workflow-entry-card:hover {
  border-color: var(--brand-300);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
}

.workflow-entry-card button {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.workflow-entry-card span,
.workflow-entry-card small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.workflow-entry-card strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.2;
}

.workflow-entry-checks {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.workflow-entry-checks em {
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  padding: 3px 7px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.workflow-entry-card > a {
  display: inline-flex;
  align-items: center;
  width: -moz-fit-content;
  width: fit-content;
  color: var(--brand-600);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.workflow-entry-card.tone-warning {
  border-color: var(--accent-200);
  background: var(--surface);
}

.workflow-entry-card.tone-danger {
  border-color: var(--c-danger-border);
  background: var(--surface);
}

.workflow-entry-card.tone-success {
  border-color: var(--c-success-border);
  background: var(--surface);
}

.workflow-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.workflow-search {
  width: min(420px, 100%);
}

.workflow-page-full .workflow-search {
  width: min(520px, 100%);
}

.workflow-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin: 12px 0;
}

.workflow-filter-grid label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.workflow-filter-grid input,
.workflow-filter-grid select {
  min-height: 36px;
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 10px;
  font: inherit;
}

.workflow-checkbox-row {
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 36px;
}

.workflow-checkbox-row input {
  width: 16px;
  height: 16px;
  min-height: auto;
}

.workflow-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
  grid-gap: 12px;
  gap: 12px;
  align-items: start;
}

.workflow-list {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.workflow-row {
  width: 100%;
  min-height: 92px;
  border: 1px solid var(--hairline);
  border-left: 4px solid transparent;
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-primary);
  padding: 12px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-gap: 8px 12px;
  gap: 8px 12px;
  text-align: left;
  align-items: center;
}

.workflow-row.selected,
.workflow-row:hover {
  border-color: var(--brand-300);
  border-left-color: var(--brand-500);
  background: var(--surface);
}

.workflow-row strong {
  min-width: 0;
  font-size: 16px;
}

.workflow-row small {
  grid-column: 2 / 5;
  color: var(--text-secondary);
}

.workflow-row em {
  justify-self: end;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  padding: 4px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.workflow-risk-chip {
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.workflow-risk-chip.risk-high {
  color: var(--c-danger-ink);
  background: var(--c-danger-soft);
}

.workflow-risk-chip.risk-medium {
  color: var(--accent-700);
  background: var(--accent-50);
}

.workflow-risk-chip.risk-low {
  color: var(--c-success-ink);
  background: var(--c-success-soft);
}

.workflow-preview {
  position: -webkit-sticky;
  position: sticky;
  top: 82px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.workflow-page-full .workflow-review-stack {
  display: grid;
  grid-template-columns: minmax(420px, 0.85fr) minmax(620px, 1.15fr);
  grid-gap: 14px;
  gap: 14px;
  align-items: start;
}

.workflow-page-full .workflow-list {
  max-height: calc(100vh - 350px);
  overflow: auto;
  padding-right: 4px;
}

.workflow-page-full .workflow-preview {
  position: -webkit-sticky;
  position: sticky;
  top: 16px;
  min-height: calc(100vh - 250px);
  max-height: calc(100vh - 124px);
  overflow: auto;
}

.workflow-page-full .workflow-filter-grid {
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.7fr) minmax(180px, 0.7fr) minmax(180px, 0.7fr);
}

.workflow-page-full .workflow-workbench-block {
  padding: 14px;
}

.workflow-preview-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.workflow-preview-head small {
  color: var(--text-secondary);
  font-weight: 700;
}

.workflow-preview h2 {
  margin: 14px 0 12px;
  font-size: 22px;
}

.workflow-related-links,
.workflow-empty-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.workflow-related-links {
  margin: 8px 0 0;
}

.workflow-related-links a,
.workflow-empty-links a {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-600);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.workflow-empty-state {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--surface), #fff);
  padding: 18px;
}

.workflow-empty-copy {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.workflow-empty-copy span {
  color: var(--brand-600);
  font-size: 13px;
  font-weight: 800;
}

.workflow-empty-copy strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.35;
}

.workflow-empty-copy p {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.55;
}

.workflow-empty-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.workflow-detail-list {
  grid-template-columns: 1fr;
}

.workflow-summary-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workflow-section {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 14px;
}

.workflow-summary-note {
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
  padding: 10px;
  color: var(--ink-2);
  line-height: 1.55;
}

.workflow-risk-callout {
  margin-top: 12px;
  border: 1px solid var(--brand-200);
  border-radius: 8px;
  background: var(--brand-50);
  padding: 12px;
}

.workflow-risk-callout strong {
  display: block;
  color: var(--brand-800);
}

.workflow-risk-callout p {
  margin: 6px 0 0;
  color: var(--ink);
  line-height: 1.55;
}

.workflow-risk-callout.risk-high {
  border-color: var(--c-danger-border);
  background: var(--c-danger-soft);
}

.workflow-risk-callout.risk-high strong {
  color: var(--c-danger-ink);
}

.workflow-change-table {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 8px;
}

.workflow-change-head,
.workflow-change-row {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1.2fr auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
}

.workflow-change-head {
  background: var(--surface-sunk);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.workflow-change-row {
  border-top: 1px solid var(--hairline);
  color: var(--ink);
  font-size: 13px;
}

.workflow-change-row strong {
  color: var(--ink);
}

.workflow-checklist {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 14px;
}

.workflow-checklist h3,
.workflow-decision h3 {
  margin: 0;
}

.workflow-check-item {
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.workflow-check-item strong {
  font-size: 13px;
}

.workflow-check-item span {
  flex: 0 0 auto;
  color: var(--c-success-ink);
  font-size: 12px;
  font-weight: 700;
}

.workflow-check-item.interactive {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  cursor: pointer;
}

.workflow-check-item.interactive input {
  width: 16px;
  height: 16px;
}

.workflow-secondary-details {
  margin-top: 14px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px 12px;
}

.workflow-secondary-details > summary,
.workflow-analysis-panel > summary {
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}

.workflow-audit-panel {
  margin-top: 12px;
  border-top: 1px solid var(--hairline);
  padding-top: 12px;
}

.workflow-decision {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin-top: 14px;
}

.workflow-decision label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  color: var(--text-secondary);
  font-size: 13px;
}

.workflow-decision textarea {
  min-height: 112px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  padding: 10px;
  resize: vertical;
}

.workflow-decision-hint {
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}

.workflow-export-panel .form-actions {
  margin-top: 10px;
}

.workflow-analysis-panel {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.workflow-analysis-panel .analytics-grid {
  margin-top: 12px;
}

.status-pending {
  background: var(--accent-50);
  color: var(--accent-600);
}

@media (max-width: 1080px) {
  .form-grid,
  .detail-grid,
  .inheritance-grid,
  .inheritance-callout dl,
  .sales-flow-rail,
  .detail-list,
  .workflow-layout,
  .workflow-entry-grid,
  .workflow-filter-grid,
  .workflow-summary-list {
    grid-template-columns: 1fr;
  }

  .flow-workbench-header {
    display: grid;
  }

  .flow-workbench-actions,
  .flow-workbench-actions .btn,
  .flow-workbench-header > .btn {
    width: 100%;
  }

  .flow-workbench-actions {
    display: grid;
  }

  .workflow-page-full .workflow-filter-grid {
    grid-template-columns: 1fr;
  }

  .user-toolbar,
  .user-workbench,
  .user-create-form,
  .user-create-page-layout,
  .organization-form-layout,
  .organization-detail-grid,
  .user-detail-flow,
  .detail-kv-grid,
  .organization-form-grid {
    grid-template-columns: 1fr;
  }

  .user-overview-grid,
  .organization-metrics {
    grid-template-columns: 1fr;
  }

  .user-queue-cards,
  .user-onboarding-actions,
  .user-focus-list.horizontal,
  .user-command-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-inspector {
    position: static;
  }

  .user-create-remark {
    grid-column: auto;
  }

  .organization-remark {
    grid-column: auto;
  }

  .organization-context-card {
    position: static;
  }

  .workflow-preview {
    position: static;
  }

  .workflow-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quotation-overview-main,
  .document-section-head,
  .quotation-line-card header,
  .quotation-costing-line header {
    display: grid;
  }

  .quotation-overview-amount,
  .quotation-line-amount {
    text-align: left;
  }

  .quotation-overview-next {
    max-width: none;
    border-left: 0;
    border-top: 1px solid var(--hairline);
    padding-top: 12px;
    padding-left: 0;
  }

  .quotation-overview-grid,
  .quotation-tool-dock,
  .quotation-detail-subnav,
  .quotation-manager-strip,
  .quotation-business-flow-grid,
  .quotation-workbench-command-grid,
  .quotation-process-rail,
  .quotation-costing-summary-grid,
  .quotation-material-snapshot-grid,
  .quotation-costing-risk-grid,
  .quotation-pricing-summary-grid,
  .quotation-pricing-evidence-grid,
  .quotation-pricing-policy-grid,
  .quotation-quote-plan-control,
  .quotation-task-lanes,
  .quotation-settings-grid,
  .quotation-template-settings-grid,
  .quotation-settings-rule-grid,
  .quotation-task-sequence-grid,
  .quotation-compare-queue,
  .quotation-binding-grid,
  .quotation-professional-grid,
  .quotation-price-node-grid,
  .quotation-manager-board,
  .quotation-manager-signals,
  .document-action-grid,
  .quotation-governance-grid,
  .quotation-draft-flow,
  .quotation-import-layout,
  .quotation-compare-lab-grid,
  .quotation-compare-overview,
  .quotation-compare-brand-grid,
  .quotation-template-sheet-grid,
  .quotation-closure-board,
  .quotation-recommendation-panel,
  .quotation-recommendation-facts,
  .quotation-readiness-facts,
  .quotation-check-grid,
  .quotation-risk-strip,
  .quotation-approval-stepper,
  .quotation-line-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quotation-compare-queue-head,
  .quotation-compare-queue-row,
  .quotation-compare-brand-row {
    grid-template-columns: minmax(220px, 1.35fr) minmax(150px, 0.7fr) minmax(180px, 1fr) 140px;
  }

  .quotation-compare-brand-row {
    grid-template-columns: minmax(160px, 1.2fr) minmax(110px, 0.8fr) minmax(110px, 0.8fr) minmax(90px, 0.7fr) minmax(180px, 1.2fr) 126px;
  }

  .quotation-workspace-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tender-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .filter-item,
  .filter-item-grow {
    min-width: 100%;
  }

  .pagination {
    flex-direction: column;
    align-items: flex-start;
  }

  .workflow-metric-grid,
  .workflow-row,
  .workflow-change-head,
  .workflow-change-row {
    grid-template-columns: 1fr;
  }

  .user-queue-cards {
    grid-template-columns: 1fr;
  }

  .quotation-overview-grid,
  .quotation-tool-dock,
  .quotation-detail-subnav,
  .quotation-manager-strip,
  .quotation-business-flow-grid,
  .quotation-workbench-command-grid,
  .quotation-process-current,
  .quotation-process-rail,
  .quotation-costing-summary-grid,
  .quotation-material-snapshot-grid,
  .quotation-costing-risk-grid,
  .quotation-pricing-summary-grid,
  .quotation-pricing-evidence-grid,
  .quotation-pricing-policy-grid,
  .quotation-quote-plan-control,
  .quotation-costing-line header,
  .quotation-task-lanes,
  .quotation-settings-grid,
  .quotation-template-settings-grid,
  .quotation-settings-rule-grid,
  .quotation-task-sequence-grid,
  .quotation-task-row,
  .quotation-task-row dl,
  .quotation-compare-queue,
  .quotation-binding-grid,
  .quotation-professional-grid,
  .quotation-price-node-grid,
  .quotation-manager-board,
  .quotation-manager-signals,
  .document-action-grid,
  .quotation-governance-grid,
  .quotation-draft-flow,
  .quotation-compare-overview,
  .quotation-compare-brand-grid,
  .quotation-import-layout,
  .quotation-compare-lab-grid,
  .quotation-scenario-grid,
  .quotation-template-sheet-grid,
  .quotation-export-consistency,
  .quotation-closure-board,
  .quotation-closure-steps,
  .quotation-recommendation-panel,
  .quotation-recommendation-facts,
  .quotation-readiness-facts,
  .quotation-check-grid,
  .quotation-risk-strip,
  .quotation-approval-stepper,
  .quotation-line-facts {
    grid-template-columns: 1fr;
  }

  .quotation-overview-grid > div {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }

  .quotation-overview-grid > div:last-child {
    border-bottom: 0;
  }

  .quotation-compare-queue-head,
  .quotation-compare-brand-head {
    display: none;
  }

  .quotation-compare-queue-row,
  .quotation-compare-brand-row {
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: start;
  }

  .quotation-workspace-nav {
    grid-template-columns: 1fr;
  }

  .user-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .user-hero-actions,
  .user-toolbar-actions,
  .user-create-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-metrics,
  .user-onboarding-stages,
  .user-command-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-segment {
    overflow-x: auto;
  }

  .workflow-row small {
    grid-column: auto;
  }

  .workflow-row em,
  .workflow-risk-chip {
    justify-self: flex-start;
  }
}

@media (max-width: 520px) {
  .user-metrics,
  .user-onboarding-stages,
  .user-onboarding-actions,
  .user-focus-list.horizontal,
  .user-command-strip,
  .user-hero-actions,
  .user-toolbar-actions,
  .user-create-actions {
    grid-template-columns: 1fr;
  }

  .tender-kpi-grid {
    grid-template-columns: 1fr;
  }
}

.pcp-page .kpi-card-button {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(240, 249, 255, 0.98));
  padding: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.pcp-page .kpi-card-button:hover {
  border-color: var(--brand-300);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(14, 116, 144, 0.12);
}

.pcp-page .kpi-card-active {
  border-color: var(--cyan-400);
  background: linear-gradient(145deg, #ffffff, var(--brand-50));
  box-shadow: 0 10px 24px rgba(14, 165, 233, 0.16);
}

.pcp-page .kpi-card-button h2 {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}

.pcp-page .kpi-card-button p {
  margin: 8px 0 4px;
  font-size: 24px;
  font-weight: 700;
}

.pcp-page .kpi-card-button small {
  display: block;
  color: var(--text-secondary);
}

.pcp-page .kpi-card-action {
  margin-top: 8px;
  display: inline-flex;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  color: var(--c-success-ink);
  background: var(--surface-soft);
}

.pcp-page .pcp-filter-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 3;
  margin: -2px -2px 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid var(--brand-100);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(240, 249, 255, 0.97));
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.pcp-page .pcp-filter-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-2);
}

.pcp-page .pcp-empty-guide {
  margin-top: 10px;
  border: 1px dashed var(--brand-200);
  border-radius: 12px;
  background: linear-gradient(145deg, var(--surface), #fff);
  padding: 12px;
}

.pcp-page .pcp-empty-guide strong {
  display: block;
  color: var(--brand-800);
}

.pcp-page .pcp-empty-guide p {
  margin: 6px 0 10px;
  color: var(--ink-2);
}

.drawer-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.drawer-filter-chip {
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
}

.drawer-filter-chip.active {
  border-color: var(--cyan-400);
  color: var(--brand-800);
  background: var(--brand-50);
}

.audit-timeline {
  margin: 8px 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 6px;
  gap: 6px;
}

.audit-timeline-step {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 4px 6px;
  background: var(--surface-sunk);
  color: var(--ink-2);
  font-size: 11px;
  text-align: center;
}

.audit-timeline-step.done {
  border-color: #86efac;
  background: var(--surface-soft);
  color: var(--c-success-ink);
}

.audit-timeline-step.current {
  border-color: var(--cyan-300);
  background: var(--brand-100);
  color: var(--brand-800);
}

.audit-timeline-step.error {
  border-color: var(--c-danger-border);
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

.audit-timeline-step span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.busway-config-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  grid-gap: 12px;
  gap: 12px;
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: linear-gradient(145deg, #ffffff, var(--surface));
  padding: 12px;
}

.busway-config-main,
.busway-preview {
  min-width: 0;
}

.busway-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.busway-section-head strong {
  display: block;
  margin-top: 2px;
  color: var(--ink);
}

.busway-kicker {
  display: block;
  color: var(--c-success-ink);
  font-size: 12px;
  font-weight: 700;
}

.template-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.template-chip {
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}

.template-chip.active {
  border-color: var(--cyan-500);
  background: var(--surface-soft);
  color: var(--c-success-ink);
}

.busway-config-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.busway-preview {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.preview-block {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px;
}

.preview-block > span {
  display: block;
  margin-bottom: 8px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.bom-list,
.waterfall-list,
.approval-signal-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-gap: 7px;
  gap: 7px;
}

.bom-list li,
.waterfall-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.bom-list strong,
.waterfall-list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bom-list small {
  flex: 0 0 auto;
  color: var(--c-success-ink);
}

.waterfall-list strong {
  flex: 0 0 auto;
}

.waterfall-cost strong {
  color: var(--ink);
}

.waterfall-margin strong {
  color: var(--c-success-ink);
}

.waterfall-discount strong {
  color: var(--accent-600);
}

.waterfall-final {
  border-top: 1px dashed var(--brand-100);
  padding-top: 7px;
}

.waterfall-final strong {
  color: var(--brand-600);
}

.approval-signal-list li {
  position: relative;
  padding-left: 12px;
  color: var(--ink-2);
  line-height: 1.45;
  font-size: 12px;
}

.approval-signal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--cyan-500);
}

.preview-muted {
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
}

.pcp-industry-layout {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.pcp-spec-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pcp-spec-strip span {
  border: 1px solid var(--brand-200);
  border-radius: 999px;
  background: var(--brand-50);
  padding: 5px 10px;
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 700;
}

.pcp-industry-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.pcp-industry-columns > div {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
}

.pcp-industry-columns strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
}

.pcp-compact-list,
.pcp-signal-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pcp-compact-list {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
}

.pcp-compact-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px dashed var(--hairline);
  padding-bottom: 7px;
  color: var(--ink);
}

.pcp-compact-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.pcp-compact-list small {
  white-space: nowrap;
  color: var(--c-success-ink);
  font-weight: 700;
}

.pcp-signal-list {
  display: grid;
  grid-gap: 7px;
  gap: 7px;
}

.pcp-signal-list li {
  border-radius: 9px;
  background: var(--accent-50);
  padding: 8px;
  color: var(--accent-700);
  font-size: 13px;
}

@media (max-width: 860px) {
  .pcp-page .pcp-filter-sticky {
    position: static;
  }

  .audit-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .busway-config-panel,
  .busway-config-grid,
  .pcp-industry-columns {
    grid-template-columns: 1fr;
  }
}

.role-page {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.role-hero,
.role-create-panel,
.role-list-panel,
.role-inspector,
.role-toolbar,
.role-segment {
  border: 1px solid var(--brand-100);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.role-hero {
  min-height: 104px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.role-hero h1 {
  margin: 4px 0;
  font-size: 28px;
  line-height: 1.15;
}

.role-hero p {
  margin: 0;
  color: var(--ink-2);
}

.role-hero-actions,
.role-toolbar-actions,
.role-create-actions {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.role-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.role-command-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.role-metric {
  min-height: 88px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px 14px;
  display: grid;
  align-content: space-between;
}

.role-metric span,
.role-metric small {
  color: var(--ink-2);
}

.role-metric strong {
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
}

.role-toolbar {
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 170px 160px auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: end;
}

.role-search,
.role-create-form label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.role-search span,
.role-create-form label span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.role-search input,
.role-toolbar select,
.role-create-form input,
.role-create-form select {
  width: 100%;
  height: 40px;
  border: 1px solid var(--brand-100);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 12px;
}

.role-segment {
  min-height: 44px;
  padding: 4px;
  display: inline-flex;
  gap: 4px;
  overflow-x: auto;
}

.role-segment button {
  min-width: 76px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-2);
  padding: 0 10px;
  font-weight: 700;
}

.role-segment button.active {
  background: var(--brand-50);
  color: var(--brand-600);
}

.role-create-panel,
.role-list-panel,
.role-inspector {
  padding: 14px;
}

.role-section-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

.role-section-title strong {
  color: var(--ink);
  font-size: 16px;
}

.role-section-title span {
  color: var(--ink-2);
  font-size: 13px;
}

.role-create-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(240px, 1fr) auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: end;
}

.role-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-gap: 14px;
  gap: 14px;
  align-items: start;
}

.role-command-card {
  min-height: 108px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  padding: 14px;
  text-align: left;
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  color: inherit;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.role-command-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-200);
  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.08);
}

.role-command-card.active {
  border-color: var(--brand-600);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 42%),
    linear-gradient(180deg, #ffffff 0%, var(--brand-50) 100%);
  box-shadow: 0 18px 30px rgba(37, 99, 235, 0.12);
}

.role-command-card span,
.role-command-card small,
.role-command-card em {
  display: block;
}

.role-command-card span {
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.role-command-card strong {
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
}

.role-command-card small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.65;
}

.role-command-card em {
  margin-top: auto;
  justify-self: start;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.role-workbench-summary {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.05fr);
  grid-gap: 14px;
  gap: 14px;
}

.role-summary-panel,
.role-risk-board {
  border: 1px solid var(--brand-100);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
  padding: 14px;
}

.role-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.role-summary-grid div {
  min-height: 74px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 10px;
  display: grid;
  align-content: space-between;
}

.role-summary-grid span,
.role-summary-grid small {
  color: var(--ink-2);
  font-size: 12px;
}

.role-summary-grid strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.role-capacity-strip {
  margin-top: 12px;
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 10px;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.role-capacity-strip div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.role-capacity-strip strong {
  color: var(--ink);
  font-size: 13px;
}

.role-capacity-strip small {
  color: var(--ink-2);
  font-size: 12px;
}

.role-capacity-strip i {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--hairline);
}

.role-capacity-strip em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-500);
}

.role-capacity-strip.warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.role-capacity-strip.warning em {
  background: var(--c-warning);
}

.role-risk-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.role-risk-card,
.role-risk-empty {
  min-height: 104px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.role-risk-card.tone-warning {
  border-color: var(--accent-200);
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-50) 100%);
}

.role-risk-card.tone-danger {
  border-color: var(--c-danger-border);
  background: linear-gradient(180deg, #ffffff 0%, var(--c-danger-soft) 100%);
}

.role-risk-card.tone-success {
  border-color: var(--c-success-border);
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
}

.role-risk-card strong,
.role-risk-card span {
  display: block;
}

.role-risk-card strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}

.role-risk-card span,
.role-risk-empty {
  color: var(--ink-2);
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.65;
}

.role-list-headline {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.role-list-caption {
  margin: -6px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
}

.role-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

.role-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  background: var(--surface);
}

.role-table th,
.role-table td {
  text-align: left;
  border-bottom: 1px solid var(--surface-soft);
  padding: 12px;
  vertical-align: middle;
}

.role-table th {
  color: var(--ink-2);
  background: var(--surface-sunk);
  font-size: 12px;
  font-weight: 800;
}

.role-table tbody tr {
  cursor: pointer;
}

.role-table tbody tr:hover,
.role-table tbody tr.selected {
  background: var(--surface);
}

.role-name-cell,
.role-inspector-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.role-risk-dot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.role-risk-dot.large {
  width: 42px;
  height: 42px;
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.42);
}

.risk-low {
  background: var(--c-success-soft);
  color: var(--c-success-ink);
}

.risk-medium {
  background: var(--brand-50);
  color: var(--brand-600);
}

.risk-high {
  background: var(--accent-50);
  color: var(--accent-700);
}

.risk-critical {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

.role-name-cell strong,
.role-name-cell span,
.role-name-cell small,
.role-status-cell small,
.role-permission-cell strong,
.role-permission-cell span,
.role-permission-cell small,
.role-member-cell strong,
.role-member-cell span,
.role-inspector-head strong,
.role-inspector-head span {
  display: block;
}

.role-name-cell span,
.role-status-cell small,
.role-permission-cell span,
.role-permission-cell small,
.role-member-cell span,
.role-inspector-head span {
  color: var(--ink-2);
  margin-top: 2px;
}

.role-name-cell small {
  color: var(--ink-3);
  margin-top: 2px;
}

.role-status-cell,
.role-permission-cell,
.role-member-cell {
  display: grid;
  grid-gap: 5px;
  gap: 5px;
}

.risk-badge {
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.role-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 260px;
}

.role-row-actions button {
  min-height: 28px;
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-600);
  padding: 0 9px;
  font-weight: 700;
}

.role-row-actions button:disabled {
  color: var(--ink-3);
  background: var(--surface-sunk);
}

.role-detail-link {
  min-height: 32px;
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-500);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
}

.role-inspector {
  align-self: start;
  height: -moz-fit-content;
  height: fit-content;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.role-inspector-list {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin: 14px 0;
}

.role-inspector-list div {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface-sunk);
  padding: 10px;
}

.role-inspector-list dt {
  color: var(--ink-2);
  font-size: 12px;
}

.role-inspector-list dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-weight: 700;
}

.role-inspector-note {
  border: 1px solid var(--brand-200);
  border-radius: 12px;
  background: var(--brand-50);
  padding: 12px;
}

.role-inspector-note strong {
  color: var(--brand-700);
}

.role-inspector-note p {
  margin: 6px 0 0;
  color: var(--ink);
  line-height: 1.55;
}

.role-workbench-checklist {
  margin-top: 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 12px;
}

.role-workbench-checklist strong {
  display: block;
  color: var(--ink);
}

.role-workbench-checklist ul {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--ink-2);
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  font-size: 13px;
  line-height: 1.6;
}

.role-permission-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.role-permission-tags span {
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--brand-800);
  padding: 4px 8px;
  font-size: 12px;
}

.role-inspector-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.role-inspector-actions button {
  min-height: 32px;
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-600);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
}

.role-inspector-actions button:disabled {
  color: var(--ink-3);
  background: var(--surface-sunk);
}

.role-workbench-shortcuts {
  margin-top: 14px;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.role-workbench-shortcuts a {
  min-height: 38px;
  border: 1px solid var(--brand-100);
  border-radius: 10px;
  background: var(--surface);
  color: var(--brand-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 13px;
  font-weight: 800;
}

.role-workbench-shortcuts a:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
}

.permission-matrix-page {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.permission-matrix-hero,
.permission-matrix-summary article,
.permission-matrix-toolbar,
.permission-matrix-panel {
  border: 1px solid var(--brand-100);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.permission-matrix-hero {
  min-height: 104px;
  padding: 18px;
}

.permission-matrix-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.permission-matrix-summary article {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  min-height: 84px;
  padding: 14px;
}

.permission-matrix-summary span,
.permission-matrix-toolbar span,
.permission-module-cell span,
.permission-role-cell span,
.permission-risk-cell span,
.permission-cell-muted,
.permission-cell-empty,
.permission-module-list {
  color: var(--ink-2);
  font-size: 12px;
}

.permission-matrix-summary strong {
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
}

.permission-matrix-summary .is-risk {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.permission-command-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.permission-command-card {
  min-height: 108px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  padding: 14px;
  text-align: left;
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  color: inherit;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.permission-command-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-200);
  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.08);
}

.permission-command-card.active {
  border-color: var(--brand-600);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 42%),
    linear-gradient(180deg, #ffffff 0%, var(--brand-50) 100%);
  box-shadow: 0 18px 30px rgba(37, 99, 235, 0.12);
}

.permission-command-card span,
.permission-command-card small,
.permission-command-card em {
  display: block;
}

.permission-command-card span {
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.permission-command-card strong {
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
}

.permission-command-card small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.65;
}

.permission-command-card em {
  margin-top: auto;
  justify-self: start;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.permission-matrix-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 170px 170px;
  grid-gap: 12px;
  gap: 12px;
  padding: 12px;
}

.permission-matrix-toolbar label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.permission-matrix-toolbar input,
.permission-matrix-toolbar select {
  width: 100%;
  height: 40px;
  border: 1px solid var(--brand-100);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 12px;
}

.permission-matrix-panel {
  padding: 16px;
}

.permission-workbench-summary {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.05fr);
  grid-gap: 14px;
  gap: 14px;
}

.permission-summary-panel,
.permission-risk-board {
  border: 1px solid var(--brand-100);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
  padding: 14px;
}

.permission-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.permission-summary-grid div {
  min-height: 74px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 10px;
  display: grid;
  align-content: space-between;
}

.permission-summary-grid span,
.permission-summary-grid small {
  color: var(--ink-2);
  font-size: 12px;
}

.permission-summary-grid strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.permission-capacity-strip {
  margin-top: 12px;
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 10px;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.permission-capacity-strip div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.permission-capacity-strip strong {
  color: var(--ink);
  font-size: 13px;
}

.permission-capacity-strip small {
  color: var(--ink-2);
  font-size: 12px;
}

.permission-capacity-strip i {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--hairline);
}

.permission-capacity-strip em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-500);
}

.permission-capacity-strip.warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.permission-capacity-strip.warning em {
  background: var(--c-warning);
}

.permission-risk-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.permission-risk-card {
  min-height: 112px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
  padding: 14px 16px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.permission-risk-card.tone-warning {
  border-color: var(--accent-200);
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-50) 100%);
}

.permission-risk-card.tone-danger {
  border-color: var(--c-danger-border);
  background: linear-gradient(180deg, #ffffff 0%, var(--c-danger-soft) 100%);
}

.permission-risk-card.tone-success {
  border-color: var(--c-success-border);
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
}

.permission-risk-card strong,
.permission-risk-card span {
  display: block;
}

.permission-risk-card strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}

.permission-risk-card span {
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.65;
}

.permission-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-gap: 14px;
  gap: 14px;
  align-items: start;
}

.permission-workbench-main,
.permission-workbench-side {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.permission-workbench-side {
  align-self: start;
  height: -moz-fit-content;
  height: fit-content;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.permission-side-summary,
.permission-side-audit {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.permission-side-summary {
  padding-bottom: 14px;
}

.permission-side-snapshot {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.permission-side-snapshot div {
  min-height: 74px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 10px;
  display: grid;
  align-content: space-between;
}

.permission-side-snapshot span {
  color: var(--ink-2);
  font-size: 12px;
}

.permission-side-snapshot strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.35;
}

.permission-list-headline {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.permission-list-caption,
.permission-side-copy {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
}

.permission-quick-checklist {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.permission-quick-checklist span {
  min-height: 34px;
  border-radius: 10px;
  background: var(--surface-sunk);
  color: var(--ink);
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
}

.permission-side-actions {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.permission-side-actions .btn {
  width: 100%;
  justify-content: center;
}

.permission-audit-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.permission-audit-pill {
  min-height: 88px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--surface);
  padding: 12px;
  text-align: left;
  display: grid;
  align-content: space-between;
  grid-gap: 6px;
  gap: 6px;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.permission-audit-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.permission-audit-pill strong,
.permission-audit-pill span {
  display: block;
}

.permission-audit-pill strong {
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
}

.permission-audit-pill span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.permission-audit-pill.active {
  border-color: var(--brand-300);
  background: var(--surface);
  box-shadow: 0 16px 26px rgba(37, 99, 235, 0.08);
}

.permission-audit-pill.tone-warning {
  border-color: var(--accent-200);
}

.permission-audit-pill.tone-danger {
  border-color: var(--c-danger-border);
}

.permission-audit-pill.tone-success {
  border-color: var(--c-success-border);
}

.permission-audit-detail {
  min-height: 0;
}

.permission-audit-detail strong {
  font-size: 18px;
}

.permission-audit-stack {
  grid-template-columns: 1fr;
}

.permission-matrix-table-wrap,
.permission-role-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

.permission-matrix-table,
.permission-role-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  background: var(--surface);
}

.permission-role-table {
  min-width: 980px;
}

.permission-matrix-table th,
.permission-matrix-table td,
.permission-role-table th,
.permission-role-table td {
  border-bottom: 1px solid var(--surface-soft);
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
}

.permission-matrix-table th,
.permission-role-table th {
  background: var(--surface-sunk);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.permission-matrix-table tbody tr:hover,
.permission-role-table tbody tr:hover {
  background: var(--surface);
}

.permission-role-table tbody tr:nth-child(even) {
  background: var(--surface);
}

.permission-module-cell,
.permission-role-cell {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-width: 0;
}

.permission-module-cell strong,
.permission-role-cell strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
}

.permission-role-cell {
  max-width: 180px;
}

.permission-role-cell span {
  line-height: 1.55;
  font-weight: 700;
}

.permission-module-list {
  display: block;
  max-width: 250px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.permission-cell-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 230px;
}

.permission-cell-roles span,
.permission-cell-roles em {
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  padding: 4px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.permission-cell-roles em {
  background: var(--surface-sunk);
  color: var(--ink-2);
}

.permission-cell-empty {
  display: inline-flex;
  border-radius: 999px;
  background: var(--accent-50);
  color: var(--accent-600);
  padding: 4px 8px;
  font-weight: 800;
}

.permission-cell-muted {
  display: inline-flex;
  color: var(--ink-3);
}

/* 角色×模块 覆盖矩阵：行=角色、列=模块，色块=已授予动作（非风险色） */
.rmm-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 4px 0 12px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.rmm-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rmm-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 5px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
}

/* 查 — 低风险只读，最安静 */
.rmm-chip.is-band-read {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #64748b;
}

/* 增/改 — 标准写操作，品牌蓝 */
.rmm-chip.is-band-create,
.rmm-chip.is-band-write {
  background: var(--brand-50);
  border-color: var(--brand-100);
  color: var(--brand-600);
}

/* 批 — 审批确认，琥珀色，有分量但不告警 */
.rmm-chip.is-band-approve {
  background: #fefce8;
  border-color: #fde68a;
  color: #a16207;
}

/* 导 — 数据导出，靛蓝紫 */
.rmm-chip.is-band-export {
  background: #f5f3ff;
  border-color: #ddd6fe;
  color: #6d28d9;
}

/* 敏 — 高敏感，橙色警示 */
.rmm-chip.is-band-sensitive {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}

.rmm-table-wrap {
  overflow: auto;
  max-height: 72vh;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}

.rmm-table {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  font-size: 13px;
}

.rmm-table th,
.rmm-table td {
  border-bottom: 1px solid var(--surface-soft);
  border-right: 1px solid var(--surface-soft);
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
}

.rmm-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-sunk);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.rmm-module-col {
  white-space: nowrap;
}

.rmm-module-col span {
  display: block;
  color: var(--ink);
}

.rmm-module-col em {
  display: block;
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.rmm-role-col {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 188px;
  background: var(--surface);
}

.rmm-table thead .rmm-role-col {
  z-index: 3;
  background: var(--surface-sunk);
}

.rmm-table tbody tr:hover td,
.rmm-table tbody tr:hover .rmm-role-col {
  background: var(--surface-soft);
}

.rmm-role-head {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.rmm-role-head > strong {
  color: var(--ink);
  font-size: 14px;
}

.rmm-role-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.rmm-role-meta small {
  color: var(--ink-3);
  font-weight: 700;
}

.rmm-cell-td {
  text-align: center;
}

.rmm-cell {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
}

.rmm-cell-none {
  justify-content: center;
  width: 100%;
}

.rmm-cell-empty {
  display: inline-flex;
  color: var(--ink-3);
  font-weight: 800;
}

.rmm-cell-button {
  width: 100%;
  justify-content: flex-start;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.rmm-cell-button:hover {
  border-color: var(--brand-100);
  background: var(--brand-50);
}

.rmm-cell-button.is-selected {
  border-color: var(--brand-600);
  background: var(--brand-50);
}

.rmm-cell-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* —— 角色中心视图：左侧角色列表(rail) + 右侧选中角色的模块卡片。竖向、永不横向溢出，替代原超宽矩阵。 —— */
.rmm-rolecentric {
  display: grid;
  grid-template-columns: minmax(220px, 264px) minmax(0, 1fr);
  grid-gap: 16px;
  gap: 16px;
  align-items: start;
}

.rmm-role-rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 70vh;
  overflow: auto;
  padding: 4px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-sunk);
}

.rmm-role-pick {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.rmm-role-pick:hover {
  border-color: var(--brand-100);
}

.rmm-role-pick.is-active {
  border-color: var(--brand-600);
  background: var(--brand-50);
  box-shadow: inset 3px 0 0 var(--brand-600);
}

.rmm-role-pick-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.rmm-role-pick-top strong {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 800;
}

.rmm-role-pick-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rmm-role-pick-meta small {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
}

.rmm-rail-empty,
.rmm-board-empty {
  margin: 0;
  padding: 20px 8px;
  color: var(--ink-3);
  font-size: 13px;
}

.rmm-role-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.rmm-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.rmm-board-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.rmm-module-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.rmm-module-card {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  align-content: start;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rmm-module-card:hover {
  border-color: var(--brand-100);
  box-shadow: 0 6px 18px rgba(31, 69, 154, 0.08);
}

.rmm-module-card.is-selected {
  border-color: var(--brand-600);
  box-shadow: 0 0 0 1px var(--brand-600);
}

/* 含敏感/高风险权限的卡片：左侧琥珀色细线，低调提示 */
.rmm-module-card:has(.rmm-cell-flag) {
  border-left: 3px solid #fbbf24;
}

.rmm-module-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.rmm-module-card-head strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rmm-module-card-bands {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rmm-module-card-foot {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
}

.rmm-board-ungranted {
  margin: 2px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--hairline);
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 900px) {
  .rmm-rolecentric {
    grid-template-columns: minmax(0, 1fr);
  }

  .rmm-role-rail {
    flex-direction: row;
    flex-wrap: nowrap;
    max-height: none;
    overflow-x: auto;
  }

  .rmm-role-pick {
    min-width: 180px;
  }
}

.rmm-cell-flag {
  color: #b45309;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  opacity: 0.85;
}

.rmm-detail-card {
  margin-top: 14px;
}

.rmm-detail-close {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-2);
  padding: 6px 14px;
  font-weight: 700;
  cursor: pointer;
}

.rmm-detail-close:hover {
  background: var(--surface-soft);
}

.rmm-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-top: 12px;
}

.rmm-perm {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
}

.rmm-perm.is-missing {
  opacity: 0.5;
}

.rmm-perm-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  font-weight: 900;
}

.rmm-perm.is-granted .rmm-perm-check {
  background: var(--c-success-soft, var(--surface-soft));
  color: var(--c-success-ink);
}

.rmm-perm.is-missing .rmm-perm-check {
  color: var(--ink-3);
}

.rmm-perm-body {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  min-width: 0;
}

.rmm-perm-body strong {
  color: var(--ink);
  font-size: 13px;
}

.rmm-perm-body small {
  color: var(--ink-3);
  font-size: 11px;
  overflow-wrap: anywhere;
}

.rmm-perm-risk {
  margin-left: auto;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.permission-risk-cell {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  width: -moz-fit-content;
  width: fit-content;
  min-width: 48px;
  border-radius: 10px;
  background: var(--surface-sunk);
  padding: 8px;
}

.permission-risk-cell strong {
  color: var(--ink);
  font-size: 18px;
}

.permission-risk-cell.is-risk {
  background: var(--c-danger-soft);
}

.permission-risk-cell.is-risk strong {
  color: var(--c-danger-ink);
}

.permission-audit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.permission-audit-card {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  min-height: 124px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 14px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.permission-audit-card strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.permission-audit-card span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.permission-audit-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}

.permission-audit-card.tone-ok {
  border-color: var(--c-success-border);
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
}

.permission-audit-card.tone-warning {
  border-color: var(--accent-200);
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-50) 100%);
}

.permission-audit-card.tone-danger {
  border-color: var(--c-danger-border);
  background: linear-gradient(180deg, #ffffff 0%, var(--c-danger-soft) 100%);
}

.permission-row-link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-600);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.permission-row-link:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
}

/* 权限治理页：紧凑专业工作台，首屏先给治理信号，再进入角色授权检查。 */
.permission-governance-overview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.46fr);
  grid-gap: 12px;
  gap: 12px;
  align-items: stretch;
}

.permission-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.permission-metric-card,
.permission-risk-queue,
.permission-workspace-panel {
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
}

.permission-metric-card {
  min-height: 92px;
  padding: 12px 14px;
  display: grid;
  align-content: space-between;
  border-top: 3px solid #60a5fa;
}

.permission-metric-card span,
.permission-metric-card small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}

.permission-metric-card strong {
  color: #1d4ed8;
  font-family: var(--sw-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 28px;
  line-height: 1;
}

.permission-metric-card.tone-success {
  border-top-color: #10b981;
}

.permission-metric-card.tone-success strong {
  color: #047857;
}

.permission-metric-card.tone-warning {
  border-top-color: #f59e0b;
}

.permission-metric-card.tone-warning strong {
  color: #b45309;
}

.permission-metric-card.tone-danger {
  border-top-color: #ef4444;
}

.permission-metric-card.tone-danger strong {
  color: #b42318;
}

.permission-risk-queue {
  min-width: 0;
  padding: 14px;
}

.permission-risk-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 8px;
  gap: 8px;
}

.permission-risk-item {
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-left: 3px solid #10b981;
  border-radius: 8px;
  background: #f8fbff;
}

.permission-risk-item strong,
.permission-risk-item span {
  display: block;
}

.permission-risk-item strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.permission-risk-item span {
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.55;
}

.permission-risk-item.tone-warning {
  border-left-color: #f59e0b;
  background: #fffbeb;
}

.permission-risk-item.tone-danger {
  border-left-color: #ef4444;
  background: #fff5f5;
}

.permission-focus-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.permission-focus-card {
  min-height: 92px;
  padding: 12px;
  display: grid;
  align-content: space-between;
  grid-gap: 7px;
  gap: 7px;
  border: 1px solid #dbeafe;
  border-top: 3px solid #bfdbfe;
  border-radius: 8px;
  background: #ffffff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.permission-focus-card:hover,
.permission-focus-card.is-active {
  transform: translateY(-1px);
  border-color: #93c5fd;
  border-top-color: #2563eb;
  background: #f8fbff;
  box-shadow: 0 12px 20px rgba(37, 99, 235, 0.08);
}

.permission-focus-card span {
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
}

.permission-focus-card strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.permission-focus-card small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.55;
}

.permission-workspace-panel {
  padding: 14px;
}

.permission-workspace-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}

.permission-workspace-head .rmm-legend {
  justify-content: flex-end;
  margin: 0;
}

.permission-matrix-toolbar {
  grid-template-columns: minmax(220px, 1fr) minmax(180px, 0.72fr) 150px auto;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px;
  border-color: #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
  box-shadow: none;
}

.permission-matrix-toolbar input,
.permission-matrix-toolbar select {
  height: 36px;
  border-color: #dbeafe;
  border-radius: 8px;
  background: #ffffff;
}

.rmm-reset-filter {
  align-self: end;
  min-height: 36px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #ffffff;
  color: #1d4ed8;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.rmm-reset-filter:hover {
  border-color: #93c5fd;
  background: #eff6ff;
}

.rmm-legend {
  gap: 8px 12px;
  color: var(--ink-2);
}

.rmm-chip {
  min-width: 24px;
  height: 22px;
  border-color: #bfdbfe;
  border-radius: 6px;
  background: #eff6ff;
  color: #1d4ed8;
}

.rmm-chip.is-sensitive {
  border-color: #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

.rmm-rolecentric {
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  gap: 12px;
}

.rmm-role-rail {
  max-height: min(68vh, 720px);
  padding: 6px;
  border-color: #dbeafe;
  border-radius: 8px;
  background: #f3f7fb;
}

.rmm-role-pick {
  gap: 5px;
  border-radius: 8px;
  background: #ffffff;
}

.rmm-role-pick:hover {
  border-color: #93c5fd;
  background: #f8fbff;
}

.rmm-role-pick.is-active {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: inset 3px 0 0 #2563eb;
}

.rmm-role-pick-top strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rmm-role-code {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rmm-role-board {
  min-height: 520px;
  padding: 14px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #ffffff;
}

.rmm-board-head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}

.rmm-module-cards {
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 10px;
}

.rmm-module-card {
  min-height: 96px;
  border-color: #dbeafe;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
}

.rmm-module-card:hover {
  border-color: #93c5fd;
  background: #f8fbff;
  box-shadow: 0 10px 18px rgba(37, 99, 235, 0.07);
}

.rmm-module-card.is-selected {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 1px #2563eb;
}

.rmm-module-card-head strong {
  white-space: normal;
}

.rmm-module-card-foot {
  align-self: end;
}

.rmm-board-ungranted {
  max-height: 76px;
  overflow: auto;
}

.rmm-detail-card {
  border-color: #dbeafe;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(20, 33, 58, 0.04);
}

.rmm-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rmm-detail-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-top: 12px;
  padding: 10px;
  overflow-x: auto;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #f8fbff;
}

.rmm-action-token {
  flex: 0 0 auto;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 800;
}

.rmm-action-token.is-risk {
  border-color: #fed7aa;
  background: #fff7ed;
}

.rmm-action-token em {
  border-radius: 999px;
  background: #ffedd5;
  color: #c2410c;
  padding: 1px 6px;
  font-size: 11px;
  font-style: normal;
}

.rmm-missing-perms {
  flex: 0 0 auto;
  position: relative;
}

.rmm-missing-perms summary {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border: 1px dashed #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink-2);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.rmm-missing-perms summary::-webkit-details-marker {
  display: none;
}

.rmm-missing-perms div {
  position: absolute;
  right: 0;
  z-index: 4;
  width: min(360px, 76vw);
  margin-top: 8px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid #dbeafe;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}

.rmm-missing-perms span {
  border-radius: 999px;
  background: #f3f7fb;
  color: var(--ink-2);
  padding: 4px 8px;
  font-size: 12px;
}

@media (max-width: 1080px) {
  .opportunity-overview-main,
  .opportunity-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .role-toolbar,
  .role-workbench,
  .role-workbench-summary,
  .role-create-form,
  .permission-workbench,
  .permission-workbench-summary,
  .permission-governance-overview,
  .permission-matrix-toolbar,
  .permission-audit-grid,
  .platform-setting-health,
  .report-overview-kpis,
  .report-conversion-layout,
  .report-funnel-strip,
  .report-risk-grid,
  .report-common-grid,
  .tenant-subscription-workbench,
  .tenant-subscription-hero,
  .tenant-ops-layout,
  .tenant-first-run-strip,
  .tenant-plan-grid,
  .tenant-subscription-focus-strip,
  .tenant-subscription-summary-grid {
    grid-template-columns: 1fr;
  }

  .role-inspector {
    position: static;
  }

  .permission-workbench-side,
  .role-risk-list,
  .tenant-subscription-side {
    position: static;
  }

  .permission-risk-list,
  .role-risk-list {
    grid-template-columns: 1fr;
  }

  .permission-metric-grid,
  .permission-focus-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .permission-workspace-head {
    display: grid;
    grid-template-columns: 1fr;
  }

  .permission-workspace-head .rmm-legend {
    justify-content: flex-start;
  }
}

@media (max-width: 860px) {
  .opportunity-overview-main,
  .opportunity-overview-grid,
  .opportunity-followup-grid {
    grid-template-columns: 1fr;
  }

  .opportunity-followup-head,
  .opportunity-followup-history li > div {
    align-items: stretch;
    flex-direction: column;
  }

  .opportunity-overview-main strong {
    font-size: 24px;
  }

  .opportunity-overview-amount strong {
    font-size: 26px;
  }

  .role-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .role-hero-actions,
  .role-toolbar-actions,
  .role-create-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .role-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .role-command-strip,
  .role-summary-grid,
  .permission-command-strip,
  .permission-focus-strip,
  .permission-summary-grid,
  .permission-side-snapshot,
  .permission-audit-switcher {
    grid-template-columns: 1fr;
  }

  .permission-command-card strong,
  .role-command-card strong {
    font-size: 24px;
  }

  .permission-matrix-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .permission-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tenant-delivery-grid,
  .tenant-subscription-facts,
  .tenant-subscription-headline,
  .tenant-module-list-grid,
  .tenant-capacity-form,
  .tenant-module-selector,
  .tenant-subscription-side-actions {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .role-metrics,
  .permission-metric-grid,
  .permission-focus-strip,
  .permission-matrix-summary,
  .role-hero-actions,
  .role-toolbar-actions,
  .role-create-actions {
    grid-template-columns: 1fr;
  }

  .role-command-card,
  .role-risk-card,
  .role-risk-empty,
  .permission-command-card,
  .permission-risk-card {
    min-height: auto;
  }

  .permission-command-card strong,
  .permission-summary-grid strong,
  .role-command-card strong,
  .role-summary-grid strong {
    font-size: 22px;
  }
}

.tenant-login-page {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(248, 251, 255, 0.96), rgba(236, 253, 245, 0.9)),
    repeating-linear-gradient(145deg, rgba(37, 99, 235, 0.08) 0 2px, transparent 2px 28px),
    var(--surface-sunk);
  padding: 32px 18px;
}

.tenant-login-page::before {
  content: "";
  position: absolute;
  inset: -34px;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(248, 251, 255, 0.9), rgba(248, 251, 255, 0.64)),
    url("/visuals/hummingbird-hero.png") center / cover no-repeat;
  filter: blur(16px) saturate(0.86);
  opacity: 0.28;
  transform: scale(1.06);
}

.tenant-login-panel {
  position: relative;
  z-index: 1;
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(360px, 1fr);
  grid-gap: 16px;
  gap: 16px;
  align-items: stretch;
}

.tenant-login-copy,
.tenant-login-form {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

.tenant-login-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: 32px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.9)),
    linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(20, 184, 166, 0.1));
}

.tenant-login-copy span {
  color: var(--brand-500);
  font-size: 13px;
  font-weight: 800;
}

.tenant-login-copy h1 {
  margin: 12px 0;
  color: var(--ink);
  font-size: 34px;
  line-height: 1.15;
}

.tenant-login-copy p {
  margin: 0;
  color: var(--ink-2);
  line-height: 1.75;
}

.tenant-login-form {
  display: grid;
  grid-gap: 13px;
  gap: 13px;
  padding: 24px;
}

.tenant-entry-links,
.tenant-login-actions,
.tenant-demo-accounts,
.tenant-login-inline {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.tenant-login-flow {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.tenant-login-flow div,
.tenant-onboarding-link,
.tenant-login-form-head {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--surface);
}

.tenant-login-flow div {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-gap: 2px 10px;
  gap: 2px 10px;
  align-items: center;
  padding: 12px;
}

.tenant-login-flow em {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--brand-50);
  color: var(--brand-600);
  font-style: normal;
  font-weight: 800;
  grid-row: span 2;
}

.tenant-login-flow strong {
  color: var(--ink);
  font-size: 14px;
}

.tenant-login-flow small {
  color: var(--ink-2);
  font-size: 12px;
}

.tenant-onboarding-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  color: var(--brand-600);
  font-weight: 800;
  text-decoration: none;
}

.tenant-onboarding-link span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.tenant-login-form-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px;
}

.tenant-login-form-head div {
  min-width: 0;
}

.tenant-login-form-head span {
  color: var(--brand-500);
  font-size: 12px;
  font-weight: 800;
}

.tenant-login-form-head h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.25;
}

.tenant-login-form-head a {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.tenant-entry-links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 4px;
}

.tenant-entry-links button {
  min-height: 38px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-2);
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 800;
}

.tenant-entry-links button.active {
  background: var(--surface);
  color: var(--brand-600);
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.12);
}

.tenant-login-form label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.tenant-login-form label span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.tenant-login-form input,
.tenant-login-form select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--brand-100);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 12px;
}

.tenant-login-form input:focus,
.tenant-login-form select:focus {
  outline: 3px solid rgba(37, 99, 235, 0.14);
  border-color: var(--brand-500);
}


.tenant-login-inline {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tenant-login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tenant-captcha-row {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  align-items: end;
  grid-gap: 10px;
  gap: 10px;
}

.tenant-captcha-image,
.tenant-captcha-image img,
.tenant-captcha-placeholder {
  width: 132px;
  height: 44px;
}

.tenant-captcha-image img,
.tenant-captcha-placeholder {
  border: 1px solid var(--brand-200);
  border-radius: 10px;
  background: var(--brand-50);
}

.tenant-captcha-placeholder {
  display: grid;
  place-items: center;
  grid-gap: 1px;
  gap: 1px;
  color: var(--brand-500);
  cursor: pointer;
  font: inherit;
  padding: 0;
}

.tenant-captcha-placeholder:disabled {
  cursor: wait;
  opacity: 0.78;
}

.tenant-captcha-placeholder span {
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.tenant-captcha-placeholder small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.tenant-captcha-row .tenant-login-link-button {
  min-height: 40px;
  border: 1px solid var(--brand-100);
  border-radius: 10px;
  background: var(--surface);
  padding: 0 10px;
}

.tenant-sso-panel {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 12px;
}

.tenant-sso-panel strong {
  color: var(--ink);
  font-size: 13px;
}

.tenant-sso-panel div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.tenant-sso-panel a {
  display: grid;
  min-height: 36px;
  place-items: center;
  border: 1px solid var(--brand-200);
  border-radius: 10px;
  background: var(--surface);
  color: var(--brand-600);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.tenant-sso-panel small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.6;
}

.tenant-login-form .tenant-login-check {
  display: inline-flex;
  grid-template-columns: none;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.tenant-login-form .tenant-login-check input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  border-radius: 4px;
  padding: 0;
}

.tenant-login-form .tenant-login-check span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.tenant-login-link-button {
  border: 0;
  background: transparent;
  color: var(--brand-600);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.tenant-login-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.tenant-login-actions .btn {
  justify-content: center;
  min-width: 148px;
}

.tenant-demo-groups {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.tenant-demo-group {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface-sunk);
  overflow: hidden;
}

.tenant-demo-group.is-open {
  border-color: var(--accent, #2563eb);
  background: var(--surface, #fff);
}

.tenant-demo-group-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
}

.tenant-demo-group-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tenant-demo-group-title strong {
  font-size: 13px;
  font-weight: 800;
}

.tenant-demo-group-title small {
  font-size: 11px;
  color: var(--ink-2);
}

.tenant-demo-group-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
}

.tenant-demo-group-meta em {
  font-style: normal;
  font-size: 11px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--hairline);
  color: var(--ink-2);
  font-weight: 700;
}

.tenant-demo-caret {
  font-size: 11px;
  font-style: normal;
}

.tenant-demo-accounts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tenant-demo-group .tenant-demo-accounts {
  padding: 0 10px 10px;
}

.tenant-demo-accounts button {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface-sunk);
  padding: 8px;
  text-align: left;
  color: var(--ink);
  font-weight: 800;
}

.tenant-demo-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tenant-demo-head strong {
  color: var(--ink);
  font-size: 13px;
}

.tenant-demo-head span {
  color: var(--ink-2);
  font-size: 12px;
}

.tenant-demo-accounts strong,
.tenant-demo-accounts span {
  display: block;
}

.tenant-demo-accounts span {
  margin-top: 2px;
  color: var(--ink-2);
  font-size: 12px;
}

.tenant-login-notice,
.tenant-login-success {
  margin: 0;
  border-radius: 12px;
  padding: 10px 12px;
  line-height: 1.6;
}

.tenant-login-notice {
  border: 1px solid var(--accent-200);
  background: var(--accent-50);
  color: var(--accent-700);
}

.tenant-login-success {
  border: 1px solid var(--c-success-border);
  background: var(--surface-sunk);
  color: var(--c-success-ink);
}

.tenant-login-safe-tip {
  margin: 0;
  border-top: 1px solid var(--hairline);
  padding-top: 10px;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.65;
}

.tenant-activation-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  border: 1px solid var(--brand-100);
  border-radius: 14px;
  background: var(--brand-50);
  padding: 12px;
}

.tenant-activation-summary span,
.tenant-activation-summary strong {
  display: block;
}

.tenant-activation-summary span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.tenant-activation-summary strong {
  margin-top: 3px;
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.tenant-application-status {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.tenant-application-head,
.tenant-delivery-card {
  border: 1px solid var(--brand-100);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px;
}

.tenant-delivery-card.compact {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.tenant-application-head span,
.tenant-application-head small {
  display: block;
  color: var(--ink-2);
}

.tenant-application-head strong {
  display: block;
  margin: 4px 0;
  color: var(--ink);
  font-size: 18px;
}

.tenant-application-meta-grid,
.tenant-delivery-lines {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.tenant-application-meta-grid div {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 10px;
}

.tenant-application-meta-grid span,
.tenant-delivery-lines span {
  color: var(--ink-2);
  font-size: 12px;
}

.tenant-application-meta-grid strong,
.tenant-delivery-lines em {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-style: normal;
  font-weight: 800;
  word-break: break-word;
}

.tenant-application-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
}

.tenant-application-rail span {
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  padding: 7px 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

.tenant-application-rail span.active {
  border-color: var(--brand-300);
  background: var(--brand-50);
  color: var(--brand-600);
}

@media (max-width: 900px) {
  .tenant-login-panel {
    grid-template-columns: 1fr;
  }

  .tenant-login-form {
    order: -1;
  }

  .tenant-login-copy {
    padding: 24px;
  }
}

@media (max-width: 620px) {
  .tenant-entry-links,
  .tenant-demo-accounts,
  .tenant-login-inline,
  .tenant-login-actions,
  .tenant-application-meta-grid,
  .tenant-delivery-lines,
  .tenant-application-rail {
    grid-template-columns: 1fr;
  }

  .tenant-login-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .tenant-login-actions {
    align-items: stretch;
  }

  .tenant-login-actions .btn {
    width: 100%;
  }

  .tenant-login-form-head {
    align-items: flex-start;
  }
}

/* System-level app layout normalization */
.app-shell .content {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 24px 32px;
}

.app-shell .content:has(.table-wrap),
.app-shell .content:has(.data-table),
.app-shell .content:has(.business-table),
.app-shell .content:has(.permission-matrix-table) {
  max-width: none;
}

.app-shell .content.content-system-full {
  max-width: none;
}

.table-wrap {
  width: 100%;
  overflow: auto;
  border-radius: 12px;
  scrollbar-gutter: stable both-edges;
}

:is(.data-table, .business-table, .project-table, .role-table, .user-table, .permission-matrix-table) {
  min-width: 1080px;
  border-collapse: separate;
  border-spacing: 0;
}

:is(.data-table, .business-table, .project-table, .role-table, .user-table, .permission-matrix-table) thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  height: 44px;
  background: var(--surface-sunk);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
}

:is(.data-table, .business-table, .project-table, .role-table, .user-table, .permission-matrix-table) th:last-child,
:is(.data-table, .business-table, .project-table, .role-table, .user-table, .permission-matrix-table) td:last-child {
  position: -webkit-sticky;
  position: sticky;
  right: 0;
  z-index: 3;
  min-width: 96px;
  background: var(--surface);
  box-shadow: -8px 0 12px rgba(15, 23, 42, 0.06);
}

/* Role table keeps a continuous row background between "成员" and "操作". */
.role-table th:last-child {
  background: var(--surface-sunk);
  box-shadow: none;
}

.role-table td:last-child {
  background: inherit;
  box-shadow: none;
}

.permission-matrix-table th:first-child,
.permission-matrix-table td:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--surface);
}

.two-column-page,
.workflow-layout,
.organization-detail-layout {
  align-items: start;
  gap: 24px;
}

.two-column-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
}

.workflow-preview,
.side-panel,
.organization-context-card {
  align-self: start;
  position: -webkit-sticky;
  position: sticky;
  top: 88px;
  overflow: visible;
}

.organization-layout {
  display: grid;
  grid-template-columns: 308px minmax(0, 1fr);
  grid-gap: 20px;
  gap: 20px;
  align-items: start;
}

.organization-tree-card,
.organization-detail-panel {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 20px;
}

.organization-detail-panel {
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
}

.organization-tree-card {
  position: -webkit-sticky;
  position: sticky;
  top: 88px;
}

.organization-tree-toolbar {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  margin-bottom: 14px;
}

.organization-tree-toolbar label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.organization-tree-toolbar label span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.organization-tree-toolbar input {
  min-height: 38px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 0 12px;
  color: var(--ink);
}

.organization-focus-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.organization-focus-tabs button {
  min-height: 30px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.organization-focus-tabs button.active {
  border-color: var(--hairline-strong);
  background: var(--surface-soft);
  color: var(--brand-700);
}

.organization-tree-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-bottom: 14px;
}

.organization-tree-summary article {
  border: 1px solid var(--brand-100);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  padding: 10px;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.organization-tree-summary span {
  color: var(--ink-2);
  font-size: 11px;
}

.organization-tree-summary strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
}

.organization-tree-list {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.organization-tree-item {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.organization-tree-item.depth-0 { --organization-tree-indent: 0px; }
.organization-tree-item.depth-1 { --organization-tree-indent: 16px; }
.organization-tree-item.depth-2 { --organization-tree-indent: 32px; }
.organization-tree-item.depth-3 { --organization-tree-indent: 48px; }
.organization-tree-item.depth-4 { --organization-tree-indent: 64px; }
.organization-tree-item.depth-5 { --organization-tree-indent: 80px; }
.organization-tree-item.depth-6 { --organization-tree-indent: 96px; }
.organization-tree-item.depth-7 { --organization-tree-indent: 112px; }
.organization-tree-item.depth-8 { --organization-tree-indent: 128px; }

.organization-tree-row {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-gap: 6px;
  gap: 6px;
  align-items: center;
  padding-left: var(--organization-tree-indent, 0px);
}

/* ===== 组织架构 · 详情面板重构（标签页 + 真实成员 + 完整增删改） ===== */
.org-detail {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.org-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--surface-soft);
}

.org-detail-title {
  min-width: 0;
}

.org-type-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--brand-700);
  font-size: 11px;
  font-weight: 800;
}

.org-type-badge.org-type-company {
  background: var(--brand-900);
  color: var(--ink-inverse);
}

.org-type-badge.org-type-center {
  background: var(--brand-700);
  color: var(--ink-inverse);
}

.org-detail-title h2 {
  margin: 8px 0 2px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.2;
}

.org-detail-path {
  margin: 0;
  color: var(--ink-3);
  font-size: 12px;
}

.org-detail-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.org-detail-actions .btn {
  height: 32px;
  min-width: 0;
  padding: 0 12px;
  font-size: 13px;
}

.org-danger-btn {
  color: var(--c-danger-ink) !important;
  -webkit-text-fill-color: var(--c-danger-ink) !important;
  border-color: var(--c-danger-border) !important;
}

.org-danger-btn:hover {
  background: var(--c-danger-soft) !important;
}

.organization-editor-delete {
  margin-right: auto;
}

/* 审批流程设计 · 任务筛选收敛为细药丸(替代 5 张大卡的仪表盘band) */
.approval-flow-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.approval-flow-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.approval-flow-filter-pill > span {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink-2);
  font-size: 11px;
  display: inline-grid;
  place-items: center;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.approval-flow-filter-pill:hover {
  border-color: var(--hairline-strong);
}

.approval-flow-filter-pill.active {
  border-color: var(--brand-600);
  background: var(--surface-soft);
  color: var(--brand-900);
}

.approval-flow-filter-pill.active > span {
  background: var(--brand-600);
  color: var(--ink-inverse);
}

.org-detail-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--surface-soft);
}

.org-detail-stats > div {
  padding: 12px 20px;
  border-right: 1px solid var(--surface-sunk);
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  min-width: 0;
}

.org-detail-stats > div:last-child {
  border-right: 0;
}

.org-detail-stats span {
  color: var(--ink-2);
  font-size: 12px;
}

.org-detail-stats strong {
  color: var(--brand-900);
  font-size: 18px;
  line-height: 1.2;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-detail-stats strong.is-empty {
  color: var(--ink-3);
  font-weight: 600;
  font-size: 14px;
}

.org-tabs {
  display: flex;
  padding: 0 20px;
  border-bottom: 1px solid var(--surface-soft);
}

.org-tabs button {
  position: relative;
  height: 42px;
  padding: 0 2px;
  margin-right: 20px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.org-tabs button:hover {
  color: var(--brand-700);
}

.org-tabs button.active {
  color: var(--brand-900);
}

.org-tabs button.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brand-600);
  border-radius: 2px;
}

.org-tab-panel {
  padding: 18px 20px 20px;
}

.org-hint-strip {
  margin: 0 0 14px;
  border: 1px solid var(--accent-100);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
}

.org-hint-strip p {
  margin: 0;
  color: var(--c-warning-ink);
  font-size: 12px;
  line-height: 1.6;
}

.org-fact-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 1px;
  gap: 1px;
  background: var(--surface-soft);
  border: 1px solid var(--surface-soft);
  border-radius: 10px;
  overflow: hidden;
}

.org-fact-grid > div {
  background: var(--surface);
  padding: 12px 14px;
  min-width: 0;
}

.org-fact-wide {
  grid-column: 1 / -1;
}

.org-fact-grid dt {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}

.org-fact-grid dd {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  word-break: break-word;
}

.org-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.org-panel-head > span {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
}

.org-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.6;
  border: 1px dashed var(--hairline);
  border-radius: 10px;
  background: var(--surface);
}

.org-member-table-wrap {
  overflow-x: auto;
}

.org-member-table {
  width: 100%;
  border-collapse: collapse;
}

.org-member-table th {
  text-align: left;
  padding: 8px 12px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px solid var(--surface-soft);
  background: var(--surface-sunk);
  white-space: nowrap;
}

.org-member-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--surface-sunk);
  color: var(--ink);
  font-size: 13px;
  vertical-align: middle;
}

.org-member-table tbody tr:hover td {
  background: var(--surface);
}

.org-member-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.org-avatar {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  color: var(--ink-inverse);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  font-style: normal;
}

.org-member-cell strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
}

.org-member-cell small {
  display: block;
  color: var(--ink-3);
  font-size: 11px;
}

.org-member-contact {
  color: var(--ink-2);
}

.org-member-action {
  white-space: nowrap;
}

.org-member-action a,
.org-member-action button {
  color: var(--brand-700);
  font-size: 13px;
  font-weight: 700;
  background: none;
  border: 0;
  cursor: pointer;
  margin-right: 10px;
}

.org-member-action a:hover,
.org-member-action button:hover {
  color: var(--brand-600);
}

.org-link-button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--brand-900);
  font-weight: 700;
  font-size: 13px;
}

.org-link-button:hover {
  color: var(--brand-600);
}

.org-muted {
  color: var(--ink-3);
}

.organization-tree-actions {
  position: absolute;
  right: 2px;
  top: 0;
  bottom: 0;
  display: flex;
  gap: 2px;
  align-items: center;
  padding-left: 22px;
  opacity: 0;
  background: linear-gradient(90deg, rgba(244, 248, 253, 0), var(--surface-sunk) 45%);
  transition: opacity 0.12s ease;
}

.organization-tree-row.active .organization-tree-actions {
  background: linear-gradient(90deg, rgba(233, 241, 251, 0), var(--surface-soft) 45%);
}

.organization-tree-row:hover .organization-tree-actions,
.organization-tree-row.active .organization-tree-actions,
.organization-tree-row:has(.org-node-menu[open]) .organization-tree-actions {
  opacity: 1;
}

.organization-tree-action {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
}

.organization-tree-action:hover {
  background: var(--hairline);
  color: var(--brand-700);
}

.organization-tree-search input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  padding: 0 12px;
  color: var(--ink);
}

.organization-tree-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--surface-soft);
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  color: var(--ink-3);
  font-size: 11px;
}

@media (max-width: 1180px) {
  .org-detail-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .org-detail-stats > div:nth-child(2) {
    border-right: 0;
  }
  .org-fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.operation-audit-hero {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 16px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.operation-audit-hero-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.operation-audit-hero-head strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
  letter-spacing: 0.01em;
}

.operation-audit-hero-head p {
  margin: 6px 0 0;
  max-width: 760px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
}

.operation-audit-hero-head > span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--brand-200);
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.operation-audit-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px dashed var(--brand-100);
}

.operation-audit-metric-card {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  border: 1px solid var(--brand-100);
  border-top: 3px solid var(--brand-400);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
  min-height: 96px;
}

.operation-audit-metric-card.is-warning {
  border-top-color: var(--c-warning);
}

.operation-audit-metric-card.is-danger {
  border-top-color: var(--c-danger);
}

.operation-audit-metric-card span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.operation-audit-metric-card strong {
  color: var(--brand-700);
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: 0.01em;
}

.operation-audit-metric-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}

.operation-audit-risk-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--brand-100);
}

.operation-audit-risk-card {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.operation-audit-risk-card span {
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 999px;
  background: var(--brand-50);
  color: #4338ca;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 800;
}

.operation-audit-risk-card strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.operation-audit-risk-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}

.operation-audit-risk-card a {
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
}

.operation-audit-risk-card a:hover {
  text-decoration: underline;
}

.operation-audit-risk-card.tone-danger {
  border-color: var(--c-danger-border);
  background: var(--surface);
}

.operation-audit-risk-card.tone-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.operation-audit-filter {
  display: grid;
  grid-template-columns: minmax(220px, 0.35fr) minmax(0, 1fr);
  grid-gap: 14px;
  gap: 14px;
  align-items: end;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

.operation-audit-filter-head {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  min-width: 0;
}

.operation-audit-filter-head strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.operation-audit-filter-head p {
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}

.operation-audit-filter-bar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: end;
  min-width: 0;
}

.operation-audit-filter-bar label {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-width: 0;
}

.operation-audit-filter-bar label span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.operation-audit-filter-bar input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 0 12px;
  color: var(--ink);
}

.operation-audit-filter-meta {
  margin: 10px 0 0;
  color: var(--ink-2);
  font-size: 12px;
}

.operation-audit-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  grid-gap: 16px;
  gap: 16px;
  align-items: start;
}

.operation-audit-main {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
  min-width: 0;
}

.operation-audit-task-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.operation-audit-task-card {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  padding: 14px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.operation-audit-task-card:hover,
.operation-audit-task-card.is-active {
  border-color: var(--brand-300);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
  transform: translateY(-1px);
}

.operation-audit-task-card span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.operation-audit-task-card strong {
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
}

.operation-audit-task-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}

.operation-audit-task-card.tone-danger {
  background: linear-gradient(180deg, var(--surface) 0%, var(--c-danger-soft) 100%);
}

.operation-audit-task-card.tone-warning {
  background: linear-gradient(180deg, var(--surface) 0%, var(--accent-50) 100%);
}

.operation-audit-task-card.tone-success {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-sunk) 100%);
}

.operation-audit-side {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  align-self: start;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.operation-audit-side-card {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 16px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.operation-audit-side-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.operation-audit-side-head strong {
  color: var(--ink);
  font-size: 16px;
}

.operation-audit-side-head span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
}

.operation-audit-side-card > p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.6;
}

.operation-audit-side-spotlights {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.operation-audit-side-spotlight {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
}

.operation-audit-checklist {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.6;
}

.operation-audit-side-actions {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.operation-audit-risk-stack {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.operation-audit-table-wrap {
  border: 1px solid var(--hairline-strong);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}

.operation-audit-table {
  min-width: 1320px;
  table-layout: fixed;
}

.operation-audit-col-module { width: 140px; }
.operation-audit-col-action { width: 132px; }
.operation-audit-col-state { width: 300px; }
.operation-audit-col-trigger { width: 240px; }
.operation-audit-col-guardrail { width: 300px; }
.operation-audit-col-risk { width: 132px; }
.operation-audit-col-link { width: 96px; }

.operation-audit-table thead th {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-soft) 100%);
  color: var(--ink);
}

.operation-audit-table th,
.operation-audit-table td {
  padding: 12px 14px;
  vertical-align: top;
}

.operation-audit-table th:nth-child(2),
.operation-audit-table td:nth-child(2) {
  text-align: center;
}

.operation-audit-table th:last-child,
.operation-audit-table td:last-child {
  text-align: center;
}

.operation-audit-table td:nth-child(2) {
  vertical-align: middle;
}

.operation-audit-table td.operation-audit-action-type-cell,
.operation-audit-table td.operation-audit-state-cell {
  vertical-align: middle;
}

.operation-audit-table tbody tr:hover td {
  background: var(--surface);
}

.operation-audit-table tbody tr:hover td:last-child,
.operation-audit-table tbody tr.selected td:last-child,
.operation-audit-table tbody tr.selected-row td:last-child,
.operation-audit-table tbody tr.is-selected-row td:last-child,
.operation-audit-table tbody tr.row-selected td:last-child {
  background: var(--surface);
}

.operation-audit-table td:nth-child(3),
.operation-audit-table td:nth-child(4),
.operation-audit-table td:nth-child(5) {
  color: var(--ink);
  line-height: 1.55;
}

.operation-audit-module-cell {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-width: 0;
}

.operation-audit-module-chip {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.operation-audit-action-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  width: 116px;
  max-width: 100%;
  border: 1px solid var(--brand-200);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, var(--brand-50) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: var(--brand-800);
  padding: 0 14px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  margin: 0 auto;
  white-space: nowrap;
}

.operation-audit-state-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 8px;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  align-items: center;
}

.operation-audit-state-tag {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
  text-transform: lowercase;
}

.operation-audit-trigger-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.operation-audit-trigger-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--c-success-ink);
  padding: 0 8px;
  font-size: 12px;
  font-weight: 700;
}

.operation-audit-guardrail {
  margin: 0;
  color: var(--ink);
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.operation-audit-table th:nth-child(6),
.operation-audit-table td:nth-child(6) {
  width: 132px;
  min-width: 132px;
  text-align: center;
}

.operation-audit-table td:nth-child(6) .status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  white-space: nowrap;
}

.operation-audit-table th.operation-audit-risk-head,
.operation-audit-table th.operation-audit-action-head,
.operation-audit-table td.operation-audit-risk-cell,
.operation-audit-table td.operation-audit-action-cell {
  text-align: center;
}

.operation-audit-table th.operation-audit-action-head,
.operation-audit-table td.operation-audit-action-cell {
  width: 96px;
  min-width: 96px;
  padding-left: 0;
  padding-right: 0;
}

.operation-audit-table td.operation-audit-risk-cell,
.operation-audit-table td.operation-audit-action-cell {
  vertical-align: middle;
}

.operation-audit-risk-badge {
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0 14px;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

.operation-audit-risk-badge::before {
  display: none;
}

.operation-audit-risk-badge.tone-danger {
  border-color: var(--c-danger-border);
  background: linear-gradient(180deg, var(--c-danger-soft) 0%, var(--c-danger-soft) 100%);
  color: var(--c-danger-ink);
}

.operation-audit-risk-badge.tone-warning {
  border-color: var(--c-danger-border);
  background: linear-gradient(180deg, var(--accent-50) 0%, var(--c-danger-soft) 100%);
  color: var(--accent-600);
}

.operation-audit-risk-badge.tone-success {
  border-color: var(--c-success-border);
  background: linear-gradient(180deg, var(--surface-sunk) 0%, var(--c-success-soft) 100%);
  color: var(--c-success-ink);
}

.operation-audit-view-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 32px;
  border: 1px solid var(--brand-100);
  border-radius: 9px;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: var(--brand-500);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.operation-audit-view-link:hover {
  border-color: var(--brand-300);
  background: linear-gradient(180deg, var(--surface) 0%, var(--brand-50) 100%);
  color: var(--brand-600);
}

@media (max-width: 1680px) {
  .operation-audit-workbench {
    grid-template-columns: 1fr;
  }

  .operation-audit-side {
    position: static;
  }
}

@media (max-width: 960px) {
  .operation-audit-hero-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .operation-audit-workbench {
    grid-template-columns: 1fr;
  }

  .operation-audit-task-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operation-audit-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operation-audit-risk-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .operation-audit-filter {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .operation-audit-task-strip {
    grid-template-columns: 1fr;
  }

  .operation-audit-metric-grid {
    grid-template-columns: 1fr;
  }

  .operation-audit-risk-strip {
    grid-template-columns: 1fr;
  }

  .operation-audit-filter-bar {
    grid-template-columns: 1fr;
  }
}

.organization-tree-toggle {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  padding: 0;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.organization-tree-toggle:hover {
  background: var(--surface-soft);
}

.organization-tree-toggle span {
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--ink-3);
  border-bottom: 1.6px solid var(--ink-3);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
}

.organization-tree-toggle.expanded span {
  transform: rotate(45deg);
}

.organization-tree-toggle.placeholder {
  cursor: default;
}

/* 层级缩进引导线（best-SaaS：子级用一条浅色竖线连接，而非纯缩进）。 */
.organization-tree-children {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  margin-left: 9px;
  padding-left: 11px;
  border-left: 1px solid var(--surface-soft);
}

.organization-tree-empty {
  border: 1px dashed var(--hairline-strong);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 16px;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.organization-tree-empty strong {
  color: var(--ink);
  font-size: 13px;
}

.organization-tree-empty span {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.6;
}

/* 干净单行节点：类型色块 + 名称(截断) + 待补红点 + 成员数 chip。 */
.organization-tree-node {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 6px 8px;
  text-align: left;
  cursor: pointer;
  transition: background 0.13s ease;
}

.org-tree-badge {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-inverse);
  background: var(--ink-3);
}

.org-tree-badge-company {
  background: var(--brand-900);
}

.org-tree-badge-center {
  background: var(--brand-700);
}

.org-tree-badge-department {
  background: var(--brand-600);
}

.org-tree-badge-team {
  background: var(--ink-3);
}

.org-tree-badge-project_group {
  background: var(--accent-500);
}

.org-tree-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.org-tree-warn {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--c-warning);
}

.org-tree-count {
  flex-shrink: 0;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.organization-tree-node:hover {
  background: var(--surface-sunk);
}

.organization-tree-row.active .organization-tree-node {
  background: var(--surface-soft);
}

.organization-tree-row.active .org-tree-name {
  color: var(--brand-900);
  font-weight: 700;
}

.organization-tree-row.active .org-tree-count {
  background: var(--brand-100);
  color: var(--brand-700);
}

/* 节点 ⋯ 菜单（编辑/删除） */
.org-node-menu {
  position: relative;
}

.org-node-menu > summary {
  list-style: none;
}

.org-node-menu > summary::-webkit-details-marker {
  display: none;
}

.org-node-menu-list {
  position: absolute;
  right: 0;
  top: 26px;
  z-index: 30;
  min-width: 124px;
  padding: 4px;
  display: grid;
  grid-gap: 1px;
  gap: 1px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 9px;
  box-shadow: 0 12px 28px rgba(15, 46, 92, 0.16);
}

.org-node-menu-list a,
.org-node-menu-list button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.org-node-menu-list a:hover,
.org-node-menu-list button:hover {
  background: var(--surface-sunk);
}

.org-node-menu-list .org-node-menu-danger {
  color: var(--c-danger-ink);
}

.org-node-menu-list .org-node-menu-danger:hover {
  background: var(--c-danger-soft);
}

/* ===== 组织架构图（自上而下方框层级 + 连接线）===== */
.organization-viewbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.organization-view-toggle {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface-sunk);
}

.organization-view-toggle button {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.organization-view-toggle button.active {
  background: var(--surface);
  color: var(--brand-900);
  box-shadow: 0 1px 3px rgba(15, 46, 92, 0.12);
}

.organization-viewbar-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.organization-viewbar-tools input {
  min-height: 34px;
  width: 220px;
  max-width: 46vw;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  background: var(--surface);
  padding: 0 12px;
  color: var(--ink);
  font-size: 13px;
}

.organization-command-center {
  display: grid;
  grid-template-columns: minmax(300px, 0.38fr) minmax(0, 1fr);
  grid-gap: 14px;
  gap: 14px;
  align-items: stretch;
  min-height: min(62vh, 720px);
}

.organization-map-panel,
.organization-node-panel {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.organization-map-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.organization-map-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--surface-soft);
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
}

.organization-map-head > div {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  min-width: 0;
}

.organization-map-head strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.organization-map-head span {
  color: var(--ink-3);
  font-size: 12px;
}

.organization-map-create {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-700);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.organization-map-create:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
}

.organization-map-tree {
  display: grid;
  align-content: start;
  grid-gap: 6px;
  gap: 6px;
  max-height: min(62vh, 720px);
  overflow: auto;
  padding: 10px;
  background: var(--surface);
}

.organization-map-tree .organization-tree-node {
  min-height: 38px;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
}

.organization-map-tree .organization-tree-row.active .organization-tree-node {
  border-color: var(--brand-300);
  background: var(--brand-50);
  box-shadow: inset 3px 0 0 var(--brand-600);
}

.organization-map-tree .organization-tree-row:hover .organization-tree-node {
  background: var(--surface-sunk);
}

.organization-node-panel {
  overflow: hidden;
}

.organization-node-detail {
  height: 100%;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
}

.organization-node-head {
  padding: 18px 20px 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 253, 0.9)),
    var(--surface);
}

.organization-node-stats {
  grid-template-columns: 0.75fr 0.75fr minmax(132px, 1fr) minmax(108px, 0.8fr);
}

.organization-node-alert {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 20px 0;
}

.organization-node-alert span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border: 1px solid var(--accent-200);
  border-radius: 999px;
  background: var(--accent-50);
  color: var(--accent-700);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 800;
}

.organization-node-tabs {
  padding: 0 20px;
}

.organization-node-tabs button {
  margin-right: 22px;
}

.organization-node-scroll {
  max-height: calc(min(62vh, 720px) - 214px);
  overflow: auto;
}

.organization-node-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.organization-node-facts > div {
  border: 1px solid var(--surface-soft);
  border-radius: 8px;
  background: var(--surface);
}

.organization-node-panel .org-empty {
  margin: 18px;
}

.organization-node-panel .org-member-table th {
  top: 0;
  position: -webkit-sticky;
  position: sticky;
  z-index: 1;
}

.organization-node-panel .inline-btn {
  min-height: 30px;
  border-radius: 999px;
}

.organization-structure-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.75fr);
  grid-gap: 14px;
  gap: 14px;
  align-items: stretch;
  min-height: min(62vh, 720px);
}

.organization-structure-board {
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.organization-structure-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--surface-soft);
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
}

.organization-structure-head > div {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
  min-width: 0;
}

.organization-structure-head strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.organization-structure-head span {
  color: var(--ink-3);
  font-size: 12px;
}

.organization-layer-list {
  display: grid;
  grid-gap: 0;
  gap: 0;
  max-height: min(62vh, 720px);
  overflow: auto;
}

.organization-layer {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  grid-gap: 12px;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--surface-soft);
}

.organization-layer:last-child {
  border-bottom: 0;
}

.organization-layer-label {
  display: grid;
  align-content: start;
  grid-gap: 6px;
  gap: 6px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
}

.organization-layer-label span {
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink-2);
}

.organization-layer-label strong {
  font-family: var(--hrw-mono);
  color: var(--brand-700);
  font-size: 18px;
  line-height: 1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.organization-layer-grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.organization-layer-card {
  position: relative;
  min-width: 0;
  min-height: 86px;
  display: grid;
  align-content: space-between;
  grid-gap: 8px;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: #ffffff;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.organization-layer-card:hover,
.organization-layer-card:has(.org-node-menu[open]) {
  border-color: var(--brand-200);
  box-shadow: 0 10px 24px rgba(15, 46, 92, 0.1);
  transform: translateY(-1px);
}

.organization-layer-card.is-selected {
  border-color: var(--brand-500);
  background: linear-gradient(180deg, var(--brand-50), #ffffff 72%);
  box-shadow: inset 3px 0 0 var(--brand-600);
}

.organization-layer-card.is-warning {
  border-color: var(--accent-200);
}

.organization-layer-card-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-gap: 9px;
  gap: 9px;
  align-items: center;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

.organization-layer-card-copy {
  min-width: 0;
  display: grid;
  grid-gap: 3px;
  gap: 3px;
}

.organization-layer-card-copy strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organization-layer-card-copy small {
  color: var(--ink-3);
  font-size: 11px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.organization-layer-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding-right: 52px;
}

.organization-layer-card-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
}

.organization-layer-card.is-warning .organization-layer-card-meta span:first-child,
.organization-layer-card.is-empty-leaf .organization-layer-card-meta span:first-child {
  background: var(--accent-50);
  color: var(--accent-700);
}

.organization-layer-card-actions {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.organization-layer-card:hover .organization-layer-card-actions,
.organization-layer-card.is-selected .organization-layer-card-actions,
.organization-layer-card:has(.org-node-menu[open]) .organization-layer-card-actions {
  opacity: 1;
}

.organization-layer-action {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  padding: 0;
}

.organization-layer-action:hover {
  border-color: var(--brand-200);
  background: var(--brand-50);
  color: var(--brand-700);
}

@media (max-width: 1180px) {
  .organization-structure-workspace {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .organization-layer-list {
    max-height: none;
  }

  .organization-command-center {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .organization-map-tree {
    max-height: 340px;
  }

  .organization-node-scroll {
    max-height: none;
  }
}

@media (max-width: 760px) {
  .organization-viewbar,
  .organization-viewbar-tools {
    align-items: stretch;
  }

  .organization-viewbar-tools,
  .organization-viewbar-tools input {
    width: 100%;
    max-width: none;
  }

  .organization-node-head,
  .organization-map-head,
  .org-detail-head.organization-node-head {
    align-items: stretch;
    flex-direction: column;
  }

  .organization-node-stats,
  .organization-node-facts {
    grid-template-columns: 1fr;
  }

  .organization-layer {
    grid-template-columns: 1fr;
  }

  .organization-layer-label {
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
  }

  .organization-layer-grid {
    grid-template-columns: 1fr;
  }

  .organization-node-tabs {
    overflow-x: auto;
  }
}

.org-chart-card {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background:
    radial-gradient(circle at 20% 0%, var(--surface-sunk), transparent 60%),
    #ffffff;
  padding: 8px;
  overflow: auto;
}

.org-chart {
  text-align: center;
  min-width: max-content;
  padding: 18px 16px 26px;
}

.org-chart ul {
  position: relative;
  display: inline-flex;
  padding: 22px 0 0;
  margin: 0;
}

.org-chart li {
  list-style: none;
  position: relative;
  padding: 22px 12px 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

/* 连接线：上方横线 + 竖线 */
.org-chart li::before,
.org-chart li::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  width: 50%;
  height: 22px;
  border-top: 1.5px solid var(--hairline-strong);
}

.org-chart li::after {
  right: auto;
  left: 50%;
  border-left: 1.5px solid var(--hairline-strong);
}

.org-chart li:only-child::before,
.org-chart li:only-child::after {
  display: none;
}

.org-chart li:only-child {
  padding-top: 0;
}

.org-chart li:first-child::before,
.org-chart li:last-child::after {
  border: 0;
}

.org-chart li:last-child::before {
  border-right: 1.5px solid var(--hairline-strong);
  border-radius: 0 7px 0 0;
}

.org-chart li:first-child::after {
  border-radius: 7px 0 0 0;
}

.org-chart ul ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 22px;
  border-left: 1.5px solid var(--hairline-strong);
}

.org-chart-box {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 132px;
  max-width: 190px;
  padding: 11px 16px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

.org-chart-box:hover {
  border-color: var(--brand-200);
  box-shadow: 0 10px 22px rgba(15, 46, 92, 0.12);
  transform: translateY(-1px);
}

.org-chart-box.selected {
  border-color: var(--brand-600);
  background: var(--brand-50);
  box-shadow: 0 12px 26px rgba(44, 110, 164, 0.18);
}

.org-chart-box .obx-badge {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--ink-inverse);
  font-size: 14px;
  font-weight: 800;
  background: var(--ink-3);
}

.org-chart-box .obx-badge.org-tree-badge-company { background: var(--brand-900); }
.org-chart-box .obx-badge.org-tree-badge-center { background: var(--brand-700); }
.org-chart-box .obx-badge.org-tree-badge-department { background: var(--brand-600); }
.org-chart-box .obx-badge.org-tree-badge-team { background: var(--ink-3); }
.org-chart-box .obx-badge.org-tree-badge-project_group { background: var(--accent-500); }

.org-chart-box strong {
  max-width: 100%;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.org-chart-box small {
  color: var(--ink-3);
  font-size: 11px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.org-chart-box .obx-warn {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--c-warning);
}

.org-chart-box-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

/* 架构图方框 hover 出 ＋(建子部门) / ⋯(编辑·删除),直接在图里加减节点 */
.org-chart-box-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.org-chart-box:hover .org-chart-box-actions,
.org-chart-box.selected .org-chart-box-actions,
.org-chart-box:has(.org-node-menu[open]) .org-chart-box-actions {
  opacity: 1;
}

.obx-action {
  width: 21px;
  height: 21px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(15, 46, 92, 0.16);
}

.obx-action:hover {
  background: var(--hairline);
  color: var(--brand-700);
}

/* 在图里直接画：点 ＋ 在方框下方冒出输入框,填名回车即建 */
.org-chart-box.org-chart-box-adding {
  border-style: dashed;
  border-color: var(--brand-300);
  background: var(--surface-sunk);
  gap: 8px;
}

.org-chart-add-input {
  width: 132px;
  max-width: 150px;
  height: 28px;
  border: 1px solid var(--hairline-strong);
  border-radius: 7px;
  padding: 0 8px;
  font-size: 12.5px;
  color: var(--ink);
  text-align: center;
}

.org-chart-add-input:focus {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: 0 0 0 2px rgba(44, 110, 164, 0.16);
}

.org-chart-add-actions {
  display: flex;
  gap: 5px;
}

.org-chart-add-ok,
.org-chart-add-cancel {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: inline-grid;
  place-items: center;
}

.org-chart-add-ok {
  background: var(--brand-600);
  color: var(--ink-inverse);
}

.org-chart-add-ok:disabled {
  background: var(--hairline-strong);
  cursor: not-allowed;
}

.org-chart-add-cancel {
  background: var(--surface-soft);
  color: var(--ink-2);
}

.org-chart-add-cancel:hover {
  background: var(--hairline);
}

/* ===== 详情抽屉（右侧滑出）===== */
.org-drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(15, 23, 42, 0.32);
  animation: orgScrimIn 0.16s ease;
}

@keyframes orgScrimIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.org-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 61;
  width: min(560px, 94vw);
  background: var(--surface);
  box-shadow: -18px 0 48px rgba(15, 46, 92, 0.22);
  display: flex;
  flex-direction: column;
  animation: orgDrawerIn 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes orgDrawerIn {
  from { transform: translateX(28px); opacity: 0.4; }
  to { transform: translateX(0); opacity: 1; }
}

.org-drawer-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--ink-inverse);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  z-index: 1;
}

.org-drawer-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

.org-drawer .org-detail {
  border: 0;
  border-radius: 0;
  height: 100%;
  overflow-y: auto;
}

.org-drawer .org-detail-head {
  background: linear-gradient(118deg, var(--brand-900) 0%, var(--brand-700) 52%, var(--brand-600) 100%);
  border-bottom: 0;
  padding: 20px 24px 16px;
}

.org-drawer .org-type-badge {
  background: rgba(255, 255, 255, 0.18);
  color: var(--ink-inverse);
}

.org-drawer .org-detail-title h2 {
  color: var(--ink-inverse);
}

.org-drawer .org-detail-path {
  color: rgba(255, 255, 255, 0.78);
}

.org-drawer .org-detail-actions .btn {
  color: var(--brand-900) !important;
  -webkit-text-fill-color: var(--brand-900) !important;
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.8);
}

.org-drawer .org-detail-actions .org-danger-btn {
  color: var(--c-danger-ink) !important;
  -webkit-text-fill-color: var(--c-danger-ink) !important;
}

.organization-risk-banner {
  margin-top: 12px;
  border: 1px solid var(--accent-200);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-50) 100%);
  padding: 12px 14px;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.organization-risk-banner p {
  margin: 0;
  color: var(--accent-700);
  font-size: 12px;
  line-height: 1.6;
}

.organization-governance-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-top: 12px;
}

.organization-governance-pill {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  padding: 14px 16px;
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.organization-governance-pill span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.organization-governance-pill strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 800;
}

.organization-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin: 16px 0;
}

.organization-detail-grid > div {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  border: 1px solid var(--brand-100);
  border-radius: 10px;
  background: var(--surface);
  padding: 14px 16px;
}

.organization-detail-grid span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.organization-detail-grid strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 800;
}

.organization-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 16px;
}

.organization-summary-grid article {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 16px 18px;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.organization-summary-grid span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.organization-summary-grid strong {
  color: var(--ink);
  font-size: 20px;
  line-height: 1.35;
  font-weight: 800;
}

.organization-summary-grid p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
}

.organization-table th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.organization-detail-panel .organization-list-heading {
  margin-bottom: 16px;
}

.organization-detail-panel .organization-list-heading > div:first-child {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-width: 0;
}

.organization-detail-panel .organization-list-heading strong {
  font-size: 17px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.organization-detail-panel .organization-list-heading span {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.6;
}

.organization-table th,
.organization-table td {
  padding: 14px 16px;
}

.organization-table th {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.organization-table td {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
}

.organization-table td:first-child,
.organization-table td:nth-child(3),
.organization-table td:nth-child(5) {
  color: var(--ink);
}

.organization-table td:first-child,
.organization-table td:nth-child(3) {
  font-weight: 700;
}

.organization-table td .inline-btn {
  min-width: 58px;
}

.organization-table td a,
.organization-table td > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-500);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.organization-table td > button {
  cursor: pointer;
}

.organization-table td a:hover,
.organization-table td > button:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
}

.organization-table td:last-child {
  width: 120px;
}

.organization-table td:last-child .inline-btn {
  min-width: 64px;
}

.permission-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 8px;
  margin-bottom: 16px;
}

.permission-tabs button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
}

.permission-tabs button.active {
  background: var(--brand-50);
  color: var(--brand-600);
}

.quotation-task-grid,
.quotation-audit-pattern-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-gap: 24px;
  gap: 24px;
  align-items: start;
}

.quotation-task-grid-full {
  grid-template-columns: minmax(0, 1fr);
}

.quotation-risk-panel,
.quotation-field-diff {
  position: -webkit-sticky;
  position: sticky;
  top: 88px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 20px;
}

.quotation-risk-panel-list,
.quotation-audit-timeline,
.quotation-version-timeline,
.quotation-rule-builder {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.quotation-risk-panel-item,
.quotation-version-step,
.quotation-audit-event,
.quotation-rule-builder article {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 14px;
  color: inherit;
  text-decoration: none;
}

.quotation-risk-panel-item {
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
}

.quotation-risk-panel-item span:first-child {
  display: inline-flex;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--brand-50);
  color: var(--brand-500);
}

.quotation-risk-panel-item strong,
.quotation-version-step strong,
.quotation-audit-event strong,
.quotation-rule-builder strong {
  color: var(--ink);
  font-size: 14px;
}

.quotation-risk-panel-item small,
.quotation-version-step small,
.quotation-audit-event small,
.quotation-rule-builder small,
.quotation-rule-summary-strip span {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}

.quotation-risk-panel-item.tone-danger,
.quotation-version-step.tone-danger,
.quotation-rule-builder article.tone-danger {
  border-color: var(--c-danger-border);
  background: var(--surface);
}

.quotation-risk-panel-item.tone-warning,
.quotation-version-step.tone-warning,
.quotation-rule-builder article.tone-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.quotation-risk-panel-item.tone-success,
.quotation-version-step.tone-success,
.quotation-rule-builder article.tone-success {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.floating-risk-center {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 80;
  display: grid;
  justify-items: end;
  grid-gap: 10px;
  gap: 10px;
  pointer-events: none;
}

.floating-risk-center > * {
  pointer-events: auto;
}

.floating-risk-trigger {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  grid-gap: 10px;
  gap: 10px;
  align-items: center;
  min-width: 218px;
  max-width: min(360px, calc(100vw - 32px));
  border: 1px solid var(--accent-200);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16);
  color: var(--ink);
  padding: 8px 10px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
}

.floating-risk-trigger:hover,
.floating-risk-trigger:focus-visible {
  border-color: var(--cat-amber);
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.2);
  outline: none;
}

.floating-risk-trigger-icon,
.floating-risk-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.floating-risk-trigger-icon {
  width: 36px;
  height: 36px;
  background: var(--accent-50);
  color: var(--accent-500);
}

.floating-risk-trigger-icon svg,
.floating-risk-item-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.floating-risk-trigger-copy {
  display: grid;
  grid-gap: 2px;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.floating-risk-trigger-copy strong,
.floating-risk-popover-header strong,
.floating-risk-item-copy strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
}

.floating-risk-trigger-copy small,
.floating-risk-popover-header span,
.floating-risk-item-copy small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.35;
}

.floating-risk-trigger em {
  display: inline-grid;
  min-width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  background: var(--accent-500);
  color: var(--ink-inverse);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.floating-risk-center.tone-danger .floating-risk-trigger {
  border-color: var(--c-danger-border);
}

.floating-risk-center.tone-danger .floating-risk-trigger-icon {
  background: var(--c-danger-soft);
  color: #dc2626;
}

.floating-risk-center.tone-danger .floating-risk-trigger em {
  background: #dc2626;
}

.floating-risk-center.tone-info .floating-risk-trigger {
  border-color: var(--brand-200);
}

.floating-risk-center.tone-info .floating-risk-trigger-icon {
  background: var(--brand-50);
  color: var(--brand-500);
}

.floating-risk-center.tone-info .floating-risk-trigger em {
  background: var(--brand-500);
}

.floating-risk-popover {
  width: min(420px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 24px 72px rgba(15, 23, 42, 0.22);
}

.floating-risk-popover-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--hairline);
  padding: 14px 16px;
}

.floating-risk-popover-header div,
.floating-risk-item-copy {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  min-width: 0;
}

.floating-risk-list {
  display: grid;
  max-height: min(430px, calc(100vh - 220px));
  overflow: auto;
  padding: 8px;
}

.floating-risk-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-gap: 10px;
  gap: 10px;
  align-items: flex-start;
  border-radius: 12px;
  color: inherit;
  padding: 10px;
  text-decoration: none;
}

.floating-risk-item:hover {
  background: var(--surface-sunk);
}

.floating-risk-item-icon {
  width: 34px;
  height: 34px;
  background: var(--brand-50);
  color: var(--brand-500);
}

.floating-risk-item.tone-danger .floating-risk-item-icon {
  background: var(--c-danger-soft);
  color: #dc2626;
}

.floating-risk-item.tone-warning .floating-risk-item-icon {
  background: var(--accent-50);
  color: var(--accent-500);
}

.floating-risk-item.tone-success .floating-risk-item-icon {
  background: var(--surface-sunk);
  color: var(--c-success);
}

.floating-risk-item-copy em {
  color: var(--brand-500);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.quotation-compare-summary,
.quotation-rule-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  grid-gap: 12px;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: var(--brand-50);
  padding: 14px;
  margin-bottom: 14px;
}

.quotation-compare-summary > div,
.quotation-rule-summary-strip span {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
}

.quotation-compare-summary span,
.quotation-rule-summary-strip strong {
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 800;
}

.quotation-compare-summary strong,
.quotation-rule-summary-strip strong {
  color: var(--ink);
  font-size: 15px;
}

.quotation-compare-summary small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
}

.quotation-version-step {
  grid-template-columns: 64px minmax(0, 1fr) 150px 92px;
  align-items: center;
  position: relative;
}

.quotation-version-step::before {
  content: "";
  position: absolute;
  left: 46px;
  top: 48px;
  bottom: -18px;
  width: 2px;
  background: var(--hairline);
}

.quotation-version-step:last-child::before {
  display: none;
}

.quotation-version-step > span {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink);
  font-weight: 900;
}

.quotation-version-step.current > span {
  background: var(--brand-500);
  color: var(--ink-inverse);
}

.quotation-version-step em,
.quotation-version-step b {
  justify-self: end;
  color: var(--ink);
  font-style: normal;
  font-size: 13px;
}

.quotation-version-step b {
  border-radius: 999px;
  background: var(--surface-sunk);
  padding: 5px 8px;
}

.quotation-audit-event {
  grid-template-columns: 90px minmax(0, 1fr);
  position: relative;
}

.quotation-audit-event::before {
  content: "";
  position: absolute;
  left: 76px;
  top: 18px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--brand-500);
  box-shadow: 0 0 0 4px var(--brand-100);
}

.quotation-audit-event.type-approval::before {
  background: var(--c-warning);
  box-shadow: 0 0 0 4px var(--accent-50);
}

.quotation-audit-event.type-export::before {
  background: var(--cyan-500);
  box-shadow: 0 0 0 4px var(--cyan-100);
}

.quotation-audit-event > span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.quotation-field-diff {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.quotation-field-diff > span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.quotation-field-diff > strong {
  color: var(--ink);
  font-size: 18px;
}

.quotation-field-diff > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
  gap: 10px;
}

.quotation-field-diff p {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  margin: 0;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface-sunk);
  padding: 12px;
}

.quotation-field-diff b {
  color: var(--ink);
  font-size: 14px;
}

.quotation-field-diff em {
  color: var(--ink-2);
  font-style: normal;
  line-height: 1.6;
}

.quotation-rule-summary-strip {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.quotation-rule-builder article {
  grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr) 180px;
  align-items: center;
}

.quotation-rule-builder article > div {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.quotation-rule-builder article > div span {
  width: -moz-fit-content;
  width: fit-content;
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink-2);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 800;
}

.quotation-rule-builder p {
  display: flex;
  gap: 8px;
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

.quotation-rule-builder p b {
  color: var(--brand-500);
}

.workflow-approval-drawer {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 150px);
  overflow: auto;
}

.workflow-timeline-panel {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 14px;
  margin: 14px 0;
}

.workflow-timeline-list {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  margin-top: 10px;
}

.workflow-timeline-step {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-gap: 9px;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--hairline-strong);
  border-radius: 8px;
  background: var(--surface);
}

.workflow-timeline-step::before {
  display: none;
}

.workflow-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid var(--hairline-strong);
  background: var(--surface);
  margin-top: 5px;
}

.workflow-timeline-step.state-done .workflow-timeline-dot {
  border-color: var(--cat-green);
  background: var(--cat-green);
  box-shadow: 0 0 0 3px var(--c-success-soft);
}

.workflow-timeline-step.state-current .workflow-timeline-dot {
  border-color: var(--brand-500);
  background: var(--brand-500);
  box-shadow: 0 0 0 3px var(--brand-100);
}

.workflow-timeline-step.state-overdue .workflow-timeline-dot,
.workflow-timeline-step.state-rejected .workflow-timeline-dot,
.workflow-timeline-step.state-cancelled .workflow-timeline-dot {
  border-color: var(--c-danger);
  background: var(--c-danger);
  box-shadow: 0 0 0 3px var(--c-danger-soft);
}

.workflow-timeline-step.state-current {
  border-color: var(--brand-200);
  border-left-color: var(--brand-500);
  background: color-mix(in srgb, var(--brand-100) 42%, var(--surface));
}

.workflow-timeline-step.state-done {
  border-left-color: var(--cat-green);
  background: var(--surface);
}

.workflow-timeline-step.state-waiting {
  border-left-color: var(--hairline-strong);
  background: var(--surface-sunk);
  opacity: 0.78;
}

.workflow-timeline-step.state-overdue,
.workflow-timeline-step.state-rejected,
.workflow-timeline-step.state-cancelled {
  border-color: var(--c-danger-soft);
  border-left-color: var(--c-danger);
}

.workflow-timeline-step strong {
  color: var(--ink);
  font-size: 14px;
}

.workflow-timeline-step small {
  display: block;
  color: var(--ink-2);
  font-size: 12px;
  margin: 3px 0 5px;
}

.workflow-timeline-step p {
  margin: 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.55;
}

/* 审批节点：卡片式轨迹，标题/状态/时间同一眼扫描区，责任链收敛到一行。 */
.workflow-timeline-body {
  min-width: 0;
}
.workflow-timeline-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.workflow-timeline-title {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex-wrap: wrap;
}
.workflow-timeline-when {
  color: var(--ink-3);
  font-size: 12px;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.workflow-timeline-who {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 0;
  font-size: 12.5px;
  flex-wrap: wrap;
}
.workflow-timeline-label {
  color: var(--ink-3);
  font-size: 12px;
}
.workflow-timeline-actor {
  font-weight: 600;
  color: var(--ink);
}
.workflow-timeline-role {
  max-width: 460px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 1px 8px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: 11px;
  color: var(--ink-2);
  background: var(--surface);
}
.workflow-timeline-note {
  width: -moz-fit-content;
  width: fit-content;
  max-width: min(640px, 100%);
  margin: 7px 0 0;
  padding: 5px 8px;
  border-left: 2px solid var(--hairline);
  background: color-mix(in srgb, var(--surface-sunk) 72%, var(--surface));
  border-radius: 0 5px 5px 0;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.5;
}
.workflow-timeline-note span {
  color: var(--ink-3);
}
.workflow-timeline-note.is-empty {
  color: var(--ink-3);
  background: transparent;
  border-left-color: var(--surface-soft);
}
.wf-badge {
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
}
.wf-badge.is-submit {
  background: var(--brand-100);
  color: var(--brand-600);
}
.wf-badge.is-approve {
  background: var(--c-success-soft);
  color: var(--c-success-ink);
}
.wf-badge.is-reject {
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}
.wf-badge.is-pending {
  background: #fff7ed;
  color: #c2410c;
}
.wf-badge.is-waiting {
  background: var(--surface-soft);
  color: var(--ink-3);
}

.approval-progress-summarybar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
}
.approval-progress-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.approval-progress-title strong {
  color: var(--ink);
  font-size: 14px;
}
.approval-progress-title span {
  color: var(--ink-2);
  font-size: 12px;
}
.approval-progress-facts {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.approval-progress-facts > div {
  min-width: 116px;
  padding: 5px 8px;
  border-left: 1px solid var(--hairline);
}
.approval-progress-facts dt {
  color: var(--ink-3);
  font-size: 11px;
  line-height: 1.2;
}
.approval-progress-facts dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.workflow-drawer-footer {
  position: -webkit-sticky;
  position: sticky;
  bottom: -1px;
  margin: 14px -4px -4px;
  border-top: 1px solid var(--hairline);
  background: var(--surface);
  padding-top: 14px;
}

.tenant-capacity-dashboard,
.tenant-request-table-card {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface);
  padding: 20px;
  margin-top: 20px;
}

.tenant-capacity-meters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 16px;
  gap: 16px;
  margin-top: 14px;
}

.capacity-meter {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 16px;
}

.capacity-meter > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.capacity-meter span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.capacity-meter strong {
  color: var(--ink);
  font-size: 18px;
}

.capacity-meter-track {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--hairline);
}

.capacity-meter-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-500);
}

.capacity-meter.tone-warning .capacity-meter-track span {
  background: var(--c-warning);
}

.capacity-meter.tone-danger .capacity-meter-track span {
  background: var(--c-danger);
}

.capacity-meter small {
  color: var(--ink-2);
  font-size: 12px;
}

.approval-flow-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  grid-gap: 12px;
  gap: 12px;
  padding: 8px 0 12px;
  overflow: visible;
}

.approval-flow-rail > div {
  position: relative;
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  min-width: 0;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  padding: 14px 14px 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.approval-flow-rail > div:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 31px;
  right: -10px;
  width: 10px;
  height: 2px;
  background: var(--hairline-strong);
}

.approval-flow-rail span {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--brand-500);
  color: var(--ink-inverse);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.22);
}

.approval-flow-rail strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.4;
}

.approval-flow-rail small {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.approval-flow-rail .condition-node {
  border-color: var(--accent-300);
  background:
    radial-gradient(circle at top right, rgba(251, 146, 60, 0.12), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, var(--accent-50) 100%);
}

.status-stack {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-width: 140px;
}

.segmented-control {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 4px;
  max-width: 320px;
  padding: 4px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-sunk);
}

.segmented-control button {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-2);
  font-weight: 800;
  cursor: pointer;
}

.segmented-control button.active {
  background: var(--surface);
  color: var(--brand-600);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.fulfillment-wizard {
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

.fulfillment-wizard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  background: var(--brand-50);
  padding: 14px;
}

.fulfillment-wizard-head strong,
.fulfillment-wizard-head span {
  display: block;
}

.fulfillment-wizard-head span {
  color: var(--ink-2);
  font-size: 13px;
}

.fulfillment-step-grid,
.production-kanban-grid,
.material-line-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.fulfillment-step,
.production-kanban-column,
.material-line-card {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.fulfillment-step {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.fulfillment-step span,
.production-kanban-column small,
.material-line-card p,
.material-line-card dt {
  color: var(--ink-2);
  font-size: 12px;
}

.fulfillment-step strong,
.production-kanban-column strong,
.material-line-card strong {
  color: var(--ink);
}

.fulfillment-step p,
.material-line-card p {
  margin: 0;
  line-height: 1.55;
}

.fulfillment-step.step-done {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
}

.fulfillment-step.step-ready {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.fulfillment-step.step-pending {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.fulfillment-step.step-blocked {
  border-color: var(--c-danger-border);
  background: var(--c-danger-soft);
}

.production-kanban-column {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
}

.production-kanban-column span {
  color: var(--brand-600);
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
}

.material-line-card {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

.material-line-card header {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.material-line-card header span {
  color: var(--ink-2);
  font-size: 13px;
}

.material-line-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin: 0;
}

.material-line-card dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-weight: 800;
  overflow-wrap: anywhere;
}

.excel-cost-architecture-panel,
.quotation-costing-workbench .module-block {
  overflow: visible;
}

.excel-cost-workflow-strip,
.quotation-cost-rule-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  grid-gap: 8px;
  gap: 8px;
  margin-top: 14px;
}

.excel-cost-workflow-strip article,
.quotation-cost-rule-strip article {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  min-height: 82px;
  border: 1px solid var(--brand-100);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.excel-cost-workflow-strip span,
.quotation-cost-rule-strip span {
  color: var(--brand-500);
  font-size: 12px;
  font-weight: 900;
}

.excel-cost-workflow-strip strong,
.quotation-cost-rule-strip strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.quotation-cost-rule-strip article.is-done {
  border-color: var(--cyan-300);
  background: var(--surface-sunk);
}

.quotation-cost-rule-strip article.is-active {
  border-color: var(--brand-200);
  background: var(--brand-50);
}

.quotation-cost-rule-strip article.is-pending {
  border-color: var(--hairline);
  background: var(--surface-sunk);
}

@media (max-width: 900px) {
  .quotation-costing-start-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .quotation-costing-start-actions {
    justify-content: flex-start;
    width: 100%;
  }

  .quotation-costing-result-panel,
  .quotation-costing-source-panel {
    grid-template-columns: 1fr;
  }

  .quotation-costing-breakdown-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .quotation-costing-breakdown table,
  .quotation-costing-breakdown tbody,
  .quotation-costing-breakdown tr,
  .quotation-costing-breakdown th,
  .quotation-costing-breakdown td {
    display: block;
    width: 100%;
  }

  .quotation-costing-breakdown th {
    padding-bottom: 2px;
  }

  .quotation-costing-breakdown td {
    padding-top: 2px;
  }

  .quotation-costing-breakdown td:nth-child(2) {
    width: 100%;
    white-space: normal;
  }

  .quotation-combination-cost-card header,
  .quotation-combination-cost-card dl {
    grid-template-columns: 1fr;
  }
}

.excel-cost-rule-grid,
.quotation-cost-rule-grid,
.excel-cost-rule-mini-grid,
.excel-rule-note-grid,
.quotation-cost-candidate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-gap: 10px;
  gap: 10px;
  margin-top: 14px;
}

.excel-cost-rule-grid article,
.quotation-cost-rule-grid article,
.excel-cost-rule-mini-grid article,
.excel-rule-note-grid article,
.quotation-cost-candidate-grid article {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.excel-cost-rule-grid article > div,
.quotation-cost-candidate-grid article > div:first-child {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
}

.excel-cost-rule-grid span,
.quotation-cost-rule-grid span,
.excel-cost-rule-mini-grid span,
.excel-rule-note-grid span,
.quotation-cost-candidate-grid span {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}

.excel-cost-rule-grid strong,
.quotation-cost-rule-grid strong,
.excel-cost-rule-mini-grid strong,
.excel-rule-note-grid strong,
.quotation-cost-candidate-grid strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.excel-cost-rule-grid p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
}

.excel-cost-rule-grid dl,
.quotation-cost-candidate-grid dl {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  margin: 0;
}

.excel-cost-rule-grid dt,
.quotation-cost-candidate-grid dt {
  color: var(--ink-2);
  font-size: 12px;
}

.excel-cost-rule-grid dd,
.quotation-cost-candidate-grid dd {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.excel-cost-rule-grid small,
.quotation-cost-rule-grid small,
.excel-cost-rule-mini-grid small,
.quotation-cost-candidate-grid small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.45;
}

.quotation-cost-candidate-grid article.is-selected {
  border-color: var(--cyan-500);
  background: var(--surface-sunk);
}

.quotation-action-note {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--surface-sunk);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  padding: 0 10px;
  white-space: nowrap;
}

.quotation-card-actions .quotation-action-note,
.page-header-actions .quotation-action-note,
.quotation-list-toolbar .quotation-action-note {
  min-width: 72px;
}

.danger-action {
  color: var(--c-danger-ink);
}

.danger-action:hover {
  border-color: var(--c-danger-border);
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
}

.quotation-disclosure {
  padding: 0;
}

.quotation-disclosure > summary {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}

.quotation-disclosure > summary::-webkit-details-marker {
  display: none;
}

.quotation-disclosure > summary span {
  display: grid;
  grid-gap: 3px;
  gap: 3px;
}

.quotation-disclosure > summary strong {
  color: var(--ink);
  font-size: 15px;
}

.quotation-disclosure > summary small {
  color: var(--ink-2);
  font-size: 12px;
}

.quotation-disclosure > summary em {
  border-radius: 999px;
  background: var(--surface-sunk);
  color: var(--ink-2);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  padding: 5px 10px;
}

.quotation-disclosure[open] > summary {
  border-bottom: 1px solid var(--hairline);
}

.quotation-disclosure[open] > summary em {
  background: var(--brand-100);
  color: var(--cyan-600);
}

.quotation-disclosure > :not(summary) {
  margin: 16px 18px 18px;
}

.quotation-disclosure-actions {
  display: flex;
  justify-content: flex-end;
}

.approval-flow-designer-hero,
.approval-flow-designer-metrics article,
.acd-editor-wrap {
  border: 1px solid var(--brand-100);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
}

.approval-flow-designer-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
}

.approval-flow-designer-hero h1 {
  margin: 4px 0;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.15;
}

.approval-flow-designer-hero p {
  margin: 0;
  color: var(--ink-2);
}

.approval-flow-designer-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.approval-flow-command-strip {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.approval-flow-command-card {
  min-height: 108px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 40%),
    linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  padding: 14px;
  text-align: left;
  display: grid;
  grid-gap: 7px;
  gap: 7px;
  color: inherit;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    transform 0.16s ease;
}

.approval-flow-command-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-200);
  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.08);
}

.approval-flow-command-card.active {
  border-color: var(--brand-600);
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.16), transparent 42%),
    linear-gradient(180deg, #ffffff 0%, var(--brand-50) 100%);
  box-shadow: 0 18px 30px rgba(37, 99, 235, 0.12);
}

.approval-flow-command-card span,
.approval-flow-command-card small,
.approval-flow-command-card em {
  display: block;
}

.approval-flow-command-card span {
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.approval-flow-command-card strong {
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
}

.approval-flow-command-card small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.65;
}

.approval-flow-command-card em {
  margin-top: auto;
  justify-self: start;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.approval-flow-designer-summary {
  display: grid;
  grid-template-columns: minmax(280px, 0.95fr) minmax(0, 1.05fr);
  grid-gap: 14px;
  gap: 14px;
}

.approval-flow-summary-panel,
.approval-flow-risk-board {
  border: 1px solid var(--brand-100);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
  padding: 14px;
}

.approval-flow-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.approval-flow-summary-grid div {
  min-height: 74px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 10px;
  display: grid;
  align-content: space-between;
}

.approval-flow-summary-grid span,
.approval-flow-summary-grid small {
  color: var(--ink-2);
  font-size: 12px;
}

.approval-flow-summary-grid strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.approval-flow-capacity-strip {
  margin-top: 12px;
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background: var(--surface-sunk);
  padding: 10px;
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.approval-flow-capacity-strip div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.approval-flow-capacity-strip strong {
  color: var(--ink);
  font-size: 13px;
}

.approval-flow-capacity-strip small {
  color: var(--ink-2);
  font-size: 12px;
}

.approval-flow-capacity-strip i {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--hairline);
}

.approval-flow-capacity-strip em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand-500);
}

.approval-flow-capacity-strip.warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
}

.approval-flow-capacity-strip.warning em {
  background: var(--c-warning);
}

.approval-flow-risk-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.approval-flow-risk-card {
  min-height: 104px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
  padding: 14px 16px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.approval-flow-risk-card.tone-warning {
  border-color: var(--accent-200);
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-50) 100%);
}

.approval-flow-risk-card.tone-danger {
  border-color: var(--c-danger-border);
  background: linear-gradient(180deg, #ffffff 0%, var(--c-danger-soft) 100%);
}

.approval-flow-risk-card.tone-success {
  border-color: var(--c-success-border);
  background: linear-gradient(180deg, #ffffff 0%, var(--surface-sunk) 100%);
}

.approval-flow-risk-card strong,
.approval-flow-risk-card span {
  display: block;
}

.approval-flow-risk-card strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.35;
}

.approval-flow-risk-card span {
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.65;
}

.approval-flow-list-headline {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.approval-flow-list-caption {
  margin: -6px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.7;
}

.approval-flow-row-pills {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.approval-flow-row-pills span {
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-800);
  padding: 4px 9px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.approval-flow-row-pills .tone-success {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
  color: var(--c-success-ink);
}

.approval-flow-row-pills .tone-warning {
  border-color: var(--accent-200);
  background: var(--accent-50);
  color: var(--accent-600);
}

.approval-policy-list {
  max-height: calc(100vh - 220px);
  overflow: auto;
}

.acd-editor-wrap {
  padding: 16px;
  display: grid;
  grid-gap: 16px;
  gap: 16px;
}

.approval-flow-design-strip {
  border: 1px solid var(--brand-100);
  border-radius: 14px;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  padding: 14px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.2fr) auto;
  grid-gap: 14px;
  gap: 14px;
  align-items: stretch;
}

.approval-flow-design-strip-head,
.approval-flow-design-strip-links {
  display: grid;
  align-content: start;
  grid-gap: 6px;
  gap: 6px;
}

.approval-flow-design-strip-head strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1.2;
}

.approval-flow-design-strip-head span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
}

.approval-flow-design-strip-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.approval-flow-design-strip-facts div {
  min-height: 78px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  padding: 10px 12px;
  display: grid;
  align-content: space-between;
  grid-gap: 6px;
  gap: 6px;
}

.approval-flow-design-strip-facts span,
.approval-flow-design-strip-facts small {
  color: var(--ink-2);
  font-size: 12px;
}

.approval-flow-design-strip-facts strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.approval-flow-design-strip-links {
  justify-items: stretch;
  align-content: center;
  min-width: 160px;
}

.acd-inspector-guide {
  border: 1px solid var(--brand-100);
  border-radius: 12px;
  background:
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  padding: 12px;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.acd-inspector-head-compact strong {
  font-size: 16px;
}

.acd-inspector-guide-list {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.acd-inspector-guide-list div {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  grid-gap: 10px;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  padding: 9px 10px;
}

.acd-inspector-guide-list em {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--brand-400);
  margin-top: 4px;
}

.acd-inspector-guide-list span {
  color: var(--brand-800);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.acd-inspector-guide-warning {
  margin: 0;
  border-radius: 10px;
  background: var(--accent-50);
  color: var(--accent-700);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.65;
}

.acd-meta,
.acd-board,
.acd-canvas,
.acd-inspector {
  min-width: 0;
}

.acd-board {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  grid-gap: 16px;
  gap: 16px;
  align-items: start;
}

.acd-canvas,
.acd-inspector {
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, var(--surface) 100%);
  padding: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.acd-canvas {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  overflow: hidden;
}

.acd-flowunit {
  display: grid;
  justify-items: center;
  grid-gap: 12px;
  gap: 12px;
}

.acd-gap {
  width: 100%;
  display: grid;
  justify-items: center;
  position: relative;
}

.acd-gap::before {
  content: "";
  width: 2px;
  height: 16px;
  border-radius: 999px;
  background: var(--hairline);
}

.acd-gap.dragover::before {
  background: var(--brand-600);
}

.acd-add {
  width: 32px;
  height: 32px;
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--surface);
  color: var(--brand-600);
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
}

.acd-add:disabled {
  color: var(--ink-3);
  background: var(--surface-sunk);
}

.acd-node {
  width: min(100%, 540px);
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: start;
  grid-gap: 10px;
  gap: 10px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.acd-node.selected {
  border-color: var(--brand-600);
  background: linear-gradient(180deg, #ffffff 0%, var(--brand-50) 100%);
  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.12);
}

.acd-node-terminal {
  justify-self: center;
  width: min(100%, 220px);
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  font-weight: 800;
}

.acd-node-start {
  border-color: var(--brand-200);
  background: var(--brand-50);
  color: var(--brand-600);
}

.acd-node-end {
  border-color: var(--c-success-border);
  background: var(--surface-sunk);
  color: var(--c-success-ink);
}

.acd-node-order,
.acd-node-sla {
  align-self: center;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-600);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 800;
}

.acd-node-sla {
  background: var(--surface-sunk);
  color: var(--ink-2);
}

.acd-node-body {
  min-width: 0;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}

.acd-node-body strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.4;
}

.acd-node-body small {
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.acd-node-del {
  width: 28px;
  height: 28px;
  border: 1px solid var(--c-danger-border);
  border-radius: 999px;
  background: var(--c-danger-soft);
  color: var(--c-danger-ink);
  font-size: 16px;
  line-height: 1;
}

.acd-node-del:disabled {
  border-color: var(--hairline);
  background: var(--surface-sunk);
  color: var(--ink-3);
}

.acd-canvas-hint {
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.7;
  text-align: center;
}

.acd-inspector {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  align-self: start;
  height: -moz-fit-content;
  height: fit-content;
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}

.acd-inspector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.acd-inspector-head strong {
  color: var(--ink);
  font-size: 18px;
}

.acd-inspector-head span {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}

.acd-inspector-label {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
}

.acd-inspector-empty {
  margin: 0;
  line-height: 1.7;
}

.acd-condition {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}

.acd-condition-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.acd-condition-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 120px;
  grid-gap: 10px;
  gap: 10px;
}

.acd-condition-row input,
.acd-condition-row select {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--surface);
}

@media (max-width: 1100px) {
  .two-column-page,
  .workflow-layout,
  .organization-detail-layout,
  .organization-layout,
  .quotation-task-grid,
  .quotation-audit-pattern-grid {
    grid-template-columns: 1fr;
  }

  .workflow-preview,
  .side-panel,
  .quotation-risk-panel,
  .quotation-field-diff,
  .organization-context-card {
    position: static;
  }

  .floating-risk-center {
    right: 16px;
    bottom: 16px;
  }

  .quotation-compare-summary,
  .quotation-rule-builder article,
  .quotation-version-step,
  .tenant-capacity-meters,
  .fulfillment-step-grid,
  .production-kanban-grid,
  .material-line-grid {
    grid-template-columns: 1fr;
  }

  .fulfillment-wizard-head {
    display: grid;
  }

  .approval-flow-designer-summary,
  .approval-flow-command-strip,
  .approval-flow-summary-grid,
  .approval-flow-risk-list,
  .approval-flow-design-strip,
  .approval-flow-design-strip-facts,
  .acd-board,
  .acd-condition-row,
  .approval-flow-fields,
  .approval-policy-workbench {
    grid-template-columns: 1fr;
  }

  .approval-policy-list {
    max-height: none;
  }

  .approval-policy-detail {
    position: static;
  }

  .approval-policy-actions {
    justify-content: flex-start;
  }

  .acd-inspector {
    position: static;
  }
}

@media (max-width: 1100px) {
  .quotation-list-focus-strip,
  .quotation-list-action-row,
  .quotation-list-overview-meta,
  .quotation-list-draft-primary-grid,
  .quotation-list-advanced-grid,
  .customer-overview-grid,
  .customer-chart-grid,
  .customer-detail-grid {
    grid-template-columns: 1fr;
  }

  .quotation-list-focus-metrics,
  .quotation-list-path-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .customer-overview-main,
  .customer-activity-list li {
    grid-template-columns: 1fr;
  }

  .customer-overview-health {
    min-width: 0;
  }
}

@media (max-width: 720px) {
  .quotation-list-focus-metrics,
  .quotation-list-path-strip {
    grid-template-columns: 1fr;
  }

  .quotation-list-secondary-details > summary,
  .quotation-list-advanced-settings > summary {
    align-items: flex-start;
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .approval-flow-designer-hero {
    flex-direction: column;
  }

  .approval-flow-designer-metrics {
    grid-template-columns: 1fr;
  }

  .approval-flow-design-strip-links {
    display: grid;
    grid-template-columns: 1fr;
  }

  .approval-policy-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .acd-node {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .acd-node-sla,
  .acd-node-del {
    justify-self: start;
  }
}

/* ---- Approval flow designer ---- */
.approval-flow-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
.approval-flow-fields .field.field-wide {
  grid-column: 1 / -1;
}
.approval-flow-fields .field {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}
.approval-flow-fields .field > span {
  font-size: 12px;
  color: var(--ink-2);
}
.approval-flow-fields .field.field-inline {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
}
.approval-flow-fields .field input[type="text"],
.approval-flow-fields .field input[type="number"],
.approval-flow-fields .field select,
.approval-flow-fields .field textarea {
  border: 1px solid var(--hairline);
  border-radius: 6px;
  padding: 8px 10px;
  font: inherit;
  background: var(--surface);
}
.approval-flow-steps {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
  margin-top: 16px;
}
.approval-flow-step {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 14px;
  background: var(--surface-sunk);
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}
.approval-flow-step-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.approval-flow-step-actions {
  display: flex;
  gap: 6px;
}
.approval-flow-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.approval-flow-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 4px 12px;
  background: var(--surface);
  font-size: 13px;
  cursor: pointer;
}
.approval-flow-footer {
  display: flex;
  gap: 10px;
  margin-top: 0;
}
.approval-flow-fields .field textarea,
.approval-flow-step .field.field-wide {
  grid-column: 1 / -1;
}
.muted {
  color: var(--ink-3);
  font-size: 12px;
}

/* 全局必填项红星标记：任意表单给 label 的文字 span 加 className="field-required" 即可。 */
.field-required::after {
  content: " *";
  color: var(--c-danger);
  font-weight: 700;
}

/* ===================================================================== */
/* 经营驾驶舱 + 深色 navy 侧边栏（统一落地 2026-06）                       */
/* ===================================================================== */

/* ===== 侧边栏 v3 · 扁平图标列表 + 浅/深双模式 ===== */
/* —— 结构(与主题无关) —— */
.sider .menu { padding: 6px 8px; display: grid; grid-gap: 2px; gap: 2px; align-content: start; }
.sider .menu-group + .menu-group { margin-top: 2px; padding-top: 0; border-top: 0; }

/* 一级行:直达链接 / 折叠分组触发器,统一主行外观(图标 + 14px) */
.sider .menu-group-link,
.sider .menu-group-trigger {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 0 11px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.sider .menu-group-link .menu-icon,
.sider .menu-group-trigger .menu-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 0;
  background: transparent;
}
.sider .menu-group-link .menu-icon svg,
.sider .menu-group-trigger .menu-icon svg { width: 19px; height: 19px; }
.sider .menu-group-title,
.sider .menu-group-link .menu-label {
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sider .menu-group-toggle { margin-left: auto; }
.sider .menu-group-trigger b { display: none; }
.sider .menu-group-meta { display: none; }

/* 子项(叶子):次级,缩进 + 圆点 + 13px */
.sider .menu-children { display: grid; grid-gap: 2px; gap: 2px; margin: 2px 0 6px 19px; padding-left: 12px; }
.sider .menu-leaf {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.sider .menu-leaf-dot { width: 5px; height: 5px; border-radius: 999px; flex: 0 0 auto; }
/* 底部:模式开关 + 收起 */
.sider-footer { display: flex; align-items: center; gap: 8px; }
.sider-collapse-btn { flex: 1 1; }
.nav-theme-toggle { display: inline-flex; flex: 0 0 auto; gap: 2px; padding: 2px; border-radius: 9px; }
.nav-theme-toggle button {
  width: 30px;
  height: 28px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: inherit;
}
.nav-theme-toggle button svg { width: 16px; height: 16px; }
.app-shell.sider-collapsed .nav-theme-toggle { display: none; }
.app-shell.sider-collapsed .sider .menu-group-link .menu-label,
.app-shell.sider-collapsed .sider .menu-group-title,
.app-shell.sider-collapsed .sider .menu-group-toggle,
.app-shell.sider-collapsed .sider .menu-children { display: none; }
.app-shell.sider-collapsed .sider .menu-group-link,
.app-shell.sider-collapsed .sider .menu-group-trigger { justify-content: center; padding: 0; gap: 0; }

/* —— 深色 navy 模式(默认) —— */
.nav-theme-dark .sider { background: linear-gradient(180deg, var(--brand-900), var(--ink)); border-right-color: rgba(255, 255, 255, 0.08); }
.nav-theme-dark .sider .brand { border-bottom-color: rgba(255, 255, 255, 0.12); }
.nav-theme-dark .sider .brand strong { color: var(--ink-inverse); }
.nav-theme-dark .sider .brand small { color: rgba(255, 255, 255, 0.55); }
.nav-theme-dark .sider .menu-group-link,
.nav-theme-dark .sider .menu-group-trigger { color: rgba(255, 255, 255, 0.82); }
.nav-theme-dark .sider .menu-group-link .menu-icon,
.nav-theme-dark .sider .menu-group-trigger .menu-icon { color: rgba(255, 255, 255, 0.62); }
.nav-theme-dark .sider .menu-group-toggle { color: rgba(255, 255, 255, 0.45); }
.nav-theme-dark .sider .menu-group-link:hover,
.nav-theme-dark .sider .menu-group-trigger:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink-inverse); }
.nav-theme-dark .sider .menu-group-trigger:hover .menu-icon,
.nav-theme-dark .sider .menu-group-link:hover .menu-icon { color: var(--ink-inverse); }
.nav-theme-dark .sider .menu-group-link.active { background: var(--brand-500); color: var(--ink-inverse); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32); }
.nav-theme-dark .sider .menu-group-link.active .menu-icon { color: var(--ink-inverse); }
.nav-theme-dark .sider .menu-children { border-left: 1px solid rgba(255, 255, 255, 0.16); }
.nav-theme-dark .sider .menu-leaf { color: rgba(255, 255, 255, 0.66); }
.nav-theme-dark .sider .menu-leaf-dot { background: rgba(255, 255, 255, 0.4); }
.nav-theme-dark .sider .menu-leaf:hover { background: rgba(255, 255, 255, 0.08); color: var(--ink-inverse); }
.nav-theme-dark .sider .menu-leaf.active { background: rgba(47, 107, 216, 0.34); color: var(--ink-inverse); font-weight: 700; }
.nav-theme-dark .sider .menu-leaf.active .menu-leaf-dot { background: var(--cyan-400); }
.nav-theme-dark .sider .menu-empty { border-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.6); }
.nav-theme-dark .sider-footer { border-top-color: rgba(255, 255, 255, 0.12); }
.nav-theme-dark .sider-collapse-btn { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.82); }
.nav-theme-dark .toggle-icon { background: rgba(255, 255, 255, 0.14); color: var(--ink-inverse); }
.nav-theme-dark .nav-theme-toggle { background: rgba(255, 255, 255, 0.08); }
.nav-theme-dark .nav-theme-toggle button { color: rgba(255, 255, 255, 0.55); }
.nav-theme-dark .nav-theme-toggle button.on { background: rgba(255, 255, 255, 0.18); color: var(--ink-inverse); }

/* —— 浅色模式 —— */
.nav-theme-light .sider { background: var(--surface); border-right-color: var(--hairline); }
.nav-theme-light .sider .brand { border-bottom-color: var(--hairline); }
.nav-theme-light .sider .brand strong { color: var(--ink); }
.nav-theme-light .sider .brand small { color: var(--ink-3); }
.nav-theme-light .sider .menu-group-link,
.nav-theme-light .sider .menu-group-trigger { color: var(--ink-2); }
.nav-theme-light .sider .menu-group-link .menu-icon,
.nav-theme-light .sider .menu-group-trigger .menu-icon { color: var(--ink-3); }
.nav-theme-light .sider .menu-group-toggle { color: var(--ink-3); }
.nav-theme-light .sider .menu-group-link:hover,
.nav-theme-light .sider .menu-group-trigger:hover { background: var(--brand-50); color: var(--brand-700); }
.nav-theme-light .sider .menu-group-trigger:hover .menu-icon,
.nav-theme-light .sider .menu-group-link:hover .menu-icon { color: var(--brand-600); }
.nav-theme-light .sider .menu-group-link.active { background: var(--brand-500); color: var(--ink-inverse); box-shadow: 0 6px 16px rgba(47, 107, 216, 0.28); }
.nav-theme-light .sider .menu-group-link.active .menu-icon { color: var(--ink-inverse); }
.nav-theme-light .sider .menu-children { border-left: 1px solid var(--brand-100); }
.nav-theme-light .sider .menu-leaf { color: var(--ink-2); }
.nav-theme-light .sider .menu-leaf-dot { background: var(--ink-3); }
.nav-theme-light .sider .menu-leaf:hover { background: var(--brand-50); color: var(--brand-700); }
.nav-theme-light .sider .menu-leaf.active { background: var(--brand-50); color: var(--brand-700); font-weight: 700; }
.nav-theme-light .sider .menu-leaf.active .menu-leaf-dot { background: var(--brand-500); }
.nav-theme-light .sider-footer { border-top-color: var(--hairline); }
.nav-theme-light .sider-collapse-btn { background: var(--surface-sunk); border-color: var(--hairline); color: var(--ink-2); }
.nav-theme-light .toggle-icon { background: var(--brand-100); color: var(--brand-700); }
.nav-theme-light .nav-theme-toggle { background: var(--surface-sunk); }
.nav-theme-light .nav-theme-toggle button { color: var(--ink-3); }
.nav-theme-light .nav-theme-toggle button.on { background: var(--surface); color: var(--brand-600); box-shadow: 0 1px 3px rgba(20, 38, 74, 0.15); }

/* 选中分组的一级行:只提亮文字,不要白底(修复深色下白块出现在一级标题) */
.nav-theme-dark .sider .menu-group.group-active .menu-group-trigger { background: transparent; color: var(--ink-inverse); }
.nav-theme-dark .sider .menu-group.group-active .menu-group-trigger .menu-icon { color: rgba(255, 255, 255, 0.85); }
.nav-theme-dark .sider .menu-group.group-active .menu-group-trigger:hover { background: rgba(255, 255, 255, 0.08); }
.nav-theme-light .sider .menu-group.group-active .menu-group-trigger { background: transparent; color: var(--brand-700); }
.nav-theme-light .sider .menu-group.group-active .menu-group-trigger .menu-icon { color: var(--brand-600); }
.nav-theme-light .sider .menu-group.group-active .menu-group-trigger:hover { background: var(--brand-50); }

/* ══════════════════════════════════════════════════
   工作台 bz-* 设计系统  v3  参照 Linear/Stripe/Vercel
   ══════════════════════════════════════════════════ */

/* —— 分区小标题 —— */
.bz-sec { margin: 22px 0 12px; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: 0; display: flex; align-items: center; gap: 10px; }
.bz-sec::before { content: ""; width: 3px; height: 14px; border-radius: 99px; background: linear-gradient(180deg, var(--brand-500) 0%, var(--cyan-400) 100%); flex-shrink: 0; }
.bz-sec span { color: var(--ink-3); font-weight: 500; font-size: 12px; }

/* —— 渐变头条 Hero —— */
.bz-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin-bottom: 4px;
  background: var(--grad-header);
  color: var(--ink-inverse);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  box-shadow: 0 2px 4px rgba(20,38,74,.12), 0 8px 32px rgba(20,38,74,.22);
}
/* dot-grid overlay */
.bz-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: 4px 4px;
  pointer-events: none;
}
/* right glow */
.bz-hero::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(34,184,198,.2) 0%, transparent 65%);
  pointer-events: none;
}
.bz-greet { position: relative; z-index: 1; min-width: 0; }
.bz-greet h1 { margin: 0; color: #fff; font-size: 30px; font-weight: 900; line-height: 1.1; letter-spacing: -0.025em; }
.bz-greet .date { color: rgba(255,255,255,.65); font-size: 13px; margin-top: 4px; display: block; letter-spacing: 0.01em; }
.bz-health { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.bz-health i {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-style: normal;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  padding: 5px 12px 5px 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .15s;
}
.bz-health i:hover { background: rgba(255,255,255,.18); }
.bz-health b { color: #fff; font-weight: 800; font-size: 15px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; margin-left: 2px; }
.bz-health b.down { color: #fca5a5; }
.bz-hero-actions { position: relative; z-index: 1; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; flex: 0 1 auto; }
.bz-period { display: inline-flex; flex: 0 0 auto; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); border-radius: 10px; padding: 3px; white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bz-period button { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; background: transparent; color: rgba(255,255,255,.75); font: inherit; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.bz-period button:hover { background: rgba(255,255,255,.1); color: #fff; }
.bz-period button.on { background: rgba(255,255,255,.95); color: var(--brand-700); font-weight: 700; box-shadow: 0 1px 6px rgba(20,38,74,.2); }
.bz-report { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.bz-report:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); color: #fff; }
.bz-report svg { width: 14px; height: 14px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* —— 快捷入口 —— */
.bz-quick { display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: 10px; gap: 10px; }
.bz-quick a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 8px 14px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s;
}
.bz-quick a:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(47,107,216,.14); border-color: var(--brand-200); border-bottom-color: var(--brand-400); }
.bz-qi { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; transition: transform .2s var(--ease-out); }
.bz-quick a:hover .bz-qi { transform: scale(1.08); }
.bz-qi svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.bz-quick span { font-size: 12.5px; color: var(--ink-2); font-weight: 600; text-align: center; line-height: 1.2; transition: color .15s; }
.bz-quick a:hover span { color: var(--brand-700); }
.bz-qbadge { position: absolute; top: 10px; right: 14px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--c-danger); color: #fff; font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 5px rgba(224,88,74,.45); }
.bz-qi.qi-blue   { background: linear-gradient(140deg, #cce0ff, #e8f1ff); color: #1d5fc2; }
.bz-qi.qi-cyan   { background: linear-gradient(140deg, #a8e8ef, #d3f1f5); color: #0f7a8a; }
.bz-qi.qi-amber  { background: linear-gradient(140deg, #fad5a8, #fdebd0); color: #b5611a; }
.bz-qi.qi-green  { background: linear-gradient(140deg, #a8ddbf, #d6f0e3); color: #1f7a4f; }
.bz-qi.qi-purple { background: linear-gradient(140deg, #c8c4f8, #e3e1fc); color: #5040c4; }

/* —— 业务链路条 —— */
.bz-pipe {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.bz-pipe a { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; text-decoration: none; border-right: 1px solid var(--hairline); transition: background .15s; }
.bz-pipe a:last-child { border-right: 0; }
.bz-pipe a:hover { background: var(--brand-50); }
.bz-pipe a:not(:last-child)::after { content: "›"; position: absolute; right: -9px; top: 50%; transform: translateY(-50%); z-index: 2; color: var(--brand-300); font-weight: 900; font-size: 18px; line-height: 1; }
.bz-pipe .l { font-size: 11.5px; color: var(--ink-3); font-weight: 600; letter-spacing: 0.01em; }
.bz-pipe .n { font-size: 26px; color: var(--ink); font-weight: 900; line-height: 1; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.bz-pipe .n em { font-size: 13px; font-weight: 600; font-style: normal; color: var(--ink-3); margin-left: 1px; }
/* mini progress rail under number */
.bz-pipe a::before { content: ""; position: absolute; bottom: 0; left: 18px; right: 18px; height: 2px; border-radius: 2px; background: var(--grad-rail); opacity: 0.18; transition: opacity .15s; }
.bz-pipe a:hover::before { opacity: 0.4; }

/* —— KPI 指标卡（左边框 + 色调背景）—— */
.bz-kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 12px; gap: 12px; }
.bz-kpi {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--cat-blue);
  border-radius: var(--radius-md);
  padding: 18px 16px 14px 18px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.bz-kpi:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(47,107,216,.13); }
/* category-tinted diagonal bg */
.bz-kpi::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 100px; height: 80px;
  background: radial-gradient(ellipse at top right, rgba(47,107,216,.06), transparent 70%);
  pointer-events: none;
}
.bz-kpi.cat-amber { border-left-color: var(--cat-amber); }
.bz-kpi.cat-amber::before { background: radial-gradient(ellipse at top right, rgba(245,149,60,.06), transparent 70%); }
.bz-kpi.cat-green  { border-left-color: var(--cat-green); }
.bz-kpi.cat-green::before  { background: radial-gradient(ellipse at top right, rgba(67,176,106,.06), transparent 70%); }
.bz-kpi.cat-cyan   { border-left-color: var(--cat-cyan); }
.bz-kpi.cat-cyan::before   { background: radial-gradient(ellipse at top right, rgba(34,184,198,.06), transparent 70%); }
.bz-kpi.cat-red    { border-left-color: var(--c-danger); }
.bz-kpi.cat-red::before    { background: radial-gradient(ellipse at top right, rgba(224,88,74,.06), transparent 70%); }
.bz-kpi.cat-purple { border-left-color: var(--cat-purple); }
.bz-kpi.cat-purple::before { background: radial-gradient(ellipse at top right, rgba(124,108,240,.06), transparent 70%); }
.bz-kpi .lbl { color: var(--ink-3); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.bz-kpi .val { color: var(--ink); font-size: 28px; line-height: 1; font-weight: 900; letter-spacing: -0.025em; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; margin-top: 2px; }
.bz-kpi .val.pending { color: var(--ink-3); font-size: 18px; font-weight: 700; letter-spacing: 0; }
.bz-kpi .val em { font-size: 13px; font-weight: 600; font-style: normal; color: var(--ink-3); margin-left: 3px; letter-spacing: 0; }
.bz-kpi .meta { display: flex; align-items: center; gap: 7px; font-size: 11px; flex-wrap: wrap; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--hairline); }
.bz-kpi .delta { font-weight: 700; display: inline-flex; align-items: center; gap: 2px; }
.bz-kpi .delta.up   { color: var(--c-success); }
.bz-kpi .delta.down { color: var(--c-danger); }
.bz-kpi .sub { color: var(--ink-3); }
.bz-kpi .tag-pending { border-radius: 6px; background: var(--surface-sunk); color: var(--ink-3); padding: 2px 7px; font-size: 10.5px; font-weight: 700; }

/* —— 图表区栅格 —— */
.bz-charts { display: grid; grid-template-columns: 1.5fr 1fr 1fr; grid-gap: 14px; gap: 14px; }
.bz-ops { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 12px; gap: 12px; }

/* —— 需要关注面板 —— */
.bz-attention { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 14px; gap: 14px; }
.bz-attention .panel { padding: 0; border-radius: var(--radius-md); overflow: hidden; }
.bz-attention .panel header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: var(--surface-sunk);
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 0;
}
.bz-attention .panel header h3 { font-size: 13.5px; font-weight: 700; margin: 0; color: var(--ink); }
.bz-attention .panel header a { font-size: 12px; color: var(--brand-600); font-weight: 600; padding: 3px 8px; border-radius: 6px; background: var(--brand-50); border: 1px solid var(--brand-100); transition: background .15s; }
.bz-attention .panel header a:hover { background: var(--brand-100); }
.bz-attention .panel > div { padding: 4px 12px 8px; }

/* 关注行 */
.bz-att-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  margin: 2px 0;
  transition: background .15s;
  position: relative;
}
.bz-att-row::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 3px; border-radius: 2px; background: var(--brand-300); opacity: 0; transition: opacity .15s; }
.bz-att-row:hover { background: var(--surface-sunk); }
.bz-att-row:hover::before { opacity: 1; }
.bz-att-row .t { min-width: 0; }
.bz-att-row .t strong { display: block; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bz-att-row .t span { color: var(--ink-3); font-size: 11.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.bz-att-row .r { text-align: right; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bz-att-row .amt { display: block; color: var(--ink); font-weight: 700; font-size: 13px; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* 状态 pill */
.bz-pill { display: inline-flex; align-items: center; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 700; line-height: 1.4; }
.bz-pill.blue   { background: var(--c-info-soft);    color: var(--c-info-ink); }
.bz-pill.amber  { background: var(--c-warning-soft); color: var(--c-warning-ink); }
.bz-pill.red    { background: var(--c-danger-soft);  color: var(--c-danger-ink); }
.bz-pill.green  { background: var(--c-success-soft); color: var(--c-success-ink); }

/* —— 人事概览小条 —— */
.bz-hr { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.bz-hr > div { padding: 16px 18px; border-right: 1px solid var(--hairline); display: grid; grid-gap: 4px; gap: 4px; transition: background .15s; }
.bz-hr > div:hover { background: var(--brand-50); }
.bz-hr > div:last-child { border-right: 0; }
.bz-hr .lbl { color: var(--ink-3); font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.bz-hr .val { color: var(--ink); font-size: 22px; font-weight: 900; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.bz-hr .val.pending { color: var(--ink-3); font-size: 14px; font-weight: 700; letter-spacing: 0; }

/* —— 响应式收拢 —— */
@media (max-width: 1280px) {
  .bz-quick { grid-template-columns: repeat(4, 1fr); }
  .bz-kpi-grid, .bz-pipe { grid-template-columns: repeat(3, 1fr); }
  .bz-charts, .bz-ops { grid-template-columns: 1fr 1fr; }
  .bz-hr { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .bz-quick, .bz-kpi-grid, .bz-pipe, .bz-charts, .bz-ops, .bz-attention, .bz-hr { grid-template-columns: 1fr 1fr; }
  .bz-hero { flex-direction: column; align-items: flex-start; }
  .bz-hero-actions { align-items: flex-start; }
}

/* 金额列右对齐 + 等宽数字，使各行小数点纵向对齐（配合 AlignedMoneyText / numericKeys）。
   修复：.aligned-money-* 此前无样式 + .data-table td{text-align:left} 盖过 .numeric-cell。 */
.data-table td:has(.aligned-money-cell),
.data-table td.numeric-cell {
  text-align: right;
}
.aligned-money-cell {
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.aligned-money-currency {
  margin-right: 3px;
  color: var(--ink-2);
  font-weight: 600;
}
.aligned-money-integer,
.aligned-money-decimal {
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.project-tender-source-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}

.project-tender-source-card {
  display: grid;
  grid-gap: 6px;
  gap: 6px;
  min-height: 116px;
  padding: 12px;
  text-align: left;
  background: var(--surface, #fff);
  border: 1px solid var(--hairline, #e5e7eb);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.project-tender-source-card:hover {
  border-color: var(--brand-300, #93c5fd);
}

.project-tender-source-card.is-selected {
  background: var(--brand-50, #eff6ff);
  border-color: var(--brand-500, #2563eb);
}

.project-tender-source-card span {
  width: -moz-fit-content;
  width: fit-content;
  padding: 2px 8px;
  color: var(--brand-700, #1d4ed8);
  font-size: 12px;
  background: var(--brand-50, #eff6ff);
  border-radius: 999px;
}

.project-tender-source-card strong {
  color: var(--ink, #111827);
  font-size: 14px;
  line-height: 1.45;
}

.project-tender-source-card small {
  color: var(--muted, #6b7280);
  line-height: 1.45;
}

.project-tender-datetime-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 160px);
  grid-gap: 10px;
  gap: 10px;
}

.project-tender-document-summary {
  grid-column: 1 / -1;
  display: grid;
  grid-gap: 4px;
  gap: 4px;
  padding: 12px 14px;
  background: var(--brand-50, #eff6ff);
  border: 1px solid var(--brand-100, #dbeafe);
  border-radius: 12px;
}

.project-tender-document-summary span {
  color: var(--brand-700, #1d4ed8);
  font-size: 12px;
  font-weight: 700;
}

.project-tender-document-summary strong {
  color: var(--ink, #111827);
  font-size: 14px;
}

.project-tender-document-summary small {
  color: var(--ink-2, #64748b);
}

.project-tender-document-advanced {
  grid-column: 1 / -1;
  padding: 12px 14px;
  background: var(--surface-soft, #f8fafc);
  border: 1px dashed var(--hairline, #e5e7eb);
  border-radius: 12px;
}

.project-tender-document-advanced > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--brand-700, #1d4ed8);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.project-tender-document-advanced > summary::-webkit-details-marker {
  display: none;
}

.project-tender-document-advanced > summary small {
  color: var(--ink-2, #64748b);
  font-weight: 500;
}

.project-tender-document-advanced-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
  margin-top: 14px;
}

.project-tender-document-advanced-grid label {
  display: grid;
  grid-gap: 8px;
  gap: 8px;
}

.project-tender-document-advanced-grid label > span {
  color: var(--ink, #111827);
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 820px) {
  .project-tender-document-advanced-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .project-tender-datetime-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 业务列表统一排版：主列左对齐，数字/金额右对齐，状态与操作居中。 */
.data-table.quotation-task-table,
.customer-list-card .quotation-queue-table,
.quotation-list-view .quotation-configurable-table {
  color: #17283f;
  font-family: var(--ui-font-family-base, var(--font-sans));
  font-size: 13px;
  line-height: 1.35;
}

.data-table.quotation-task-table th,
.customer-list-card .quotation-queue-table th,
.quotation-list-view .quotation-configurable-table th {
  height: 42px;
  padding-top: 8px;
  padding-bottom: 8px;
  color: #5f7188;
  font-size: 12.5px;
  font-weight: 700 !important;
  line-height: 1.25;
  letter-spacing: 0;
  text-align: center;
  vertical-align: middle;
}

.data-table.quotation-task-table td,
.customer-list-card .quotation-queue-table td,
.quotation-list-view .quotation-configurable-table td {
  height: 54px;
  padding-top: 8px;
  padding-bottom: 8px;
  color: #17283f;
  font-size: 13px;
  font-weight: 620 !important;
  line-height: 1.35;
  text-align: center;
  vertical-align: middle;
}

.data-table.quotation-task-table td a,
.data-table.quotation-task-table td b,
.data-table.quotation-task-table td strong,
.customer-list-card .quotation-queue-table td a,
.customer-list-card .quotation-queue-table td b,
.customer-list-card .quotation-queue-table td strong,
.quotation-list-view .quotation-configurable-table td a,
.quotation-list-view .quotation-configurable-table td b,
.quotation-list-view .quotation-configurable-table td strong {
  font-size: 13px;
  font-weight: 680 !important;
  line-height: 1.35;
}

.data-table.quotation-task-table td small,
.data-table.quotation-task-table td span:not(.action-glyph),
.customer-list-card .quotation-queue-table td small,
.customer-list-card .quotation-queue-table td span:not(.action-glyph),
.quotation-list-view .quotation-configurable-table td small,
.quotation-list-view .quotation-configurable-table td span:not(.action-glyph) {
  font-weight: 620 !important;
}

.data-table.quotation-task-table th.first-column,
.data-table.quotation-task-table td.first-column,
.customer-list-card .quotation-queue-table th.first-column,
.customer-list-card .quotation-queue-table td.first-column,
.quotation-list-view .quotation-configurable-table th.first-column,
.quotation-list-view .quotation-configurable-table td.first-column {
  text-align: left !important;
}

.data-table.quotation-task-table th.numeric-cell,
.data-table.quotation-task-table td.numeric-cell,
.data-table.quotation-task-table th.col-amount,
.data-table.quotation-task-table td.col-amount,
.data-table.quotation-task-table td:has(.aligned-money-cell),
.customer-list-card .quotation-queue-table th.numeric-cell,
.customer-list-card .quotation-queue-table td.numeric-cell,
.customer-list-card .quotation-queue-table td:has(.aligned-money-cell),
.quotation-list-view .quotation-configurable-table th.numeric-cell,
.quotation-list-view .quotation-configurable-table td.numeric-cell,
.quotation-list-view .quotation-configurable-table td:has(.aligned-money-cell) {
  text-align: right !important;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.data-table.quotation-task-table th.action-column,
.data-table.quotation-task-table td.action-column,
.customer-list-card .quotation-queue-table th.action-column,
.customer-list-card .quotation-queue-table td.action-column,
.quotation-list-view .quotation-configurable-table th.action-column,
.quotation-list-view .quotation-configurable-table td.action-column,
.data-table.quotation-task-table th.row-index-column,
.data-table.quotation-task-table td.row-index-column {
  text-align: center !important;
}

.data-table.quotation-task-table td.action-column,
.customer-list-card .quotation-queue-table td.action-column,
.quotation-list-view .quotation-configurable-table td.action-column {
  padding-right: 10px;
  padding-left: 10px;
}

.data-table td.action-column > .inline-actions,
.business-table td.action-column > .inline-actions,
.user-table td.action-column > .inline-actions,
.role-table td.action-column > .inline-actions,
.permission-matrix-table td.action-column > .inline-actions {
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
  justify-content: center;
  flex-wrap: nowrap;
}

.quotation-column-heading {
  text-align: inherit;
}

.numeric-cell .quotation-column-heading,
.col-amount .quotation-column-heading {
  padding-right: 12px;
  text-align: right;
}

.first-column .quotation-column-heading {
  text-align: left;
}

.data-table td.numeric-cell > strong,
.data-table td.numeric-cell > span:not(.aligned-money-cell):not(.ui-status-pill):not(.action-glyph),
.data-table td:has(.aligned-money-cell) > strong,
.data-table td:has(.aligned-money-cell) > span:not(.aligned-money-cell):not(.ui-status-pill):not(.action-glyph) {
  display: inline-block;
  max-width: 100%;
  text-align: right !important;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

.aligned-money-cell {
  max-width: 100%;
  margin-left: auto;
}

.data-table .ui-status-pill,
.quotation-list-view .ui-status-pill {
  font-weight: 660 !important;
}