/* 订货系统（2026-10-17，2026-10-18 老板：整体美化 + 全局自适应）：全部 .os-* 作用域，
   浅色主题与全站一致，不污染其他页面。参照 assets/shop-plan-styles.css 的组织方式。
   分页条复用全站统一核心 gpPagerHtml（inline 样式 + 全局 btn 类），本文件只负责 .os-* 外壳。
   自适应：.os-root 流式宽度（max 1680 居中），表格横向滚动兜底窄屏，断点堆叠筛选/工具条/弹窗。 */
.os-root {
  --os-brand: #b45309; --os-brand-2: #f59e0b; --os-ink: #1f2937; --os-mut: #6b7280;
  --os-line: #e7eaef; --os-card: #fff; --os-bg: #f6f7f9;
  width: 100%; max-width: 100%; margin: 0; padding: 0; color: var(--os-ink);
}
.os-root * { box-sizing: border-box; }

/* Hero：品牌渐变横幅卡片 */
.os-hero {
  display: flex; align-items: center; gap: 16px; padding: 18px 22px; margin-bottom: 14px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 55%, #fde68a 100%);
  border: 1px solid #fcd9a4; border-radius: 16px; box-shadow: 0 6px 20px rgba(180, 83, 9, .08);
}
.os-hero-icon {
  display: grid; place-items: center; width: 52px; height: 52px; font-size: 28px; line-height: 1;
  background: #fff; border-radius: 14px; box-shadow: 0 4px 12px rgba(180, 83, 9, .16);
}
.os-hero h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: .3px; color: #7c2d12; }
.os-hero-sub { margin: 5px 0 0; font-size: 13px; color: #92600d; line-height: 1.5; }

/* Tab：分段控件 */
.os-tabs { display: flex; gap: 4px; margin: 0 0 16px; padding: 5px; background: #eef1f5; border-radius: 12px; overflow-x: auto; }
.os-tab {
  flex: 0 0 auto; padding: 9px 18px; font-size: 14px; font-weight: 600; border: none; border-radius: 9px;
  background: transparent; color: var(--os-mut); cursor: pointer; white-space: nowrap; transition: all .16s ease;
}
.os-tab:hover { color: var(--os-brand); }
.os-tab.active { color: #fff; background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 3px 10px rgba(217, 119, 6, .35); }

/* Chips：统计胶囊 */
.os-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.os-chip { padding: 5px 12px; font-size: 12.5px; font-weight: 600; border-radius: 999px; background: #fff; color: #475569; border: 1px solid var(--os-line); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.os-chip-warn { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.os-chip-ok { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.os-chip-now { background: #eef2ff; color: #4338ca; border-color: #c7d2fe; }

/* 筛选区：卡片容器 */
.os-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 12px; padding: 12px 14px; background: var(--os-card); border: 1px solid var(--os-line); border-radius: 12px; box-shadow: 0 1px 3px rgba(15, 23, 42, .04); }
.os-sel, .os-kw { padding: 8px 11px; font-size: 13px; border: 1px solid #d7dce3; border-radius: 9px; background: #fff; color: #334155; transition: border-color .15s, box-shadow .15s; }
.os-sel { max-width: 240px; }
.os-kw { flex: 1; min-width: 220px; }
.os-sel:focus, .os-kw:focus { outline: none; border-color: var(--os-brand-2); box-shadow: 0 0 0 3px #fef3c7; }
.os-reset { padding: 8px 15px; font-size: 13px; font-weight: 600; border: 1px solid #d7dce3; border-radius: 9px; background: #f8fafc; color: #334155; cursor: pointer; transition: all .15s; }
.os-reset:hover { background: #eef2f6; border-color: #cbd5e1; }

/* ── 价格门禁 · 表头下按列筛选行（2026-10-21 老板拍板：删顶部搜索栏，筛选全部下沉到
   列名下方这一行，每格一个控件）。值全部映射后端 list_comparison 真实入参
   （search/title/sku/category/price_*/ceiling_*/cost_*/verdict），非假筛选。
   窄屏由 .os-tablewrap 横向滚动兜底（符合全屏自适应规则）。 ── */
.os-table thead .pcf-row th { position: static; top: auto; background: #fff; padding: 7px 9px; font-weight: 400; box-shadow: inset 0 -1px 0 var(--os-line); }
.pcf-in, .pcf-sel { box-sizing: border-box; width: 100%; min-width: 60px; padding: 6px 8px; font-size: 12.5px; font-weight: 400; color: #1f2937; border: 1px solid #e2e8f0; border-radius: 8px; background: #fbfcfe; transition: border-color .15s, box-shadow .15s, background .15s; }
.pcf-in::placeholder { color: #a9b3c1; }
.pcf-in:focus, .pcf-sel:focus { outline: none; border-color: var(--os-brand-2); background: #fff; box-shadow: 0 0 0 3px #fef3c7; }
.pcf-sel { cursor: pointer; }
.pcf-range { display: flex; align-items: center; gap: 4px; }
.pcf-range .pcf-in { min-width: 0; padding: 6px 5px; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.pcf-range .pcf-in::-webkit-outer-spin-button, .pcf-range .pcf-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }   /* 去掉数字框两侧的 ↑↓ 小箭头（老板：丑） */
.pcf-tilde { color: #cbd5e1; font-size: 12px; flex: none; }
.pcf-reset { box-sizing: border-box; width: 100%; padding: 6px 8px; font-size: 12px; font-weight: 600; color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: all .14s; }
.pcf-reset:hover { background: #eef2f7; color: #334155; border-color: #cbd5e1; }

/* 工具条 */
.os-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.os-toolbar-end { justify-content: flex-end; }
.os-hint { font-size: 12.5px; color: var(--os-mut); }
/* 筛选卡下方的口径提示行：行内小字，不是信息框（.os-hint 兼底规则会把它画成灰框）。 */
.os-tip { margin: -4px 0 12px; font-size: 12.5px; color: var(--os-mut); line-height: 1.6; }

/* 说明条 / 加载 / 错误 */
.os-note { font-size: 12px; color: #64748b; background: #f8fafc; border: 1px solid var(--os-line); border-left: 3px solid var(--os-brand-2); padding: 9px 12px; margin: 0 0 12px; line-height: 1.65; border-radius: 0 8px 8px 0; }
.os-hint, .os-error { padding: 22px; font-size: 13px; color: var(--os-mut); background: #f8fafc; border: 1px solid var(--os-line); border-radius: 10px; text-align: center; }
.os-error { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }

/* 表格：白卡 + 圆角 + 阴影 + 斑马纹 + 粘性表头 */
.os-tablewrap { overflow-x: auto; border: 1px solid var(--os-line); border-radius: 12px; background: var(--os-card); box-shadow: 0 2px 10px rgba(15, 23, 42, .05); }
.os-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; white-space: nowrap; }
.os-table th, .os-table td { border-bottom: 1px solid #f1f3f6; border-right: 1px solid #f4f6f8; padding: 10px 12px; text-align: left; vertical-align: middle; }
.os-table th:last-child, .os-table td:last-child { border-right: none; }
.os-table thead th { position: sticky; top: 0; background: linear-gradient(180deg, #f8fafc, #f1f5f9); font-weight: 700; font-size: 12.5px; color: #475569; z-index: 2; box-shadow: inset 0 -1px 0 var(--os-line); }
.os-table tbody tr:nth-child(even) { background: #fbfcfe; }
.os-table tbody tr:hover { background: #fff7ed; }
.os-table tbody tr:last-child td { border-bottom: none; }
.os-seq { color: #94a3b8; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }
.os-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.os-empty { color: #cbd5e1; }
.os-gap { display: inline-block; padding: 1px 8px; font-size: 12px; border-radius: 5px; background: #fef2f2; color: #b91c1c; border: 1px dashed #fca5a5; }
.os-pill { display: inline-block; padding: 2px 9px; font-size: 12px; font-weight: 600; border-radius: 999px; background: #f1f5f9; color: #475569; white-space: nowrap; }
.os-pill-paid { background: #ecfdf5; color: #047857; }
.os-pill-muted { background: #f8fafc; color: #94a3b8; border: 1px dashed #cbd5e1; font-weight: 500; }
.os-pill-out { background: #fef2f2; color: #b91c1c; }
.os-link { color: #2563eb; text-decoration: none; font-size: 12px; }
.os-link:hover { text-decoration: underline; }
.os-goods { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }

/* 按钮 */
.os-btn-primary { padding: 9px 18px; font-size: 13px; font-weight: 700; border: none; border-radius: 10px; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; cursor: pointer; white-space: nowrap; box-shadow: 0 3px 10px rgba(217, 119, 6, .28); transition: all .16s; }
.os-btn-primary:hover { filter: brightness(1.05); box-shadow: 0 5px 14px rgba(217, 119, 6, .38); transform: translateY(-1px); }
.os-btn-primary:disabled { background: #fcd34d; cursor: wait; transform: none; box-shadow: none; }
.os-btn-mini { padding: 4px 11px; font-size: 12px; font-weight: 600; border: 1px solid #d7dce3; border-radius: 7px; background: #fff; color: #334155; cursor: pointer; margin-right: 5px; transition: all .14s; }
.os-btn-mini:hover { background: #f1f5f9; border-color: #cbd5e1; }
.os-btn-danger { color: #b91c1c; border-color: #fecaca; }
.os-btn-danger:hover { background: #fef2f2; border-color: #fca5a5; }
.os-ops { white-space: nowrap; }

/* 新增/编辑弹窗 */
.os-modal-mask { position: fixed; inset: 0; background: rgba(15, 23, 42, .5); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; z-index: 3000; overflow-y: auto; }
.os-modal { background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); width: 100%; max-width: 760px; padding: 22px 24px 16px; animation: os-pop .18s ease; }
@keyframes os-pop { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.os-modal h3 { margin: 0 0 16px; font-size: 17px; font-weight: 800; color: #0f172a; }
.os-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
.os-fld { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: #64748b; }
.os-fld input { padding: 8px 11px; font-size: 13px; font-weight: 400; border: 1px solid #d7dce3; border-radius: 9px; color: #1f2937; background: #fff; transition: border-color .15s, box-shadow .15s; }
.os-fld input:focus { outline: none; border-color: var(--os-brand-2); box-shadow: 0 0 0 3px #fef3c7; }
/* 全自动算出来的只读格（到货天数）：2026-10-21 老板「不允许编辑，自动算好的」。
 * 光有 readonly 属性看不出区别（跟普通输入框长得一样，空着更象是要填），这里做成明显不可填。 */
.os-fld input.op-lead-ro { background: #f1f5f9; color: #64748b; cursor: not-allowed; }
.os-fld input.op-lead-ro:focus { outline: none; border-color: #d7dce3; box-shadow: none; }
.os-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #f1f5f9; }
/* 采购单内联供应商档案面板（2026-10-19 老板：省掉「＋新增」弹窗；选中只读带出 / 新名称就地填写随单建档） */
/* 供应商栏独占整行：候选 chips + 档案面板紧跟输入框（2026-10-19 老板：档案信息就放在输入框下方，别掉到表单末尾）。 */
.op-sup-cell { grid-column: 1 / -1; }
/* 输入框下的状态提示是行内小字，不是信息框——.os-hint 兜底规则（.os-hint,.os-error 合写）会把它渲染成空白灰框，这里就地抵消（2026-10-19 老板截图“空框很乱”） */
.op-sup-cell > .os-hint { display: block; padding: 0; background: none; border: 0; text-align: left; margin: 1px 0 6px; }
.op-sup-prof .os-hint { padding: 0; background: none; border: 0; text-align: left; }   /* 面板内的提示同样是行内小字，不叠灰框 */
.op-sup-prof { margin: 0; padding: 10px 14px; border: 1px dashed #cbd5e1; border-radius: 10px; background: #f8fafc; font-size: 12px; color: #475569; }
.op-sup-prof b { display: block; margin-bottom: 8px; font-size: 13px; color: #0f172a; }
/* 只读档案网格（2026-10-19 老板：要对齐、美观）：列宽与表单 .os-form 同源（auto-fill 220px），标签在上/值在下 */
.op-prof-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; }
.op-prof-item i { display: block; font-style: normal; font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 2px; }
.op-prof-val { font-size: 13px; font-weight: 400; color: #1f2937; overflow-wrap: break-word; word-break: break-all; line-height: 1.45; }
.op-prof-wide { grid-column: span 2; }   /* 长链接占两列、列内折行，起订量与它同行，不再顶到行尾悬空；窄屏掉行由 auto-fill 自适应 */
.op-sup-prof > .os-hint { display: block; margin-top: 8px; }
/* 建档面板与只读档案面板统一为同一个 .op-sup-prof 样式（2026-10-21 老板⑤：新供应商建档不再单独黄框圈出）；
 * 面板里只剩「采购产品链接」一个字段，让它撑满整行，不在右边留大片空白。 */
.op-sup-prof .os-form .os-fld { grid-column: 1 / -1; }
.os-modal-err { flex: 1; font-size: 12px; color: #b91c1c; }

/* 分页条容器（gpPagerHtml 自带 inline 样式，这里仅补顶部间距与居中兜底） */
.os-root .lo-pager { margin-top: 14px; }

/* ── 自适应断点 ── */
@media (max-width: 1024px) {
  .os-hero { padding: 14px 16px; }
  .os-hero h2 { font-size: 20px; }
  .os-goods { max-width: 220px; }
}
@media (max-width: 760px) {
  .os-root { padding: 10px; }
  .os-hero { flex-direction: column; align-items: flex-start; gap: 10px; }
  .os-filters { flex-direction: column; align-items: stretch; }
  .os-sel, .os-kw { max-width: none; width: 100%; }
  .os-toolbar { flex-direction: column; align-items: stretch; }
  .os-toolbar .os-btn-primary { width: 100%; }
  .os-table { font-size: 12px; }
  .os-form { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .os-form { grid-template-columns: 1fr; }
  .os-modal { padding: 18px 16px 12px; }
}

/* ── 采购系统（2026-10-18 B）：.op-* 作用域，复用 .os-root 的配色变量 ── */
.op-wide { align-items: flex-start; padding-top: 4vh; }
.op-modal-wide { max-width: 1040px; width: min(1040px, 96vw); }
.op-form3 { grid-template-columns: repeat(3, 1fr); }
.op-form3 .op-span2 { grid-column: span 2; }
.op-form3 .op-spanfull { grid-column: 1 / -1; }   /* 供应商产品名称独占整行（2026-10-21 弹窗整体优化：消除到货天数孤字段、给自由文本名留足宽度） */

/* 状态徽章 */
.op-st { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.op-st-draft { background: #eef2f7; color: #475569; }
.op-st-pending_approval { background: #fef3c7; color: #b45309; }
.op-st-approved { background: #dbeafe; color: #1d4ed8; }
.op-st-rejected { background: #fee2e2; color: #b91c1c; }
.op-st-ordered { background: #e0e7ff; color: #4338ca; }
.op-st-partially_received { background: #cffafe; color: #0e7490; }
.op-st-received { background: #dcfce7; color: #15803d; }
.op-st-settled { background: #d1fae5; color: #047857; }
.op-st-cancelled { background: #f1f5f9; color: #94a3b8; }
.op-st-qual-prospect { background: #eef2f7; color: #475569; }
.op-st-qual-qualified { background: #dcfce7; color: #15803d; }
.op-st-qual-blacklist { background: #fee2e2; color: #b91c1c; }

/* 标记 / 预警 */
.op-flag { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 11.5px; background: #fef3c7; color: #b45309; }
.op-flag-alert { background: #fee2e2; color: #b91c1c; }
.op-flag-ok { background: #dcfce7; color: #15803d; }
.op-flag-warn { background: #ffedd5; color: #c2410c; }

/* 明细录入表 */
.op-lines-wrap { margin: 6px 0 4px; }
.op-lines-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.op-line-table td { padding: 4px 6px; }
/* 列宽按内容收紧（2026-10-21 弹窗整体优化）：序号/预警/操作不再占宽，省下的宽度给 SKU 名称列；数量/单价输入框铺满各自列消除随机留白 */
.op-line-table th:nth-child(1), .op-line-table td:nth-child(1) { width: 46px; }   /* 序号 */
.op-line-table th:nth-child(3), .op-line-table td:nth-child(3) { width: 82px; }   /* 数量 */
.op-line-table th:nth-child(4), .op-line-table td:nth-child(4) { width: 112px; }  /* 单价 */
.op-line-table th:nth-child(5), .op-line-table td:nth-child(5) { width: 108px; }  /* 金额 */
.op-line-table th:nth-child(6), .op-line-table td:nth-child(6) { width: 88px; }   /* 预警 */
.op-line-table th:nth-child(7), .op-line-table td:nth-child(7) { width: 56px; }   /* 操作 */
.op-line-table .op-in { max-width: none; }
.op-in { width: 100%; border: 1px solid var(--os-line, #e7eaef); border-radius: 6px; padding: 5px 7px; font-size: 13px; background: #fff; }
.op-in-sm { max-width: 90px; } .op-in-xs { max-width: 62px; }
.op-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.op-totals { margin: 10px 0 4px; padding: 10px 12px; background: var(--os-bg, #f6f7f9); border-radius: 10px; font-size: 13.5px; }
.op-btn-submit { background: var(--os-brand, #b45309); }  /* 弹窗挂在 body 上、取不到 .os-root 的 --os-* 变量，必须带兜底色，否则白底白字看不见 */
.op-btn-ok { background: #16a34a; }

/* ── 价格门禁 · 逐 SKU 录价弹窗（2026-10-21 老板图二「太丑」重做）──
   弹窗挂在 body 上、取不到 .os-root 的 --os-* 变量，颜色一律写死（带兜底），否则白底白字。 */
.pcs-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.pcs-title { font-size: 14px; font-weight: 700; color: #0f172a; }
.pcs-add { margin-left: auto; background: #b45309; color: #fff; border-color: #b45309; }
.pcs-add:hover { background: #92400e; border-color: #92400e; }
.pcs-wrap { overflow-x: auto; border: 1px solid #e7eaef; border-radius: 12px; background: #fff; }
.pcs-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; min-width: 660px; }
.pcs-table th { background: linear-gradient(180deg, #f8fafc, #f1f5f9); font-weight: 700; font-size: 12px; color: #475569; text-align: left; padding: 10px 12px; border-bottom: 1px solid #e7eaef; white-space: nowrap; }
.pcs-table td { padding: 10px 12px; border-bottom: 1px solid #f1f3f6; vertical-align: middle; }
.pcs-table tbody tr:last-child td { border-bottom: none; }
.pcs-table tbody tr:hover { background: #fff7ed; }
.pcs-name { min-width: 220px; }
.pcs-in { width: 100%; box-sizing: border-box; border: 1px solid #e2e8f0; border-radius: 8px; padding: 7px 10px; font-size: 13px; background: #fff; color: #1f2937; transition: border-color .14s, box-shadow .14s; }
.pcs-in:focus { outline: none; border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .15); }
.pcs-num { width: 128px; text-align: right; font-variant-numeric: tabular-nums; }
.pcs-ceiling { color: #64748b; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcs-del { border: 1px solid #e2e8f0; background: #fff; color: #94a3b8; border-radius: 8px; width: 30px; height: 30px; line-height: 1; font-size: 16px; cursor: pointer; transition: all .14s; }
.pcs-del:hover { background: #fef2f2; border-color: #fecaca; color: #dc2626; }
.pcs-empty { padding: 28px 16px; text-align: center; color: #94a3b8; font-size: 13px; }

/* 供应商选择器（2026-10-19 老板：候选不平铺在表单里，改「选择竞品攻防记录」同款居中弹窗点选）。
 * 档案重名 44%（403 行/227 个唯一名），光靠输入框模糊匹配定不了身份，卡片必须带 record_id 尾号与准入状态由人点选。 */
.op-sup-row { display: flex; gap: 8px; align-items: center; }
.op-sup-row > input { flex: 1; min-width: 0; }
.op-sup-pickbtn { white-space: nowrap; flex: none; }
.op-sup-mask { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 16px; }
.op-sup-modal { background: #fff; border-radius: 12px; padding: 20px 22px; width: 560px; max-width: 95vw; max-height: 72vh; display: flex; flex-direction: column; box-shadow: 0 8px 30px rgba(0, 0, 0, .18); }
.op-sup-modal-h { font-size: 15px; font-weight: 700; color: #0f172a; margin-bottom: 10px; }
.op-sup-modal > input { padding: 8px 12px; border: 1px solid #d7dce3; border-radius: 8px; font-size: 13px; margin-bottom: 10px; }
.op-sup-modal-list { overflow-y: auto; flex: 1; min-height: 120px; }
.op-sup-card { border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 14px; margin: 6px 0; cursor: pointer; transition: background .15s, border-color .15s; }
.op-sup-card:hover { background: #fffbeb; border-color: var(--os-brand-2, #f59e0b); }
.op-sup-card.is-on { border-color: var(--os-brand, #b45309); background: #fef3c7; }
.op-sup-card.is-bad { border-color: #fecaca; }
.op-sup-card.is-bad .op-sup-card-n { color: #b91c1c; }
.op-sup-card-n { font-weight: 600; font-size: 13px; color: #0f172a; }
.op-sup-card-s { font-size: 11.5px; color: #94a3b8; margin-top: 3px; }
.op-sup-empty { margin: 8px 0; }
.op-sup-modal-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 12px; color: #64748b; }
.op-sup-hint-bad { color: #b91c1c; font-weight: 600; }

/* 详情弹窗（2026-10-20 老板：详情弹窗丑，完整美化）：.opd-* 作用域。
   渐变抬头带 + 标签/值卡片网格 + 金额三卡 + 虚线动作区 + 区块标题条 + 圆点时间线。
   弹窗挂 body 取不到 .os-root 变量，var() 一律带兜底色；宽度沿用 .op-modal-wide 的 96vw 兜底。 */
.op-kv { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 10px; font-size: 13.5px; color: var(--os-ink); }
.op-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.op-detail { padding: 0; overflow: hidden; }
.opd-head {
  display: flex; align-items: center; gap: 14px; padding: 18px 22px;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 55%, #fde68a 100%);
  border-bottom: 1px solid #fcd9a4;
}
.opd-head-ic {
  display: grid; place-items: center; width: 46px; height: 46px; flex: none; font-size: 24px; line-height: 1;
  background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(180, 83, 9, .16);
}
.opd-head-t { flex: 1; min-width: 0; }
.opd-head-t h3 { margin: 0; font-size: 17px; font-weight: 800; color: #7c2d12; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.opd-no { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .3px; }
.opd-head-sub { margin-top: 4px; font-size: 12.5px; color: #92600d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opd-x {
  flex: none; width: 32px; height: 32px; border: none; border-radius: 50%; background: rgba(255, 255, 255, .75);
  color: #92600d; font-size: 18px; line-height: 1; cursor: pointer; transition: all .15s;
}
.opd-x:hover { background: #fff; color: #b91c1c; transform: rotate(90deg); }
.opd-body { padding: 18px 22px 4px; }
.opd-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 0 0 12px; }
.opd-kv-i { padding: 8px 12px; background: #f8fafc; border: 1px solid var(--os-line, #e7eaef); border-radius: 10px; min-width: 0; }
.opd-kv-i i { display: block; font-style: normal; font-size: 11.5px; font-weight: 600; color: #94a3b8; margin-bottom: 3px; }
.opd-kv-i b { font-size: 13px; font-weight: 600; color: #1f2937; overflow-wrap: break-word; word-break: break-all; line-height: 1.45; }
.opd-kv-bad { background: #fef2f2; border-color: #fecaca; }
.opd-kv-bad i { color: #b91c1c; }
.opd-kv-bad b { color: #b91c1c; }
.opd-amts { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.opd-amt {
  flex: 1; min-width: 120px; padding: 10px 14px; background: #fff; border: 1px solid var(--os-line, #e7eaef);
  border-radius: 10px; display: flex; flex-direction: column; gap: 3px; box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.opd-amt i { font-style: normal; font-size: 11.5px; font-weight: 600; color: #94a3b8; }
.opd-amt b { font-size: 16px; font-variant-numeric: tabular-nums; color: #334155; }
.opd-amt-total { background: linear-gradient(135deg, #f59e0b, #d97706); border-color: #d97706; box-shadow: 0 3px 10px rgba(217, 119, 6, .28); }
.opd-amt-total i { color: rgba(255, 255, 255, .85); }
.opd-amt-total b { color: #fff; font-size: 18px; font-weight: 800; }
.op-detail .op-actions { margin: 0 0 14px; padding: 10px 12px; background: #f8fafc; border: 1px dashed #d7dce3; border-radius: 10px; }
.op-detail .os-btn-mini { padding: 7px 16px; font-size: 12.5px; border-radius: 8px; margin-right: 0; }
.opd-match {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 14px; padding: 10px 14px;
  background: #fffbeb; border: 1px solid #fcd9a4; border-radius: 10px;
}
.opd-match-h { display: flex; align-items: center; gap: 8px; }
.opd-match-h b { font-size: 13.5px; color: #7c2d12; }
.opd-match-s { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-left: auto; }
.opd-match-s span { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: #92600d; }
.opd-match-s i { font-style: normal; }
.opd-match-s b { font-size: 14px; color: #7c2d12; font-variant-numeric: tabular-nums; }
.opd-sec { margin: 0 0 16px; }
.opd-sec-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.opd-sec-h b { font-size: 14px; font-weight: 700; color: #0f172a; padding-left: 9px; border-left: 3px solid var(--os-brand-2, #f59e0b); }
.opd-sec-n { font-size: 12px; color: #94a3b8; }
.opd-sec2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.opd-timeline { margin: 0; padding: 4px 0 4px 6px; list-style: none; font-size: 13px; line-height: 1.6; }
.opd-timeline li { position: relative; padding: 0 0 14px 18px; border-left: 2px solid #e7eaef; }
.opd-timeline li:last-child { border-left-color: transparent; padding-bottom: 2px; }
.opd-timeline li::before {
  content: ''; position: absolute; left: -6px; top: 4px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--os-brand-2, #f59e0b); box-shadow: 0 0 0 3px #fef3c7;
}
.opd-timeline li.os-empty { border-left-color: transparent; padding-left: 0; }
.opd-timeline li.os-empty::before { display: none; }
.opd-timeline .os-mono { color: #94a3b8; }
.opd-foot { margin: 0; padding: 12px 22px; border-top: 1px solid #f1f5f9; background: #fafbfc; }
@media (max-width: 760px) {
  .opd-sec2 { grid-template-columns: 1fr; }
  .opd-head { padding: 14px 16px; }
  .opd-body { padding: 14px 16px 2px; }
  .opd-foot { padding: 10px 16px; }
  .opd-match-s { margin-left: 0; }
}
@media (max-width: 480px) {
  .opd-kv { grid-template-columns: 1fr 1fr; }
  .opd-head-sub { white-space: normal; }
}

/* 采购分析 */
.op-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; }
.op-kpi { background: var(--os-card); border: 1px solid var(--os-line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.op-kpi span { font-size: 12.5px; color: var(--os-mut); }
.op-kpi b { font-size: 21px; color: var(--os-ink); }
.op-an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.op-gran { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.op-gran button { padding: 5px 14px; font-size: 13px; border: 1px solid var(--os-line); border-radius: 8px; background: var(--os-card); color: var(--os-mut); cursor: pointer; }
.op-gran button.on { background: var(--os-brand); border-color: var(--os-brand); color: #fff; font-weight: 600; }
.op-gran-note { font-size: 12px; color: var(--os-mut); margin-left: 6px; }
.op-line-block { background: var(--os-card); border: 1px solid var(--os-line); border-radius: 12px; padding: 14px 16px; }
.op-line-block > b { display: block; margin-bottom: 6px; font-size: 14px; }
.op-line-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 4px; font-size: 12px; color: var(--os-mut); }
.op-line-legend i { display: inline-block; width: 18px; margin-right: 5px; vertical-align: middle; }
.op-line-note { font-size: 12px; color: var(--os-mut); line-height: 1.8; }
.op-an-grid > .op-line-block:last-child { grid-column: 1 / -1; }

@media (max-width: 760px) {
  .op-form3 { grid-template-columns: 1fr 1fr; }
  .op-sec2, .op-an-grid { grid-template-columns: 1fr; }
}