* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  color: #2c2c2a;
  background: #f5f6f8;
  line-height: 1.6;
}

a { color: #185fa5; }

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 196px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid rgba(0, 0, 0, .08);
  padding: 18px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand { padding: 0 18px 16px; border-bottom: 1px solid rgba(0, 0, 0, .06); margin-bottom: 12px; position: relative; }
.brand h1 { font-size: 15px; font-weight: 500; margin: 0; }
.brand p { font-size: 11px; color: #888780; margin: 4px 0 0; }

/* 侧边栏收起 / 展开 */
.nav-toggle {
  position: absolute; right: 12px; top: -2px; width: 22px; height: 22px; padding: 0;
  border-radius: 6px; font-size: 13px; line-height: 1; color: #6f6d67; background: #f4f2ec; border-color: rgba(0, 0, 0, .08);
}
.nav-toggle:hover { background: #eae7de; }
/* 韩派色系导航徽标：每个功能一枚马卡龙色小徽标，选中/悬停跟随同色系 */
.nav-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 7px; font-style: normal; font-size: 12px; font-weight: 600;
  background: var(--nbg, #eef0f2); color: var(--nc, #565b63);
}
.sidebar { transition: width .16s ease; }
.sidebar.collapsed { width: 56px; padding-top: 12px; }
.sidebar.collapsed .brand { padding: 0 0 12px; text-align: center; }
.sidebar.collapsed .brand h1 { display: none; }
.sidebar.collapsed .nav-toggle { position: static; margin: 0 auto; }
.sidebar.collapsed .nav a { padding: 11px 0; justify-content: center; border-left-width: 2px; }
.sidebar.collapsed .nav-t { display: none; }
.sidebar.collapsed #user-box { padding: 10px 6px; font-size: 11px; text-align: center; }
.sidebar.collapsed #user-box .u-extra { display: none; }

.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 15px;
  font-size: 13px;
  color: #444441;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.nav a:hover { background: var(--nbg, #f1efe8); }
.nav a.active {
  background: var(--nbg, #faece7); color: var(--nt, #993c1d);
  border-left-color: var(--nc, #d85a30); font-weight: 500;
}

/* —— 韩派奶油色系：柔雾低饱和，一功能一色 —— */
.nav a[data-tab="orders"]      { --nc:#e07856; --nbg:#fdeee6; --nt:#9c4a2f; }  /* 开单与订单 · 奶油珊瑚 */
.nav a[data-tab="browse"]      { --nc:#6f97bd; --nbg:#e9f1f8; --nt:#3d5f80; }  /* 商城访问 · 雾霾蓝 */
.nav a[data-tab="pricing"]     { --nc:#82a983; --nbg:#ebf3ea; --nt:#4c6e4d; }  /* 价格管理 · 抹茶绿 */
.nav a[data-tab="purchase"]    { --nc:#d3a04e; --nbg:#faf2df; --nt:#8a6620; }  /* 采购入库 · 奉茶黄 */
.nav a[data-tab="suppliers"]   { --nc:#5ba39c; --nbg:#e5f2f1; --nt:#336b66; }  /* 供应商 · 青瓷蓝绿 */
.nav a[data-tab="customers"]   { --nc:#d98a9b; --nbg:#fbeef1; --nt:#94495a; }  /* 客户管理 · 樱花粉 */
.nav a[data-tab="crmwork"]     { --nc:#9186c9; --nbg:#efedf9; --nt:#5a4f92; }  /* 客户跟进 · 薰衣草紫 */
.nav a[data-tab="products"]    { --nc:#a8a35e; --nbg:#f5f4e2; --nt:#6e6a2f; }  /* 商品管理 · 橄榄抹茶 */
.nav a[data-tab="dashboard"]   { --nc:#6da3d2; --nbg:#e8f2fa; --nt:#3a6a90; }  /* 数据概览 · 晴空蓝 */
.nav a[data-tab="distribution"]{ --nc:#e09a68; --nbg:#fbf0e4; --nt:#96602f; }  /* 伙伴和激励 · 杏桃橙 */
.nav a[data-tab="stocklog"]    { --nc:#8aa0b5; --nbg:#ecf1f5; --nt:#4f6579; }  /* 库存流水 · 蓝灰 */
.nav a[data-tab="materials"]   { --nc:#b48ea8; --nbg:#f6ecf2; --nt:#7c5570; }  /* 素材库 · 藕荷紫 */
.nav a[data-tab="settings"]    { --nc:#8a8f98; --nbg:#eef0f2; --nt:#565b63; }  /* 系统设置 · 岩石灰 */
.nav a[data-tab="alog"]        { --nc:#bd8f7f; --nbg:#f7ede8; --nt:#7d5344; }  /* 访问日志 · 玫瑰褐 */

.main { flex: 1; padding: 22px 26px 60px; min-width: 0; }

.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.page-head h2 { font-size: 15px; font-weight: 500; margin: 0; }
.page-head .sub { font-size: 12px; color: #888780; margin-top: 2px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; margin-bottom: 18px; }

.metric { background: #fff; border-radius: 8px; padding: 14px 16px; border: 1px solid rgba(0, 0, 0, .05); }
.metric .label { font-size: 12px; color: #888780; }
.metric .value { font-size: 21px; font-weight: 500; margin-top: 4px; }
.metric .value.warn { color: #d85a30; }
.metric .value.ok { color: #3b6d11; }

.card { background: #fff; border-radius: 10px; border: 1px solid rgba(0, 0, 0, .06); padding: 16px 18px; margin-bottom: 16px; }
.card h3 { font-size: 13px; font-weight: 500; margin: 0 0 12px; }
.card h3 .hint { font-size: 11px; color: #b4b2a9; font-weight: 400; margin-left: 8px; }

table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th { text-align: left; padding: 8px 10px; color: #5f5e5a; font-weight: 500; background: #f7f7f5; border-bottom: 1px solid rgba(0, 0, 0, .07); white-space: nowrap; }
td { padding: 8px 10px; border-bottom: 1px solid rgba(0, 0, 0, .05); vertical-align: middle; }
tbody tr:hover { background: #fafaf9; }
.table-wrap { overflow-x: auto; }

.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: #888780; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }

.tag { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 20px; background: #f1efe8; color: #5f5e5a; white-space: nowrap; }
.tag.blue { background: #e6f1fb; color: #185fa5; }
.tag.green { background: #eaf3de; color: #3b6d11; }
.tag.amber { background: #faeeda; color: #854f0b; }
.tag.coral { background: #faece7; color: #993c1d; }
.tag.purple { background: #eeedfe; color: #534ab7; }

/* 分类彩色标签：颜色由 JS 按分类名稳定分配（catTag / catDot），同一分类各处同色 */
.tag.cat-tag { font-weight: 500; }
.cat-tag-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; position: relative; top: -1px; }
.cell-2l-sub .cat-dot { width: 6px; height: 6px; margin-right: 4px; }
.ptable td.c-price { font-variant-numeric: tabular-nums; }

/* 开单页：客户往来账（选客户后出现，正负余额一眼可见） */
/* 客户往来账：压成一行小字，只保留几个关键数字，不带卡片大框 */
.cust-ledger { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 2px 0 10px; padding: 4px 10px; border-radius: 6px; background: #f8f6f0; font-size: 12px; color: #5f5e5a; line-height: 1.9; }
.cust-ledger .cl-name { font-weight: 500; color: #2c2c2a; font-size: 12.5px; }
.cust-ledger .cl-item { white-space: nowrap; }
.cust-ledger .cl-item b { font-weight: 500; font-variant-numeric: tabular-nums; }
.cust-ledger .cl-tag { font-style: normal; font-size: 11px; padding: 0 6px; border-radius: 20px; margin-left: 3px; }
.cust-ledger .cl-credit { border-left: 1px solid #e6e1d6; padding-left: 12px; }
.cust-ledger .cl-link { font-size: 12px; color: #185fa5; text-decoration: none; border-bottom: 1px dashed #185fa5; }
.cust-ledger .cl-link:hover { color: #d85a30; border-bottom-color: #d85a30; }

/* 开单页 客户 / 商品 模糊搜索候选浮层（两处共用，别再各写一套内联样式） */
.pick-pop { position: absolute; left: 0; top: 100%; z-index: 30; display: none; min-width: 100%; width: 440px; max-width: 86vw;
  background: #fff; border: 1px solid #e2ddd2; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 280px; overflow: auto; }
.pick-pop .pick-row { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f0ece2; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.pick-pop .pick-row:last-child { border-bottom: 0; }
.pick-pop .pick-row:hover { background: #fdf3ec; }
.pick-pop .pick-empty { padding: 10px 12px; line-height: 1.6; }

/* 客户管理：财务概览条（总预存款 / 总欠款 / 超额客户 / 客户数） */
.fin-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.fin-cell { flex: 1 1 150px; min-width: 140px; background: #f8f6f0; border: 1px solid #ece7dc; border-radius: 8px; padding: 8px 12px; }
.fin-cell .fin-k { font-size: 12px; color: #5f5e5a; }
.fin-cell .fin-v { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; margin-top: 2px; }
.fin-cell .fin-sub { font-size: 11px; color: #8a877e; margin-top: 2px; }

/* 客户对账单：概览卡 + 流水/订单两张表 */
.stmt-head { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 12px; }
.stmt-cell { flex: 1 1 120px; background: #f8f6f0; border: 1px solid #ece7dc; border-radius: 8px; padding: 8px 10px; }
.stmt-cell .s-k { font-size: 12px; color: #5f5e5a; }
.stmt-cell .s-v { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.stmt-sec { margin-top: 14px; }
.stmt-sec h4 { margin: 0 0 6px; font-size: 13px; color: #2c2c2a; }

/* 客户预存款流水（客户详情 / 充值弹窗内）：紧凑一点，弹窗里放得下 */
.bal-log-table { font-size: 12.5px; }
.bal-log-table th, .bal-log-table td { padding: 5px 7px; }
.bal-log-table td { font-variant-numeric: tabular-nums; }
.bal-log-table a { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; }

/* 页面内 Tab（开单 / 订单列表）：分开显示，避免开单页被订单列表顶下去 */
.tabs { display: flex; gap: 2px; margin: 0 0 12px; border-bottom: 1px solid #e8e3d8; }
.tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: 9px 18px; font-size: 14px; color: #5f5e5a; cursor: pointer; box-shadow: none;
}
.tab:hover { background: #f8f6f0; color: #2c2c2a; }
.tab.active { color: #d85a30; border-bottom-color: #d85a30; font-weight: 500; }
.tab-badge { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 5px; border-radius: 9px; background: #eee9df; color: #5f5e5a; font-size: 11px; line-height: 18px; text-align: center; }
.tab.active .tab-badge { background: #faece7; color: #9c3a17; }

button { font-family: inherit; font-size: 12.5px; padding: 6px 14px; border-radius: 7px; border: 1px solid rgba(0, 0, 0, .16); background: #fff; color: #2c2c2a; cursor: pointer; }
button:hover { background: #f7f7f5; }
button.primary { background: #d85a30; color: #fff; border-color: #d85a30; }
button.primary:hover { background: #c14f28; }
button.ghost { border-color: transparent; color: #185fa5; padding: 4px 8px; }
button.ghost:hover { background: #e6f1fb; }
button.danger { color: #a32d2d; border-color: #f7c1c1; }
/* 开单页「加入清单」主操作：2.5 倍放大 + 绿色 */
button.btn-add-xl { background: #1f9d55; color: #fff; border-color: #1f9d55; font-size: 31px; font-weight: 600; padding: 15px 35px; border-radius: 10px; white-space: nowrap; box-shadow: 0 3px 10px rgba(31, 157, 85, .3); }
button.btn-add-xl:hover { background: #178443; border-color: #178443; }
button.btn-add-xl:active { transform: translateY(1px); }
button.small { padding: 3px 10px; font-size: 12px; }
button:disabled { opacity: .5; cursor: not-allowed; }

input, select, textarea {
  font-family: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: 7px;
  background: #fff;
  color: #2c2c2a;
  width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid #b5d4f4; outline-offset: -1px; border-color: #378add; }
label input[type="checkbox"], label input[type="radio"], .chk input[type="checkbox"] { width: auto; }

/* 开单页快速搜索框：比标准输入框大 1.5 倍（13px → 19.5px，内边距同步放大） */
#so-search { font-size: 19.5px; padding: 10px 15px; border-radius: 9px; }

.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.field label { display: block; font-size: 12px; color: #5f5e5a; margin-bottom: 4px; }
.field .unit { font-size: 11px; color: #b4b2a9; }

/* 商品弹窗里选了「＋ 新建分类…」时出现的输入框 */
.cat-new-input { margin-top: 6px; }

/* 商品弹窗分类选择：下拉 + 「改名」按钮 + 内联改名条（随时可改分类名） */
.cat-pick { display: flex; gap: 6px; align-items: center; }
.cat-pick select { flex: 1; min-width: 0; }
.cat-rename-bar { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.cat-rename-bar input { flex: 1; min-width: 0; }

/* 采购入库 · 预采购清单汇总条（按分类的库存预警） */
.prebuy-sum { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.prebuy-sum__k { color: #8a8880; font-size: 12px; }
.prebuy-sum b { font-size: 16px; font-variant-numeric: tabular-nums; }
.prebuy-sum__u { color: #8a8880; font-size: 12px; margin-right: 12px; }
.prebuy-sum b.coral { color: #d85a30; }

/* 预采购清单 / 入库明细里的数量框：窄一点，键盘可直接改 */
.pq-input {
  width: 72px; padding: 4px 6px; text-align: center; border-radius: 6px;
  background: #fffdf7; border-color: rgba(0, 0, 0, .2); font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.pq-input::-webkit-outer-spin-button, .pq-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pq-input:focus { background: #fff; outline: 2px solid #f3c9b4; border-color: #d85a30; }
.ptable td .pq-input, .table-roomy td .pq-input { margin: 0; }

/* 入库录入：选中商品后的销量 / 库存参考条 */
.pu-hint { font-size: 12px; color: #5f5e5a; background: #fbf8f1; border: 1px dashed #eee9df; border-radius: 8px; padding: 6px 10px; margin: 0 0 10px; }
.pu-hint b { font-variant-numeric: tabular-nums; color: #2c2c2a; }

/* ---- 分类管理弹窗 ---- */
.cat-mgr { max-height: 52vh; overflow: auto; border: 1px solid #eee9df; border-radius: 10px; padding: 8px 10px; }
.cat-mgr__root { border-bottom: 1px dashed #eee9df; padding-bottom: 6px; margin-bottom: 6px; }
.cat-mgr__root:last-child { border-bottom: 0; margin-bottom: 0; }
.cat-mgr__row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.cat-mgr__row--sub { padding-left: 20px; }
.cat-mgr__lvl { flex: none; width: 26px; font-size: 11px; color: #8a8880; }
.cat-mgr__inp { flex: 1; min-width: 80px; }
.cat-mgr__meta { flex: none; font-size: 11.5px; color: #8a8880; white-space: nowrap; }
.cat-mgr__add { display: flex; align-items: center; gap: 8px; padding: 4px 0 2px 20px; }
.cat-mgr__add input { max-width: 220px; }
.cat-mgr__add--root { padding: 10px 0 2px; margin-top: 8px; border-top: 1px solid #eee9df; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- 商品列表 / 开单清单：行色交错（横向斑马纹） ---- */
.ptable { font-size: 14px; }
.ptable th, .ptable td { padding: 9px 10px; vertical-align: middle; }
.ptable thead th { font-size: 13px; white-space: nowrap; }
.ptable tbody tr:nth-child(odd) td, .so-table tbody tr:nth-child(odd) td, .oe-table tbody tr:nth-child(odd) td { background: #fff; }
.ptable tbody tr:nth-child(even) td, .so-table tbody tr:nth-child(even) td, .oe-table tbody tr:nth-child(even) td { background: #f7f6f2; }
.ptable tbody tr:hover td, .so-table tbody tr:hover td { background: #fdf3ee; }
/* 开单页商品清单：刚添加的明细排在最上面 */
.so-table { font-size: 14px; }
.so-table th, .so-table td { padding: 8px 10px; vertical-align: middle; }
.so-table thead th { font-size: 13px; white-space: nowrap; }
/* 数量输入框：直接键盘改，聚焦高亮，数字等宽便于对齐 */
.so-table .so-qty-inp { width: 80px; text-align: center; font-variant-numeric: tabular-nums; padding: 5px 6px; border: 1px solid #ddd8cc; border-radius: 6px; background: #fff; }
.so-table .so-qty-inp:focus { outline: none; border-color: #d85a30; box-shadow: 0 0 0 3px rgba(216, 90, 48, 0.12); }
.ptable .c-thumb { width: 62px; }
.ptable .c-cat { width: 116px; }
.ptable .c-price, .ptable .c-cost { width: 96px; }
.ptable .c-stock { width: 104px; }
.ptable .c-rate { width: 78px; }
.ptable .c-shelf { width: 96px; }
.ptable .c-ops { width: 196px; }
.ptable .col-name-lg { min-width: 260px; }
.ptable .cell-name-lg { font-weight: 500; }
.ptable .tag { font-size: 12.5px; padding: 2px 7px; }
.ptable .cell-thumb { width: 40px; height: 40px; }
.ptable button.small { font-size: 12.5px; padding: 5px 9px; }
/* 每行两排：主信息 + 次要信息（SKU / 规格 / 二级分类） */
.cell-2l-main { line-height: 1.35; }
.cell-2l-sub { font-size: 12px; color: #8d8b84; margin-top: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* ---- 商品管理：模糊搜索条（关键词 / 分类 / 状态即时筛选） ---- */
.prod-bar-wrap { padding: 10px 12px; }
.prod-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prod-search {
  flex: 1 1 280px; width: auto; min-width: 200px; font-size: 14px; padding: 8px 12px; border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, .16); background: #fffdf7;
}
.prod-search:focus { outline: none; border-color: #d85a30; background: #fff; box-shadow: 0 0 0 3px rgba(216, 90, 48, .12); }
.prod-sel { flex: 0 0 auto; width: auto; font-size: 13px; padding: 7px 9px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .16); background: #fff; max-width: 170px; }
.prod-count { margin-left: auto; font-size: 12.5px; color: #8a8880; font-variant-numeric: tabular-nums; white-space: nowrap; }
mark.kw { background: #ffe9a8; color: inherit; padding: 0 1px; border-radius: 3px; }

.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 99;
  background: #2c2c2a; color: #fff; padding: 10px 16px; border-radius: 8px;
  font-size: 12.5px; max-width: 380px; opacity: 0; transform: translateY(8px);
  transition: all .2s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast.err { background: #a32d2d; }
.toast.ok { background: #3b6d11; }

.modal-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.modal { background: #fff; border-radius: 12px; padding: 20px 22px; width: 100%; max-width: 620px; max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,.16); }
.modal h3 { font-size: 14px; font-weight: 500; margin: 0 0 14px; }
/* 弹窗可拖拽标题条 + 可缩放手柄（类似商城轮播图对话框） */
.modal-bar { display: flex; align-items: center; justify-content: flex-end; height: 16px; margin: -8px -2px 6px; cursor: move; flex: none; }
.modal-bar .modal-grip { color: #cdccc6; font-size: 13px; letter-spacing: 3px; line-height: 1; user-select: none; }
.modal-bar .modal-grip::before { content: '拖动可移动'; font-size: 11px; letter-spacing: 1px; color: #c2c1ba; margin-right: 6px; }
.modal-body { flex: 1; overflow: auto; padding-right: 2px; }
.modal-resize { position: absolute; right: 3px; bottom: 3px; width: 16px; height: 16px; cursor: nwse-resize; flex: none; }
.modal-resize::after { content: ''; position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px; border-right: 2px solid #c8c7c0; border-bottom: 2px solid #c8c7c0; }
.mcat-row { display: flex; gap: 8px; align-items: center; margin: 6px 0; }
.mcat-row input { flex: 1; }

.hidden { display: none !important; }

.bar { height: 7px; border-radius: 4px; background: #f1efe8; overflow: hidden; }
.bar > i { display: block; height: 100%; background: #378add; }
.bar.low > i { background: #e24b4a; }

.steps { display: flex; gap: 0; margin: 6px 0 16px; flex-wrap: wrap; }
.step { flex: 1; min-width: 130px; padding: 10px 12px; background: #f7f7f5; border-right: 2px solid #fff; font-size: 12px; }
.step b { display: block; font-size: 12.5px; font-weight: 500; margin-bottom: 2px; }
.step:last-child { border-right: none; }

pre.code { background: #2c2c2a; color: #e8e6df; padding: 12px 14px; border-radius: 8px; font-size: 12px; overflow-x: auto; font-family: ui-monospace, Consolas, monospace; line-height: 1.7; margin: 0 0 12px; }

.empty { padding: 26px; text-align: center; color: #b4b2a9; font-size: 12.5px; }

@media (max-width: 760px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; display: flex; overflow-x: auto; padding: 8px; }
  .brand { display: none; }
  .nav { display: flex; }
  .nav a { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
  .nav a.active { border-left: none; border-bottom-color: var(--nc, #d85a30); }
  .main { padding: 16px 14px 60px; }
}

/* ---- 商城访问 & 新订单提醒 & 页面权限 ---- */
.nav a { position: relative; }
.nav-badge { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: #e24b4a; color: #fff; font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 9px; padding: 0 5px; }
.perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 8px; margin: 6px 0 12px; }
.perm-block { border: 1px solid #e2ddd2; border-radius: 8px; padding: 8px 10px; }
.perm-page { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.perm-page:hover { color: #993c1d; }
.perm-subs { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 0 22px; }
.perm-sub { display: flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; color: #6b6a63; }
.perm-sub:hover { color: #993c1d; }
.perm-sub input, .perm-page input { accent-color: #d85a30; }
.perm-head { display: flex; align-items: center; gap: 10px; margin: 14px 0 2px; padding-top: 12px; border-top: 1px solid rgba(0, 0, 0, .07); }
.perm-head b { font-size: 13px; font-weight: 500; }
.perm-head .muted { font-size: 11px; }
.perm-head a { font-size: 12px; }
.perm-head a:first-of-type { margin-left: auto; }
.catperm { border: 1px solid #e2ddd2; border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.catperm__h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.catperm__h b { font-size: 13px; font-weight: 500; }
.catperm__h .muted { font-size: 11px; }
.catperm__row { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; padding: 2px 0; }
.catperm__lbl { flex: 0 0 34px; color: #8a877d; font-size: 12px; padding-top: 2px; }
.catperm__row .chk { font-size: 12px; }

/* ---- 列表列宽 / 间距 ---- */
.table-roomy th { padding: 9px 18px; }
.table-roomy td { padding: 10px 18px; }
/* 操作列不换行：列被挤时按钮竖排会把整行撑得很高 */
.table-roomy th:last-child, .table-roomy td:last-child { white-space: nowrap; }
.cell-goods { max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #888780; }
.col-name-lg, .cell-name-lg { min-width: 270px; width: 270px; }
.cell-name-lg { font-weight: 500; color: #2c2c2a; white-space: normal; word-break: break-word; }
.form-row.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-row.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-row.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }

/* ---- 供应商联系卡 ---- */
.sup-card { margin-top: 8px; padding: 8px 12px; border: 1px solid rgba(0, 0, 0, .08); border-left: 3px solid #d85a30; border-radius: 6px; background: #faf9f7; font-size: 13px; }
.sup-card b { font-weight: 600; }
.sup-card a { color: #d85a30; }

/* ---- 待办事宜 ---- */
.todo-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px dashed rgba(0, 0, 0, .07); font-size: 13px; }
.todo-row:last-child { border-bottom: none; }
.todo-row.done .todo-text { text-decoration: line-through; color: #a8a7a3; }
.todo-row .todo-text { flex: 1; }

/* ---- 商城管理分区（商城访问） ---- */
/* 扫码进商城卡片 */
.shop-qr-card { margin-bottom: 14px; }
.shop-qr-card h3 { font-size: 13px; font-weight: 500; margin: 0 0 10px; }
.shop-qr-wrap { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.shop-qr-img { flex: 0 0 auto; padding: 8px; background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px; line-height: 0; }
.shop-qr-img img { width: 132px; height: 132px; display: block; }
.shop-qr-info { flex: 1 1 240px; min-width: 0; }
.shop-qr-link { font-size: 12.5px; padding: 7px 10px; background: #f7f6f2; border: 1px solid rgba(0, 0, 0, .08); border-radius: 7px; word-break: break-all; }
.shop-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.shop-tabs a, .shop-tabs button { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .12); background: #fff; color: #5f5e5a; font-size: 13px; text-decoration: none; line-height: 1.4; }
.shop-tabs a.active, .shop-tabs button.on { background: #d85a30; border-color: #d85a30; color: #fff; font-weight: 500; }

/* ---- 计佣大类勾选 ---- */
.cat-checks { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 8px; }
.cat-checks .chk { border: 1px solid rgba(0, 0, 0, .1); border-radius: 999px; padding: 4px 12px; font-size: 12px; }
.cat-checks .chk:has(input:checked) { border-color: #d85a30; background: #fdf1ec; }

/* ---- 弹窗 ---- */
.modal-wide { max-width: 960px; }
.modal .form-row.cols-2, .modal .form-row.cols-3 { align-items: end; }
.modal .field label .chk, .chk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: #2c2c2a; margin: 0 14px 0 0; }
.chk input { width: auto; accent-color: #d85a30; }
.oe-total { font-variant-numeric: tabular-nums; padding: 2px 0; }
.oe-readonly-tip { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; font-size: 12.5px;
  background: #fdf6e3; border: 1px solid #e8d9b0; color: #7a5c1e; }
/* 商城订单的收货信息条（电话 / 地址 / 送货时间） */
.oe-delivery-info { margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; font-size: 12.5px;
  background: #f4f7fb; border: 1px solid #d7e2ef; color: #33475c; display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: baseline; }
.oe-delivery-info b { font-weight: 600; color: #56718c; margin-right: 4px; }
.oe-delivery-info .sep { color: #b9c6d4; }
#oe-items input { padding: 5px 8px; }

@media (max-width: 760px) {
  .span-2 { grid-column: auto; }
  .form-row.cols-2, .form-row.cols-3, .form-row.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- 商品图片：列表缩略图 + 编辑弹窗图集 ---- */
.cell-thumb { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; display: block; background: #f1efe8; cursor: zoom-in; }
.cell-thumb--none { display: flex; align-items: center; justify-content: center; font-size: 11px; color: #b4b2a9; cursor: default; }

.img-block { border: 1px solid rgba(0, 0, 0, .08); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; background: #fbfbfa; }
.img-block__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.img-block__head b { font-size: 13px; font-weight: 500; }
.img-block__head .muted { font-size: 11px; color: #888780; }
.img-drop { border: 1.5px dashed rgba(0, 0, 0, .14); border-radius: 10px; padding: 12px; background: #fff; }
.img-drop.over { border-color: #d85a30; background: #fdf7f4; }
.img-drop__hint { font-size: 12px; color: #888780; text-align: center; padding: 8px 0 2px; }
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.img-empty { font-size: 12px; color: #b4b2a9; padding: 4px 2px 8px; }
.img-cell { position: relative; border: 1px solid rgba(0, 0, 0, .08); border-radius: 8px; overflow: hidden; background: #fff; }
.img-cell.is-main { border-color: #d85a30; }
.img-cell img { width: 100%; height: 86px; object-fit: cover; display: block; cursor: zoom-in; }
.img-flag { position: absolute; top: 4px; left: 4px; background: #d85a30; color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 20px; }
.img-cell__ops { display: flex; gap: 4px; padding: 5px 6px; border-top: 1px solid rgba(0, 0, 0, .06); }
.img-cell__ops button { flex: 1; padding: 3px 6px; font-size: 11px; }
.img-progress { font-size: 12px; color: #185fa5; margin-top: 8px; }
.link-btn { background: none; border: none; color: #185fa5; padding: 0; font-size: 12px; cursor: pointer; text-decoration: underline; }
.btn-link { display: inline-block; padding: 6px 14px; border-radius: 7px; border: 1px solid rgba(0, 0, 0, .16); background: #fff; text-decoration: none; font-size: 12.5px; color: #2c2c2a; }
.img-preview { background: #f1efe8; border-radius: 10px; padding: 12px; text-align: center; }
.img-preview img { max-width: 100%; max-height: 62vh; border-radius: 6px; }

/* ---- 文件类型角标 ---- */
.file-badge { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 8px; font-size: 11px; font-weight: 500; letter-spacing: .3px; flex: none; }
.tone-coral { background: #faece7; color: #993c1d; }
.tone-blue { background: #e6f1fb; color: #185fa5; }
.tone-green { background: #eaf3de; color: #3b6d11; }
.tone-amber { background: #faeeda; color: #854f0b; }
.tone-gray { background: #f1efe8; color: #5f5e5a; }

/* ---- 素材库 ---- */
.mat-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.mat-stat { background: #fff; border: 1px solid rgba(0, 0, 0, .06); border-radius: 10px; padding: 12px 14px; }
.mat-stat b { font-size: 19px; font-weight: 500; display: block; }
.mat-stat span { font-size: 11px; color: #888780; }
.mat-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mat-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.mat-tab { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .12); background: #fff; color: #5f5e5a; font-size: 12.5px; }
.mat-tab.on { background: #d85a30; border-color: #d85a30; color: #fff; font-weight: 500; }
.mat-tab__n { margin-left: 6px; opacity: .75; font-size: 11px; }
.mat-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mat-tools button.on { background: #faece7; border-color: #d85a30; color: #993c1d; }
.mat-search { padding: 6px 12px; border-radius: 7px; border: 1px solid rgba(0, 0, 0, .16); font-size: 12.5px; min-width: 180px; }
.mat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.mat-cell { position: relative; }
.mat-card { border: 1px solid rgba(0, 0, 0, .07); border-radius: 10px; overflow: hidden; background: #fff; cursor: pointer; }
.mat-card:hover { border-color: #d85a30; }
.mat-cell:has(.mat-check.on) .mat-card { border-color: #d85a30; }
.mat-card__thumb { height: 116px; display: flex; align-items: center; justify-content: center; background: #f7f7f5; overflow: hidden; }
.mat-card__img { width: 100%; height: 100%; object-fit: cover; }
.mat-card__body { padding: 8px 10px 10px; }
.mat-card__name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-card__meta { font-size: 11px; color: #888780; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mat-check { position: absolute; top: 6px; left: 6px; width: 20px; height: 20px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .2); background: rgba(255, 255, 255, .92); display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; cursor: pointer; z-index: 2; }
.mat-check.on { background: #d85a30; border-color: #d85a30; }
.mat-check--sm { position: static; }
.mat-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.mat-row__thumb { width: 38px; height: 38px; border-radius: 6px; object-fit: cover; background: #f1efe8; flex: none; }
.mat-row__name { font-size: 13px; }
.mat-row .file-badge { width: 38px; height: 38px; font-size: 10px; }
.mat-empty { text-align: center; padding: 40px 16px; }
.mat-empty__t { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
.mat-preview { background: #f1efe8; border-radius: 10px; padding: 12px; text-align: center; }
.mat-preview img { max-width: 100%; max-height: 58vh; border-radius: 6px; }
.mat-preview--pdf iframe { width: 100%; height: 58vh; border: none; border-radius: 6px; background: #fff; }
.mat-preview--none { padding: 28px 12px; }
.mat-preview--none .file-badge { width: 56px; height: 56px; font-size: 12px; }
.mat-preview--none p { margin: 10px 0 0; font-size: 12px; }
.mat-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; font-size: 12.5px; }
.mat-meta span { color: #888780; margin-right: 6px; }
.sm-file { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px dashed rgba(0, 0, 0, .08); font-size: 13px; }
.sm-file:last-child { border-bottom: none; }
.sm-file .file-badge { width: 32px; height: 32px; font-size: 10px; border-radius: 7px; }
.sm-file__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #2c2c2a; text-decoration: none; }
.sm-file__name:hover { color: #185fa5; text-decoration: underline; }
.mat-note { margin-top: 10px; font-size: 12.5px; background: #f7f7f5; border-radius: 8px; padding: 8px 12px; }
.mat-tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.mat-queue { margin-bottom: 8px; }
.mat-queue__item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed rgba(0, 0, 0, .08); font-size: 12.5px; }
.mat-queue__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 打印模板精细设置（纸张 / 字号 / 位置 / 表格） ---- */
.prn-tpl-bar { display: inline-flex; border: 1px solid #d8d3c8; border-radius: 8px; overflow: hidden; }
.prn-tpl-bar .prn-tpl-btn { border: none; border-radius: 0; font-size: 13px; padding: 8px 12px; white-space: nowrap; }
.prn-adv { border: 1px solid #e2ddd2; border-radius: 10px; background: #fcfaf5; padding: 8px 10px; margin-bottom: 10px; }
.prn-adv > summary { cursor: pointer; font-weight: 600; font-size: 13px; color: #6a6156; padding: 4px 0; }
.prn-adv[open] > summary { margin-bottom: 6px; }
.prn-grp { border-top: 1px dashed rgba(0, 0, 0, .1); padding: 8px 0 2px; }
.prn-grp > b { display: block; font-size: 12.5px; color: #8d8b84; font-weight: 600; margin-bottom: 6px; }
.prn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px 12px; }
.prn-f { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: #6a6156; min-width: 0; }
.prn-f > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prn-f input[type="number"], .prn-f select { width: 100%; font-size: 13px; padding: 5px 7px; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .16); background: #fff; }
.prn-f--bool { flex-direction: row; align-items: center; gap: 6px; align-self: end; padding-bottom: 6px; }
.prn-f--bool input[type="checkbox"] { width: auto; flex: none; margin: 0; }
.prn-f--bool > span { overflow: visible; }
.prn-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; }
.prn-acts .hint { font-size: 12px; color: #a09a90; }

/* ---- 开单：预存款抵扣比例 ---- */
.so-bal-hint { font-size: 12.5px; color: #6a6156; padding: 6px 0 4px; }
.so-bal-hint b { font-variant-numeric: tabular-nums; }

/* ---- 改单弹窗：加商品搜索 + 一二级分类筛选 + 候选横向斑马纹 ---- */
.oe-pick-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.oe-pick-bar #oe-search { flex: 1 1 220px; width: auto; }
.oe-pick-bar select { flex: 0 0 auto; width: auto; max-width: 150px; font-size: 13px; }
.oe-pick-note { font-size: 12px; color: #a09a90; margin: 5px 0 0; }
.oe-suggest { margin-top: 6px; border: 1px solid #e2ddd2; border-radius: 8px; max-height: 220px; overflow: auto; background: #fff; }
.oe-pick-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; cursor: pointer; font-size: 13px; }
.oe-pick-row:nth-child(odd) { background: #fff; }
.oe-pick-row:nth-child(even) { background: #f7f6f2; }
.oe-pick-row:hover { background: #fdf0e8; }
.oe-pick-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oe-pick-cat { flex: 0 0 auto; font-size: 12px; color: #8d8b84; white-space: nowrap; }
.oe-pick-price { flex: 0 0 auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oe-pick-empty { padding: 10px; font-size: 13px; color: #a09a90; }

/* ---- 改单明细：删除留痕（划掉 + 锁死，可恢复） ---- */
.oe-table tbody tr.oe-removed.oe-removed td { background: #f3f1ec; color: #a09a90; }
.oe-table tbody tr.oe-removed.oe-removed td:first-child { text-decoration: line-through; text-decoration-color: #bdb7ac; }
.oe-table tbody tr.oe-removed.oe-removed input { color: #a09a90; background: #f3f1ec; border-color: #e2ddd2; }
.oe-rem-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: #eceae5; color: #8d8b84; font-size: 11px; font-weight: 400; vertical-align: 1px; }
.oe-removed-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 12px; border: 1px dashed #ddd6c8; border-radius: 8px;
  background: #fbfaf7; font-size: 13px; color: #6f6a60;
}
.oe-removed-bar b { color: #c2571f; }
.oe-removed-bar .muted { font-size: 12px; }
.oe-removed-bar button { margin-left: auto; }

@media (max-width: 760px) {
  .mat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mat-card__thumb { height: 96px; }
  .mat-toolbar { align-items: stretch; }
  .mat-tools { width: 100%; }
  .mat-search { flex: 1; min-width: 0; }
  .mat-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .img-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  button.btn-add-xl { font-size: 22px; padding: 12px 26px; }
  #so-search { font-size: 16px; padding: 9px 12px; }
  .ptable { font-size: 13px; }
  .ptable th, .ptable td { padding: 7px 8px; }
  .ptable .c-thumb { width: 48px; }
  .ptable .col-name-lg { min-width: 180px; }
  .prod-search { min-width: 0; }
  .prod-count { margin-left: 0; width: 100%; }
}

/* ---- 客户跟进（CRM）：商机看板 ---- */
.cw-kanban { display: flex; gap: 10px; align-items: flex-start; overflow-x: auto; padding-bottom: 6px; }
.cw-col { flex: 1 1 0; min-width: 168px; background: #faf9f6; border: 1px solid #e7e5de; border-radius: 10px; padding: 8px; }
.cw-col-head { font-weight: 600; font-size: 13px; margin-bottom: 8px; }
.cw-col-win { background: #f4f9ec; border-color: #d5e7bd; }
.cw-col-lose { background: #f7f6f4; border-color: #e2e0da; opacity: .8; }
.cw-card { background: #fff; border: 1px solid #e7e5de; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: 12.5px; }
.cw-card-t { font-weight: 600; margin-bottom: 3px; }
.cw-card-acts { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cw-empty { color: #b9b7ae; text-align: center; border-style: dashed; margin-bottom: 0; }

/* 订单列表：商城来源且未处理完的订单特殊底色（处理完成后恢复普通色） */
.ord-hot td { background: #fff3e5 !important; }
.ord-hot td:first-child { box-shadow: inset 3px 0 0 #d85a30; }

/* 开单/订单列表「筛选」橙色按钮 */
.btn-orange { background: #d85a30; color: #fff; border-color: #d85a30; }
.btn-orange:hover { background: #c74e26; }

/* ---- 销售 CRM（线索池 / 档案 / 跟进 / 漏斗 / 报价 / 公约）2026-09-21 ---- */
.tag.red { background: #fbe9e7; color: #a53221; }
.tag.gray { background: #efedea; color: #6c6a64; }
.tag.cyan { background: #e3f4f6; color: #0e6b78; }
.cw-cd { display: flex; align-items: center; gap: 6px; min-width: 120px; }
.cw-cd-bar { flex: 1; height: 8px; border-radius: 6px; background: #f1efe8; overflow: hidden; min-width: 70px; }
.cw-cd-bar i { display: block; height: 100%; border-radius: 6px; }
.cw-cd-bar i.green { background: #7cb342; }
.cw-cd-bar i.amber { background: #e8a33d; }
.cw-cd-bar i.red { background: #d85a30; }
.cw-cd-card { border: 1px solid #e7e5de; border-radius: 8px; padding: 8px 12px; margin: 6px 0 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #fdfcf9; }
.cw-sec { border-top: 1px dashed #e7e5de; margin-top: 14px; padding-top: 10px; }
.cw-sec > b { display: block; margin-bottom: 8px; }
.cw-tags-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 12px; }
.cw-trace { max-height: 300px; overflow-y: auto; border: 1px solid #eee9df; border-radius: 8px; padding: 8px; background: #fdfcf9; }
.cw-tr-item { padding: 6px 4px; border-bottom: 1px dashed #eee9df; font-size: 12.5px; }
.cw-tr-item:last-child { border-bottom: none; }
.cw-tr-head { display: flex; gap: 8px; align-items: center; margin-bottom: 3px; flex-wrap: wrap; }
.cw-trace-head { font-weight: 600; margin: 10px 0 4px; }
.cw-todos { margin: 4px 0 0 18px; font-size: 12.5px; }
.cw-todos li { margin-bottom: 3px; }
.cw-att { color: #185fa5; text-decoration: none; font-size: 12px; margin-right: 6px; }
.cw-att:hover { text-decoration: underline; }
.cw-att-list { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.cw-att-item { display: inline-flex; align-items: center; }
.cw-fu-bar { display: flex; gap: 8px; align-items: flex-start; }
.cw-fu-bar textarea { flex: 1; }
.cw-funnel { display: flex; flex-direction: column; gap: 7px; }
.cw-bar-row { display: flex; align-items: center; gap: 8px; }
.cw-bar-label { flex: 0 0 100px; font-size: 12.5px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-bar { flex: 1; height: 16px; background: #f4f2ec; border-radius: 8px; overflow: hidden; }
.cw-bar i { display: block; height: 100%; border-radius: 8px; min-width: 4px; }
.cw-bar i.blue { background: linear-gradient(90deg, #5b9bd5, #2f7dd1); }
.cw-bar i.green { background: linear-gradient(90deg, #8bc34a, #5f9e2f); }
.cw-bar i.red { background: linear-gradient(90deg, #e57368, #c74434); }
.cw-bar i.amber { background: linear-gradient(90deg, #e8b93d, #d1951f); }
.cw-bar-val { flex: 0 0 190px; font-size: 12px; color: #6c6a64; }
.cw-scores { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cw-score-card { text-align: center; font-size: 12.5px; }
.cw-score-num { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; margin: 0 auto 4px; }
.cw-score-num.green { background: #eaf3de; color: #3b6d11; }
.cw-score-num.amber { background: #faeeda; color: #854f0b; }
.cw-score-num.red { background: #fbe9e7; color: #a53221; }
.cw-score-num small { font-size: 11px; font-weight: 400; }
.cw-rule-list { font-size: 12.5px; padding-left: 20px; }
.cw-rule-list li { margin-bottom: 3px; }
.cw-dup-warn { border: 1px solid #f2c8bf; background: #fdf3f0; border-radius: 8px; padding: 8px 12px; margin: 8px 0; font-size: 12.5px; }
.cw-dup-warn ul { margin: 6px 0 0 18px; }
.cw-status-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.cw-status-grid .small { min-width: 84px; }

/* ---- 列表列宽可拖拽（订单列表等 .table-resizable 表格） ---- */
.table-resizable thead th { position: relative; }
.col-grip { position: absolute; top: 0; right: 0; bottom: 0; width: 9px; cursor: col-resize; z-index: 2; }
.col-grip::before { content: ''; position: absolute; top: 5px; bottom: 5px; right: 1px; width: 1px; background: rgba(0, 0, 0, .06); }
.col-grip:hover::before, .col-grip.on::before { width: 2px; background: #d85a30; }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none !important; }
.col-resized { table-layout: fixed; }
.col-resized thead th { overflow: hidden; text-overflow: ellipsis; }
.col-resized td { overflow: hidden; }
.col-resized .cell-goods { max-width: none; }
.col-resized .ord-addr { max-width: none !important; }

/* ---- 订单横向阶段条（2026-09-21）：颜色由浅到深对应履约阶段升华 ---- */
.stage-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.stage-pill {
  border: 1px solid transparent; border-radius: 999px; padding: 7px 16px;
  font-size: 13px; cursor: pointer; line-height: 1.2; transition: transform .12s, box-shadow .12s;
}
.stage-pill b { font-weight: 700; margin-left: 2px; }
.stage-pill:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.14); }
.stage-pill.active {
  font-weight: 700; transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  outline: 2px solid rgba(0,0,0,.45); outline-offset: 1px;
}