/*
 * VBUY AI Workbench · visual refresh
 *
 * This file intentionally only changes presentation.  Existing DOM hooks,
 * route ids, form ids and state classes are left untouched so the current
 * application logic remains compatible.
 */
:root {
  --ink: #1a2233;
  --ink-2: #344054;
  --muted: #6b7280;
  --line: #e5eaf3;
  --line-soft: #eef2f7;
  --paper: #ffffff;
  --canvas: #f3f6fb;
  --cream: #f7f9fc;
  --brand: #1d6fe0;
  --brand-dark: #1657b8;
  --primary-soft: #eaf2fd;
  --amber: #f59e0b;
  --amber-soft: #fef3e2;
  --red: #e5484d;
  --teal: #2768c5;
  --green: #16a34a;
  --sidebar: #152542;
  --sidebar-soft: #223c67;
  --white: #ffffff;
  --shadow: 0 1px 3px rgba(16, 42, 96, .08), 0 8px 24px rgba(16, 42, 96, .06);
  --shadow-strong: 0 12px 32px rgba(16, 42, 96, .1);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 9px;
}

html,
body {
  background: var(--canvas);
  color: var(--ink);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

::selection {
  color: #0d3d85;
  background: #dceaff;
}

/* Login */
.login-shell {
  background: var(--canvas);
}

.login-brand {
  background: linear-gradient(145deg, #12223d 0%, #1b3560 100%);
}

.login-brand::after {
  background: var(--brand);
  opacity: .58;
}

.login-brand h1 {
  letter-spacing: -.045em;
}

.eyebrow,
.kicker {
  color: var(--brand);
}

.login-panel {
  background: var(--canvas);
}

.login-card {
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  box-shadow: var(--shadow-strong);
}

.login-card h2 {
  color: var(--ink);
}

.input-wrap {
  border-color: var(--line);
  border-radius: var(--radius-sm);
  background: #fbfcff;
}

.input-wrap:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(29, 111, 224, .1);
}

.primary-button {
  border-radius: var(--radius-sm);
  background: var(--brand);
  box-shadow: 0 7px 18px rgba(29, 111, 224, .2);
}

.primary-button:hover:not(:disabled) {
  background: var(--brand-dark);
}

/* Application frame */
.app-shell {
  grid-template-columns: 248px minmax(0, 1fr);
  background: var(--canvas);
}

.sidebar {
  padding: 24px 16px 18px;
  background: linear-gradient(180deg, #152542 0%, #11203a 100%);
}

.sidebar__brand {
  min-height: 62px;
  padding: 0 4px 22px;
  border-bottom-color: rgba(255, 255, 255, .1);
}

.sidebar__brand-copy {
  border-left-color: rgba(255, 255, 255, .16);
}

.sidebar__brand small {
  color: rgba(255, 255, 255, .5);
}

.navigation {
  padding-top: 24px;
}

.navigation__label {
  color: rgba(255, 255, 255, .34);
}

.nav-item {
  height: 45px;
  border-radius: 10px;
  color: rgba(255, 255, 255, .66);
}

.nav-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, .07);
}

.nav-item.is-active {
  color: #fff;
  background: var(--sidebar-soft);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

.nav-item.is-active::before {
  background: #67a5ff;
}

.sidebar__future {
  border-color: rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .025);
}

/* ---- 侧边栏导航：顶/底固定，中间自适应 ----
   首页钉在最上面、系统管理钉在最下面，中间这一段 flex 吃掉剩余高度；
   模块越加越多时它自己滚动，而不是把「系统管理」顶出屏幕外。
   min-height: 0 是关键：flex 子项默认最小高度是内容高度，不写这行它就不肯收缩，
   整个侧边栏会被撑破，滚动条根本不会出现。 */
.navigation {
  flex: 1 1 auto;
  min-height: 0;
}

.navigation__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 5px;
  /* 让选中态左侧那根蓝色竖条和圆角有地方显示，不被滚动容器裁掉 */
  padding: 2px 0 2px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

/*
 * 关键一行：禁止导航按钮被压缩。
 * flex 子项默认 flex-shrink: 1，而按钮的 min-height 是 auto（约等于一行文字的高度），
 * 所以侧边栏变矮时浏览器会先把 45px 的按钮压成 20 多像素来"塞下"，压根不会出现滚动条——
 * 表现就是"窗口一矮，菜单全挤成一坨"。钉成 flex: 0 0 auto 之后才会老老实实溢出并滚动。
 */
.navigation > .nav-item,
.navigation__scroll > .nav-item {
  flex: 0 0 auto;
}

.navigation__scroll::-webkit-scrollbar { width: 6px; }
.navigation__scroll::-webkit-scrollbar-track { background: transparent; }
.navigation__scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255, 255, 255, .16); }
.navigation__scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .3); }

/* 上下还有内容时给一点渐隐提示，否则用户不知道这里能滚 */
.navigation__scroll::before,
.navigation__scroll::after {
  content: "";
  position: sticky;
  left: 0;
  z-index: 2;
  display: block;
  flex: 0 0 auto;
  height: 12px;
  margin: -2px 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
}

.navigation__scroll::before {
  top: -2px;
  margin-bottom: -12px;
  background: linear-gradient(180deg, #152542 30%, rgba(21, 37, 66, 0) 100%);
}

.navigation__scroll::after {
  bottom: -2px;
  margin-top: -12px;
  background: linear-gradient(0deg, #11203a 30%, rgba(17, 32, 58, 0) 100%);
}

.navigation__scroll.has-more-above::before,
.navigation__scroll.has-more-below::after { opacity: 1; }

/*
 * 窗口不够高时，按"先牺牲装饰、再压缩留白"的顺序腾地方：
 * 「持续扩展」那张卡片纯粹是占位说明，最先隐藏；品牌区和内边距跟着收一点。
 * 目的是让中间那一段至少能露出三个模块（108px ≈ 2.4 个按钮），
 * 否则侧边栏一矮，模块区就只剩一条缝，滚都滚不动。
 */
@media (max-height: 760px) {
  .sidebar { padding-top: 16px; padding-bottom: 14px; }
  .sidebar__brand { min-height: 54px; padding-bottom: 14px; }
  .navigation { padding-top: 16px; padding-bottom: 6px; }
  .sidebar__future { display: none; }
  .user-menu { min-height: 56px; }
  .navigation__scroll { min-height: 108px; }
}

/* 再矮就真的放不下了：整条侧边栏允许滚动，保证底部账号区永远够得着 */
@media (max-height: 460px) {
  .sidebar { overflow-y: auto; }
}

.user-menu {
  border-top-color: rgba(255, 255, 255, .1);
}

.avatar {
  background: var(--brand);
}

.workspace {
  background: var(--canvas);
}

.topbar {
  height: 80px;
  flex-basis: 80px;
  padding-inline: clamp(22px, 3.2vw, 48px);
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 1px 0 rgba(16, 42, 96, .02);
  /*
   * 顶栏必须排在这一页的内容之上。
   *
   * 为什么需要：顶栏是 backdrop-filter 元素，自己就是一个层叠上下文；
   * 它没有 z-index 时，后面的页面内容（.route 里的卡片）会**盖在它上面** ——
   * 于是挂在顶栏里的「时差弹窗」被首页/数据归集/文件摘要的卡片压掉一半，
   * 看着就像"弹窗位置不对"。取 50：高于页面内容（内容最高 30），
   * 低于右键菜单（60）、提示条（200）和弹窗（120+），不会挡到它们。
   */
  position: relative;
  z-index: 50;
}

.topbar h2 {
  color: var(--ink);
  font-size: 19px;
}

.topbar__kicker {
  color: #98a3b5;
}

.system-status i {
  background: #22b573;
  box-shadow: 0 0 0 4px rgba(34, 181, 115, .12);
}

.today-label {
  border-left-color: var(--line);
}

.route {
  background: var(--canvas);
}

.route--home {
  padding: clamp(30px, 4.5vh, 54px) clamp(22px, 4vw, 64px) 36px;
}

/* Home */
.home-intro {
  /* 首页第一屏该留给工具入口，这段招呼少占点高度 */
  margin-bottom: 14px;
  /* 上下居中：以前是基线对齐，结果「你好」那行被压得偏低，
     右边那句话却贴在最上面 —— 居中之后两边看着才是一排的。 */
  align-items: center;
}

/* 顶部的留白原来最多 62px，招呼行被压得太低 —— 收一收，
   招呼和第一排卡片都能往上提一截 */
.route--home {
  padding-top: clamp(14px, 2.2vh, 30px);
}

.home-intro h1 {
  color: var(--ink);
  margin: 2px 0 0;
  font-size: clamp(19px, 1.8vw, 26px);
}

.home-intro h1 span {
  color: var(--brand);
}

.home-intro p:last-child,
.home-intro__hint {
  color: var(--muted);
}

.home-intro .kicker {
  font-size: 9px;
}

.home-intro__hint {
  font-size: 13px;
  text-align: right;
}

.module-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.module-card {
  min-height: 300px;
  padding: 23px 24px 21px;
  border-color: var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.module-card:hover,
.module-card:focus-visible {
  border-color: #c6d8f2;
  box-shadow: var(--shadow-strong);
}

.module-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  color: var(--brand);
  background: #eaf2fd;
}

.module-state {
  color: var(--muted);
}

.module-card__number {
  color: #a1aabd;
}

.module-card h3 {
  color: var(--ink);
  font-size: 22px;
}

.module-card p:not(.module-card__number) {
  color: var(--muted);
  line-height: 1.72;
}

.module-card__action {
  color: var(--ink);
  border-bottom-color: #9ab7e6;
}

.module-card__action span {
  color: var(--brand);
}

.module-card__accent {
  border-color: rgba(29, 111, 224, .13);
  box-shadow: 0 0 0 34px rgba(29, 111, 224, .025), 0 0 0 68px rgba(29, 111, 224, .016);
}

.module-card--summary .module-icon,
.module-card--exchange .module-icon {
  color: #277b68;
  background: #e7f6ef;
}

.module-card--summary .module-card__accent,
.module-card--exchange .module-card__accent {
  border-color: rgba(22, 163, 74, .14);
  box-shadow: 0 0 0 34px rgba(22, 163, 74, .024), 0 0 0 68px rgba(22, 163, 74, .014);
}

.module-card--quote .module-icon {
  color: #b36a10;
  background: #fff4df;
}

.module-card--quote .module-card__accent {
  border-color: rgba(245, 158, 11, .16);
  box-shadow: 0 0 0 34px rgba(245, 158, 11, .025), 0 0 0 68px rgba(245, 158, 11, .014);
}

.module-card--future {
  min-height: 126px;
  border-color: #cfd9e8;
  background: rgba(255, 255, 255, .52);
  box-shadow: none;
}

.module-card--future:hover {
  border-color: #cfd9e8;
}

.future-plus {
  border-color: #b9c8dc;
  color: var(--brand);
}

.home-note {
  color: #8b95a6;
}

.home-note__line {
  background: var(--brand);
}

/* Shared route and controls */
.route--tool {
  padding: 24px clamp(18px, 3.2vw, 46px) 34px;
}

.tool-panel {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow);
}

.tool-panel__header {
  border-bottom-color: var(--line-soft);
}

.tool-panel__header h3,
.exchange-section-title h3,
.quote-form-panel h3,
.email-message__header h3 {
  color: var(--ink);
}

.tool-panel__header p,
.exchange-section-title p {
  color: var(--muted);
}

.section-index {
  color: #fff;
  background: var(--brand);
}

.section-index--muted {
  color: var(--brand);
  background: var(--primary-soft, #eaf2fd);
}

.secondary-button {
  min-height: 36px;
  border-color: var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
  background: #fff;
}

.secondary-button:hover {
  border-color: #b9cdef;
  color: var(--brand);
  background: #f8fbff;
}

.primary-button:focus-visible,
.secondary-button:focus-visible,
.nav-item:focus-visible,
.module-card:focus-visible {
  outline: 3px solid rgba(29, 111, 224, .22);
  outline-offset: 2px;
}

input,
select,
textarea {
  border-color: var(--line) !important;
  border-radius: var(--radius-sm) !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(29, 111, 224, .09) !important;
}

/* Order overview and query */
.order-overview__header,
.order-overview__footer {
  border-color: var(--line-soft);
}

.order-overview__header h3 {
  color: var(--ink);
}

.order-overview__stats article,
.admin-stats article {
  border-color: var(--line);
  background: #fff;
  box-shadow: 0 3px 12px rgba(16, 42, 96, .035);
}

.order-overview__stats strong,
.admin-stats strong {
  color: var(--brand);
}

.order-overview__filters input,
.order-overview__filters select,
.admin-user-form input,
.admin-user-form select {
  background: #fbfcff;
}

.order-table th,
.admin-table th {
  color: #69758a;
  background: #f8faff;
  border-bottom-color: var(--line);
}

.order-table td,
.admin-table td {
  color: #475467;
  border-bottom-color: var(--line-soft);
}

.order-table tbody tr:hover,
.admin-table tbody tr:hover {
  background: #f8fbff;
}

.order-table__order-no,
.order-table__product strong,
.order-table__price,
.admin-user-cell strong,
.admin-log-item strong {
  color: var(--ink);
}

.order-table__numeric {
  color: var(--brand) !important;
}

.order-quality.is-good,
.admin-status.is-active {
  color: #167346;
  background: #e8f7ee;
}

.order-panel {
  box-shadow: var(--shadow);
}

.message__content {
  color: var(--ink-2);
  background: #f5f8fe;
}

.message--assistant .message__content {
  border-color: #dfe8f7;
  background: #fbfdff;
}

.message--user .message__content {
  background: #244b83;
}

.message__avatar {
  background: var(--brand);
}

.message--user .message__avatar {
  background: #244b83;
}

.composer {
  border-color: var(--line);
  background: #f8faff;
}

.composer > button {
  background: var(--brand);
}

.tool-aside {
  background: linear-gradient(160deg, #152542 0%, #203b66 100%);
}

/* Quote/specification workspace — the closest translation of the supplied
   reference UI. */
#route-quote {
  background: var(--canvas);
}

.quote-shell {
  /*
   * 1520 → 1800：原来在 2000+ 的宽屏上整块内容被封在 1520 里居中，
   * 左右各空一大条，业务员反馈"太窄了"。表单本身不会因此变得难读 ——
   * 明细行和字段网格的列数是固定的，只是每格更宽。
   */
  max-width: 1800px;
  gap: 16px;
}

/*
 * 报价工具条（v10.18 起在顶栏里，跟在「报价与规格」标题后面）。
 *
 * 原来它是一张白卡片：border + border-radius + background:#fff + box-shadow。
 * 挪进顶栏之后这套"卡片外观"没跟着去掉，结果按钮像被一个白框套住、
 * 跟顶栏分层 —— 用户一眼就看出来了（2026-09-22 反馈）。
 * 所以这里只保留"一条普通的横排"，外观交给顶栏，不再自成一块。
 */
.quote-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.quote-toolbar > div:first-child {
  grid-template-columns: auto auto;
}

.quote-status-badge {
  color: #b45309;
  background: #fef3e2;
  border: 1px solid #f7e3bc;
}

.quote-status-badge.is-saved,
.quote-status-badge.is-completed {
  color: #167346;
  background: #e8f7ee;
}

.quote-toolbar strong {
  color: var(--ink);
  font-size: 16px;
}

.quote-toolbar small {
  color: var(--muted);
}

.quote-toolbar__actions {
  flex-wrap: wrap;
}

.quote-toolbar .primary-button,
.quote-toolbar .secondary-button {
  min-height: 38px;
  font-size: 11px;
}

.quote-main-grid {
  /*
   * 左栏不再写死 320px：按容器宽度的 24% 走，320~400 之间收放。
   * 窄屏（1440 及以下）拿到下限 320，宽屏（1800+）拿到 400，
   * 需求整理里那段说明文字就不用挤成四行了。
   */
  grid-template-columns: clamp(320px, 24%, 400px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

/* ---- v10.23 两栏各自独立滚动 ----
   用户要求：鼠标在「需求整理」上滚就只滚需求整理，在「报价单内容」上滚就只滚报价单内容。
   做法：这一页不再整页滚（route 不许滚），两栏各拿自己的滚动条；
   顶栏那一排按钮（保存/预览/转订单）永远在外层固定，所以两栏滚到哪都够得着。 */
.route--quote {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.route--quote .quote-shell {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /*
   * 必须显式给宽度。
   * styles.css 里 `.quote-shell { margin: 0 auto }` 在 flex 列布局里会让这一块
   * **按内容收缩**而不是撑满（auto 边距会吃掉剩余空间），
   * 结果父容器 1890px、它只有 1356px，`max-width: 1800` 根本没机会生效 ——
   * 业务员看到的"太窄"就是这个。
   * 写成 width:100% + max-width + auto 边距：撑满、到上限为止、再居中。
   */
  width: 100%;
}

.route--quote .quote-main-grid {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
  /* 两边滚动条占位一致，不会因为一边出现滚动条而错位 */
  scrollbar-gutter: stable;
}

/* 两栏：各自一块，各自滚 */
.quote-col {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 4px;
}

.quote-col--left {
  /* 左栏除了需求整理，还挂着历史报价参考 —— 窄了卡片会挤，这里略放宽 */
  min-width: 0;
}

/*
 * 关键：栏内的面板**不许被压缩**（flex-shrink: 0）。
 * 不写这条的话，8 行的报价单表单会被压到和栏一样高，
 * 而面板自身是 overflow:hidden，超出部分直接被裁掉 —— 滚不到底、内容也看不见。
 * 量过：写之前右栏「可视 556 / 内容 556」，等于内容被裁没了。
 */
.quote-col > .tool-panel { flex: 0 0 auto; }

/* 窄屏退回整页滚动。断点取 900：ui-refresh 自己下面那条 @media (max-width: 900px)
   才是「两栏变一栏」的地方（它把 styles.css 的 1180 覆盖掉了）。
   两边断点必须一致，否则会出现「还是两栏宽、却已经切成整页滚」的错配。 */
@media (max-width: 900px) {
  .route--quote { display: block; overflow-y: auto; }
  .route--quote .quote-shell { display: block; }
  .route--quote .quote-main-grid { display: grid; }
  .quote-col { display: contents; }
  /* 一栏布局时顺序：需求整理 → 报价单内容 → 历史参考（参考放最后） */
  .quote-intake-panel { order: 1; }
  .quote-form-panel { order: 2; }
  .quote-history-panel { order: 3; }
}

.quote-intake-panel,
.quote-form-panel,
.quote-history-panel {
  border-color: var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}

/*
 * 左栏（需求整理）**不再 sticky**。
 *
 * 原来这里是 `position: sticky; top: 16px`，想让它滚动时一直看得见，但带来两个反效果：
 *   1. 页面一滚，左栏吸在离顶 16px，右栏正常流动 → 两栏顶部错开（用户截图就是这个）；
 *   2. 滚轮滚的是整页，但左栏不动 → 看着像"在左边滚、动的却是右边"。
 * 而且不再需要它常驻：保存/预览/转订单那一排已经在固定顶栏里了；
 * 左栏自身的"报价单列表"有 max-height 自己滚，高度不会超过一屏。
 */

.quote-intake-body {
  padding: 18px;
}

.quote-helper-card {
  border-color: #dbe6f5;
  background: #f7faff;
}

.quote-helper-card__icon {
  color: #fff;
  background: var(--brand);
}

.quote-helper-card p,
.quote-parse-state p {
  color: var(--muted);
}

.quote-prompt-field textarea {
  min-height: 128px;
  color: var(--ink);
  background: #fff;
}

.quote-intake-body .primary-button {
  min-height: 44px;
  background: var(--brand);
}

.quote-parse-state {
  border-color: #cfe0f6;
  background: #f3f8ff;
}

.quote-parse-state__top span {
  color: var(--brand);
  background: #eaf2fd;
}

.quote-missing-card {
  border-color: #f2dfbd;
  background: #fffaf1;
}

.quote-missing-card > div:first-child strong {
  color: #b45309;
  background: #fef3e2;
}

.quote-missing-list span {
  color: #b45309;
  background: #fef3e2;
}

.quote-missing-list span.is-done {
  color: #667085;
  background: #f2f4f7;
}

.quote-recent {
  border-top-color: var(--line-soft);
}

.quote-subheading button {
  color: var(--brand);
}

.quote-draft-item {
  background: #f7f9fc;
}

.quote-draft-item:hover,
.quote-draft-item.is-active {
  border-color: #c9d8f5;
  background: #eef5ff;
}

.quote-form {
  padding: 8px 22px 22px;
}

.quote-form fieldset {
  padding-block: 18px 20px;
  border-bottom-color: var(--line-soft);
}

.quote-form legend {
  color: #536176;
  font-size: 10px;
}

.quote-field-grid label > span {
  color: #536176;
  font-size: 10px;
}

.quote-field-grid label > span em {
  color: #e5484d;
}

.quote-field-grid input,
.quote-field-grid select {
  height: 41px;
  color: var(--ink);
  background: #f7f9fc;
}

.quote-field-grid input:not(:placeholder-shown),
.quote-field-grid select:valid {
  background: #fff;
}

.quote-field-grid label.is-missing input,
.quote-field-grid label.is-missing select {
  border-color: #e8c486 !important;
  background: #fffaf1;
}

.quote-commercial-card {
  border-color: #dbe6f5;
  background: linear-gradient(135deg, #f7faff 0%, #fff 72%);
}

.quote-commercial-card__head {
  border-bottom-color: var(--line-soft);
}

.quote-commercial-card__head span,
.quote-commercial-grid .is-total strong,
.quote-history-summary > div:first-child strong,
.quote-history-card__title b {
  color: var(--brand);
}

.quote-commercial-grid .is-total {
  background: rgba(29, 111, 224, .045);
}

.quote-history-summary > div:first-child {
  border-color: #cfe0f6;
  background: #f3f8ff;
}

.quote-history-card:hover {
  border-color: #c9d8f5;
  box-shadow: 0 9px 24px rgba(16, 42, 96, .06);
}

.quote-history-card.is-strong .quote-history-card__score {
  background: #eaf2fd;
}

.quote-history-card.is-strong .quote-history-card__score strong {
  color: var(--brand);
}

/*
 * ---- v10.27 历史报价参考：按「面板自己的宽度」排版 ----
 *
 * 这个面板住在左栏里（clamp(320px, 24%, 400px)），但里面的指标卡是照整页宽设计的：
 * 4 列 → 每格只剩 ~70px，中文标签被挤成「一个字一行」，
 * 卡片的单号/价格也折行，整块看着很碎。用容器查询按面板自身宽度收：
 * 面板窄（两栏布局下的左栏）就 2×2 指标卡 + 卡片瘦身；面板宽（窄屏一栏布局）保持原样。
 */
.quote-history-panel { container-type: inline-size; }

@container (max-width: 620px) {
  /* 标题一行、按钮自己一行（原来按钮被挤成「查相似 / 订单」两行） */
  .quote-history-panel .tool-panel__header { flex-wrap: wrap; gap: 8px 12px; }
  .quote-history-panel .tool-panel__header > div:first-child { flex: 1 1 100%; }
  .quote-history-panel .tool-panel__header button { margin-left: auto; white-space: nowrap; }

  /* 面板自己不再出滚动条：内容高了让左栏滚，避免两条滚动条打架 */
  .quote-history-result { padding: 14px; max-height: none; }

  /* 指标卡 4 列 → 2×2，标签和数值都不许折行 */
  .quote-history-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
  .quote-history-summary > div { min-height: 0; padding: 10px 11px; }
  .quote-history-summary span,
  .quote-history-summary small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  /* 数值也不许顶破格子：正常都放得下，放进 overflow 只是兜底 */
  .quote-history-summary strong { margin: 4px 0 3px; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }

  /* 卡片：左边匹配度收窄，右边单号 + 价格排一行，放不下就让价格掉到第二行右对齐 */
  .quote-history-card { grid-template-columns: 56px minmax(0, 1fr); }
  .quote-history-card__score { min-height: 92px; padding: 12px 6px; }
  .quote-history-card__score strong { font-size: 17px; }
  .quote-history-card__main { padding: 11px 12px 9px; }
  .quote-history-card__title { flex-wrap: wrap; gap: 5px 10px; }
  .quote-history-card__title b { margin-left: auto; white-space: nowrap; }
  .quote-history-card__foot { margin-inline: 12px; }
}

/* Email */
.email-overview,
.email-stats article,
.email-inbox-panel,
.email-message-panel,
.email-ai-panel {
  border-color: var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}

.email-overview {
  border-radius: var(--radius-lg);
}

.email-overview h3 {
  color: var(--ink);
}

.email-stats article {
  border-radius: var(--radius-md);
}

.email-stats article strong {
  color: var(--brand);
}

.email-list-item:hover,
.email-list-item.is-active {
  border-color: #c9d8f5;
  background: #eef5ff;
}

.email-message__badges span,
.email-analysis-meta span {
  background: #eef5ff;
  color: #325d9c;
}

.email-ai-title > span {
  background: var(--brand);
}

.email-analysis section p {
  background: #eef5ff;
}

/* UI 2.0：会话摘要嵌入正文顶部，当前邮件仍由原有翻译、分析和人工确认流程接管。 */
.email-conversation-strip { padding: 11px 16px 12px; border-bottom: 1px solid var(--line-soft); background: linear-gradient(180deg, #f7fbfa 0%, #fbfcfb 100%); }
.email-conversation-strip[hidden] { display: none; }
.email-conversation-strip__head, .email-conversation-strip__item { display: flex; align-items: center; gap: 9px; }
.email-conversation-strip__head { justify-content: space-between; margin-bottom: 8px; }
.email-conversation-strip__head span { min-width: 0; display: grid; gap: 2px; }
.email-conversation-strip__head strong { color: #2f5559; font-size: 10px; }
.email-conversation-strip__head small, .email-conversation-strip__head em { color: #8a9b9d; font-size: 8px; font-style: normal; }
.email-conversation-strip__head em { padding: 3px 6px; border-radius: 6px; background: #e7f1ee; color: #4b7472; }
.email-conversation-strip__list { max-height: 162px; display: grid; gap: 5px; overflow: auto; }
.email-conversation-strip__item { width: 100%; padding: 7px 8px; border: 1px solid #e1ebe8; border-radius: 8px; color: inherit; background: #fff; text-align: left; font: inherit; cursor: pointer; }
.email-conversation-strip__item:hover { border-color: #b9d6cd; background: #f8fcfa; }
.email-conversation-strip__item.is-active { border-color: var(--teal); box-shadow: inset 2px 0 0 var(--teal); background: #f0f8f5; }
/* 只让正文撑满：头像也是 span，原来会被这条一起吃成 flex:1 拉成宽条 */
.email-conversation-strip__item > span:not(.email-conversation-strip__dot):not(.email-conversation-strip__avatar) { min-width: 0; flex: 1; display: grid; gap: 2px; }
.email-conversation-strip__item strong { overflow: hidden; color: #496468; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.email-conversation-strip__item small { overflow: hidden; color: #879798; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.email-conversation-strip__item time { flex: 0 0 auto; color: #9aa8a9; font-size: 7.5px; }
.email-conversation-strip__dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #91aaa5; }
.email-conversation-strip__dot.is-outbound { background: var(--teal); }

/* UI 2.0 主视觉覆盖：使用豆包方案的青绿色工作流层级，确保页面刷新后有明显变化。 */
.route--email { background: #f1f5f3; }
.route--email .email-overview { border: 0; border-radius: 16px; background: linear-gradient(110deg, #fff 0%, #f7fbf9 72%, #eef7f3 100%); box-shadow: 0 10px 30px rgba(24, 72, 69, .08); }
.route--email .email-overview .kicker { color: #ed6946; font-weight: 900; letter-spacing: .14em; }
.route--email .email-overview h3 { color: #122f35; font-size: 22px; letter-spacing: -.02em; }
.route--email .email-overview > div > span { color: #648083; font-size: 10px; }
.route--email .email-workspace { grid-template-columns: minmax(270px, .78fr) minmax(470px, 1.42fr) minmax(330px, .9fr); gap: 16px; }
.route--email .email-inbox-panel,
.route--email .email-message-panel,
.route--email .email-ai-panel { border: 1px solid #dce7e3; border-radius: 14px; box-shadow: 0 12px 30px rgba(20, 54, 56, .07); }
.route--email .email-inbox-panel { background: #fbfdfc; }
.route--email .email-inbox-toolbar { background: #102e36; border-radius: 13px 13px 0 0; }
.route--email .email-inbox-toolbar .secondary-button { border-color: rgba(255,255,255,.2); color: #eaf5f1; background: rgba(255,255,255,.08); }
.route--email .email-smart-views { background: #f4f8f6; }
.route--email .email-smart-views button.is-active { color: #fff; background: #1d6f70; }
.route--email .email-list-item { padding-top: 15px; padding-bottom: 15px; background: #fff; }
.route--email .email-list-item.is-active { background: #eaf6f1; box-shadow: inset 3px 0 0 #1d6f70; }
.route--email .email-message-panel { background: #fff; }
.route--email .email-message__header { padding: 22px 22px 15px; background: linear-gradient(180deg, #fff 0%, #f8fbfa 100%); }
.route--email .email-message__header h3 { color: #12292f; font-size: 17px; line-height: 1.45; }
.route--email .email-sender strong { color: #1d6f70; }
.route--email .email-language-toolbar { padding: 12px 20px; background: #fbfdfc; }
.route--email .email-body { padding: 22px; color: #28434a; font-size: 11px; line-height: 1.95; }
.route--email .email-attachments { margin: 0 20px; padding: 13px 0; border-top: 1px solid #e3ece8; }
.route--email .email-ai-panel { border-top: 3px solid #ed6946; background: #fff; }
.route--email .email-ai-title > span { background: #ed6946; }
.route--email .email-review-banner[data-status="pending"] { border-color: #f0d2c8; background: #fff7f3; color: #9a513c; }
.route--email .email-analysis section p { background: #edf7f3; }
@media (max-width: 980px) {
  .route--email .email-workspace { grid-template-columns: 290px minmax(0, 1fr); }
  .route--email .email-ai-panel { grid-column: 1 / -1; }
}

/* v7.5 方案 C：客户会话工作台。会话条使用真实邮件数据，点击仍切换当前邮件。 */
.route--email .email-overview { padding: 22px 24px; border: 1px solid #e0e8ec; background: linear-gradient(110deg, #fff 0%, #f7fafc 72%, #eef5fb 100%); }
.route--email .email-overview h3 { font-size: 23px; letter-spacing: -.04em; }
.route--email .email-overview .kicker { color: #e9794f; }
.route--email .email-workspace { grid-template-columns: minmax(275px, .78fr) minmax(470px, 1.42fr) minmax(335px, .9fr); gap: 15px; }
.route--email .email-inbox-panel, .route--email .email-message-panel, .route--email .email-ai-panel { border: 1px solid #e1e8ec; border-radius: 15px; box-shadow: 0 12px 35px rgba(24,44,58,.07); }
.route--email .email-inbox-toolbar { background: #152633; border-radius: 14px 14px 0 0; }
.route--email .email-inbox-toolbar .secondary-button { border-color: rgba(255,255,255,.2); color: #eaf1f4; background: rgba(255,255,255,.08); }
.route--email .email-message__header { padding: 21px 22px 15px; background: linear-gradient(180deg, #fff 0%, #f8fafc 100%); }
.route--email .email-message__header h3 { color: #152633; font-size: 17px; line-height: 1.45; }
.route--email .email-sender strong { color: #2767a8; }
.route--email .email-language-toolbar { padding: 12px 20px; background: #fafcfd; }
.route--email .email-body { padding: 22px; color: #40545e; font-size: 11px; line-height: 1.9; }
.route--email .email-ai-panel { border-top: 3px solid #e9794f; }
.route--email .email-ai-title > span { background: #e9794f; }
.route--email .email-analysis section p { background: #eef5fc; }
.email-conversation-strip { padding: 12px 18px 14px; background: #fbfcfd; }
.email-conversation-strip__head { margin-bottom: 10px; }
.email-conversation-strip__head strong { color: #152633; font-size: 11px; }
.email-conversation-strip__head em { color: #2767a8; background: #eef5fc; }
.email-conversation-strip__list { max-height: 270px; gap: 9px; display: flex; flex-direction: column; }
/* 气泡：收件贴左、发件贴右。max-width + align-self 让短消息只占内容宽度，
   长消息由 88% 封顶——原来是固定 width:88%，一句"好的"也会被拉满一整行。 */
.email-conversation-strip__item { position: relative; flex: 0 0 auto; width: fit-content; max-width: 88%; align-self: flex-start; padding: 10px 12px; border: 1px solid #e4eaee; border-radius: 5px 12px 12px 12px; align-items: flex-start; background: #fff; box-shadow: 0 4px 13px rgba(25,45,57,.035); }
.email-conversation-strip__item.is-outbound { align-self: flex-end; border-color: #c9e2da; border-radius: 12px 5px 12px 12px; background: #eaf7f2; }
.email-conversation-strip__item.is-active { border-color: #2767a8; box-shadow: 0 0 0 2px rgba(39,103,168,.1); }
.email-conversation-strip__avatar { flex: 0 0 auto; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; color: #2767a8; background: #dce9f3; font-size: 10px; font-weight: 800; }
.email-conversation-strip__item.is-outbound .email-conversation-strip__avatar { color: #25866d; background: #d8eee6; }
.email-conversation-strip__content { min-width: 0; flex: 1; display: grid; gap: 4px; text-align: left; }
.email-conversation-strip__content strong { color: #3e5660; font-size: 9px; }
.email-conversation-strip__content > span { color: #536872; font-size: 10px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }
.email-conversation-strip__content small { color: #8b9a9f; font-size: 8px; }
.email-conversation-strip__item time { flex: 0 0 auto; color: #9da9ad; font-size: 8px; }

.email-review-banner[data-status="confirmed"] {
  border-color: #b9dfcb;
  background: #eff9f4;
}

/* Exchange, summary, import and admin */
.route--exchange {
  background: var(--canvas);
}

.exchange-hero {
  background: linear-gradient(115deg, #fff 0%, #f5f8ff 100%);
}

.exchange-hero h3,
.exchange-result strong,
.exchange-rate-card b {
  color: var(--brand);
}

.exchange-hero__meta span,
.exchange-status {
  color: #245ba8;
  background: #eaf2fd;
}

.exchange-result {
  border-color: #dbe6f5;
  background: #f3f8ff;
}

.exchange-swap {
  border-color: #c9d8f5;
  color: var(--brand);
  background: #eef5ff;
}

.exchange-rate-card {
  border-color: var(--line);
  background: #fbfcff;
}

.summary-empty__paper i {
  background: var(--brand);
  box-shadow: 0 6px 15px rgba(29, 111, 224, .18);
}

.collect-header {
  background: linear-gradient(135deg, #fff 0%, #f5f8ff 100%);
}

.collect-ai-state {
  color: #245ba8;
  border-color: #cfe0f6;
  background: #eef5ff;
}

.collect-flow,
.collect-dropzone,
.collect-recent-panel,
.collect-panel,
.collect-review,
.admin-users-panel,
.admin-log-panel {
  border-color: var(--line);
}

.collect-candidate,
.collect-recent-item,
.collect-summary-field textarea {
  border-color: var(--line);
  background: #fbfcff;
}

.admin-user-cell > span {
  color: var(--brand);
  background: #eaf2fd;
}

.admin-actions button:hover:not(:disabled) {
  border-color: #b9cdef;
  color: var(--brand);
}

.admin-log-icon.is-success {
  color: #167346;
  background: #e8f7ee;
}

/* Modal and toast surfaces */
.quote-preview-dialog {
  border-color: var(--line);
  background: var(--canvas);
  box-shadow: 0 28px 90px rgba(16, 42, 96, .24);
}

/* ------------------------------------------------------------------ *
 * v10.13 弹窗「收起」：缩成右下角一个小条，**同时撤掉遮罩**
 *
 * 为什么要撤遮罩：遮罩是铺满屏幕的，留着它的话，收起来只是「能看见后面」，
 * 鼠标点哪都被遮罩接走，等于没法边看边干活。撤掉之后后面照常能点能滚，
 * 小条一直挂在右下角提醒你「这张单还开着」。
 * ------------------------------------------------------------------ */
.quote-preview-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 「是否退税」那一列很窄，内容居中；三个列表（历史 / 跟踪 / 样品）共用 */
.order-table__refund {
  width: 62px;
  text-align: center;
}

.quote-preview-minimize {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.quote-preview-minimize:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* 收起状态：容器缩到右下角，正文和页脚藏起来，只留标题那一条 */
.quote-preview-modal.is-minimized {
  display: block;
  inset: auto 20px 20px auto;
  padding: 0;
  place-items: initial;
}

.quote-preview-modal.is-minimized .quote-preview-backdrop { display: none; }

.quote-preview-modal.is-minimized .quote-preview-dialog {
  width: auto;
  max-width: min(360px, 80vw);
  max-height: none;
  border-radius: 12px;
  border-left: 3px solid var(--brand);
  box-shadow: 0 16px 40px rgba(16, 42, 96, .28);
}

/* 小条里文字别换行，长单号用省略号，按钮永远在右边 */
.quote-preview-modal.is-minimized .quote-preview-dialog__header { gap: 10px; }
.quote-preview-modal.is-minimized .quote-preview-dialog__header > div:first-child {
  min-width: 0;
}

.quote-preview-modal.is-minimized .quote-preview-dialog__header span {
  font-size: 9px;
  letter-spacing: .09em;
}

.quote-preview-modal.is-minimized .quote-preview-dialog__header h2 {
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.quote-preview-modal.is-minimized .quote-preview-header-actions { flex: 0 0 auto; }

.quote-preview-modal.is-minimized .quote-preview-dialog__body,
.quote-preview-modal.is-minimized .quote-preview-dialog__footer {
  display: none;
}

.quote-preview-modal.is-minimized .quote-preview-dialog__header {
  min-height: 46px;
  padding: 8px 10px 8px 14px;
  cursor: pointer;
}

.quote-preview-modal.is-minimized .quote-preview-dialog__header h2 { font-size: 13px; }

/* 收起时那个按钮变成「展开」，别再用 − 让人以为还能再收一次 */
.quote-preview-modal.is-minimized .quote-preview-minimize {
  width: auto;
  padding: 0 10px;
  font-size: 12px;
  border-color: var(--brand);
  color: var(--brand);
}

/* 窄屏没有「后面」可看，收起反而碍事，直接不给这个按钮 */
@media (max-width: 1240px) {
  .quote-preview-minimize { display: none; }
}

.quote-preview-dialog__header,
.quote-preview-dialog__footer,
.quote-preview-paper {
  background: #fff;
}

.quote-preview-dialog__header {
  border-bottom-color: var(--line);
}

.quote-preview-dialog__header span {
  color: var(--brand);
}

.quote-preview-paper__brand {
  border-bottom-color: var(--brand);
}

/* ================================================================== *
 * v10.64 「报价与规格」减高：这一页右栏太长（8 行要滚十屏），
 * 而左栏一屏半就到底。下面几条是针对这个问题的，纯版式，不动业务逻辑。
 * ================================================================== */

/* 1) 左栏可以收起来：收起后右栏占满，明细少滚几屏 */
.route--quote.quote-left-collapsed .quote-main-grid { grid-template-columns: minmax(0, 1fr); }
.route--quote.quote-left-collapsed .quote-col--left { display: none; }

/* 2) 明细行头：只留「第 N 行 + 产品 + 金额 + 删除」，压矮一半 */
.quote-line__head { padding: 7px 14px; }
.quote-line__head strong { font-size: 9.5px; }
.quote-line__head > span { font-size: 10px; color: #5d7376; }
.quote-line__amount { margin-left: auto; color: var(--brand); font-size: 11px; white-space: nowrap; }
.quote-line__head .order-form-line__remove { font-size: 8.5px; }

/* 3) 空的阶梯价 / 花型图收成一行：一行 30 来像素，而不是一整块 */
.quote-line__slim {
  min-height: 32px;
  padding: 5px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px dashed #e6ecea;
  color: #8a9697;
  font-size: 8.5px;
}
.quote-line__slim > span { flex: 0 0 auto; color: #22494c; font-size: 9.5px; font-weight: 750; }
.quote-line__slim > small { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-slim-add {
  flex: 0 0 auto;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--brand);
  font-size: 8.5px;
  font-weight: 700;
  cursor: pointer;
}
.quote-slim-add:hover { border-color: var(--brand); }

/* 4) 分组说明收进问号：那句话不再占一整行 */
.quote-group__hint {
  margin-left: 6px;
  width: 15px;
  height: 15px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: #97a4a5;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  cursor: help;
}

/* 5) 校验提示可以点：跳过去那一格会闪一下 */
.collect-candidate-issues li[data-quote-issue-line] { cursor: pointer; }
.collect-candidate-issues li[data-quote-issue-line]:hover { background: #f3f8f6; }
.is-issue-flash {
  animation: quote-issue-flash 1.4s ease-out;
}
@keyframes quote-issue-flash {
  0%, 100% { box-shadow: none; }
  15%, 55% { box-shadow: 0 0 0 3px rgba(35, 111, 102, .28); }
}

/*
 * 6) 字段排几列，按**右栏自己的宽度**决定，而不是按视口宽度。
 *
 * 为什么：左栏收起后右栏从 743px 变成 1079px，可行数一行没少 ——
 * 因为列数是写死的（或按视口断点算的），面板再宽也还是那么几列。
 * 量出来的后果就是「收起左栏只多了空白、没少滚」。
 * 改成容器查询：右栏够宽就排 5 列，10 个常用字段从 4 行压到 2 行。
 * （v10.27 在历史参考面板上踩过同一个坑：断点看视口、不看面板。）
 */
.quote-form-panel { container-type: inline-size; container-name: quoteform; }
@container quoteform (min-width: 960px) {
  .collect-candidate__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .quote-field-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* 7) 逐行折叠：点行头把这一行收起来，只留「第 N 行 + 产品 + 金额 + 删除」。
      收起是 CSS 藏起来，输入框仍在 DOM 里 —— 数据不会被折没。 */
.quote-line__fold {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  cursor: pointer;
}
.quote-line__fold:hover { border-color: var(--brand); color: var(--brand); }
.quote-line.is-folded { margin-bottom: 8px; }
.quote-line.is-folded .quote-line__head { border-bottom: 0; }
.quote-line.is-folded .collect-candidate__grid,
.quote-line.is-folded .quote-line__extra,
.quote-line.is-folded .quote-line__slim,
.quote-line.is-folded .quote-tier-block,
.quote-line.is-folded .quote-attachments { display: none; }

/* ================================================================== *
 * v10.65 「报价与规格」观感：少盒子 / 立主次 / 一个强调色 / 用间距分组
 *
 * 起因：用户说「比之前好些，但观感上总感觉差点意思」。
 * 量出来根因是**表单自己的字比单据那张纸还小**（辅助文字 7~8.5px、标签 10.5px、
 * 输入值 12px）—— 之前只把预览那张纸的字号提上去了，表单没动。
 * 四条原则：
 *   少一层盒子 —— 一行一条细线，不再每行一个圆角卡片
 *   立主次     —— 产品名当标题、金额加重、标签加深、辅助文字提到 11px
 *   一个强调色 —— 行里不再出现蓝色，蓝色只留给按钮
 *   用间距分组 —— 行内不再用小卡片切块
 * 全部限定在 #route-quote 里：订单、样品单那几个表单动不得（同一批类名到处在用）。
 * ================================================================== */

/* 1) 明细行：整圈边框 → 一条细线；行头不再有独立底色 */
#route-quote .quote-line {
  margin-bottom: 0;
  padding: 2px 0 12px;
  border: 0;
  border-top: 1px solid #e8eef1;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
#route-quote .quote-line__head {
  padding: 10px 0;
  border-bottom: 0;
  background: transparent;
}
#route-quote .quote-line__head strong { color: #8c9ca0; font-size: 11px; }
#route-quote .quote-line__head > span { flex: 0 1 auto; color: #16323a; font-size: 12.5px; font-weight: 650; }
/* 金额和「删除这一行」编成一组靠右 —— 没有金额时删除按钮也不会跟产品名挤在一起 */
#route-quote .quote-line__head-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
#route-quote .quote-line__amount { color: #16323a; font-size: 13.5px; font-weight: 800; }
#route-quote .order-form-line__remove { color: #b4655f; font-size: 11px; }
#route-quote .quote-line__fold { width: 22px; height: 22px; font-size: 11px; }

/* 2) 字段：标签加深加大（10.5 → 11.5），输入值 12 → 13 */
#route-quote .collect-candidate__grid { padding: 2px 0 0; gap: 12px; }
#route-quote .collect-candidate-field > span { color: #5b7178; font-size: 11.5px; font-weight: 600; }
#route-quote .collect-candidate-field input,
#route-quote .collect-candidate-field textarea,
#route-quote .collect-candidate-field select { color: #16323a; font-size: 13px; }

/* 3) 辅助文字：7~8.5px → 11px，别再是「雾」 */
#route-quote .quote-line__extra { margin: 10px 0 0; border-color: #e8eef1; background: transparent; }
#route-quote .quote-line__extra > summary { color: #5b7178; font-size: 11px; }
#route-quote .quote-line__extra > summary b { font-size: 10.5px; }
#route-quote .quote-line__slim { padding: 6px 0 0; min-height: 28px; border-top: 0; }
#route-quote .quote-line__slim > span { color: #5b7178; font-size: 11.5px; }
#route-quote .quote-line__slim > small { color: #8c9ca0; font-size: 11px; }
#route-quote .quote-slim-add { padding: 4px 10px; font-size: 11px; }

/* 4) 二级文字整体抬一档：分组标题、面板副标题、校验提示 */
#route-quote .quote-group legend { color: #16323a; font-size: 12px; }
#route-quote .quote-group__hint { font-size: 10px; }
#route-quote .tool-panel__header p { color: #8c9ca0; font-size: 11.5px; }
#route-quote .collect-candidate-issues li { font-size: 11px; }

/* 5) 一个强调色：序号徽标不再用蓝色（蓝色只留给按钮） */
#route-quote .section-index { color: #5b7178; background: #eef2f4; }
#route-quote .section-index--muted { color: #8c9ca0; background: #f3f6f7; }

/* 6) 左栏：四张小卡统一成「一条安静提示 + 主输入 + 一行门槛 + 扁平列表」 */
#route-quote .quote-helper-card { margin-bottom: 14px; padding: 0; border: 0; border-radius: 0; background: transparent; gap: 10px; }
#route-quote .quote-helper-card__icon { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; color: #5b7178; background: #eef2f4; font-size: 9px; }
#route-quote .quote-helper-card strong { margin: 2px 0 3px; color: #5b7178; font-size: 11.5px; }
#route-quote .quote-helper-card p { color: #8c9ca0; font-size: 11px; line-height: 1.7; }
#route-quote .quote-prompt-field textarea { min-height: 132px; font-size: 12px; }
#route-quote .quote-intake-body .primary-button { font-size: 12.5px; }

/* 「要发给客户还差」：从米黄卡片改成一条分隔行，只有真缺东西时才暖色 */
#route-quote .quote-missing-card { margin-top: 14px; padding: 12px 0 0; border: 0; border-top: 1px solid #e8eef1; border-radius: 0; background: transparent; }
#route-quote .quote-missing-card > div:first-child { color: #5b7178; font-size: 11.5px; }
#route-quote .quote-missing-card > div:first-child strong { min-width: 22px; height: 22px; border-radius: 7px; font-size: 10.5px; }
#route-quote .quote-missing-list { margin-top: 8px; gap: 5px; }
#route-quote .quote-missing-list span { padding: 3px 8px; font-size: 11px; }
#route-quote .quote-missing-list span.is-done { background: #f1f4f3; }

/* 报价单列表：卡片 → 扁平行（和明细行用同一套语言） */
#route-quote .quote-recent { margin-top: 16px; padding-top: 14px; }
#route-quote .quote-subheading strong { font-size: 11.5px; }
#route-quote .quote-subheading button { font-size: 11px; }
#route-quote .quote-list-filters input,
#route-quote .quote-list-filters select { height: 32px; font-size: 11px; }
#route-quote .quote-draft-list { gap: 0; }
#route-quote .quote-draft-item {
  padding: 9px 8px;
  border: 0;
  border-bottom: 1px solid #eef2f4;
  border-radius: 0;
  background: transparent;
}
#route-quote .quote-draft-item:hover { background: #f6faf9; }
#route-quote .quote-draft-item.is-active { background: #eef5f4; box-shadow: inset 3px 0 0 var(--teal); }
#route-quote .quote-draft-item strong { font-size: 11.5px; }
#route-quote .quote-draft-item span,
#route-quote .quote-draft-item small { font-size: 10.5px; }
#route-quote .quote-draft-item__copy { padding: 2px 8px; font-size: 10px; }
#route-quote .quote-draft-item__followup { font-size: 10px; }

/* 历史报价参考：字号跟着抬一档（原来 7.5~10px） */
#route-quote .quote-history-empty strong { font-size: 12px; }
#route-quote .quote-history-empty p { font-size: 11px; }
#route-quote .quote-history-summary span,
#route-quote .quote-history-summary small { font-size: 10.5px; }
#route-quote .quote-history-card__score span { font-size: 10.5px; }
#route-quote .quote-history-card__title strong { font-size: 11.5px; }
#route-quote .quote-history-card__title span { font-size: 10.5px; }
#route-quote .quote-history-card__main > p { font-size: 11px; }
#route-quote .quote-history-reasons span { font-size: 10.5px; }
#route-quote .quote-history-card__foot { font-size: 10.5px; }

/*
 * 表头那几组用的是 .quote-field-grid（不是明细行的 .collect-candidate__grid），
 * 而 styles.css 里已经有一条 `#route-quote .quote-field-grid label > span`（10.5px）。
 * 那条选择器多一个元素、权重更高，光靠 `.collect-candidate-field > span` 是压不过的 ——
 * 所以这里用**一模一样的选择器**写一遍，靠「ui-refresh.css 排在后面」赢下来。
 * （又一处「同一个组件两套选择器」的坑，量字号才发现的。）
 */
#route-quote .quote-field-grid label > span { color: #5b7178; font-size: 11.5px; font-weight: 600; }
#route-quote .quote-field-grid input,
#route-quote .quote-field-grid select { color: #16323a; font-size: 13px; }
#route-quote .quote-form legend { color: #16323a; font-size: 12px; }

/*
 * 字提上来了，行也跟着变高 —— 用「输入框高度」把这部分补回来，而不是把字又缩回去。
 * 这一页有几十个输入框，每个省 5px 就是一屏。只作用于 #route-quote。
 */
#route-quote .quote-field-grid input,
#route-quote .quote-field-grid select { height: 38px; }
#route-quote .collect-candidate-field input,
#route-quote .collect-candidate-field select { height: 36px; }
#route-quote .quote-field-grid label > span { margin-bottom: 5px; }
#route-quote .collect-candidate-field > span { margin-bottom: 5px; }
#route-quote .collect-candidate__grid { gap: 10px; }
#route-quote .quote-line__head { padding: 8px 0; }

/*
 * 分组之间的那条线，原来挂在 fieldset 的**下边框**上 —— 于是每个分组标题上方都横着一条线，
 * 看着像「上一条的尾巴」，归属不清。改成挂在标题**下方**：标题 → 一条线 → 字段，
 * 线的归属一眼就清楚，也顺带省掉每组上方那 17px 内边距。
 */
#route-quote .quote-form fieldset { padding: 0 0 22px; border-bottom: 0; }
#route-quote .quote-form legend {
  margin: 0 0 14px;
  padding: 0 0 9px;
  border-bottom: 1px solid #e8eef1;
}

/*
 * 「06 产品明细」原来套的是「工具面板标题」那一套：左右各 22px 内边距 + min-height 82px +
 * 自己的下边框，标题还是 16px —— 于是它比上面 5 个分组多缩进 22px、字号大一档，
 * 看起来就是「跑偏」。这里把它拉回和分组一模一样：同样的缩进、同样的字号、同样的标题下一条线。
 */
#route-quote .quote-lines-block { margin-top: 0; padding-top: 0; border-top: 0; }
#route-quote .quote-lines-block > .tool-panel__header {
  min-height: 0;
  margin: 0 0 14px;
  padding: 0 0 9px;
  align-items: center;
  border-bottom: 1px solid #e8eef1;
}
#route-quote .quote-lines-block > .tool-panel__header > div:first-child { gap: 8px; }
#route-quote .quote-lines-block > .tool-panel__header h3 { margin: 0; font-size: 12px; }
#route-quote .quote-lines-block > .tool-panel__header p { display: none; }
/* 第一行不要再画上边线：紧跟在标题那条线后面，两条线挨在一起像画重了 */
#route-quote .quote-line:first-of-type { border-top: 0; }

/*
 * 左栏的「三级缩进」：模块标题在 x≈122、一句话开始在 x≈80、客户需求在 x≈40 ——
 * 块与块的**边框**是齐的（量过，都是 313），但**文字**的左边缘差了三档，看着就是阶梯。
 * 处理：左栏里除了模块抬头，其余区块的小标题一律同一套（同样的字号/字重/颜色/左边缘）。
 */
#route-quote .quote-helper-card { display: block; }
#route-quote .quote-helper-card__icon { display: none; }
#route-quote .quote-helper-card strong { margin: 0 0 4px; color: #5b7178; font-size: 11.5px; font-weight: 650; }
#route-quote .quote-helper-card p { margin: 0; color: #8c9ca0; font-size: 11px; }
#route-quote .quote-subheading strong { color: #5b7178; font-size: 11.5px; font-weight: 650; }
#route-quote .quote-subheading button { color: var(--brand); font-size: 11px; }
#route-quote .quote-missing-card > div:first-child { font-weight: 650; }
#route-quote .quote-prompt-field > span { font-weight: 650; }
/* 左栏抬头的文字缩进也跟着内容走（原来比正文多 2px） */
#route-quote .quote-intake-panel > .tool-panel__header { padding-inline: 20px; }
/* 小标题与它下面那块内容之间统一 8px，别一处 4 一处 12 */
#route-quote .quote-prompt-field > span { margin-bottom: 8px; }

/* ------------------------------------------------------------------ *
 * v9.1 订单详情弹窗
 * 点订单表任意一行打开；同一单据的多条明细共用同一份详情。
 * ------------------------------------------------------------------ */

.order-table__row {
  cursor: pointer;
  transition: background .15s ease;
}

.order-table__row:hover,
.order-table__row:focus-visible {
  background: #f2f8f6;
  outline: none;
}

.order-detail-dialog {
  width: min(1080px, 96vw);
}

.order-detail-head {
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line, #e1e8e5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.order-detail-head > div {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.order-detail-no {
  color: #203b40;
  font-size: 18px;
  letter-spacing: .01em;
}

.order-detail-tag {
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  color: #4d6b6d;
  background: #e7efed;
  font-size: 8px;
  font-weight: 800;
}

.order-detail-tag.is-sell { color: #2f745c; background: #e4f4eb; }
.order-detail-tag.is-buy { color: #8a5a2b; background: #fdf0dd; }

.order-detail-amount {
  color: #1d6f70;
  font-size: 19px;
  font-weight: 850;
}

.order-detail-block {
  margin-top: 18px;
}

.order-detail-block > h3 {
  margin: 0 0 9px;
  color: #27484b;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
}

.order-detail-rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 6px 18px;
  padding: 12px 14px;
  border: 1px solid var(--line, #e1e8e5);
  border-radius: 12px;
  background: #fff;
}

.order-detail-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.order-detail-row > span {
  flex: 0 0 74px;
  color: #718285;
  font-size: 8px;
  font-weight: 750;
}

.order-detail-row > strong {
  min-width: 0;
  color: #314b4f;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.5;
  word-break: break-word;
}

.order-detail-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line, #e1e8e5);
  border-radius: 12px;
  background: #fff;
}

.order-detail-table {
  width: 100%;
  border-collapse: collapse;
}

.order-detail-table th {
  padding: 9px 11px;
  border-bottom: 1px solid var(--line, #e1e8e5);
  color: #718285;
  background: #f7faf9;
  font-size: 8px;
  text-align: left;
  white-space: nowrap;
}

.order-detail-table td {
  padding: 10px 11px;
  border-bottom: 1px solid #eef3f1;
  color: #314b4f;
  font-size: 9.5px;
  vertical-align: top;
}

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

.order-detail-line { color: #8b989a; width: 34px; }
.order-detail-num { text-align: right; white-space: nowrap; }

.order-detail-spec {
  display: block;
  margin-top: 3px;
  color: #7c8b8d;
  font-size: 8px;
  line-height: 1.55;
}

.order-detail-images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
}

.order-detail-image {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  border: 1px solid var(--line, #e1e8e5);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
}

.order-detail-image:hover { border-color: var(--brand, #1d6f70); }

.order-detail-image img {
  width: 100%;
  height: 132px;
  object-fit: contain;
  border-radius: 8px;
  background: #f4f7f6;
}

.order-detail-image > span {
  color: #314b4f;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1.4;
}

/* PDF 附件：塞进 <img> 只会是一张裂图，改成写个 PDF 标（2026-10-15） */
.order-detail-image > span.order-detail-image__file {
  display: grid;
  place-items: center;
  width: 100%;
  height: 132px;
  padding: 0;
  border-radius: 8px;
  background: #f4f7f6;
  color: #8b989a;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}

.order-detail-image > small { color: #8b989a; font-size: 7.5px; }

.order-detail-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

.order-detail-block__head > h3 { margin: 0; }

.order-detail-upload {
  display: flex;
  align-items: center;
  gap: 8px;
}

.order-detail-upload select {
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line, #dfe6e3);
  border-radius: 8px;
  color: #314b4f;
  background: #fff;
  font-family: inherit;
  font-size: 9px;
}

.order-detail-upload-button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--brand, #1d6f70);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  color: var(--brand, #1d6f70);
  background: #fff;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}

.order-detail-upload-button:hover { background: #f2f8f6; }

.order-detail-images-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--line, #d8e1de);
  border-radius: 12px;
  color: #8b989a;
  background: #fafbfa;
  font-size: 9px;
  line-height: 1.6;
}

.order-detail-image { position: relative; }
.order-detail-image > a { display: block; }

.order-detail-image__remove {
  align-self: flex-start;
  padding: 2px 8px;
  border: 1px solid #e9d3cc;
  border-radius: 999px;
  color: #a14f3d;
  background: #fff6f4;
  font-family: inherit;
  font-size: 7.5px;
  font-weight: 750;
  cursor: pointer;
}

.order-detail-image__remove:hover { border-color: #d9a999; background: #fdeee9; }

/* v9.4 手工录入 / 修改订单 */
.order-overview__actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.order-detail-head__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.order-form-dialog { width: min(1180px, 96vw); }

.order-form-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.order-form-line {
  margin-bottom: 10px;
  border: 1px solid var(--line, #e1e8e5);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.order-form-line__head {
  min-height: 34px;
  padding: 0 13px;
  border-bottom: 1px solid #eef3f1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #4d6b6d;
  background: #f7faf9;
}

.order-form-line__head > strong { font-size: 9px; }

.order-form-line__remove {
  padding: 3px 9px;
  border: 1px solid #e9d3cc;
  border-radius: 999px;
  color: #a14f3d;
  background: #fff6f4;
  font-family: inherit;
  font-size: 7.5px;
  font-weight: 750;
  cursor: pointer;
}

.order-form-line__remove:hover { border-color: #d9a999; background: #fdeee9; }

/* v9.7 订单跟踪 */
.track-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.track-step {
  min-width: 36px;
  padding: 4px 6px;
  border: 1px dashed #cbd8d4;
  border-radius: 7px;
  color: #8b989a;
  background: #fff;
  font-family: inherit;
  font-size: 7.5px;
  font-weight: 750;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.track-step:hover { border-color: var(--brand, #1d6f70); }

.track-step.is-done {
  border-style: solid;
  border-color: #cae2d7;
  color: #2f745c;
  background: #e4f4eb;
}

.track-step.is-planned {
  border-style: solid;
  border-color: #eadfc8;
  color: #8a5a2b;
  background: #fff7e7;
}

.track-step.is-overdue {
  border-style: solid;
  border-color: #e9c6bc;
  color: #a14f3d;
  background: #fdeee9;
}

.track-delivery { font-size: 10.5px; }
.track-delivery.is-bad { color: #a14f3d; }
.track-delivery.is-warn { color: #8a5a2b; }

.milestone-dialog { width: min(680px, 96vw); }
.milestone-fields { padding: 14px 0 0; }
.milestone-hint {
  margin: 12px 0 0;
  color: #8b989a;
  font-size: 8.5px;
  line-height: 1.7;
}
.milestone-hint b { color: #5b7476; }
.milestone-date-row { display: flex; gap: 6px; align-items: center; }
.milestone-date-row > input { flex: 1 1 auto; min-width: 0; }
.milestone-quick {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line, #dfe6e3);
  border-radius: 9px;
  color: var(--brand, #1d6f70);
  background: #fff;
  font-family: inherit;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}
.milestone-quick:hover { border-color: var(--brand, #1d6f70); background: #f2f8f6; }

.order-table--tracking td { vertical-align: middle; }

/* 走完的单沉到最下面，用低对比度提示"这条不用管了" */
.order-table__row.is-finished { opacity: .62; }
.order-table__row.is-finished:hover { opacity: .85; }

/* v10.5 样品单转大货 */
.order-form-banner {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #cfe3df;
  border-radius: 12px;
  color: #2f5f5c;
  background: #eff8f6;
  font-size: 9.5px;
  line-height: 1.7;
}

.order-form-banner b { color: #1d6f70; }

.order-link-button {
  padding: 1px 8px;
  border: 1px solid #cfe3df;
  border-radius: 999px;
  color: var(--brand, #1d6f70);
  background: #f2f8f6;
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 750;
  cursor: pointer;
}

.order-link-button:hover { border-color: var(--brand, #1d6f70); background: #e6f3f0; }

/* v10.6 进度颜色图例 + 节点附件 */
.track-legend {
  margin: 0 0 10px;
  padding: 9px 12px;
  border: 1px solid var(--line, #e1e8e5);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: #fbfdfc;
}

.track-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #5b7476;
  font-size: 8.5px;
  font-weight: 700;
}

.track-legend i.track-step {
  min-width: 0;
  padding: 3px 7px;
  cursor: default;
}

.track-legend > small { color: #9aa6a5; font-size: 8px; }

.milestone-files { margin-top: 16px; }
.milestone-files > h4 {
  margin: 0 0 9px;
  color: #27484b;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .08em;
}

.milestone-upload { margin-top: 10px; }

.order-detail-file {
  height: 132px;
  display: grid;
  place-content: center;
  border-radius: 8px;
  color: #5b7476;
  background: #f4f7f6;
  font-size: 9px;
  font-weight: 700;
  word-break: break-all;
  text-align: center;
  padding: 8px;
}

/* v10.8 归档按钮：表格里的一小块，别喧宾夺主 */
.track-archive {
  margin-top: 7px;
  min-height: 26px;
  padding: 0 10px;
  font-size: 8.5px;
}

/* 进度方块：上面节点名，下面日期 —— "预计 9/23 到厂"要一眼看得见 */
.track-step {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 46px;
  padding: 5px 6px;
}

.track-step > b { font-size: 8px; font-weight: 800; }
.track-step > i {
  font-style: normal;
  font-size: 7px;
  font-weight: 700;
  opacity: .82;
}

.track-step.is-today {
  border-style: solid;
  border-color: var(--brand, #1d6f70);
  color: #1d6f70;
  background: #eef7f6;
  box-shadow: 0 0 0 2px rgba(29, 111, 112, .12);
}

/* 今天要确认的清单 */
.tracking-attention {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid #e6dcc4;
  border-radius: 14px;
  background: #fffdf6;
}

.tracking-attention__head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.tracking-attention__head > h4 {
  margin: 0;
  color: #7a5a2a;
  font-size: 11px;
  font-weight: 850;
}

.tracking-attention__head > small { color: #96907f; font-size: 8px; }

/* v10.86 这个清单条数一多就吃掉半屏，所以整块做成可折叠（<details>）：
   抬头那行就是开关 —— 点一下收起/展开。折起来时抬头里的条数还留着，
   不会变成"不知道里面有没有事"的盲盒；右端给一个明确的收起/展开提示。 */
.tracking-attention__head {
  align-items: center;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.tracking-attention__head::-webkit-details-marker { display: none; }

.tracking-attention__head::before {
  content: "▾";
  flex: 0 0 auto;
  color: #b08a4e;
  font-size: 11px;
  line-height: 1;
  transition: transform .15s ease;
}

.tracking-attention:not([open]) .tracking-attention__head { margin-bottom: 0; }

.tracking-attention:not([open]) .tracking-attention__head::before { transform: rotate(-90deg); }

.tracking-attention__head::after {
  content: "收起";
  margin-left: auto;
  flex: 0 0 auto;
  color: #b08a4e;
  font-size: 12px;
  font-weight: 700;
}

.tracking-attention:not([open]) .tracking-attention__head::after { content: "展开"; }

.tracking-attention__head:hover::after { text-decoration: underline; }

.tracking-attention__list { display: grid; gap: 7px; }

.tracking-attention__item {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 9px 12px;
  border: 1px solid #ede5d2;
  border-radius: 10px;
  background: #fff;
}

.tracking-attention__item.is-overdue {
  border-color: #efd6cc;
  background: #fff9f7;
}

.tracking-attention__who { min-width: 210px; display: flex; flex-direction: column; gap: 2px; }
.tracking-attention__who > strong { color: #27484b; font-size: 10.5px; }
.tracking-attention__who > span { color: #8b989a; font-size: 8px; }

.tracking-attention__what { flex: 1 1 280px; }
.tracking-attention__what > span { color: #314b4f; font-size: 10px; line-height: 1.5; }
.tracking-attention__item.is-overdue .tracking-attention__what > span { color: #8a3f2e; }

.tracking-attention__actions { display: flex; gap: 7px; }
.tracking-attention__actions .primary-button,
.tracking-attention__actions .secondary-button { min-height: 30px; padding: 0 12px; font-size: 9px; }

.order-detail-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.order-detail-related-card {
  padding: 12px 14px;
  border: 1px solid var(--line, #e1e8e5);
  border-radius: 12px;
  display: grid;
  gap: 4px;
  color: #314b4f;
  background: #fff;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.order-detail-related-card:hover { border-color: var(--brand, #1d6f70); background: #f6fbf9; }
.order-detail-related-card > strong { font-size: 10px; }
.order-detail-related-card > span:not(.order-detail-related-tag) { font-size: 9px; color: #5b7476; }
.order-detail-related-card > small { color: #8b989a; font-size: 8px; }

.order-detail-related-tag {
  justify-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  color: #2f745c;
  background: #e4f4eb;
  font-size: 7.5px;
  font-weight: 800;
}

.order-detail-related-tag.is-buy { color: #8a5a2b; background: #fdf0dd; }

.order-detail-loading,
.order-detail-empty {
  min-height: 140px;
  display: grid;
  place-content: center;
  color: #8b989a;
  font-size: 10px;
}

@media (max-width: 720px) {
  .order-detail-row { display: block; }
  .order-detail-row > span { display: block; margin-bottom: 2px; }
  .order-detail-dialog { width: 100%; }
}

/* v9.2 毛利区块 */
.order-margin {
  padding: 14px 16px;
  border: 1px solid var(--line, #e1e8e5);
  border-radius: 12px;
  background: #fff;
}

.order-margin.is-muted {
  color: #8b989a;
  background: #f7faf9;
  font-size: 9.5px;
}

.order-margin__main {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line, #e1e8e5);
}

.order-margin__main > div {
  display: grid;
  gap: 3px;
}

.order-margin__main span {
  color: #718285;
  font-size: 8px;
  font-weight: 750;
}

.order-margin__main strong {
  color: #1d6f70;
  font-size: 21px;
  font-weight: 850;
  line-height: 1.15;
}

.order-margin.is-bad .order-margin__main strong { color: #a14f3d; }

.order-margin__rows {
  margin-top: 11px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 20px;
}

.order-margin__rows > div {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.order-margin__rows span {
  flex: 0 0 108px;
  color: #718285;
  font-size: 8px;
  font-weight: 750;
}

.order-margin__rows strong { color: #314b4f; font-size: 11px; }
.order-margin__rows small { color: #7c8b8d; font-size: 8.5px; }

.order-margin__note {
  margin: 11px 0 0;
  color: #8b989a;
  font-size: 8px;
  line-height: 1.6;
}

.toast {
  border-color: var(--line) !important;
  box-shadow: var(--shadow-strong) !important;
}

/* Keep the layout comfortable on tablets and phones. */
@media (max-width: 1180px) {
  .module-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .module-card--future {
    grid-column: 1 / -1;
  }

  .quote-main-grid {
    grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    box-shadow: 10px 0 35px rgba(16, 42, 96, .18);
  }

  .quote-intake-panel {
    position: static;
  }

  .quote-main-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .login-card {
    padding: 24px;
  }

  .topbar {
    height: 70px;
    flex-basis: 70px;
    padding-inline: 16px;
  }

  .topbar__right {
    gap: 10px;
  }

  .today-label {
    display: none;
  }

  .route--home,
  .route--tool {
    padding: 18px 14px 26px;
  }

  .home-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  /* 窄屏上那句提示跟在招呼下面，靠左读起来才顺 */
  .home-intro__hint { text-align: left; }

  .module-grid {
    grid-template-columns: 1fr;
  }

  .module-card--future {
    grid-column: auto;
  }

  .quote-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .quote-toolbar__actions {
    width: 100%;
  }

  .quote-toolbar__actions .secondary-button,
  .quote-toolbar__actions .primary-button {
    flex: 1 1 auto;
  }

  .quote-form {
    padding-inline: 16px;
  }

  .quote-field-grid--3,
  .quote-field-grid--4 {
    grid-template-columns: 1fr;
  }

  .quote-field-span-2,
  .quote-field-span-3 {
    grid-column: auto;
  }

  .email-stats,
  .order-overview__stats,
  .admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v4.5.2 · Foxmail-inspired inbox organization without turning the workbench into an ERP */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.email-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.email-inbox-toolbar { align-items: stretch; }
.email-inbox-toolbar__title { min-width: 94px; display: flex; flex-direction: column; justify-content: center; }
.email-search-box { position: relative; min-width: 0; flex: 1; }
.email-search-box input { width: 100%; height: 34px; padding: 0 30px 0 11px; border: 1px solid var(--line); border-radius: 9px; color: #40575c; background: #fbfcfb; font: inherit; font-size: 10px; outline: none; }
.email-search-box input:focus { border-color: #9fc9c3; background: #fff; box-shadow: 0 0 0 3px rgba(29,111,112,.08); }
.email-search-box button { position: absolute; top: 5px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 7px; color: #829193; background: transparent; font-size: 17px; line-height: 1; cursor: pointer; }
.email-smart-views { min-height: 39px; padding: 6px 9px; display: flex; align-items: center; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line-soft); scrollbar-width: thin; }
.email-smart-views button { flex: 0 0 auto; min-height: 27px; padding: 0 8px; border: 0; border-radius: 7px; color: #718183; background: transparent; font: inherit; font-size: 9px; cursor: pointer; white-space: nowrap; }
.email-smart-views button:hover { color: var(--brand); background: #f1f6f5; }
.email-smart-views button.is-active { color: #fff; background: var(--teal); }
.email-smart-views button b { margin-left: 3px; font-size: 8px; opacity: .78; }
.email-list-filters { min-height: 42px; padding: 6px 9px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--line-soft); background: #fbfcfb; }
.email-list-filters select { min-width: 0; flex: 1; height: 29px; padding: 0 6px; border: 1px solid var(--line); border-radius: 8px; color: #607376; background: #fff; font: inherit; font-size: 9px; outline: none; }
.email-list-filters .secondary-button { min-height: 29px; padding: 0 8px; font-size: 9px; white-space: nowrap; }

/* 收件箱减负：去掉重复统计卡、精简视图 tab、收起筛选 */
.email-inbox-toolbar { min-height: 52px; padding: 9px 10px; }
.email-list-filters[hidden] { display: none; }
.email-smart-views { flex-wrap: wrap; overflow: visible; row-gap: 4px; }
/* "更多"用 display:contents 让按钮留在 tab 行内、菜单独占一整行，避免下拉被面板裁掉 */
.email-view-more { display: contents; }
.email-view-more__menu { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 4px; padding-top: 3px; }
.email-view-more__menu[hidden] { display: none; }
.email-view-more__menu button b { margin-left: 3px; font-size: 8px; opacity: .78; }
.email-list-item.is-unread { background: #fff; }
.email-list-item__who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.email-list-item__who strong { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-list-item__dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.email-list-item__meta { display: inline-flex; align-items: center; gap: 6px; }
.email-list-item__clip { flex: 0 0 auto; width: 11px; height: 11px; fill: none; stroke: #9aa8a9; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.email-list-item__bottom em { max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 会话聚合 + 按客户分组 */
.email-group-picker { position: relative; flex: 0 0 auto; }
.email-group-menu { position: absolute; z-index: 30; top: calc(100% + 4px); right: 0; min-width: 120px; padding: 4px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 12px 28px rgba(12,35,40,.16); }
.email-group-menu[hidden] { display: none; }
.email-group-menu button { min-height: 28px; padding: 0 9px; border: 0; border-radius: 7px; color: #4d6266; background: transparent; font: inherit; font-size: 9px; text-align: left; white-space: nowrap; cursor: pointer; }
.email-group-menu button:hover { background: #f1f6f5; }
.email-group-menu button.is-active { color: #fff; background: var(--teal); }
.email-customer-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--line-soft); color: #4a6367; background: #eef6f4; font-size: 9px; }
.email-customer-chip[hidden] { display: none; }
.email-customer-chip button { padding: 3px 8px; border: 1px solid #cfe0dc; border-radius: 7px; color: #4a6367; background: #fff; font: inherit; font-size: 8.5px; cursor: pointer; }
.conv-badge { flex: 0 0 auto; padding: 2px 6px; border-radius: 6px; color: #41646a; background: #e6f0ee; font-size: 7.5px; font-weight: 800; }
.email-conv.is-active .conv-badge, .conv-badge.is-open { color: #fff; background: var(--teal); }
.email-conv-thread { padding: 2px 10px 9px 48px; background: #f7faf9; }
.email-conv-thread__item { width: 100%; margin-top: 4px; padding: 7px 9px; border: 1px solid var(--line-soft); border-radius: 9px; display: grid; gap: 2px; color: inherit; background: #fff; text-align: left; font: inherit; cursor: pointer; }
.email-conv-thread__item:hover { border-color: #cfe0dc; }
.email-conv-thread__item.is-active { border-color: var(--teal); box-shadow: inset 2px 0 0 var(--teal); }
.email-conv-thread__top { display: flex; align-items: center; gap: 6px; }
.email-conv-thread__top strong { flex: 1; min-width: 0; overflow: hidden; color: #3f5a60; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.email-conv-thread__top time { flex: 0 0 auto; color: #98a5a6; font-size: 7.5px; }
.email-conv-thread__subject { overflow: hidden; color: #6b7f82; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.email-conv-thread__item.is-unread .email-conv-thread__subject { color: #33535a; font-weight: 700; }
.email-conv-thread__meta { display: inline-flex; align-items: center; gap: 5px; color: #9aa8a9; font-size: 7.5px; }
.cust-group + .cust-group { border-top: 1px solid var(--line); }
.cust-head { display: flex; align-items: center; gap: 7px; padding: 8px 10px 7px 14px; background: #f3f8f6; }
.cust-head__id { flex: 1; min-width: 0; display: grid; }
.cust-head__id b { overflow: hidden; color: #33535a; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.cust-head__id small { overflow: hidden; color: #93a2a3; font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }
.cust-head em { flex: 0 0 auto; color: #7d8f92; font-size: 8px; font-style: normal; }
.cust-head__only { flex: 0 0 auto; padding: 3px 7px; border: 1px solid #cfe0dc; border-radius: 6px; color: #4a6367; background: #fff; font: inherit; font-size: 8px; cursor: pointer; }
.cust-head__only:hover { background: #f1f6f5; }

/* 业务分析面板：结论条 + 可核对/可修正字段 + 折叠分区 */
.email-analysis-intent { margin: 0 0 6px !important; color: #4a6367; font-weight: 700; }
.inquiry-intent { margin: 0 0 6px !important; color: #4a6367; font-weight: 700; }
.email-verdict { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.email-verdict__item { flex: 0 0 auto; display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 8px; border-radius: 8px; background: #f2f6f4; }
.email-verdict__item em { color: #8b9b9c; font-size: 7.5px; font-style: normal; }
.email-verdict__item strong { color: #33535a; font-size: 8.5px; }
.email-block { margin-bottom: 11px; border: 1px solid var(--line-soft); border-radius: 10px; background: #fff; }
.email-block[hidden] { display: none; }
.email-block > summary { padding: 9px 11px; display: flex; align-items: center; gap: 6px; color: #4d6266; font-size: 9.5px; font-weight: 700; cursor: pointer; list-style: none; }
.email-block > summary::-webkit-details-marker { display: none; }
.email-block > summary::before { content: "▸"; color: #9aa8a9; font-size: 9px; }
.email-block[open] > summary::before { content: "▾"; }
.email-block > summary b { padding: 1px 6px; border-radius: 6px; color: #fff; background: var(--brand); font-size: 7.5px; }
.email-block__hint { margin-left: auto; color: #96a2a3; font-size: 8px; font-weight: 400; }
.email-block > :not(summary) { margin: 0 11px 11px; }
.email-field-list { display: grid; gap: 8px; }
/* 标签列 90px → 104px：加上「核心」标（+「缺」标）后，四字字段名会挤到换行 */
.email-field { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 8px; }
.email-field > dt { display: flex; align-items: center; gap: 4px; color: #5b7074; font-size: 8px; font-weight: 800; }
.email-field > dd { margin: 0; }
.email-field input { width: 100%; height: 30px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; color: #3d565b; background: #fbfcfb; font: inherit; font-size: 9px; outline: none; }
.email-field input:focus { border-color: rgba(29,111,112,.48); background: #fff; box-shadow: 0 0 0 3px rgba(29,111,112,.07); }
.email-field.is-manual input { border-color: #bcd9d2; background: #f6fbf9; }
.email-field__critical { padding: 1px 4px; border-radius: 5px; color: var(--muted); background: var(--line-soft); font-size: 7px; font-weight: 800; }
.email-field__manual { padding: 1px 4px; border-radius: 5px; color: #2f6b5f; background: #dcefe9; font-size: 7px; font-weight: 800; }
.email-field__missing { padding: 1px 4px; border-radius: 5px; color: #a84f3e; background: #fbe4dd; font-size: 7px; font-weight: 800; }
.email-field__dot { width: 6px; height: 6px; border-radius: 50%; background: #cbd6d5; }
.email-field__dot[data-level="high"] { background: #56a48a; }
.email-field__dot[data-level="mid"] { background: #d3a24a; }
.email-field__dot[data-level="low"] { background: #c9776a; }
.email-field__quote { grid-column: 2; margin-top: -3px; padding: 0; border: 0; max-width: 100%; overflow: hidden; color: #93a2a3; background: none; font: inherit; font-size: 7.5px; font-style: italic; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.email-field__quote:hover { color: #3d6f8c; text-decoration: underline; }
.email-field-note { margin-top: 10px !important; color: #9aa8a9; font-size: 7.5px; line-height: 1.6; }
.email-product-lines h4 { margin: 0 0 6px; color: #5b7074; font-size: 8px; font-weight: 800; }
.email-product-line { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px; border-radius: 8px; background: #f4f8f7; }
.email-product-line + .email-product-line { margin-top: 5px; }
.email-product-line span { color: #4d6266; font-size: 8px; }
.email-next-action { padding: 8px 10px; border-radius: 9px; color: #3f5a60; background: #eef6f4; font-size: 8.5px; line-height: 1.6; }
.email-next-action[hidden] { display: none; }
.email-quote-hit { padding: 1px 2px; border-radius: 3px; background: #fff3c4; color: inherit; }
.email-bulk-toolbar { min-height: 38px; padding: 6px 9px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid #d9e8f4; color: #5d7174; background: #f2f8ff; font-size: 9px; }
.email-bulk-toolbar[hidden] { display: none; }
.email-bulk-toolbar label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.email-bulk-toolbar > span { flex: 1; color: #809093; }
.email-bulk-toolbar > div { display: flex; gap: 4px; }
.email-bulk-toolbar button { min-height: 25px; padding: 0 6px; border: 1px solid #d1dfeb; border-radius: 6px; color: #4e6d76; background: #fff; font: inherit; font-size: 8px; cursor: pointer; }
.email-list-item { padding-left: 48px; }
.email-list-item.is-unread { background: #fcfefd; }
.email-list-item.is-unread > .email-list-open b, .email-list-item.is-unread > .email-list-open .email-list-item__top strong { color: #203f45; font-weight: 800; }
.email-list-item.is-selected { background: #f2f8ff; }
.email-list-open { width: 100%; padding: 0; border: 0; color: inherit; background: transparent; text-align: left; font: inherit; cursor: pointer; }
.email-list-item__actions { position: absolute; top: 13px; left: 13px; display: flex; align-items: center; gap: 4px; }
.email-list-item__select { width: 13px; height: 13px; accent-color: var(--teal); cursor: pointer; }
.email-list-item__star { width: 18px; height: 18px; padding: 0; border: 0; color: #a4b0b0; background: transparent; font-size: 15px; line-height: 1; cursor: pointer; }
.email-list-item__star.is-starred { color: #c58b36; }
.email-list-item__thread { margin-left: 4px; padding: 2px 5px; border-radius: 5px; color: #668184; background: #edf3f2; font-size: 8px; font-weight: 700; }
.email-list-item__bottom { min-width: 0; }
.email-list-item__bottom small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email-pagination { min-height: 43px; padding: 6px 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid var(--line-soft); background: #fbfcfb; }
.email-pagination .secondary-button { min-height: 29px; padding: 0 8px; font-size: 9px; }
.email-pagination .secondary-button:disabled { opacity: .4; cursor: not-allowed; }
.email-pagination span { color: #829092; font-size: 9px; }
.email-subject-zh { margin: -5px 0 12px; color: #5b7074; font-size: 11px; line-height: 1.55; }
.email-language-toolbar { padding: 11px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line-soft); background: #fbfcfb; }
.email-language-toolbar strong, .email-language-toolbar span { display: block; }
.email-language-toolbar strong { color: var(--ink); font-size: 11px; }
.email-language-toolbar span { margin-top: 3px; color: var(--muted); font-size: 8px; }
.email-language-tabs { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.email-language-tabs button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 7px; color: #6f8184; background: transparent; font: inherit; font-size: 9px; cursor: pointer; }
.email-language-tabs button.is-active { color: #fff; background: var(--teal); }
.email-language-tabs button:disabled { opacity: .38; cursor: not-allowed; }
.email-language-actions { display: inline-flex; align-items: center; gap: 8px; }
.email-language-actions .secondary-button { min-height: 28px; font-size: 9px; }
.email-body { font-size: 11px; }
.email-html-body { font-size: 11px; line-height: 1.7; color: #435b60; overflow-wrap: anywhere; }
.email-html-body img { max-width: 100%; height: auto; border-radius: 6px; }
.email-html-body table { max-width: 100%; border-collapse: collapse; }
.email-html-body a { color: #3d6f8c; }
.email-translation-copy > span, .email-bilingual span { display: block; margin-bottom: 8px; color: #789091; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.email-translation-copy p, .email-bilingual p { margin: 0; color: #435b60; white-space: pre-wrap; }
.email-bilingual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.email-bilingual section { min-width: 0; padding: 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: #fbfcff; }
.email-change-list { display: grid; gap: 7px; }
.email-change-list article { padding: 8px 9px; display: grid; gap: 3px; border: 1px solid #d5e4f7; border-radius: 9px; background: #f5f9ff; }
.email-change-list strong { color: #245ba8; font-size: 8px; }
.email-change-list span { color: #405a5f; font-size: 9px; overflow-wrap: anywhere; }
.email-change-list small { color: #809094; font-size: 7.5px; line-height: 1.5; }
.email-reply-builder { margin-top: 15px; padding: 11px; display: grid; gap: 8px; border: 1px solid #d5e4f7; border-radius: 11px; background: #f5f9ff; }
.email-reply-builder label { display: grid; gap: 5px; }
.email-reply-builder label > span { color: #5b7074; font-size: 8px; font-weight: 800; }
.email-reply-builder select, .email-reply-builder textarea { width: 100%; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; color: #40575c; background: #fff; font: inherit; font-size: 9px; outline: none; }
.email-reply-builder textarea { resize: vertical; line-height: 1.6; }
.email-reply-builder .secondary-button { width: 100%; }
.email-draft-meta { margin-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.email-draft-meta > span { color: #789091; font-size: 8px; }
.email-draft-meta .secondary-button { min-height: 30px; padding: 0 10px; font-size: 8px; }

@media (max-width: 980px) {
  .email-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .email-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .email-inbox-toolbar { align-items: stretch; flex-direction: column; }
  .email-inbox-toolbar__title { min-height: 29px; }
  .email-list-filters { flex-wrap: wrap; }
  .email-list-filters select { min-width: 0; width: calc(50% - 3px); flex: 1 1 42%; }
  .email-list-filters .secondary-button { flex: 1 1 100%; }
  .email-bulk-toolbar { align-items: flex-start; flex-wrap: wrap; }
  .email-bulk-toolbar > span { flex: 1 1 auto; }
  .email-bulk-toolbar > div { width: 100%; }
  .email-bulk-toolbar button { flex: 1; }
  .email-language-toolbar { align-items: flex-start; flex-direction: column; }
  .email-bilingual { grid-template-columns: 1fr; }
}

/* v4.5 Inquiry centre */
.inquiry-shell {
  display: grid;
  gap: 16px;
  min-height: 100%;
}

.inquiry-overview,
.inquiry-stats article,
.inquiry-list-panel,
.inquiry-detail-panel,
.inquiry-action-panel {
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}

.inquiry-overview {
  min-height: 102px;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: var(--radius-lg);
}

.inquiry-overview h3 {
  margin: 6px 0 5px;
  color: var(--ink);
  font-size: 22px;
  letter-spacing: -.025em;
}

.inquiry-overview > div > span:not(.inquiry-mode-badge) {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

.inquiry-overview__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.inquiry-mode-badge {
  min-height: 31px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  border: 1px solid #cfe0f6;
  border-radius: 999px;
  color: #245ba8;
  background: #eef5ff;
  font-size: 10px;
  font-weight: 750;
}

.inquiry-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.inquiry-stats article {
  min-height: 96px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
}

.inquiry-stats span,
.inquiry-stats small {
  display: block;
  color: var(--muted);
  font-size: 10px;
}

.inquiry-stats strong {
  display: block;
  margin: 8px 0 4px;
  color: var(--brand);
  font-size: 26px;
  line-height: 1;
}

.inquiry-filter-form {
  padding: 13px 15px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 170px 150px 150px auto;
  align-items: end;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow);
}

.inquiry-filter-form label,
.inquiry-followup-box label,
.inquiry-draft-field {
  display: grid;
  gap: 5px;
}

.inquiry-filter-form label > span,
.inquiry-followup-box label > span,
.inquiry-draft-field > span {
  color: #68777c;
  font-size: 10px;
  font-weight: 700;
}

.inquiry-filter-form input,
.inquiry-filter-form select,
.inquiry-followup-box input,
.inquiry-followup-box textarea,
.inquiry-draft-field textarea,
.inquiry-field input,
.inquiry-field textarea {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  outline: none;
  color: var(--ink-2);
  background: #fbfcff;
  font: inherit;
  font-size: 11px;
}

.inquiry-filter-form input:focus,
.inquiry-filter-form select:focus,
.inquiry-followup-box input:focus,
.inquiry-followup-box textarea:focus,
.inquiry-draft-field textarea:focus,
.inquiry-field input:focus,
.inquiry-field textarea:focus {
  border-color: rgba(29, 111, 224, .55);
  box-shadow: 0 0 0 3px rgba(29, 111, 224, .08);
}

.inquiry-workspace {
  min-height: 720px;
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(420px, 1.2fr) minmax(330px, .88fr);
  gap: 14px;
  align-items: stretch;
}

.inquiry-list-panel,
.inquiry-detail-panel,
.inquiry-action-panel {
  min-height: 720px;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.inquiry-list-panel {
  display: flex;
  flex-direction: column;
}

.inquiry-list-toolbar {
  min-height: 70px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.inquiry-list-toolbar strong,
.inquiry-list-toolbar span {
  display: block;
}

.inquiry-list-toolbar strong {
  color: var(--ink);
  font-size: 13px;
}

.inquiry-list-toolbar span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

.inquiry-list-toolbar .inquiry-list-mark {
  margin: 0;
  padding: 4px 7px;
  border-radius: 999px;
  color: #245ba8;
  background: #eef5ff;
  font-size: 8px;
  font-weight: 800;
}

.inquiry-list {
  min-height: 0;
  height: 648px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.inquiry-list-item {
  position: relative;
  width: 100%;
  padding: 14px 16px;
  display: block;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  color: inherit;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.inquiry-list-item:hover,
.inquiry-list-item.is-active {
  background: #eef5ff;
}

.inquiry-list-item.is-active {
  box-shadow: inset 3px 0 0 var(--brand);
}

.inquiry-list-item__top,
.inquiry-list-item__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.inquiry-list-item__top strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inquiry-list-item__top time,
.inquiry-list-item__meta small {
  flex: 0 0 auto;
  color: #8a989c;
  font-size: 8px;
}

.inquiry-list-item > b {
  display: block;
  margin: 7px 0 8px;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inquiry-stage-pill,
.inquiry-priority-pill {
  padding: 3px 6px;
  border-radius: 6px;
  color: #325d9c;
  background: #eef5ff;
  font-size: 8px;
  font-style: normal;
  font-weight: 750;
}

.inquiry-priority-pill[data-priority="urgent"] { color: #b64d38; background: #fdece7; }
.inquiry-priority-pill[data-priority="high"] { color: #8a6435; background: #fff3df; }
.inquiry-list-item.is-overdue .inquiry-stage-pill { color: #a3473c; background: #fff1ee; }

.inquiry-loading,
.inquiry-empty-state,
.inquiry-action-empty {
  min-height: 160px;
  padding: 26px 20px;
  display: grid;
  place-content: center;
  justify-items: center;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
}

.inquiry-empty-state > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-content: center;
  border-radius: 14px;
  color: var(--brand);
  background: #eef5ff;
  font-size: 9px;
  font-weight: 800;
}

.inquiry-empty-state h4 { margin: 13px 0 5px; color: var(--ink); font-size: 14px; }
.inquiry-empty-state p { max-width: 240px; margin: 0; line-height: 1.7; }

.inquiry-detail {
  min-height: 720px;
  display: flex;
  flex-direction: column;
}

.inquiry-detail__header {
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line-soft);
}

.inquiry-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 11px;
}

.inquiry-detail__badges span {
  padding: 4px 7px;
  border-radius: 999px;
  color: #325d9c;
  background: #eef5ff;
  font-size: 8px;
  font-weight: 750;
}

.inquiry-detail__badges span:last-child { color: #39705e; background: #eff9f4; }
.inquiry-detail__header h3 { margin: 0 0 12px; color: var(--ink); font-size: 18px; line-height: 1.45; }
.inquiry-detail__meta { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; }
.inquiry-detail__meta strong { color: #415a5f; font-size: 10px; }
.inquiry-detail__meta span { color: var(--muted); font-size: 9px; }
.inquiry-detail__meta time { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #94a1a2; font-size: 8px; }

.inquiry-actions [hidden] { display: none !important; }

.inquiry-fields-section,
.inquiry-thread-section { padding: 17px 21px; border-bottom: 1px solid var(--line-soft); }

/* 询盘中心定位为"客户跟进工作台"：这一行跟着 AI 建议走（v10.80 起） */
.inquiry-focus__due > span { display: block; margin-bottom: 5px; color: #8a989c; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.inquiry-focus__due > strong { display: block; color: #33535a; font-size: 11px; font-weight: 800; }
.inquiry-focus__due > strong[data-due="overdue"] { color: #a3473c; }
.inquiry-focus__quick { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 5px; }
.inquiry-focus__quick button { padding: 3px 8px; border: 1px solid #cfe0dc; border-radius: 7px; color: #4a6367; background: #fff; font: inherit; font-size: 8px; cursor: pointer; }
.inquiry-focus__quick button:hover { background: #eef6f4; }

/* ==========================================================================
 * v10.53 客户商机改版
 *   改之前：一块大头图 + 四张大数字卡 + 整个筛选表单（要按"应用筛选"）+ 三栏工作台，
 *          字号 8~11px、旁边还挂着"独立外贸业务层 · 不依赖 ERP"。
 *   改之后：和邮箱助手同一套语言 —— 顶部一条、一行可点的摘要、筛选即时生效、
 *          两栏（列表 + 商机详情），动作跟着商机走，跟进/结单/草稿收进折叠块。
 * ======================================================================== */
.inquiry-shell { gap: 12px; }

.inquiry-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: #fbfcfa;
}
.inquiry-tools[hidden] { display: none; }
.inquiry-tools__hint { color: var(--faint); font-size: 11px; }

/* 一行摘要：数字就是筛选项，点了立刻筛 */
.inquiry-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.inquiry-summary__item {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: border-color .15s ease, background .15s ease;
}
.inquiry-summary__item b { color: var(--brand); font-size: 17px; line-height: 1; }
.inquiry-summary__item:hover { border-color: var(--brand); color: var(--ink-2); }
.inquiry-summary__item.is-active { border-color: var(--brand); background: #eef5ff; color: var(--ink); font-weight: 700; }
/* v10.79 「已结束」是终点，不是待办：排在最右、走中性色，不跟前面四类抢注意力 */
.inquiry-summary__item--closed { margin-left: 2px; color: var(--faint); }
.inquiry-summary__item--closed b { color: var(--muted); font-size: 15px; }
.inquiry-summary__item--closed.is-active { border-color: var(--line); background: #f1f4f5; color: var(--ink-2); }
.inquiry-summary__spacer { flex: 1 1 auto; }
.inquiry-summary__action {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.inquiry-summary__action:hover { border-color: #e0b4a9; color: #a3473c; }
.inquiry-summary__action[hidden] { display: none; }

/* 筛选：一行到底，改完即时生效（提交按钮已去掉） */
.inquiry-filter-form { grid-template-columns: minmax(220px, 1fr) 150px 140px 140px auto; align-items: center; padding: 10px 14px; }
.inquiry-filter-form .inquiry-list-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* 两栏工作台：动作搬进详情，右栏那条独立滚动条取消 */
.inquiry-workspace {
  grid-template-columns: minmax(300px, .78fr) minmax(0, 1.62fr);
  gap: 12px;
  min-height: 640px;
  align-items: stretch;
}
.inquiry-list-panel,
.inquiry-detail-panel { min-height: 640px; }
.inquiry-detail-panel { display: flex; flex-direction: column; overflow-y: auto; }
.inquiry-detail { min-height: 0; }

/* 字号提到和邮箱助手同一档：以前 8~11px 在笔记本上很难读 */
.inquiry-list-item { padding: 12px 16px; }
.inquiry-list-item__top strong { font-size: 12.5px; }
.inquiry-list-item > b { margin: 5px 0 6px; font-size: 11.5px; }
.inquiry-list-item__top time,
.inquiry-list-item__meta small { font-size: 10px; }
.inquiry-stage-pill,
.inquiry-priority-pill { font-size: 10px; padding: 2px 7px; }
.inquiry-queue-head { padding: 7px 14px; }
.inquiry-queue-head b { font-size: 11.5px; }
.inquiry-queue-head span { font-size: 10.5px; }
.inquiry-queue-head em { font-size: 10.5px; }
.inquiry-list-toolbar { min-height: 54px; padding: 10px 16px; }
.inquiry-list-toolbar strong { font-size: 13px; }
.inquiry-list-toolbar span { font-size: 11px; margin-top: 3px; }

.inquiry-detail__header { padding: 16px 20px 13px; }
.inquiry-detail__header h3 { font-size: 17px; margin-bottom: 9px; }
.inquiry-detail__badges span { font-size: 10px; padding: 3px 9px; }
.inquiry-detail__meta strong { font-size: 12px; }
.inquiry-detail__meta span { font-size: 11px; }
.inquiry-detail__meta time { font-size: 10.5px; }
.inquiry-focus__due > span { font-size: 10px; letter-spacing: .06em; }
.inquiry-focus__due > strong { font-size: 13px; }
.inquiry-focus__quick button { font-size: 11px; padding: 4px 10px; }
.inquiry-fields-section,
.inquiry-thread-section,
.inquiry-timeline-section { padding: 13px 20px; }

/* 动作块：贴着"下一步"，按钮排一行；改数据的动作（类型/阶段）收进更多 */
.inquiry-action-block { padding: 13px 20px; border-bottom: 1px solid var(--line-soft); }
.inquiry-actions { display: grid; gap: 10px; }
.inquiry-primary-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.inquiry-primary-actions .inquiry-action-button { min-height: 34px; padding: 0 14px; font-size: 12.5px; }
.inquiry-more-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.inquiry-more-actions[hidden] { display: none; }
.inquiry-more-toggle { align-self: flex-start; min-height: 30px; padding: 0 12px; border: 1px dashed var(--line); border-radius: 8px; background: #fff; color: var(--muted); font: inherit; font-size: 11.5px; cursor: pointer; }
.inquiry-more-toggle:hover { border-color: var(--brand); color: var(--brand); }
.inquiry-stage-control { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.inquiry-stage-control label { display: grid; gap: 4px; }
.inquiry-stage-control label > span { color: #68777c; font-size: 10.5px; font-weight: 700; }
.inquiry-stage-control select { min-height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; font-size: 12px; }

/* 折叠块：跟进提醒 / 结单 / 补充草稿 */
.inquiry-more-panel { border-bottom: 1px solid var(--line-soft); }
.inquiry-more-panel > summary {
  padding: 12px 20px;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.inquiry-more-panel > summary::marker { color: var(--faint); }
.inquiry-more-panel__count { margin-left: 6px; color: var(--faint); font-size: 11px; font-weight: 500; }
.inquiry-more-panel > *:not(summary) { padding: 0 20px 14px; }
.inquiry-followup-box form { display: grid; gap: 8px; }
.inquiry-followup-box form label { display: grid; gap: 4px; }
.inquiry-followup-box form label > span { color: #68777c; font-size: 10.5px; font-weight: 700; }
.inquiry-followup-box input,
.inquiry-followup-box textarea,
.inquiry-draft-field textarea,
.inquiry-close-box input,
.inquiry-close-box select { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 12px; }
.inquiry-close-box { display: grid; gap: 8px; }
.inquiry-close-box label { display: grid; gap: 4px; }
.inquiry-close-box label > span { color: #68777c; font-size: 10.5px; font-weight: 700; }
.inquiry-draft-field > span { display: none; }

@media (max-width: 1180px) {
  .inquiry-workspace { grid-template-columns: 1fr; }
  .inquiry-list-panel, .inquiry-detail-panel { min-height: 0; }
  .inquiry-list { max-height: 380px; }
}

/* 左栏工作队列分组 */
.inquiry-queue-group + .inquiry-queue-group { border-top: 1px solid var(--line); }
.inquiry-queue-head { display: flex; align-items: baseline; gap: 7px; padding: 8px 12px; background: #f3f8f6; }
.inquiry-queue-head b { color: #33535a; font-size: 9.5px; }
.inquiry-queue-head span { overflow: hidden; color: #93a2a3; font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }
.inquiry-queue-head em { margin-left: auto; padding: 1px 6px; border-radius: 6px; color: #6d8489; background: #e7eeec; font-size: 8px; font-style: normal; }
.inquiry-queue-group--overdue .inquiry-queue-head { background: #fff4f1; }
.inquiry-queue-group--overdue .inquiry-queue-head b { color: #a3473c; }
.inquiry-queue-group--today .inquiry-queue-head { background: #fff9ec; }
.inquiry-due-pill { padding: 2px 6px; border-radius: 6px; color: #6d8489; background: #eef2f1; font-size: 7.5px; }
.inquiry-due-pill[data-due="overdue"] { color: #a3473c; background: #fbe4dd; font-weight: 800; }
.inquiry-due-pill[data-due="today"] { color: #8a6536; background: #fdf1d8; font-weight: 800; }

/* 字段 / 邮件往来改成可折叠（弱化与邮箱助手重复的部分） */
details.inquiry-fields-section > summary,
details.inquiry-thread-section > summary { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; list-style: none; }
details.inquiry-fields-section > summary::-webkit-details-marker,
details.inquiry-thread-section > summary::-webkit-details-marker { display: none; }
details.inquiry-fields-section > summary::before,
details.inquiry-thread-section > summary::before { content: "▸"; color: #9aa8a9; font-size: 10px; }
details.inquiry-fields-section[open] > summary::before,
details.inquiry-thread-section[open] > summary::before { content: "▾"; }
details.inquiry-fields-section > summary > span,
details.inquiry-thread-section > summary > span { margin-left: auto; color: #8a989c; font-size: 8.5px; font-weight: 400; }
details.inquiry-fields-section[open] > summary,
details.inquiry-thread-section[open] > summary { margin-bottom: 11px; }

/* 询盘中心：客户层 / 范围切换 / 等太久 / 结单 / 动态时间线 */
.inquiry-list-actions { display: inline-flex; gap: 5px; }
.inquiry-mini-toggle { padding: 3px 8px; border: 1px solid var(--line); border-radius: 7px; color: #5b7074; background: #fff; font: inherit; font-size: 8.5px; cursor: pointer; }
.inquiry-mini-toggle:hover { background: #f3f8f6; }
.inquiry-mini-toggle.is-active { color: #fff; background: var(--teal); border-color: var(--teal); }
.inquiry-cust-group + .inquiry-cust-group { border-top: 1px solid var(--line); }
.inquiry-cust-head { display: flex; align-items: center; gap: 7px; padding: 8px 12px; background: #f3f8f6; }
.inquiry-cust-head.is-urgent { background: #fff4f1; }
.inquiry-cust-head__id { flex: 1; min-width: 0; display: grid; }
.inquiry-cust-head__id b { overflow: hidden; color: #33535a; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.inquiry-cust-head__id small { overflow: hidden; color: #93a2a3; font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }
.inquiry-cust-head em { flex: 0 0 auto; color: #7d8f92; font-size: 8px; font-style: normal; }
.inquiry-due-pill[data-due="stale"] { color: #8a6536; background: #fdf1d8; }
.inquiry-close-box { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.inquiry-close-box label { display: grid; gap: 4px; margin-bottom: 7px; }
.inquiry-close-box label > span { color: #8a989c; font-size: 8px; font-weight: 700; }
.inquiry-close-box select, .inquiry-close-box input { height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; color: #40575c; background: #fbfcfb; font: inherit; font-size: 9px; outline: none; }
.inquiry-timeline-section { padding: 17px 21px; border-top: 1px solid var(--line-soft); }
details.inquiry-timeline-section > summary { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; list-style: none; }
details.inquiry-timeline-section > summary::-webkit-details-marker { display: none; }
details.inquiry-timeline-section > summary::before { content: "▸"; color: #9aa8a9; font-size: 10px; }
details.inquiry-timeline-section[open] > summary::before { content: "▾"; }
details.inquiry-timeline-section > summary > span { margin-left: auto; color: #8a989c; font-size: 8.5px; font-weight: 400; }
details.inquiry-timeline-section[open] > summary { margin-bottom: 11px; }
.inquiry-timeline { display: grid; gap: 7px; }
.inquiry-timeline-item { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line-soft); }
.inquiry-timeline-item:last-child { border-bottom: 0; }
.inquiry-timeline-item__dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #cbd6d5; }
.inquiry-timeline-item__dot[data-type="created"] { background: #56a48a; }
.inquiry-timeline-item__dot[data-type="reply_recorded"], .inquiry-timeline-item__dot[data-type="reply_linked"] { background: var(--brand); }
.inquiry-timeline-item__dot[data-type="followup_created"], .inquiry-timeline-item__dot[data-type="followup_updated"] { background: #d3a24a; }
.inquiry-timeline-item__body { flex: 1; min-width: 0; }
.inquiry-timeline-item__body strong { color: #3d565b; font-size: 9px; }
.inquiry-timeline-item__body em { margin-left: 6px; color: #93a2a3; font-size: 8px; font-style: normal; }
.inquiry-timeline-item time { flex: 0 0 auto; color: #98a5a6; font-size: 7.5px; }

/* 动作结果闭环：做完主动作后告诉用户"做完了、下一步是什么" */
.inquiry-action-result { margin-bottom: 10px; padding: 9px 11px; border: 1px solid #bfe0d1; border-radius: 9px; background: #eff9f4; }
.inquiry-action-result[hidden] { display: none; }
.inquiry-action-result b { display: block; color: #39705e; font-size: 9px; }
.inquiry-action-result span { display: block; margin-top: 3px; color: #5a7a70; font-size: 8.5px; }
.inquiry-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.inquiry-section-heading span { color: #8a989c; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.inquiry-section-heading h4 { margin: 3px 0 0; color: var(--ink); font-size: 12px; }
.inquiry-confidence { padding: 5px 7px; border-radius: 7px; color: #245ba8 !important; background: #eef5ff; font-size: 8px !important; letter-spacing: 0 !important; }
.inquiry-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.inquiry-field { min-width: 0; display: grid; gap: 5px; }
.inquiry-field--wide { grid-column: 1 / -1; }
.inquiry-field > span { color: #8a989c; font-size: 8px; font-weight: 700; }
.inquiry-field__quote { margin-top: -2px; padding: 0; border: 0; max-width: 100%; overflow: hidden; color: #93a2a3; background: none; font: inherit; font-size: 7.5px; font-style: italic; text-align: left; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.inquiry-field__quote:hover { color: #3d6f8c; text-decoration: underline; }
.inquiry-field textarea { min-height: 58px; resize: vertical; }
.inquiry-field input, .inquiry-field textarea { font-size: 10px; }

.inquiry-thread-section { min-height: 0; flex: 1; }
.inquiry-thread { max-height: 270px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.inquiry-thread-item { padding: 11px 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: #fbfcff; }
.inquiry-thread-item + .inquiry-thread-item { margin-top: 8px; }
.inquiry-thread-item__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inquiry-thread-item__head strong { color: var(--ink-2); font-size: 10px; }
.inquiry-thread-item__head time { color: #8a989c; font-size: 8px; }
.inquiry-thread-item__toggle { width: 100%; padding: 0; border: 0; display: grid; gap: 6px; color: inherit; background: none; text-align: left; font: inherit; cursor: pointer; }
.inquiry-thread-item__toggle b { color: var(--ink); font-size: 10px; }
.inquiry-thread-item.is-open .inquiry-thread-item__toggle b { color: #2f5b62; }
.inquiry-thread-item.is-open { background: #fff; }
.inquiry-thread-item__body[hidden] { display: none; }
.inquiry-source-badge { padding: 1px 5px; border-radius: 5px; color: #5b7a72; background: #e6f0ee; font-size: 7px; font-weight: 700; }
.inquiry-source-badge[data-source="stage"] { color: #8a6536; background: #fff3dd; }
.inquiry-primary-actions { display: grid; gap: 7px; margin-bottom: 8px; }
.inquiry-more-toggle { width: 100%; margin-bottom: 8px; padding: 6px; border: 1px dashed var(--line); border-radius: 9px; color: #6d8489; background: #fbfcfb; font: inherit; font-size: 9px; cursor: pointer; }
.inquiry-more-toggle[hidden] { display: none; }
.inquiry-more-actions { display: grid; gap: 7px; margin-bottom: 8px; }
.inquiry-more-actions[hidden] { display: none; }
.inquiry-thread-item p { max-height: 125px; margin: 0; overflow-y: auto; color: #53676c; font-size: 9px; line-height: 1.7; white-space: pre-wrap; }

.inquiry-action-panel { padding: 18px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.inquiry-action-title { display: flex; align-items: center; gap: 10px; padding-bottom: 15px; border-bottom: 1px solid var(--line-soft); }
.inquiry-action-title > span { width: 36px; height: 36px; display: grid; place-content: center; border-radius: 10px; color: #fff; background: var(--brand); font-size: 9px; font-weight: 800; }
.inquiry-action-title strong, .inquiry-action-title small { display: block; }
.inquiry-action-title strong { color: var(--ink); font-size: 12px; }
.inquiry-action-title small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.inquiry-actions { padding-top: 15px; }
.inquiry-stage-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: end; gap: 8px; margin-bottom: 11px; }
.inquiry-stage-control label { display: grid; gap: 5px; }
.inquiry-stage-control label > span { color: #68777c; font-size: 9px; font-weight: 700; }
.inquiry-stage-control select { width: 100%; min-height: 34px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink-2); background: #fbfcff; font: inherit; font-size: 10px; outline: none; }
.inquiry-stage-control select:focus { border-color: rgba(29, 111, 224, .55); box-shadow: 0 0 0 3px rgba(29, 111, 224, .08); }
.inquiry-stage-control .inquiry-action-button { width: auto; min-width: 76px; margin-bottom: 0; }
.inquiry-action-button { width: 100%; min-height: 36px; margin-bottom: 8px; font-size: 10px; }
.inquiry-draft-field { margin: 13px 0 4px; }
.inquiry-draft-field textarea { min-height: 150px; resize: vertical; line-height: 1.65; }
.inquiry-followup-box { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line-soft); }
.inquiry-followup-box form { display: grid; gap: 9px; }
.inquiry-followup-box textarea { min-height: 64px; resize: vertical; }
.inquiry-followup-list { margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.inquiry-followup-item { padding: 9px 10px; border: 1px solid var(--line-soft); border-radius: 9px; background: #fbfcff; }
.inquiry-followup-item + .inquiry-followup-item { margin-top: 7px; }
.inquiry-followup-item__head { display: flex; justify-content: space-between; gap: 8px; }
.inquiry-followup-item__head strong { color: var(--ink-2); font-size: 9px; }
.inquiry-followup-item__head time { color: #8a989c; font-size: 8px; }
.inquiry-followup-item p { margin: 5px 0 7px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.inquiry-followup-item button { min-height: 27px; padding: 0 8px; border: 1px solid var(--line); border-radius: 7px; color: #325d9c; background: #fff; font: inherit; font-size: 8px; cursor: pointer; }
.inquiry-followup-item button:hover { border-color: #b7cceb; background: #eef5ff; }
.inquiry-followup-item.is-completed { opacity: .62; }
.inquiry-followup-item.is-overdue { border-color: #f0d0c8; background: #fff8f5; }

@media (min-width: 1251px) {
  .inquiry-action-panel { position: sticky; top: 18px; max-height: calc(100vh - 36px); }
}

@media (max-width: 1250px) {
  .inquiry-workspace { grid-template-columns: minmax(260px, .7fr) minmax(390px, 1fr); }
  .inquiry-action-panel { grid-column: 1 / -1; min-height: 0; }
  .inquiry-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .inquiry-action-button { margin-bottom: 0; }
  .inquiry-draft-field, .inquiry-followup-box, .inquiry-followup-list { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .inquiry-overview { align-items: flex-start; flex-direction: column; }
  .inquiry-overview__actions { width: 100%; justify-content: flex-start; }
  .inquiry-filter-form { grid-template-columns: 1fr 1fr; }
  .inquiry-filter-search { grid-column: 1 / -1; }
  .inquiry-workspace { grid-template-columns: 1fr; }
  .inquiry-list-panel, .inquiry-detail-panel, .inquiry-action-panel { min-height: 0; }
  .inquiry-list { height: 350px; }
  .inquiry-detail { min-height: 0; }
  .inquiry-action-panel { grid-column: auto; }
  .inquiry-actions { display: block; }
  .inquiry-action-button { margin-bottom: 8px; }
}

@media (max-width: 680px) {
  .inquiry-stats { grid-template-columns: 1fr 1fr; }
  .inquiry-filter-form { grid-template-columns: 1fr; }
  .inquiry-filter-search { grid-column: auto; }
  .inquiry-fields { grid-template-columns: 1fr; }
  .inquiry-stage-control { grid-template-columns: 1fr; }
  .inquiry-stage-control .inquiry-action-button { width: 100%; }
  .inquiry-field--wide { grid-column: auto; }
  .inquiry-detail__header, .inquiry-fields-section, .inquiry-thread-section { padding-inline: 16px; }
  .inquiry-action-panel { padding: 16px; }
}

/* ============================================================
   邮箱模块三态：加载 / 空 / 错误（v7.6）
   一个 .email-state 组件，列表、中栏、右栏共用。颜色只取现有变量
   和文件里已有的浅色值，不引入新色板。
   ============================================================ */
.email-state { display: grid; justify-items: center; gap: 7px; padding: 26px 18px; text-align: center; }
.email-state__icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--muted); background: var(--canvas); }
.email-state__icon svg { width: 19px; height: 19px; }
.email-state__title { color: var(--ink-2); font-size: 11px; }
.email-state__desc { max-width: 240px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.75; }
.email-state__detail { max-width: 100%; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: var(--canvas); font-family: ui-monospace, Consolas, monospace; font-size: 8px; line-height: 1.6; text-align: left; overflow-wrap: anywhere; }
.email-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 3px; }

.email-state--loading .email-state__icon { color: var(--brand); background: var(--primary-soft); }
.email-state--loading .email-state__icon svg { animation: email-state-spin 1s linear infinite; }
@keyframes email-state-spin { to { transform: rotate(360deg); } }
.email-state--error .email-state__icon { color: var(--red); background: #fbe4dd; }
.email-state--error .email-state__title { color: var(--ink); }

/* 列表骨架屏：形状贴近 .email-list-item，减少加载完成时的跳动 */
.email-skel { display: flex; gap: 9px; padding: 11px 6px; align-items: center; }
.email-skel > i { flex: 0 0 30px; height: 30px; border-radius: 9px; }
.email-skel > span { flex: 1; min-width: 0; display: grid; gap: 6px; }
.email-skel b { height: 9px; border-radius: 5px; }
.email-skel b:first-child { width: 52%; }
.email-skel b:last-child { width: 84%; }
.email-skel > i, .email-skel b { background: linear-gradient(90deg, #eef2f7 25%, #e3e9f1 37%, #eef2f7 63%); background-size: 400% 100%; animation: email-skel-shimmer 1.4s ease infinite; }
@keyframes email-skel-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* 右栏 AI 面板的加载 / 失败块 */
.email-analysis-status { min-height: 260px; display: grid; align-content: center; }
.email-analysis-status[hidden] { display: none; }

/* ---- 汇率与时差 · 中行牌价卡片 ----
   一个币种三个口径，现汇买入价是业务主口径（出口结汇看它），所以给它整块高亮，
   另外两个口径退成小字并排。选择器都写成 .exchange-rate-card .xxx 是有意的：
   styles.css 里 `.exchange-rate-card > div` 这类规则权重是 (0,1,1)，单个类名压不住它。 */
.exchange-rate-grid .exchange-rate-card {
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 150px;
}

.exchange-rate-card .exchange-rate-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 7px;
}

.exchange-rate-card .exchange-rate-card__primary {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid #d6e4f7;
  border-radius: 10px;
  background: linear-gradient(180deg, #f1f7ff 0%, #e9f1fd 100%);
}

.exchange-rate-card .exchange-rate-card__primary span {
  color: #35659f;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .02em;
}

.exchange-rate-card .exchange-rate-card__primary b {
  margin: 0;
  color: var(--brand);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.exchange-rate-card .exchange-rate-card__more {
  display: grid;
  gap: 4px;
  margin: 0;
}

.exchange-rate-card .exchange-rate-card__more > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.exchange-rate-card .exchange-rate-card__more dt {
  color: var(--muted);
  font-size: 9px;
  white-space: nowrap;
}

.exchange-rate-card .exchange-rate-card__more dd {
  margin: 0;
  color: #33475f;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.exchange-rate-card .exchange-rate-card__unit {
  color: #91a09f;
  font-size: 9px;
}

/* 牌价真的变了才闪：只是"确认没变"的一次轮询不该有动画，否则页面像个报警器。 */
@keyframes exchange-card-flash {
  0% { box-shadow: 0 0 0 2px rgba(29, 111, 224, .38); }
  100% { box-shadow: 0 0 0 2px rgba(29, 111, 224, 0); }
}

.exchange-rate-grid.is-updated .exchange-rate-card {
  animation: exchange-card-flash 1.2s ease-out;
}

.exchange-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #5b6b7d;
  font-size: 9px;
}

.exchange-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b6c2cd;
}

.exchange-live[data-state="live"]::before { background: #2e9e6b; box-shadow: 0 0 0 3px rgba(46, 158, 107, .16); }
.exchange-live[data-state="connecting"]::before,
.exchange-live[data-state="retry"]::before { background: #d9a441; }

.exchange-source-note {
  margin: 0;
  padding: 0 20px 18px;
  color: #879798;
  font-size: 9px;
}

.exchange-source-note.is-warning { color: #93683d; }

/* ---- 订单管理：订单跟踪 / 样品单 / 历史订单 三个视图，直接放进顶栏导航行 ---- */

/* 放在顶栏里：不占页面高度，也永远不会被页面滚动带走。 */
.orders-tabs {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(180deg, #fdfefe, #f3f7fd);
  box-shadow: inset 0 1px 2px rgba(16, 42, 96, .05);
}

/* hidden 属性要压得住上面的 display，否则没进这个模块时也会显示出来 */
.orders-tabs[hidden] {
  display: none;
}

.orders-tab {
  min-height: 34px;
  padding: 0 17px;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  background: transparent;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.orders-tab span {
  color: inherit;
}

.orders-tab:hover {
  color: var(--ink);
  background: rgba(29, 111, 224, .08);
}

.orders-tab:active {
  transform: translateY(1px);
}

.orders-tab:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.orders-tab.is-active {
  color: var(--white);
  background: linear-gradient(180deg, #3a82ec, var(--teal));
  box-shadow: 0 4px 12px rgba(29, 111, 224, .28);
}

/* 订单管理这一页：前面那块标题不要，顶栏左边放三个视图标签，右边照旧保留系统状态那一组
   （手机上的汉堡菜单要留着，否则抽屉导航打不开）。 */
.topbar--orders .topbar__title {
  display: none;
}

/* ------------------------------------------------------------------ *
 * 邮箱助手这一页：整条顶栏都不要
 *
 * 这一页自己的工具条（"只管读和回…" + 一排操作）就是页头，上面那行
 * 「EMAIL INTELLIGENCE / AI 邮箱助手」纯属重复。而邮箱是唯一一个三栏
 * 都很吃高度的模块（列表 + 对话流 + 回复区），让出这 88px 是实打实的。
 *
 * 861px 以上才隐藏：更窄的时候侧边栏会变成抽屉，而打开抽屉的菜单键就在
 * 顶栏里 —— 整条藏掉的话手机上就再也打不开导航了。
 * ------------------------------------------------------------------ */
@media (min-width: 861px) {
  .topbar--email,
  /* v10.81 商机页也一样：这一页自己的工具条就是页头，上面那行
     「INQUIRY INTELLIGENCE / 客户商机」纯属重复，而且两栏都要吃高度。
     861px 以下不藏 —— 打开导航抽屉的菜单键就在顶栏里。 */
  .topbar--inquiries {
    display: none;
  }
}

/* ---- 报价与规格：工具条并进顶栏，跟在标题后面 ----
   原来「草稿/编号 + 一排按钮」自己占一整行，顶栏右侧还摆着系统在线和时钟。
   用户（2026-09-22）要的是：这一排挪到标题后面、把系统在线和时间去掉，整体更紧凑。
   工具条挂在顶栏里，所以其它页面必须藏起来。 */
.quote-toolbar {
  display: none;
}

.topbar--quote .system-status,
.topbar--quote .world-clock-quick,
/* 安装到桌面在这个模块不要（其它模块有就够了） */
.topbar--quote .pwa-install-button {
  display: none;
}

.topbar--quote .quote-toolbar {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-left: 6px;
  padding: 0;
  min-height: 0;
  /* 保险：万一别处又给它加了卡片外观，这里一律抹平，它就是顶栏里的一条横排 */
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* 标题不许被按钮挤成两行（挤的话让按钮换行） */
.topbar--quote .topbar__title { flex: 0 0 auto; }
.topbar--quote .topbar__title h2 { white-space: nowrap; }

.topbar--quote .quote-toolbar__status {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  /* 贴着标题，按钮整组靠右 —— 宽屏时中间不会空出一大段 */
  margin-right: auto;
}

.topbar--quote .quote-toolbar strong { font-size: 12.5px; }
.topbar--quote .quote-toolbar strong,
.topbar--quote .quote-toolbar .quote-status-badge { white-space: nowrap; }

/* 不再放那句长提示（左边「要发给客户还差」那张卡实时在说同一件事），
   这里只在保存过之后显示「最后更新 xx/xx xx:xx」 */
.topbar--quote .quote-toolbar__status small:empty { display: none; }

.topbar--quote .quote-toolbar small {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 8.5px;
}

.topbar--quote .quote-toolbar__actions {
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.topbar--quote .quote-toolbar__actions .secondary-button,
.topbar--quote .quote-toolbar__actions .primary-button {
  min-height: 30px;
  padding: 0 11px;
  font-size: 9.5px;
  white-space: nowrap;
}

/* 「更多」下拉：不常用的动作收在这里，免得排成参差的两行 */
.topbar--quote .quote-toolbar__more { position: relative; }

.topbar--quote .quote-toolbar__more-trigger span { font-size: 8px; }

.topbar--quote .quote-toolbar__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 150px;
  padding: 6px;
  display: grid;
  gap: 2px;
  border: 1px solid #e2eae8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(24, 54, 58, .16);
}

.topbar--quote .quote-toolbar__menu button {
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #3c565a;
  font-size: 10px;
  text-align: left;
  cursor: pointer;
}

.topbar--quote .quote-toolbar__menu button:hover { background: #f2f7f6; }

.topbar--quote .quote-toolbar__menu button.is-danger { color: #b3574c; }

.topbar--quote .quote-toolbar__menu button.is-danger:hover { background: #fdf3f1; }

/* 日期不许折成两行 */
.topbar--quote .today-label { white-space: nowrap; }

@media (max-width: 1180px) {
  /* 再窄就把「最后更新」也收掉，按钮始终留在一行 */
  .topbar--quote .quote-toolbar small { display: none; }
}

/* 按钮多，顶栏允许长高一点，别把按钮裁掉 */
.topbar--quote {
  height: auto;
  min-height: 88px;
  flex: 0 0 auto;
  padding-block: 8px;
}

@media (max-width: 1024px) {
  /* 位置不够时按顺序减负：先收英文小标，再收日期，按钮优先 */
  .topbar--quote .topbar__kicker { display: none; }
  .topbar--quote .today-label { display: none; }
}

@media (max-width: 900px) {
  /* 更窄：工具条整条落到第二行 */
  .topbar--quote { flex-wrap: wrap; row-gap: 8px; }
  .topbar--quote .quote-toolbar { flex: 1 0 100%; justify-content: flex-start; }
  .topbar--quote .quote-toolbar__actions { justify-content: flex-start; }
}

.topbar--orders .orders-tabs {
  margin-right: auto;
}

/* 位置不够时按需要给右侧那组减负，顺序：先收起日期，再收起状态文字和安装按钮文字 */
@media (max-width: 1180px) {
  .topbar--orders .today-label { display: none; }
}

@media (max-width: 1024px) {
  .topbar--orders .system-status { font-size: 0; }
  .topbar--orders .pwa-install-button span { display: none; }
}

/* 手机上把标签收紧一点 */
@media (max-width: 860px) {
  .orders-tab { padding: 0 11px; font-size: 12px; }
}

/* 更窄的手机（≤680）：顶栏分两行，第一行是菜单键 + 三个标签，
   第二行整行留给右侧那组（系统在线 / 时间 / 安装到桌面 / 日期），右对齐。
   不这么做的话，右边的时间会被挤出屏幕外。 */
@media (max-width: 680px) {
  .topbar--orders {
    flex-wrap: wrap;
    height: auto;
    min-height: 68px;
    padding-block: 8px;
    row-gap: 6px;
  }

  .topbar--orders .orders-tabs {
    margin-right: 0;
  }

  .topbar--orders .topbar__right {
    flex: 1 0 100%;
    justify-content: flex-end;
  }
}

/* ---- 订单跟踪 / 样品单把"准备呈现什么"摆出来，先确认字段 ---- */

/* 还没接数据的两栏：把"准备呈现什么"摆出来，先让人确认字段 */
.orders-stage {
  padding: 22px;
  display: grid;
  gap: 16px;
}

.orders-stage__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.orders-stage__head h3 {
  margin: 0 0 4px;
  font-size: 17px;
}

.orders-stage__head p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.orders-stage__badge {
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 999px;
  color: #93683d;
  background: var(--amber-soft);
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

.orders-stage__lead {
  margin: 0;
  color: #45566b;
  font-size: 12.5px;
  line-height: 1.7;
}

.orders-stage__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.orders-stage__grid article {
  padding: 13px 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #fbfcff;
}

.orders-stage__grid strong {
  display: block;
  font-size: 12.5px;
}

.orders-stage__grid small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.6;
}

.orders-stage__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.orders-stage__foot small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.6;
}

@media (max-width: 1120px) {
  .orders-stage__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .orders-stage { padding: 16px; }
  .orders-stage__grid { grid-template-columns: 1fr; }
  .orders-stage__head { flex-wrap: wrap; }
  .orders-stage__badge { margin-left: 0; }
}

/* ------------------------------------------------------------------ *
 * v10.9 收付款流水
 *
 * 为什么做成一行行的清单而不是表格：手机上表格横向滚很难用，
 * 而业务员经常在手机上记「今天付了辅料钱」。
 * ------------------------------------------------------------------ */
.order-payment-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.order-payment-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #fbfcfe;
}

.order-payment-row__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.order-payment-row__main > strong { font-size: 13px; color: var(--ink); }
.order-payment-row__main > span { font-size: 11px; color: var(--muted); }
.order-payment-row__note { color: #8b989a !important; }

.order-payment-row__amount {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

.order-payment-row__fee {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
}

.order-payment-row__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.order-payment-row__proof {
  font-size: 12px;
  color: var(--teal, #1d6f70);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  text-decoration: none;
  cursor: pointer;
}
/* 水单链接：可点、点开新标签看图（v10.86） */
.order-payment-row__proof:hover {
  border-color: var(--teal, #1d6f70);
  background: var(--teal-soft, #e4f0ef);
}
.order-payment-row__proofWrap {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
/* 删除水单的小 ✕：平时不显示，鼠标移到这一行才露出来，免得列表看着乱 */
.order-payment-row__proofRemove {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 12px;   /* 全站字号下限 12px（见 design-tokens.css） */
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .15s ease, color .15s ease;
}
.order-payment-row:hover .order-payment-row__proofRemove { opacity: 1; }
.order-payment-row__proofRemove:hover { color: var(--brand, #ed6946); }
.order-payment-row__proofRemove:focus-visible { opacity: 1; }
/* "＋水单"上传入口：样式贴近旁边的「编辑」链接按钮，但更轻 */
.order-payment-row__upload {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  cursor: pointer;
}
.order-payment-row__upload:hover {
  color: var(--teal, #1d6f70);
  border-color: var(--teal, #1d6f70);
  border-style: solid;
}

/* -------------------------------------------------------------------------- *
 * 可输入 + 可选的下拉（combo，v10.86）
 *
 * 替换掉原生 datalist —— 那个弹出层由浏览器画，位置和高度都不受控，
 * 会飘到输入框左下方、盖住下面几个格子。这里面板钉在输入框正下方，
 * 一次把候选列全（超过 260px 才滚动），并且仍然可以直接打字。
 * ------------------------------------------------------------------------ */
.combo { position: relative; display: block; }
.combo input[data-combo-input] { width: 100%; padding-right: 30px; }
.combo__toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted, #708187);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.combo__toggle:hover { color: var(--teal, #1d6f70); background: var(--teal-soft, #e4f0ef); }
.combo__panel {
  /* 用 fixed 浮在弹窗之上：弹窗正文是 overflow:auto 的滚动容器，
     面板若用 absolute 会被它裁掉、还会跟着它一起滚（2026-10-15 反馈：
     "右侧收款渠道也没有把整个窗口的滚动去除"）。坐标由 JS 按输入框算。 */
  position: fixed;
  z-index: 30;                 /* 压住同一格里后面的输入框 */
  top: 0;
  left: 0;
  max-height: 264px;
  overflow-y: auto;
  /* 滚到底就停在这儿，不要把手势传给弹窗（否则整个弹窗跟着滑，很难受） */
  overscroll-behavior: contain;
  padding: 4px;
  border: 1px solid var(--line, #dde4e2);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(16, 42, 46, .16);
}
.combo__option {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2, #28434a);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.combo__option:hover,
.combo__option.is-active { background: var(--teal-soft, #e4f0ef); color: var(--teal, #1d6f70); }
.combo__empty {
  margin: 0;
  padding: 8px 10px;
  color: var(--muted, #708187);
  font-size: 12px;
}

/* 项目候选多，排双列：一屏能看全，看不完的还是在这一块里滚（v10.86） */
.combo--two-col .combo__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 2px;
}
.combo--two-col .combo__empty { grid-column: 1 / -1; }
.combo__row {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.combo__row .combo__option {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 「从候选里去掉」的小 ✕。
   以前是"移到这一行才出现"，结果用户以为没有这个功能、点了半天没反应
   （2026-10-15 反馈："也删不掉"）—— 现在一直在，只是淡一点。 */
.combo__remove {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted, #708187);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: .45;
  transition: opacity .15s ease, color .15s ease;
}
.combo__row:hover .combo__remove,
.combo__remove:focus-visible { opacity: 1; }
.combo__remove:hover { color: var(--brand, #ed6946); background: #fdeee9; }

/* -------------------------------------------------------------------------- *
 * 出口批次弹窗顶部的「上传文件自动识别」（v10.88）
 *
 * 用琥珀色（就是"AI 填的、还没核对"那套色）：一眼能看出这一块是 AI 参与的，
 * 跟下面被标成琥珀色的格子是一句话。没配 AI 的时候整块不渲染。
 * ------------------------------------------------------------------------ */
.shipment-recognize {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 9px 12px;
  border: 1px dashed var(--field-ai-line);
  border-radius: 10px;
  background: var(--field-ai-bg);
}
.shipment-recognize__button {
  flex: 0 0 auto;
  cursor: pointer;
}
.shipment-recognize__hint {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.shipment-recognize__hint b { color: var(--amber); }
/* 识别中：按钮别让人连点（会重复调用 AI） */
.shipment-recognize.is-busy { opacity: .75; }
.shipment-recognize.is-busy .shipment-recognize__button { pointer-events: none; }

/* -------------------------------------------------------------------------- *
 * 「出口 / 报关 / 货运」里的发票区（v10.86）
 * 发票大多是 PDF，文件名是一串数字 —— 所以左边是"点开看原文件"的链接，
 * 右边永远有一个写说明的输入框（改完点走即存）。
 * ------------------------------------------------------------------------ */
.invoice-block { margin-top: 6px; }
.invoice-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.invoice-block__head > p { margin: 0; }
.invoice-block__upload { cursor: pointer; }
.invoice-list { display: grid; gap: 6px; }
.invoice-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--line, #dde4e2);
  border-radius: 10px;
  background: #fff;
}
.invoice-row__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 240px;
  min-width: 0;
  color: var(--teal, #1d6f70);
  font-size: 12.5px;
  text-decoration: none;
}
.invoice-row__name:hover { text-decoration: underline; }
.invoice-row__badge {
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 5px;
  background: #f1f4f1;
  color: var(--muted, #708187);
  font-size: 12px;
  font-weight: 700;
}
.invoice-row__file {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.invoice-row__note {
  flex: 1 1 auto;
  min-width: 0;
}
.invoice-row__status { flex: 0 0 auto; color: var(--muted, #708187); font-size: 12px; }

.order-payment-empty {
  margin: 0;
  padding: 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted);
}

.order-payment-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--muted);
}

.order-payment-summary strong { font-size: 13px; color: var(--ink); }

@media (max-width: 680px) {
  .order-payment-row { flex-wrap: wrap; }
  .order-payment-row__main { flex-basis: 100%; }
}

/* ------------------------------------------------------------------ *
 * v10.9 订单详情改成左右两块：左＝客户侧（卖），右＝工厂侧（买）
 *
 * 为什么这么做：业务员的 Excel 台账就是把一笔生意拆成两截记的
 * ——上面卖、下面买。转成左右之后，一屏能同时看到「卖给客户多少」
 * 和「向工厂买多少」，不用来回翻，也不用记住自己点开的是哪一份。
 *
 * 这一版按电脑端做：宽屏才并排，窄屏自动落回上下两块，
 * 免得小窗口里两边都挤成一团。
 * ------------------------------------------------------------------ */
@media (min-width: 1241px) {
  /* 并排需要宽度：一栏放得下产品明细表和收付款流水才不会挤 */
  .order-detail-dialog { width: min(1440px, 97vw); }
}

.order-detail-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

.order-detail-side {
  min-width: 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

/* 正在看的那一张描一下边，另一侧保持素色 —— 一眼知道自己在哪一份上 */
.order-detail-side.is-current {
  border-color: #9ec6bf;
  box-shadow: 0 0 0 2px rgba(20, 122, 108, .1);
}

/* 空缺的一侧用虚线框，写清楚缺的是什么、补了有什么用 */
.order-detail-side.is-empty {
  border-style: dashed;
  background: #fafbfd;
}

.order-detail-side__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.order-detail-side__no { font-size: 14px; color: var(--ink); }
.order-detail-side__type { font-size: 11px; color: var(--muted); }

.order-detail-side__here {
  font-size: 10px;
  color: #0f6b60;
  background: #e6f2f0;
  border-radius: 999px;
  padding: 1px 8px;
}

.order-detail-side__empty {
  margin: 0;
  padding: 18px 14px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
}

@media (max-width: 1240px) {
  .order-detail-split { grid-template-columns: 1fr; }
}

/* 栏内的区块不再各套一层边框 —— 外面那层卡片已经框住了，
   再套一层会变成「框中框」，反而看不清分组。 */
.order-detail-side .order-detail-block:first-child { margin-top: 0; }
.order-detail-side .order-detail-rows {
  border: 0;
  background: transparent;
  padding: 0;
}

/* 栏宽只有半屏，流水行里东西多的时候允许换行，不要横向溢出 */
.order-detail-side .order-payment-row {
  flex-wrap: wrap;
  row-gap: 4px;
}

/* 「两侧齐全 / 缺工厂合同」标记：跟在单号后面，别贴着数字 */
.order-table__order-no + .order-quality {
  margin-left: 6px;
  vertical-align: middle;
}

/* ------------------------------------------------------------------ *
 * v10.9 历史订单列表「按订单看」：一行 = 一笔生意，行内左右两块
 *
 * 左＝客户侧（卖），右＝工厂侧（买）。业务上这两件事本来就是一笔生意的
 * 两头，分开平铺时会被单据日期冲散，看不出还缺一半。
 * ------------------------------------------------------------------ */
.order-pair__row > td {
  padding: 0;
  border-bottom: 1px solid var(--line-soft);
}

.order-pair {
  padding: 10px 12px;
}

.order-pair__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.order-pair__meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}

.order-pair__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* 两侧做成按钮：点哪半边就进哪张单据 */
.order-pair__side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.order-pair__side:hover { border-color: var(--brand); }
.order-pair__side.is-sell { border-left: 3px solid #1d6f70; }
.order-pair__side.is-buy { border-left: 3px solid #b4761f; }

.order-pair__side.is-empty {
  border-style: dashed;
  background: #fafbfd;
  cursor: default;
}

.order-pair__tag { font-size: 10px; color: var(--muted); }
.order-pair__party {
  font-size: 13px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.order-pair__line { font-size: 11px; color: var(--ink-2); }
.order-pair__money { font-size: 12px; color: var(--brand); }
.order-pair__money b { font-weight: 750; }
.order-pair__empty { font-size: 12px; color: #a2732a; }

@media (max-width: 1080px) {
  .order-pair__body { grid-template-columns: 1fr; }
  .order-pair__meta { margin-left: 0; }
}

/* ------------------------------------------------------------------ *
 * v10.9 新增/编辑订单：一笔生意，左边客户（买方）、右边工厂（卖方）
 *
 * 两张单据在库里仍是两条记录，但业务员眼里是一个订单，
 * 所以编辑时摆在一起，保存时各写各的。
 * ------------------------------------------------------------------ */
@media (min-width: 1241px) {
  /* 两侧并排要宽度，一栏放得下明细行才不挤 */
  .order-form-dialog { width: min(1480px, 97vw); }
}

.order-form-deal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 18px;
}

.order-form-side {
  min-width: 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.order-form-side.is-sell { border-top: 3px solid #1d6f70; }
.order-form-side.is-buy { border-top: 3px solid #b4761f; }

.order-form-side__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.order-form-side__hint { font-size: 11px; color: var(--muted); }

.order-form-side__items-head {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

/* 「套用合同模板」那一行：按钮 + 一句说明，别让人以为是非点不可的 */
.order-form-terms {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.order-form-terms > span {
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
}

.order-form-side textarea {
  width: 100%;
  min-height: 88px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  line-height: 1.7;
  resize: vertical;
}

/* 一侧里的明细行不再各套一层边框：外面那张卡片已经框住了 */
.order-form-side .order-form-line {
  border: 0;
  padding: 0 0 10px;
}

@media (max-width: 1240px) {
  .order-form-deal { grid-template-columns: 1fr; }
}

/* ================================================================== *
 * v10.83 编辑订单版式：分组 / 放大字号 / 折叠明细 / 金额算式
 *
 * 起因：这一页 17 + 17 个字段一路平铺、标签 8px 输入值 10px（比报价页那次整改
 * 小一档）、一行明细 25 个格子全摊开，一屏只能看完一行。
 * **业务规则一个字没动**，字段、必填项、保存口径全部照旧，只换摆法。
 *
 * 全部限定在 #order-form-modal 里 —— .collect-candidate__grid / .collect-candidate-field
 * 是归集中心和报价页共用的小组件，那边有它们自己的版式，不能在这里连带改掉。
 * ================================================================== */

#order-form-modal .of-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 14px;
}

/* 金额那组按「总额 = 定金 + 尾款」排一行，三列 */
#order-form-modal .of-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ================================================================== *
 * v10.87 收付款 / 出口批次 / 结算这三个弹窗的网格
 *
 * 起因：它们复用的是归集中心那套 .collect-candidate__grid（4 列、gap 只有 9px、
 * 内边距 12px），跟订单编辑表单摆在一起时明显"更挤、更乱"：
 * 标签小一档、框贴得近、表格里还有半格空着。
 * 这里**只限这三个弹窗**改版式，不动归集中心那边（那页有它自己的节奏）。
 * ================================================================== */

#payment-modal .collect-candidate__grid,
#shipment-modal .collect-candidate__grid,
#deal-modal .collect-candidate__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 14px;
  padding: 16px 0 4px;
}

/* 长文本（备注 / 报关备注）铺满整行：摆在半格宽里、右边空掉一半，看着像界面坏了 */
#payment-modal .collect-candidate-field.is-full,
#shipment-modal .collect-candidate-field.is-full,
#deal-modal .collect-candidate-field.is-full {
  grid-column: 1 / -1;
}

/* 字段名与输入框的间距：11px 太贴，给到 14px（跟订单编辑一致） */
#payment-modal .collect-candidate-field,
#shipment-modal .collect-candidate-field,
#deal-modal .collect-candidate-field {
  gap: 6px;
}

#order-form-modal .of-field { display: block; min-width: 0; }
#order-form-modal .of-field.is-wide { grid-column: span 2; }
#order-form-modal .of-field.is-full { grid-column: 1 / -1; }

/* 字号对齐报价页那次整改：标签 8px → 11.5px，输入值 10px → 13px */
#order-form-modal .of-field > span {
  display: block;
  margin-bottom: 6px;
  color: #5b7178;
  font-size: 11.5px;
  font-weight: 600;
}

#order-form-modal .of-field > span b { color: #c0563f; font-weight: 800; }

#order-form-modal .of-field input,
#order-form-modal .of-field select,
#order-form-modal .of-field textarea {
  width: 100%;
  border: 1px solid #dfe6e4;
  border-radius: 9px;
  outline: 0;
  background: #fff;
  color: #16323a;
  font-family: inherit;
  font-size: 13px;
}

#order-form-modal .of-field input,
#order-form-modal .of-field select { height: 38px; padding: 0 10px; }
#order-form-modal .of-field textarea { padding: 8px 10px; line-height: 1.65; resize: vertical; }

#order-form-modal .of-field input:focus,
#order-form-modal .of-field select:focus,
#order-form-modal .of-field textarea:focus {
  border-color: #91bbb6;
  box-shadow: 0 0 0 3px rgba(29, 111, 112, .08);
}

/* 字段级校验：把「必须处理」直接画到那一格上（归集中心早就有，订单表单一直没接） */
#order-form-modal .of-field.is-invalid input,
#order-form-modal .of-field.is-invalid select,
#order-form-modal .of-field.is-invalid textarea { border-color: #d98974; background: #fff8f6; }

#order-form-modal .of-field.is-warning input,
#order-form-modal .of-field.is-warning select { border-color: #d8b56f; background: #fffcf5; }

#order-form-modal .of-field__note { display: block; margin-top: 5px; color: #b8563f; font-size: 11px; }

/* 分组：标题 + 一条线，线挂在标题**下面**（归属清楚），字段跟在后面 */
#order-form-modal .of-group { margin-top: 13px; }
#order-form-modal .of-group:first-of-type { margin-top: 2px; }

#order-form-modal .of-group__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 9px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e8eef1;
  color: #27484b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
}

#order-form-modal .of-group__title small {
  color: #93a3a5;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}

/*
 * 明细区标题（销售明细 / 采购明细）原来是个没设字号的 h3，
 * 按浏览器默认 1.17em 算出来比「这笔生意」还大，层级是反的。压到分组标题一个量级。
 */
#order-form-modal .of-items-title {
  color: #27484b;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .05em;
}

/* 金额组下面那条算式 */
#order-form-modal .of-sum {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 11px;
  padding: 8px 11px;
  border: 1px solid #e7eeec;
  border-radius: 9px;
  background: #fafcfb;
  color: #5b7178;
  font-size: 11.5px;
}

#order-form-modal .of-sum b { color: #1d6f70; font-size: 12.5px; }
#order-form-modal .of-sum.is-off { border-color: #f0dcd5; background: #fffaf8; }
#order-form-modal .of-sum.is-off b { color: #c0563f; }
#order-form-modal .of-sum__gap { color: #c0563f; font-weight: 700; }

#order-form-modal .of-sum button {
  margin-left: auto;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid #dfe6e4;
  border-radius: 7px;
  background: #fff;
  color: #46605f;
  font-family: inherit;
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}

#order-form-modal .of-sum button:hover { border-color: #b9cdc9; }

/* 一侧标题栏上的「必填 N/M 已填」：不用滚到底就知道这一侧还缺什么 */
#order-form-modal .of-progress { margin-left: auto; color: #7b8f8d; font-size: 11.5px; font-weight: 650; }
#order-form-modal .of-progress.is-done { color: #2f745c; }
#order-form-modal .of-progress.is-missing { color: #b4761f; }

/* 明细行：正文 7 格（什么货 + 多少 + 多少钱），其余 18 格收进「更多规格」 */
#order-form-modal .order-form-side .order-form-line__head {
  justify-content: flex-start;
  gap: 10px;
}

#order-form-modal .order-form-side .order-form-line__head .order-form-line__remove {
  margin-left: auto;
  font-size: 11px;
}

#order-form-modal .of-line__no {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: #eef3f1;
  color: #46605f;
  font-size: 11px;
  font-weight: 750;
}

#order-form-modal .of-line__amount { color: #1d6f70; font-size: 13px; font-weight: 800; }

#order-form-modal .of-more { margin-top: 11px; border-top: 1px solid #eef3f1; padding-top: 9px; }

#order-form-modal .of-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 9px;
  color: #5b7178;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

#order-form-modal .of-more > summary::-webkit-details-marker { display: none; }
#order-form-modal .of-more > summary::before { content: "▸"; color: #9db0b2; font-size: 10px; }
#order-form-modal .of-more[open] > summary::before { content: "▾"; }
#order-form-modal .of-more > summary small { color: #9db0b2; font-weight: 600; }

/*
 * 「尺寸」那一格：业务员只写一次原文，下面挂着拆出来的宽/长。
 * 宽度占两格（跟原来的「尺寸原文」一样宽），右边留出位置跟别的字段并排。
 */
#order-form-modal .of-size { grid-column: span 2; min-width: 0; }

#order-form-modal .of-size__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}

#order-form-modal .of-size__echo { color: #4d6b6d; font-size: 11px; }
#order-form-modal .of-size__echo.is-missing { color: #b4761f; }

#order-form-modal .of-size__toggle {
  margin-left: auto;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid #dfe6e4;
  border-radius: 6px;
  background: #fff;
  color: #46605f;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 650;
  cursor: pointer;
}

#order-form-modal .of-size__toggle:hover { border-color: #b9cdc9; background: #f7faf9; }

/* 「手工改」之后才露出来的宽/长两个框（[hidden] 的 display:none 优先级更高，不用管它） */
#order-form-modal .of-size__manual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  margin-top: 9px;
}

/* 一行以上的明细之间给一条虚线分开，不然两块内容贴在一起分不清 */
#order-form-modal .order-form-side .order-form-line + .order-form-line {
  margin-top: 6px;
  border-top: 1px dashed #e6ecea;
}

@media (max-width: 1240px) {
  #order-form-modal .of-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #order-form-modal .of-field.is-wide,
  #order-form-modal .of-field.is-full { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ *
 * v10.10 结算区块（详情页里的整单级那一块，和结算弹窗里共用）
 * ------------------------------------------------------------------ */
.order-settle {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.order-settle__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: #fbfcfe;
}

.order-settle__item > span { font-size: 11px; color: var(--muted); }
.order-settle__item > strong { font-size: 15px; color: var(--ink); }
.order-settle__item > small { font-size: 10px; color: #8b989a; }

.order-settle__title {
  margin: 16px 0 8px;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  color: #27484b;
}

.order-settle__note {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.7;
  color: var(--muted);
}

/* ------------------------------------------------------------------ *
 * v10.12 修改记录：默认收起，点开才看
 * ------------------------------------------------------------------ */
.order-change > summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .08em;
  color: #27484b;
}

.order-change__list,
.order-change__rows {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}

.order-change__group {
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: #fbfcfe;
}

.order-change__group + .order-change__group { margin-top: 8px; }

.order-change__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--muted);
}

.order-change__who { font-weight: 750; color: var(--ink-2); }
.order-change__side {
  margin-left: 0;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef4fb;
  color: #3b5c86;
  font-size: 10px;
}
.order-change__tag {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef2f7;
  font-size: 10px;
}

.order-change__rows > li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
}

.order-change__field { flex: 0 0 auto; min-width: 96px; color: var(--muted); }
.order-change__from { color: #a2907a; text-decoration: line-through; }
.order-change__arrow { color: var(--muted); }
.order-change__to { color: var(--ink); font-weight: 700; }

/* ------------------------------------------------------------------ *
 * 从订单详情里打开的弹窗，必须**压在详情之上**
 *
 * 所有弹窗的 z-index 都是 120（styles.css 的 .quote-preview-modal），
 * 而除详情之外的那些在 HTML 里排在 #order-detail-modal **前面** ——
 * 层级一样时后出现的盖前面，于是弹窗会藏在详情下面看不见。
 *
 * 早先这条规则是逐个列 id 的（#payment-modal、#deal-modal、#order-form-modal），
 * 结果每加一个新弹窗（付款、结算、编辑、出口批次…）就得记得回来加一笔，
 * **已经漏过两次**。现在改成「除详情之外的所有弹窗都抬一层」，
 * 跟 DOM 顺序无关，以后新加弹窗自动就对。
 * ------------------------------------------------------------------ */
.quote-preview-modal:not(#order-detail-modal) {
  z-index: 130;
}

/* 提示条（toast）必须压在弹窗之上。
   .toast-region 在 styles.css 里是 z-index:100，而弹窗是 120/130 ——
   在弹窗里点保存、校验没过时，提示被盖在弹窗底下，用户根本看不到，
   只感觉「点了没反应」。 */
.toast-region {
  z-index: 200;
  /*
   * 提示条还必须是"点得透"的。
   *
   * 它就钉在右上角（fixed, top:20 right:20），正好压在顶栏那排按钮上：
   * 刚保存完弹一条「报价单已保存」，3.6 秒内点「新建报价单」——
   * 点到的是那条提示，按钮一点反应都没有（用户报的就是这个）。
   * 提示条里没有任何可点的东西（纯文字、3.6 秒自动消失），
   * 所以整块设成 pointer-events:none，点击直接穿透到下面的按钮。
   */
  pointer-events: none;
}

/* ---- v10.14 备忘录：随手记的私人笔记 ----
   版式只服务一件事：打开就能敲。所以输入条在最上面、自动聚焦，
   没有标题/标签这类必填项；列表和详情并排，窄屏退化成单列。
   产品口径是"谁写的只有谁能看"，所以界面上必须有"只有你本人可见"的说法，
   并且给本人一个导出出口（否则换电脑/离职时内容拿不回来）。 */
.route--memo {
  padding: 22px clamp(22px, 3.2vw, 48px) 30px;
}

.memo-compose {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.memo-compose__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--brand);
  background: var(--primary-soft, #eaf2fd);
}

.memo-compose__icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.memo-compose textarea {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  max-height: 180px;
  padding: 9px 2px;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.7;
}

.memo-compose textarea::placeholder { color: #9aa6bb; }

.memo-compose__tip {
  padding-top: 9px;
  color: var(--muted);
  font-size: 11.5px;
  white-space: nowrap;
}

.memo-compose .primary-button {
  min-height: 38px;
  padding: 0 18px;
  font-size: 13px;
}

.memo-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.memo-filters {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: linear-gradient(180deg, #fdfefe, #f3f7fd);
  box-shadow: inset 0 1px 2px rgba(16, 42, 96, .05);
}

.memo-filters button {
  min-height: 32px;
  padding: 0 15px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.memo-filters button:hover { color: var(--ink); background: rgba(29, 111, 224, .08); }

.memo-filters button.is-active {
  color: #fff;
  background: linear-gradient(180deg, #3a82ec, var(--teal));
  box-shadow: 0 4px 12px rgba(29, 111, 224, .28);
}

.memo-private {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid #cdeedd;
  border-radius: 999px;
  color: #2f7a55;
  background: #eafaf1;
  font-size: 12px;
  white-space: nowrap;
}

.memo-toolbar .secondary-button { min-height: 36px; font-size: 12.5px; }

.memo-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 250px;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}

.memo-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.memo-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 14px;
  align-items: start;
}

.memo-list {
  padding: 8px;
  min-height: 260px;
  /* v10.58.4：列表自己滚。
     以前没有上限，条数一多、或者某一条写得很长，整个 page 就被撑长，
     右栏详情跟着被顶下去，滚半天才到得了下面。 */
  max-height: max(320px, calc(100vh - 250px));
  overflow-y: auto;
}

.memo-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 13px 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  cursor: pointer;
}

.memo-item:hover { background: #f7faff; }
.memo-item.is-active { background: #f2f7ff; border-color: #d4e4fb; }

.memo-item__tick {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  display: grid;
  place-items: center;
  border: 1.5px solid #c6d3e6;
  border-radius: 7px;
  background: var(--white);
  color: transparent;
  font-size: 12px;
  font-weight: 800;
}

.memo-item.is-done .memo-item__tick {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.memo-item__body {
  min-width: 0;
  color: var(--ink-2, #344054);
  font-size: 13.5px;
  white-space: pre-wrap;
  word-break: break-word;
  /* v10.58.4：列表里最多三行。
     一条长笔记原来会原样铺满整列（实测 9 条要点能撑到 300px 高），
     列表就没法扫读了；全文在右栏看。 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.memo-item.is-done .memo-item__body {
  color: #98a3b5;
  text-decoration: line-through;
}

.memo-item__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
}

.memo-item__tag {
  padding: 1px 8px;
  border-radius: 999px;
  color: #3f5a8c;
  background: #eef3fb;
}

.memo-item__pin {
  padding: 6px;
  border: 0;
  background: transparent;
  color: #c9d3e4;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.memo-item__pin.is-on { color: var(--amber); }

.memo-empty {
  padding: 46px 18px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.memo-detail {
  display: flex;
  flex-direction: column;
  min-height: 320px;
  padding: 18px 20px;
}

.memo-detail__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.memo-detail__head strong { font-size: 14px; }
.memo-detail__head span { color: var(--muted); font-size: 11.5px; }

#memo-detail-text {
  /* v10.58.4：这里必须用 height，不能用 flex: 1。
     flex: 1 的 flex-basis:0% 会盖掉"拖拽写进来的高度"——
     结果是右下角明明有个缩放手柄，拖了却一点反应都没有。
     改成显式高度之后 resize: vertical 才真的生效。 */
  flex: 0 0 auto;
  height: 340px;
  min-height: 150px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 14px 0 0;
  border: 0;
  outline: 0;
  resize: vertical;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.8;
}

.memo-detail__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 11.5px;
}

.memo-count { margin-left: auto; }

.memo-danger { color: #b42318; border-color: #f0d3d0; }
.memo-danger:hover:not(:disabled) { border-color: #e0b3ae; background: #fff7f6; }

@media (max-width: 1180px) {
  .memo-board { grid-template-columns: 1fr; }
  .memo-detail { min-height: 240px; }
  #memo-detail-text { height: 240px; }
}

@media (max-width: 680px) {
  .memo-compose { flex-wrap: wrap; }
  .memo-compose textarea { min-height: 64px; }
  .memo-compose__tip { display: none; }
  .memo-toolbar { gap: 8px; }
  .memo-search { min-width: 0; width: 100%; margin-left: 0; }
}

/* ---- v10.15 历史牌价（一天一条）----
   两个入口共用一份数据：顶部"牌价日期"选某天 → 整页（卡片 + 换算器）按那天的价显示；
   下面的"历史牌价"面板看区间走势和逐日明细。 */
.exchange-date-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.exchange-date-row label {
  display: grid;
  gap: 4px;
}

/* .exchange-hero__meta span 是状态胶囊，这里的字段名要还原成普通小字 */
.exchange-date-row label span {
  padding: 0;
  border-radius: 0;
  color: var(--muted);
  background: none;
  font-size: 10px;
  font-weight: 700;
}

.exchange-date-row input[type="date"] {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}

.exchange-date-row .secondary-button {
  min-height: 34px;
  font-size: 12px;
}

.exchange-banner {
  margin: 0 0 14px;
  padding: 11px 16px;
  border: 1px solid #f0dcb4;
  border-radius: 12px;
  color: #8a5b12;
  background: var(--amber-soft, #fef3e2);
  font-size: 12.5px;
  line-height: 1.7;
}

.exchange-banner strong { font-weight: 800; }

.exchange-history {
  overflow: hidden;
  padding-bottom: 18px;
}

.exchange-history__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.exchange-history__filters {
  display: grid;
  grid-template-columns: minmax(110px, .8fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) auto;
  gap: 11px;
  align-items: end;
  padding: 15px 20px;
}

.exchange-history__filters label {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.exchange-history__filters label > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.exchange-history__filters input,
.exchange-history__filters select {
  width: 100%;
  height: 42px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.exchange-history__filters .primary-button {
  min-height: 42px;
  font-size: 12px;
  white-space: nowrap;
}

.exchange-history__chart { padding: 0 20px 6px; }

.exchange-history__chart svg {
  width: 100%;
  height: 120px;
  display: block;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: #fbfcfe;
}

/* preserveAspectRatio="none" 会把线拉宽，non-scaling-stroke 保证线宽不被拉变形 */
#exchange-history-spark-line {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.exchange-history__chart-meta {
  display: flex;
  gap: 16px;
  padding: 8px 2px 0;
  color: var(--muted);
  font-size: 11px;
}

.exchange-history__table-wrap {
  /*
   * 上下**不留内边距**，只留左右。
   *
   * 原来这里是 `padding: 6px 20px 0`：滚动容器顶部那 6px 内边距会留在
   * 粘住的表头（`thead th { position: sticky; top: 0 }`）**上方**，
   * 往上滚的行就从那条缝里透出来 —— 半行日期和数字露在表头上面，看着像表格花了。
   * 表头自己带白底和底边框，贴着容器顶边反而更干净。
   *
   * 高度正好放 6 行：表头 33px + 6 × 行高 35px = 243px。
   * 行高由字号（12.5px）和单元格内边距（9px）决定，**改那两个地方要一起改这里**，
   * 不然又会卡出半行。
   */
  padding: 0 20px;
  max-height: 243px;
  overflow: auto;
}

.exchange-history__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.exchange-history__table th,
.exchange-history__table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-soft);
  text-align: right;
  white-space: nowrap;
}

.exchange-history__table th:first-child,
.exchange-history__table td:first-child { text-align: left; }

.exchange-history__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  background: var(--white);
  font-size: 11px;
  font-weight: 700;
}

.exchange-history__table tbody tr:hover { background: #f7faff; }

.exchange-history__empty {
  padding: 34px 10px;
  color: var(--muted);
  text-align: center !important;
}

@media (max-width: 900px) {
  .exchange-history__filters { grid-template-columns: 1fr 1fr; }
  .exchange-history__chart svg { height: 96px; }
}

/* ---- v10.16 关注的城市（每人自选，存在账号上）---- */
.world-clock-panel__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.world-clock-editor {
  margin: 0 20px 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcfe;
}

.world-clock-editor__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.world-clock-editor__head strong { font-size: 14px; }

.world-clock-editor__head small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11.5px;
}

.world-clock-editor__head small.is-warning { color: #93683d; }

.world-clock-editor__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.world-clock-editor__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
}

.world-clock-editor__search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.world-clock-editor__body {
  display: grid;
  gap: 12px;
  max-height: 320px;
  overflow: auto;
  /*
   * 滚到头就停，别带着外面整页一起动。
   * 城市列表有 40 多个，滚到底很容易；不写这条的话浏览器会把"继续滚"传给外层，
   * 结果是：在编辑关注城市的时候，最右边那条页面滚动条会自己跑 —— 用户报的
   * 「编辑关注的城市 后，最右侧外面的滚动条 bug」。本页其它内部滚动区
   * （.messages / .tool-aside / .quote-col / .inquiry-thread）都是这么写的。
   */
  overscroll-behavior: contain;
  padding-right: 4px;
}

.world-clock-editor__group h4 {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

.world-clock-editor__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.world-clock-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink-2, #344054);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.world-clock-chip:hover { border-color: #c3d2d1; }

.world-clock-chip.is-on {
  border-color: var(--brand);
  color: #fff;
  background: linear-gradient(180deg, #3a82ec, var(--teal));
}

/* 北京是基准城市，不可取消：禁用态要看得出来"这是固定的"，而不是"点不动" */
.world-clock-chip.is-locked { opacity: .85; cursor: default; }

.world-clock-chip i { font-style: normal; font-size: 10px; opacity: .75; }
.world-clock-chip.is-on i { color: #eaf2fd; }

.world-clock-editor__empty {
  padding: 22px 6px;
  color: var(--muted);
  font-size: 12.5px;
  text-align: center;
}

.world-clock-editor__note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

/* v10.29 客户分组抬头上的「全部归档」：批量清营销邮件用，样式比「只看」更低调 */
.cust-head__archive {
  margin-left: 6px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--muted);
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}

.cust-head__archive:hover {
  border-color: #c3d2d1;
  color: var(--ink);
}

/* v10.31 发送前确认弹窗：必须显眼、必须能一眼核对完 */
.email-send-dialog {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 24px;
}

.email-send-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(9, 24, 33, .42);
}

.email-send-dialog__panel {
  position: relative;
  width: min(720px, 96vw);
  max-height: min(880px, 92vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 28px 80px rgba(5, 22, 26, .3);
}

.email-send-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line-soft);
}

.email-send-dialog__head strong { display: block; font-size: 15px; }
.email-send-dialog__head small { display: block; margin-top: 4px; color: var(--muted); font-size: 11.5px; }

.email-send-dialog__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: grid;
  gap: 12px;
  padding: 16px 20px;
}

.email-send-dialog__body label { display: grid; gap: 6px; }
.email-send-dialog__body label > span { color: var(--muted); font-size: 10.5px; font-weight: 700; }
.email-send-dialog__body input[type="text"],
.email-send-dialog__body input[type="file"],
.email-send-dialog__body textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.email-send-dialog__body input[readonly] { background: var(--line-soft); color: var(--muted); }
.email-send-dialog__body textarea { min-height: 180px; line-height: 1.7; resize: vertical; }
.email-send-dialog__note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }

/*
 * 发信失败时的提示（v10.89）。
 * 用"报错"的配色，但排版按两段：第一行是哪一类失败（加粗），第二行是该去改什么。
 * 这块出现时弹窗不关、草稿不丢 —— 它只负责告诉人下一步做什么。
 */
.email-send-dialog__error {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #f3c6c0;
  border-left: 3px solid #c0392b;
  border-radius: 8px;
  background: #fdf2f0;
  color: #8c2f22;
  font-size: 12px;
  line-height: 1.65;
}
.email-send-dialog__error[hidden] { display: none; }
.email-send-dialog__error b { font-size: 12.5px; }
.email-send-dialog__error span { color: #7a4038; }

/* v10.33 写信弹窗里的"附加签名"勾选 */
.email-send-dialog__check {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}

.email-send-dialog__check input { width: auto; }
.email-send-dialog__check:has(input:disabled) { opacity: .6; }

/* ================================================================== *
 * v10.83 写邮件：场景模板 + 拖拽/粘贴加附件
 *
 * 起因：正文只有一个空文本框，整封信要手打；附件只能"选择文件"，
 * 业务员得去电脑里翻。而工作台本来就"知道业务上下文"——这是它相对
 * Foxmail 唯一能赢的地方，所以这里做的是"常见场景一键铺正文"，
 * 而不是"更漂亮的编辑器"。
 * ================================================================== */

/*
 * 顺带修一个老毛病：「附加签名」的勾选框和文字被拆成了两行。
 * 原因是 `.email-send-dialog__body label { display: grid }` 的权重（0,1,1）
 * 比 `.email-send-dialog__check { display: flex }`（0,1,0）高，flex 从来没生效过。
 * 这里把选择器补成和上面那条一样的形状，靠"排在后面"赢下来。
 */
.email-send-dialog__body label.email-send-dialog__check {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 附件：拖拽提示 + 已经加进来的文件清单 */
.email-send-dialog__drop {
  padding: 10px 11px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  transition: border-color .16s ease, background .16s ease;
}

.email-send-dialog__drop small { color: var(--muted); font-size: 11px; line-height: 1.5; }

/* 拖着文件停在弹窗上时给个反馈，不然不知道能不能放 */
.email-send-dialog.is-dropping .email-send-dialog__drop {
  border-color: var(--brand);
  background: #f2faf8;
}

.email-send-files { display: flex; flex-wrap: wrap; gap: 6px; }

.email-send-files__item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 0 6px 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 11.5px;
}

.email-send-files__name {
  max-width: 260px;
  color: #22343a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-send-files__item small { color: var(--muted); font-size: 10.5px; }

.email-send-files__item button {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: #eef3f1;
  color: #6c8185;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.email-send-files__item button:hover { background: #fbe9e5; color: #b8563f; }

/* 场景模板 */
.email-send-scene { display: grid; gap: 7px; }
.email-send-scene__label { color: var(--muted); font-size: 10.5px; font-weight: 700; }
.email-send-scene__row { display: flex; flex-wrap: wrap; gap: 6px; }

.email-send-scene__chip {
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #4d6b6d;
  font-family: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.email-send-scene__chip:hover { border-color: #b9cdc9; background: #f7faf9; }
.email-send-scene__chip.is-on { border-color: var(--brand); background: #e9f4f1; color: #17585a; }

.email-send-scene__hint { margin: 0; color: #8c9ca0; font-size: 11px; line-height: 1.6; }
.email-send-scene__hint.is-warn { color: #b4761f; font-weight: 650; }

/*
 * 正文插图：正文本身还是纯文本，图只留一个 [[图1]] 标记（见 public/email-inline-images.js）。
 * 下面这一条是"已经插了哪几张"的清单，给个缩略图让业务员确认自己插对了。
 */
.email-send-inline { display: grid; gap: 8px; }
.email-send-inline__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.email-send-inline__hint { color: var(--muted); font-size: 11px; line-height: 1.5; }
.email-send-inline__list { display: flex; flex-wrap: wrap; gap: 8px; }

.email-send-inline__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.email-send-inline__item img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  background: #eef2f1;
}

.email-send-inline__meta { display: grid; gap: 1px; }
.email-send-inline__meta b { color: #17585a; font-size: 11.5px; }

.email-send-inline__meta small {
  max-width: 150px;
  color: var(--muted);
  font-size: 10.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-send-inline__item button {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: #eef3f1;
  color: #6c8185;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.email-send-inline__item button:hover { background: #fbe9e5; color: #b8563f; }

/* 浏览器画不出缩略图时（格式不常见）用这个占位，别只留一个破图标让人以为没插上 */
.email-send-inline__placeholder {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #f2f5f4;
  color: #9db0b2;
  font-size: 12px;
  font-style: normal;
}

.email-send-inline__meta small.is-preview-failed {
  max-width: 230px;
  color: #b4761f;
  white-space: normal;
  line-height: 1.45;
}

/*
 * 插图可以拖着走：按住下方缩略图拖进正文，放到哪儿图就挪到哪儿。
 * （正文是 textarea，原生控件里的文字没法用鼠标拖 —— 所以手势落在缩略图上。）
 */
.email-send-inline__item[draggable="true"] { cursor: grab; }
.email-send-inline__item.is-dragging { opacity: .45; cursor: grabbing; }

/*
 * 正文编辑器：受限的可编辑区 —— 里面只有两种东西，**文字**和**图片标记块**。
 * 用 pre-wrap 让文本里的 \n 直接就是换行（回车由 JS 插纯换行，不依赖浏览器的 <div>/<br>）。
 */
.email-send-editor {
  width: 100%;
  min-height: 180px;
  max-height: 420px;
  overflow: auto;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  outline: 0;
}

.email-send-editor:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(29, 111, 112, .08);
}

/* 正文里的图片标记块：高亮一块，按住能拖 */
.email-img-chip {
  display: inline-block;
  margin: 1px 2px;
  padding: 0 7px;
  border: 1px solid #9dc6c0;
  border-radius: 6px;
  background: #e9f4f1;
  color: #17585a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
}

.email-img-chip:hover { background: #dcefea; }
.email-img-chip.is-dragging { opacity: .45; cursor: grabbing; }

/* 拖着图悬在正文上方时，让正文那块亮起来，明确"可以放这儿" */
.email-send-dialog__text.is-image-drop .email-send-editor {
  border-color: var(--brand);
  background: #f2faf8;
  box-shadow: 0 0 0 3px rgba(29, 111, 112, .1);
}

/* v10.34 收件箱里的"噪音折叠"行：推广/通知不再挤占客户来信的位置 */
.email-noise-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 8px 10px;
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: #fbfcff;
}

.email-noise-row b { font-size: 12.5px; }
.email-noise-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.email-noise-row .secondary-button,
.email-noise-row .primary-button { margin-left: auto; min-height: 32px; font-size: 12px; }
.email-noise-row .primary-button + .secondary-button { margin-left: 0; }

/* v10.35 列表信息密度：一行先看到"我要做什么"；星标和 ⋯ 收进悬停，别抢注意力。
   已经加星的仍然常显——星标是"我标过的"，不能藏。 */
.email-list-item__next {
  display: block;
  margin-top: 3px;
  color: var(--teal);
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.email-conv .email-list-item__star:not(.is-starred),
.email-conv .email-list-item__more {
  opacity: 0;
  transition: opacity .15s ease;
}

.email-conv:hover .email-list-item__star,
.email-conv:hover .email-list-item__more,
.email-conv:focus-within .email-list-item__star,
.email-conv:focus-within .email-list-item__more {
  opacity: 1;
}

.email-send-dialog__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--line-soft);
  background: #fbfcfe;
}

/* 没有节假日规则的地区：必须写出来，空白会被当成"人家不放假" */
.world-time-card__no-holiday {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  color: var(--muted);
  background: var(--line-soft);
  font-size: 10.5px;
}

.world-holiday-digest__missing {
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
}

@media (max-width: 680px) {
  .world-clock-editor { margin: 0 14px 14px; padding: 13px 14px; }
  .world-clock-editor__body { max-height: 260px; }
}


/* ==========================================================================
 * v10.53 客户商机改版收尾
 *   这个文件里还留着一版更旧的商机样式（按钮 width:100%、字号 9~10px），
 *   它们排在前面那套新规则之后，会把新布局盖掉，所以在文件最后按最终形态再覆盖一次。
 * ======================================================================== */
.inquiry-primary-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0; }
.inquiry-more-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0; }
.inquiry-action-button { width: auto; min-height: 34px; margin-bottom: 0; font-size: 12.5px; }
.inquiry-primary-actions .inquiry-action-button,
.inquiry-more-actions .inquiry-action-button { width: auto; margin-bottom: 0; }
.inquiry-stage-control .inquiry-action-button { width: auto; min-width: 0; }
.inquiry-more-toggle { width: auto; margin-bottom: 0; padding: 6px 12px; font-size: 11.5px; }
.inquiry-actions { display: grid; gap: 10px; margin-bottom: 0; }
.inquiry-action-block { padding: 13px 20px; }
/* 本月战绩：只占一行小字，不抢摘要的位置 */
.inquiry-summary__month { color: var(--muted); font-size: 11.5px; white-space: nowrap; }

/* v10.54 摘要 + 筛选合成一块白卡（数字不再飘在页面背景上） */
.inquiry-board {
  padding: 12px 16px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow);
}
.inquiry-board .inquiry-summary { margin-bottom: 10px; }
.inquiry-board .inquiry-filter-form {
  border: 0;
  box-shadow: none;
  padding: 0;
}
.inquiry-group-label { color: var(--faint); font-size: 11px; }

/* 列表行第二行：产品 + 数量，用来区分"哪条是哪条" */
.inquiry-list-item__goods {
  display: block;
  margin-bottom: 6px;
  overflow: hidden;
  color: #6a8189;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 同一个客户的其他商机：一排可点的小卡片 */
.inquiry-siblings { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.inquiry-siblings[hidden] { display: none; }
.inquiry-siblings__label { color: var(--faint); font-size: 11px; }
.inquiry-siblings__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.inquiry-siblings__item:hover { border-color: var(--brand); color: var(--brand); }
.inquiry-siblings__item em { color: #325d9c; font-style: normal; font-weight: 700; }
.inquiry-siblings__item span { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 报价条：这条商机的报价单状态 + 回填阶段的按钮 */
.inquiry-quote-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--line-soft);
  background: #f7fbff;
}
.inquiry-quote-strip[hidden] { display: none; }
.inquiry-quote-strip__label { color: #8a989c; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.inquiry-quote-strip strong { color: #2f5b62; font-size: 12.5px; }
.inquiry-quote-strip .secondary-button { min-height: 30px; padding: 0 12px; font-size: 12px; }

/* 报价顶栏里的「来自商机」回链 */
.quote-from-inquiry {
  margin-left: 8px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.quote-from-inquiry:hover { border-color: var(--brand); color: var(--brand); }
.quote-from-inquiry b { color: var(--ink-2); font-weight: 700; }
/* 旧规则里这些间距是给"右栏动作面板"留的，搬到详情里以后会撑出一块空白 */
.inquiry-actions { padding-top: 0; }
.inquiry-stage-control { display: flex; grid-template-columns: none; align-items: flex-end; margin-bottom: 0; }
.inquiry-stage-control select { width: auto; min-width: 150px; }
.inquiry-mini-toggle { font-size: 11.5px; padding: 5px 12px; border-radius: 8px; }
.inquiry-confidence { font-size: 10.5px !important; padding: 3px 8px; }
.inquiry-due-pill { font-size: 10px; }
details.inquiry-fields-section > summary > span,
details.inquiry-thread-section > summary > span,
details.inquiry-timeline-section > summary > span { font-size: 10.5px; }
.inquiry-list-item__meta small,
.inquiry-stage-pill { font-size: 10px; }

/* ==========================================================================
 * v10.55 商机：筛选条收紧凑 + 标签
 * ======================================================================== */
/* 筛选那一行以前是 grid，搜索框被 1fr 拉满，中间空出一大片 —— 看着就是"位置不对"。
   现在收成紧凑一条：搜索固定宽，选择框按内容宽，分组靠右。 */
.inquiry-board .inquiry-filter-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.inquiry-board .inquiry-filter-form label { display: block; }
.inquiry-board .inquiry-filter-form label > span { display: none; }
.inquiry-board .inquiry-filter-form input,
.inquiry-board .inquiry-filter-form select { min-height: 34px; }
.inquiry-board .inquiry-filter-form .inquiry-filter-search { flex: 0 1 340px; min-width: 200px; }
.inquiry-board .inquiry-filter-form .inquiry-filter-search input { width: 100%; }
.inquiry-board .inquiry-filter-form select { min-width: 128px; }
.inquiry-board .inquiry-filter-form .inquiry-list-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* 商机标签 */
.inquiry-labels { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.inquiry-labels__label { color: var(--faint); font-size: 11px; }
.inquiry-labels__list { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.inquiry-labels__empty { color: var(--faint); font-size: 11px; }
.inquiry-label-chip {
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.inquiry-labels.is-editing .inquiry-label-chip { border-style: dashed; }
.inquiry-label-chip:hover { border-color: var(--label-color, var(--brand)); color: var(--label-color, var(--brand)); }
.inquiry-label-chip.is-on { border-color: var(--label-color, var(--brand)); background: var(--label-color, var(--brand)); color: #fff; font-weight: 700; }
.inquiry-label-chip.is-on:hover { color: #fff; }
.inquiry-labels__edit {
  padding: 3px 10px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.inquiry-labels__edit:hover { border-color: var(--brand); color: var(--brand); }

/* 列表行上的标签小标 */
.inquiry-row-label {
  padding: 1px 7px;
  border-radius: 999px;
  background: #f1f4f1;
  color: var(--label-color, #6b7a7a);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
}

/* ==========================================================================
 * v10.79 商机：把"该做什么"收成一块 + 阶段降级
 * ======================================================================== */
/* 按钮紧跟着上面那一块，不再另起一个带边框的区块（原来的 .inquiry-step-box 已撤掉）。 */
.inquiry-action-block { padding: 11px 20px 15px; }

/* 左列表在宽屏下只占 32%，客户名后面那半句主题永远被省略号吃掉 ——
   而"哪条是哪条"主要靠这句主题分辨。给列表多一点宽度，详情那边还有富余。
   （只改宽屏那一档：窄屏的堆叠规则写在前面，不加 min-width 会把它们一起盖掉。） */
@media (min-width: 1251px) {
  .inquiry-workspace { grid-template-columns: minmax(340px, .95fr) minmax(0, 1.5fr); }
}

/* ==========================================================================
 * v10.81 商机页：骨架换成「AI 邮箱助手」那一套
 *
 * 为什么：用户要的是"跟 AI 邮箱助手一样"。邮箱那一页的要点不是配色，是布局
 * （见 email-workspace.css 开头那段）：
 *   1. 顶部一条工具条（业务口径 + 快捷操作），不是大标题卡片；
 *   2. 主区两栏**连成一片**，靠 1px 分隔线，不是"圆角卡片 + 间距"；
 *   3. 整屏高度由各栏自己滚动，页面不整体滚；
 *   4. 右栏底部钉住一条动作区（邮箱是"写回复"）—— 翻到多下面都看得见要做什么。
 *
 * 商机页以前是一张张白卡堆在一个会整体滚动的页面里：摘要卡、筛选条、列表卡、详情卡，
 * 每块都在跟别的块抢注意力，而且列表和详情的高度互相牵制。
 * ======================================================================== */
.route--inquiries {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--canvas);
}

/* --- 顶部工具条 --- */
.inquiry-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfa;
}
.inquiry-toolbar__text { flex: 1; min-width: 0; margin: 0; color: var(--muted); font-size: 12.5px; }
.inquiry-toolbar__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* 小控件：和邮箱助手的 .email-btn 同一档尺寸 */
.route--inquiries .inquiry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f1f4f1;
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.route--inquiries .inquiry-btn:hover { background: var(--line-soft); }
.route--inquiries .inquiry-btn.is-active { border-color: var(--brand); color: var(--brand); background: #fff; }

/* --- 两栏连成一片 --- */
.route--inquiries .inquiry-workspace {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
}
.route--inquiries .inquiry-list-panel {
  flex: 0 0 330px;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: #fbfcfa;
  box-shadow: none;
}
.route--inquiries .inquiry-detail-panel {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 0;
  border-radius: 0;
  background: #fbfcfa;
  box-shadow: none;
}

/* --- 左栏头部：搜索 / 标签 / 分组 + 五个桶，都长在列表自己头上 --- */
.route--inquiries .inquiry-inbox-head {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.route--inquiries .inquiry-inbox-tools { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.route--inquiries .inquiry-search-box {
  /* 和邮箱那一行一样：搜索 + 三个短控件挤一行（标签的默认项写"标签"才排得下） */
  flex: 1 1 120px;
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.route--inquiries .inquiry-search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
}
.route--inquiries .inquiry-label-picker { flex: 0 0 auto; }
.route--inquiries .inquiry-label-picker select { max-width: 118px; }

.route--inquiries .inquiry-buckets { display: flex; flex-wrap: wrap; gap: 6px; }
.route--inquiries .inquiry-buckets button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}
.route--inquiries .inquiry-buckets button b { color: var(--brand); font-size: 12px; font-weight: 700; }
.route--inquiries .inquiry-buckets button:hover { border-color: var(--brand); }
.route--inquiries .inquiry-buckets button.is-active {
  border-color: var(--brand);
  background: #eef5ff;
  color: var(--ink);
  font-weight: 700;
}

.route--inquiries .inquiry-inbox-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-top: 1px solid var(--line);
  background: #fbfcfa;
  color: var(--faint);
  font-size: 11px;
}
.route--inquiries .inquiry-inbox-foot #inquiry-month-stats { flex: 0 0 auto; white-space: nowrap; }
.route--inquiries .inquiry-inbox-foot #inquiry-list-copy {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.route--inquiries .inquiry-inbox-clean {
  margin-left: auto;
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.route--inquiries .inquiry-inbox-clean:hover { border-color: #e0b4a9; color: #a3473c; }

/* 列表本体自己滚，页面不跟着动 */
.route--inquiries .inquiry-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0; }

/* --- 右栏：头部常驻 + 正文滚动 + 动作吸底 --- */
.route--inquiries .inquiry-detail { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.route--inquiries .inquiry-detail__header {
  flex: 0 0 auto;
  border-bottom: 1px solid var(--line);
  background: #fbfcfa;
}
.route--inquiries .inquiry-detail__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.route--inquiries .inquiry-detail__foot {
  flex: 0 0 auto;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  background: #fbfcfa;
}
.route--inquiries .inquiry-empty-state { flex: 1; }
.route--inquiries .inquiry-action-block { padding: 0; border: 0; }

/* 窄屏退回"整页滚动"：两栏竖着排，列表给一个固定高度 */
@media (max-width: 1180px) {
  .route--inquiries { overflow-y: auto; }
  .route--inquiries .inquiry-workspace { flex-direction: column; }
  .route--inquiries .inquiry-list-panel {
    flex: 0 0 auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .route--inquiries .inquiry-list { max-height: 300px; }
  .route--inquiries .inquiry-detail-panel { flex: 0 0 auto; }
  .route--inquiries .inquiry-detail__body { overflow-y: visible; }
  .route--inquiries .inquiry-detail__foot { position: sticky; bottom: 0; z-index: 2; }
}

/* ==========================================================================
 * v10.81.1 把剩下的"不一样"补齐（对着邮箱助手的截图一条条对）
 *
 * 之前商机页比邮箱多用三种视觉语言：列表行是"白底 + 细线"的表格感、
 * 分组抬头是整条彩色横带、右栏是"卡片套卡片"。邮箱那边全篇只有一种：
 * 扁平行 + 留白，靠圆角高亮表示"选中"。
 * ======================================================================== */

/* --- 列表行：去掉细线，改成"留白分隔 + 圆角高亮"（邮箱 .email-list-item 的做法） --- */
.route--inquiries .inquiry-list { padding: 6px 8px 12px; }
.route--inquiries .inquiry-list-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}
.route--inquiries .inquiry-list-item:hover { border-color: var(--line); background: var(--canvas); }
.route--inquiries .inquiry-list-item.is-active {
  border-color: #c4dcd9;
  background: var(--teal-soft);
  box-shadow: none;
}
/* 客户首字母圆牌：邮箱那一页就是靠它认出"这是谁" */
.route--inquiries .inquiry-list-avatar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e4f0ef;
  color: #2f5b62;
  font-size: 13px;
  font-weight: 700;
}
.route--inquiries .inquiry-list-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.route--inquiries .inquiry-list-item__top { gap: 6px; }
.route--inquiries .inquiry-list-item__top strong { font-size: 13px; font-weight: 600; }
.route--inquiries .inquiry-list-item__top time { font-size: 11px; }
/* 主题是"次级信息"：邮箱那边是灰的，商机这边之前是粗黑，一行压一行 */
.route--inquiries .inquiry-list-body > b {
  display: block;
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.route--inquiries .inquiry-list-item__goods { margin: 0; font-size: 11px; }
.route--inquiries .inquiry-list-item__meta {
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 6px;
  margin-top: 4px;
  overflow: hidden;
}
.route--inquiries .inquiry-list-item__meta small { font-size: 11px; }

/* --- 分组抬头：不再整条上色，只留一行安静的小字（邮箱的分组也是这个样子） --- */
.route--inquiries .inquiry-queue-group + .inquiry-queue-group,
.route--inquiries .inquiry-cust-group + .inquiry-cust-group { border-top: 0; }
.route--inquiries .inquiry-queue-head,
.route--inquiries .inquiry-cust-head {
  background: transparent;
  padding: 10px 12px 4px;
}
.route--inquiries .inquiry-queue-group--overdue .inquiry-queue-head,
.route--inquiries .inquiry-queue-group--today .inquiry-queue-head,
.route--inquiries .inquiry-cust-head.is-urgent { background: transparent; }
.route--inquiries .inquiry-queue-head b { color: var(--muted); font-size: 11px; font-weight: 700; }
.route--inquiries .inquiry-queue-head span { display: none; }
.route--inquiries .inquiry-queue-head em {
  margin-left: auto;
  padding: 0;
  background: transparent;
  color: var(--faint);
  font-size: 11px;
}

/* --- 右栏 AI 建议：从"蓝色卡片"改成邮箱那种浅灰气泡，整页只留一种块 --- */
.route--inquiries .inquiry-ai__advice {
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--canvas);
}
.route--inquiries .inquiry-ai__advice > strong { color: var(--ink); font-size: 14.5px; }

/* --- 底部动作条：别让"更多动作"孤零零居中占一行 --- */
.route--inquiries .inquiry-more-toggle {
  width: auto;
  justify-self: start;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11.5px;
}
.route--inquiries .inquiry-more-toggle:hover { color: var(--brand); background: transparent; }

/* 阶段是"系统内部状态"，不是待办。列表行上只留一个安静的灰标，
   让「逾期 21 天」那种真正催人的标记说话 —— 以前逾期行会把阶段标也染成红的，两个红标抢位置。 */
.inquiry-stage-pill,
.inquiry-list-item.is-overdue .inquiry-stage-pill {
  color: var(--muted);
  background: #f2f4f5;
  font-weight: 600;
}

/* ==========================================================================
 * v10.80 商机详情：主体是"AI 读完了说了什么、建议怎么做"
 *   以前这三样被拆在三处（焦点块的下一步 / AI SUMMARY / 待澄清与风险），中间还夹着动作区，
 *   看的人得自己拼。现在合成一块放在标题正下方：建议最大，其余是它的依据。
 * ======================================================================== */
.inquiry-ai { padding: 15px 20px 14px; border-bottom: 1px solid var(--line-soft); }

.inquiry-ai__advice {
  padding: 12px 15px;
  border: 1px solid #d8e5f8;
  border-radius: 12px;
  background: #f5f9ff;
}
.inquiry-ai__advice > span { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
/* 这一块里的来源徽章是"标题"，不是行内小标：比它在别处大一档 */
.inquiry-ai__advice .inquiry-source-badge { padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.inquiry-ai__advice > strong { display: block; color: #1f3f66; font-size: 14.5px; line-height: 1.6; }

.inquiry-ai__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.inquiry-ai__grid > article { min-width: 0; }
.inquiry-ai__grid > article > span {
  display: block;
  margin-bottom: 5px;
  color: #94a1a2;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
}
.inquiry-ai__grid > article p { margin: 0; color: var(--ink-2); font-size: 12.5px; line-height: 1.7; }
.inquiry-ai__grid > article p + p { margin-top: 6px; }
.inquiry-ai__card {
  padding: 11px 13px;
  border: 1px solid #f0dcb4;
  border-radius: 11px;
  background: #fffaf0;
}
.inquiry-ai__card p { color: #8a6435; }

.inquiry-ai__foot {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.inquiry-ai__state { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin: 0; }
.inquiry-ai__state > span { color: #94a1a2; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.inquiry-ai__state > b {
  padding: 2px 9px;
  border-radius: 999px;
  color: var(--muted);
  background: #f2f4f5;
  font-size: 11px;
  font-weight: 700;
}
.inquiry-ai__state > em {
  flex: 1 1 200px;
  color: var(--muted);
  font-size: 11.5px;
  font-style: normal;
  line-height: 1.55;
}
@media (max-width: 1100px) {
  .inquiry-ai__grid,
  .inquiry-ai__foot { grid-template-columns: 1fr; }
}

/* ==========================================================================
 * v10.82.1 配色与点击态：把商机页并到邮箱助手同一套色板
 *
 * 为什么之前"看着不一样"：不是细节没调，是**两页用的根本不是一套颜色**。
 * skin.css 第 9 节专门给邮箱那一页定过一整组变量（原话："把模块自己那套橙+青收回到品牌蓝"）：
 *   品牌蓝 #1a63d8、墨青 #0e7c86、冷灰底 #eef1f7、白卡 #ffffff、描边 #e4e9f2。
 * 商机页这边还是 v10.81 里我硬编码的暖灰 #fbfcfa + 亮蓝 #eef5ff 高亮，
 * 两页并排一看就是两个产品。这里把同一组变量原样搬过来，再把"点下去"的样式照它改。
 * ======================================================================== */
.route--inquiries {
  --brand: #1a63d8;
  --brand-dark: #1450a8;
  --brand-soft: #e9f1fe;
  --brand-line: #c6d9f8;
  --teal: #0e7c86;
  --teal-soft: #e6f4f6;
  --green-soft: #e6f6ef;
  --amber: #b26a06;
  --amber-soft: #fdf3e2;
  --red: #d92d20;
  --red-soft: #fdeceb;
  --faint: #98a4b8;
  --line: #e4e9f2;
  --line-soft: #eef1f7;
  --paper: #ffffff;
  --canvas: #eef1f7;
  --cream: #f7f9fd;
}

/* 底色和描边统一走变量。之前写死的 #fbfcfa 是暖灰，和邮箱的冷灰放一起就"发黄"。 */
.inquiry-toolbar { background: var(--paper); border-bottom-color: var(--line); }
.route--inquiries .inquiry-list-panel { background: var(--paper); border-right-color: var(--line); }
.route--inquiries .inquiry-detail-panel { background: var(--paper); }
.route--inquiries .inquiry-inbox-head { border-bottom-color: var(--line); }
.route--inquiries .inquiry-inbox-foot { background: var(--paper); border-top-color: var(--line); }
.route--inquiries .inquiry-detail__header { background: var(--paper); border-bottom-color: var(--line); }
.route--inquiries .inquiry-detail__foot { background: var(--paper); border-top-color: var(--line); }

/* 工具按钮：照邮箱的 .email-btn--ghost（白底 + 描边，悬停变品牌蓝）。
   之前是灰底 #f1f4f1，夹在一排白控件里就它"陷下去"。 */
.route--inquiries .inquiry-btn {
  background: #fff;
  border-color: var(--line);
  color: var(--ink-2);
}
.route--inquiries .inquiry-btn:hover {
  border-color: var(--brand-line);
  background: #f7faff;
  color: var(--brand);
}
/* 选中态用实心墨青：邮箱的视图标签、语言切换都是这么点的 */
.route--inquiries .inquiry-btn.is-active {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}

/* 五个桶：逐条照邮箱的 .email-smart-views 抄 ——
   胶囊形、未选中冷灰底、选中实心墨青 + 白字、数字留固定槽位不抖动 */
.route--inquiries .inquiry-buckets button {
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--canvas);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}
.route--inquiries .inquiry-buckets button b {
  display: inline-block;
  min-width: 14px;
  margin-left: 3px;
  color: inherit;
  font-size: 10.5px;
  font-weight: 600;
  text-align: center;
  opacity: .75;
}
.route--inquiries .inquiry-buckets button:hover { border-color: var(--teal); color: var(--teal); }
.route--inquiries .inquiry-buckets button.is-active {
  border-color: var(--teal);
  background: var(--teal);
  color: #fff;
}
.route--inquiries .inquiry-buckets button.is-active b { opacity: .8; }

/* 列表行：选中态和邮箱同款（浅墨青底 + 一层很淡的描边），首字母圆牌也归到墨青系 */
.route--inquiries .inquiry-list-item.is-active {
  border-color: #c4dcd9;
  background: var(--teal-soft);
}
.route--inquiries .inquiry-list-avatar { background: var(--teal-soft); color: var(--teal); }

/* 右栏：徽章、"AI 建议"来源标、风险卡，全部换成变量色 */
.route--inquiries .inquiry-detail__badges span { background: var(--brand-soft); color: var(--brand); }
.route--inquiries .inquiry-detail__badges span:last-child { background: var(--teal-soft); color: var(--teal); }
.route--inquiries .inquiry-ai__advice {
  border-color: transparent;
  background: var(--canvas);
}
.route--inquiries .inquiry-ai__advice > strong { color: var(--ink); }
.route--inquiries .inquiry-ai__advice .inquiry-source-badge { background: var(--brand-soft); color: var(--brand); }
.route--inquiries .inquiry-ai__advice .inquiry-source-badge[data-source="stage"] { background: var(--amber-soft); color: var(--amber); }
.route--inquiries .inquiry-ai__card { border-color: #f2dbae; background: var(--amber-soft); }
.route--inquiries .inquiry-ai__card p { color: var(--amber); }