/* 鲜链食材供应链SaaS - 方案B 样式 */
:root {
  --green: #00b42a; --green-d: #009a29; --green-bg: #e8f8ee;
  --red: #f53f3f; --orange: #ff7d00; --blue: #165dff; --purple: #722ed1; --cyan: #0fc6c2;
  --text: #1d2129; --text-2: #4e5969; --text-3: #86909c;
  --line: #f0f1f3; --bg: #f5f6f8; --card: #fff;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; background: var(--bg); color: var(--text); font-size: 14px; }
a { color: var(--green); text-decoration: none; }
h2 { font-size: 18px; margin: 0 0 14px; }
h3 { font-size: 15px; margin: 0 0 10px; }

/* ---------- 布局 ---------- */
.app { display: flex; min-height: 100vh; }
/* 侧栏：深色，与右侧浅色内容区形成明显对比 */
.sidebar { width: 210px; background: linear-gradient(180deg, #22302a 0%, #17211c 100%); border-right: 1px solid #101815; position: fixed; top: 0; bottom: 0; left: 0; overflow-y: auto; z-index: 40; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 3px; }
.sidebar-logo { display: flex; align-items: center; gap: 8px; padding: 16px 16px 12px; font-weight: 700; font-size: 15px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-logo svg { color: #4ade80; }
.sidebar-logo small { display: block; font-weight: 400; font-size: 10.5px; letter-spacing: .2px; color: rgba(255,255,255,.45); white-space: nowrap; }
.nav { padding: 10px 8px; }
.nav-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 8px; color: rgba(255,255,255,.72); cursor: pointer; margin-bottom: 2px; white-space: nowrap; transition: background .15s, color .15s; }
.nav-item svg { flex: none; opacity: .88; }
.nav-item:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-item.active { background: var(--green); color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(0,180,42,.28); }
.nav-item.active svg { opacity: 1; }
.nav-group { font-size: 11px; color: rgba(255,255,255,.38); padding: 12px 10px 4px; letter-spacing: .5px; }
.main { flex: 1; margin-left: 210px; min-width: 0; }
.topbar { height: 54px; background: var(--card); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; padding: 0 18px; position: sticky; top: 0; z-index: 30; }
.topbar-title { font-weight: 600; font-size: 15px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tenant-pill { background: var(--green-bg); color: var(--green-d); border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 600; }
.content { padding: 18px; max-width: 1240px; margin: 0 auto; }

/* ---------- 通用组件 ---------- */
/* 隐藏工具类：全局多处用 classList.add/remove('hidden') 控制显隐，缺了这条会全部露出来 */
.hidden { display: none !important; }
.card { background: var(--card); border-radius: 12px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(29, 33, 41, .05); margin-bottom: 14px; }
.card-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.card-title h3 { margin: 0; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 订单页操作按钮组：桌面透明参与 .row 布局（手机端在 mobile.css 网格化） */
.ord-actions { display: contents; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.grid { display: grid; gap: 12px; }
.stat-grid { grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); }
.stat { background: var(--card); border-radius: 12px; padding: 14px 16px; box-shadow: 0 1px 3px rgba(29, 33, 41, .05); }
.stat .label { font-size: 12px; color: var(--text-3); }
.stat .num { font-size: 22px; font-weight: 700; margin-top: 4px; text-align: left; }
.stat .sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.stat .num.green { color: var(--green-d); }
.stat .num.red { color: var(--red); }
.stat .num.orange { color: var(--orange); }
/* 对账汇总：5 列等宽，金额不换行、不挤压 */.recon-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.recon-stats .stat { padding: 12px 14px; border: 1px solid var(--line); box-shadow: none; }
.recon-stats .stat .num { font-size: 19px; white-space: nowrap; letter-spacing: -.2px; }
.recon-stats .stat .sub { line-height: 1.35; }
@media (max-width: 1100px) { .recon-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 下单账号金额占比条 */
.ratio { height: 6px; border-radius: 999px; background: #eef0f3; overflow: hidden; margin-bottom: 3px; }
.ratio > span { display: block; height: 100%; border-radius: 999px; background: var(--green); min-width: 2px; }

@media (max-width: 760px) {
  .recon-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recon-stats .stat .sub { white-space: normal; }
  .recon-stats .stat .num { font-size: 18px; }
  .card-title { flex-wrap: wrap; gap: 4px 8px; }
  .card-title h3 { white-space: nowrap; }
  .card-title > .muted { flex: 1 1 100%; }
}

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line); background: #fff; color: var(--text-2); border-radius: 8px; padding: 7px 14px; font-size: 13px; cursor: pointer; transition: .15s; white-space: nowrap; }
.btn:hover { border-color: #c9cdd4; color: var(--text); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn-primary:hover { background: var(--green-d); border-color: var(--green-d); color: #fff; }
.btn-danger { color: var(--red); border-color: #ffd4d4; }
.btn-danger:hover { border-color: var(--red); color: var(--red); }
.btn-sm { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.btn-block { width: 100%; padding: 10px; font-size: 15px; }

.tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; line-height: 20px; }
.tag.gray { background: #f2f3f5; color: #4e5969; }
.tag.green { background: var(--green-bg); color: var(--green-d); }
.tag.warn { background: #fff7e8; color: #ff7d00; }
.tag.orange { background: #fff2e8; color: #d25f00; }
.tag.blue { background: #e8f3ff; color: #165dff; }
.tag.purple { background: #f5e8ff; color: #722ed1; }
.tag.cyan { background: #e8fffb; color: #0c7e7b; }
.tag.red { background: #ffece8; color: #cb2634; }

.chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 3px 12px; font-size: 12px; color: var(--text-2); cursor: pointer; }
.chip:hover { border-color: var(--green); color: var(--green-d); }
.chip.active { background: var(--green); border-color: var(--green); color: #fff; }

input, select, textarea { width: 100%; padding: 8px 10px; border: 1px solid #e5e6eb; border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff; color: var(--text); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--green); }
textarea { min-height: 90px; resize: vertical; }
.form-row { margin-bottom: 12px; }
.form-row label { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 5px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-err { color: var(--red); font-size: 13px; margin-bottom: 8px; }

.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; }
table.table th { text-align: left; font-size: 12px; color: var(--text-3); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.table tr:hover td { background: #fafbfc; }
/* 客户管理：列多但内容短，统一不折行；只有地址允许折行 */
.cust-table td { white-space: nowrap; }
.cust-table td.cust-addr { white-space: normal; min-width: 150px; max-width: 230px; line-height: 1.35; }
.cust-table td.cust-ops .btn + .btn { margin-left: 4px; }
.cust-table td.cust-status .tag, .cust-table td.cust-ops .btn { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); }
.small { font-size: 12px; }
.strong { font-weight: 600; }
.green-text { color: var(--green-d); }
.red-text { color: var(--red); }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; }
.tab { padding: 8px 14px; cursor: pointer; color: var(--text-2); border-bottom: 2px solid transparent; white-space: nowrap; font-size: 13px; }
.tab.active { color: var(--green-d); border-bottom-color: var(--green); font-weight: 600; }

.empty { text-align: center; color: var(--text-3); padding: 44px 0; }

.timeline { border-left: 2px solid var(--line); margin-left: 6px; padding-left: 18px; }
.timeline-item { position: relative; padding-bottom: 16px; font-size: 13px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before { content: ""; position: absolute; left: -24px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.timeline-item .t { color: var(--text-3); font-size: 12px; }

/* ---------- 弹窗 / 提示 ---------- */
.modal-mask { position: fixed; inset: 0; background: rgba(29, 33, 41, .45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal { background: #fff; border-radius: 14px; width: min(600px, 96vw); max-height: 88vh; overflow: auto; padding: 20px; }
.modal.wide { width: min(860px, 96vw); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-close { border: 0; background: none; font-size: 18px; color: var(--text-3); cursor: pointer; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
#toast-root { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 300; }
.toast { background: rgba(29, 33, 41, .92); color: #fff; padding: 9px 18px; border-radius: 8px; font-size: 13px; margin-bottom: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); animation: toast-in .18s ease; }
.toast.success { background: var(--green-d); }
.toast.error { background: var(--red); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- 登录页：左侧介绍 / 右侧登录 ---------- */
.login-body { min-height: 100vh; background: #f6f7f9; }
.login-split { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(430px, .94fr); min-height: 100vh; }

/* 左：品牌介绍 */
.login-hero {
  position: relative; overflow: hidden; color: #fff;
  padding: 56px clamp(30px, 4.6vw, 72px);
  display: flex; flex-direction: column; justify-content: center;
  background:
    radial-gradient(880px 520px at 84% 10%, rgba(255, 255, 255, .18), transparent 62%),
    radial-gradient(700px 540px at 4% 96%, rgba(0, 0, 0, .2), transparent 62%),
    linear-gradient(150deg, #067a2c 0%, #00a62b 52%, #12a83f 100%);
}
.login-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(115% 85% at 18% 4%, #000 26%, transparent 76%);
  mask-image: radial-gradient(115% 85% at 18% 4%, #000 26%, transparent 76%);
}
.login-hero > * { position: relative; z-index: 1; }

.hero-inner { width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; }
.hero-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 42px; }
.hero-icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); }
.hero-brand h1 { font-size: 19px; margin: 0; letter-spacing: .4px; }
.hero-brand p { margin: 3px 0 0; font-size: 11.5px; color: rgba(255, 255, 255, .72); }

.hero-title { font-size: clamp(27px, 2.6vw, 38px); line-height: 1.32; margin: 0 0 16px; font-weight: 700; letter-spacing: .6px; }
.hero-title span { color: #b6f8c6; }
.hero-sub { font-size: 14px; line-height: 1.8; margin: 0 0 32px; max-width: 30em; color: rgba(255, 255, 255, .84); }

.hero-list { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 15px; max-width: 30em; }
.hero-list li { display: flex; gap: 11px; font-size: 13.5px; line-height: 1.62; color: rgba(255, 255, 255, .88); }
.hero-list .hi { flex: 0 0 auto; width: 21px; height: 21px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3); }
.hero-list b { display: block; font-weight: 600; color: #fff; margin-bottom: 1px; }
.hero-foot { font-size: 11.5px; color: rgba(255, 255, 255, .62); }

/* 右：登录框 */
.login-panel { display: flex; align-items: center; justify-content: center; padding: 44px 24px; background: #f6f7f9; }
.login-panel-inner { width: min(400px, 100%); }
.login-brand { display: none; }
.login-card { background: #fff; border-radius: 16px; padding: 30px 28px 26px;
  border: 1px solid #eceef2; box-shadow: 0 10px 34px rgba(16, 40, 26, .07); }
.login-title { font-size: 21px; margin: 0 0 6px; font-weight: 700; }
.login-sub { font-size: 12.5px; color: var(--text-3); margin: 0 0 22px; }
.login-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.login-logo h1 { font-size: 19px; margin: 0; }
.login-logo p { margin: 2px 0 0; font-size: 12px; color: var(--text-3); }
.login-error { color: var(--red); font-size: 13px; min-height: 20px; margin-bottom: 6px; }
/* 已登录提示条：登录页换账号前先告诉用户当前是谁 */
.login-current { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;
  margin-bottom: 14px; padding: 10px 12px; border-radius: 10px; font-size: 13px;
  background: #eef7f0; border: 1px solid #cdebd6; color: #2b4a35; }
.login-current[hidden] { display: none; }
.login-foot { margin-top: 18px; text-align: center; font-size: 11.5px; color: var(--text-3); }

/* 平板及以下：收起左侧介绍，改单列 */
@media (max-width: 980px) {
  .login-split { grid-template-columns: 1fr; }
  .login-hero { display: none; }
  .login-panel { min-height: 100vh;
    background: linear-gradient(170deg, #e9f9ef 0%, #f6f7f9 46%, #f6f7f9 100%); }
  .login-brand { display: flex; justify-content: center; margin-bottom: 18px; }
  .login-brand .login-logo { margin-bottom: 0; }
}

/* 矮屏笔记本：压缩左栏纵向节奏，避免版权被裁 */
@media (min-width: 981px) and (max-height: 760px) {
  .login-hero { padding-top: 26px; padding-bottom: 26px; }
  .hero-brand { margin-bottom: 22px; }
  .hero-title { font-size: 26px; margin-bottom: 12px; }
  .hero-sub { margin-bottom: 18px; font-size: 13px; }
  .hero-list { gap: 9px; margin-bottom: 20px; }
  .hero-list li { font-size: 12.5px; }
}

/* ---------- 下单商城 ---------- */
.mall-search { display: flex; gap: 8px; margin-bottom: 12px; }
.mall-search input { flex: 1; }
.cat-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.product-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; background: #fff; transition: .12s; }
.product-card:hover { border-color: var(--green); }
.product-card:active { transform: scale(.97); }
.product-card .name { font-weight: 600; }
.product-card .spec { font-size: 12px; color: var(--text-3); margin: 2px 0 6px; }
.product-card .price { color: var(--red); font-weight: 700; }
.product-card .price small { color: var(--text-3); font-weight: 400; }
.cart-bar { position: fixed; bottom: 0; left: 210px; right: 0; background: #fff; border-top: 1px solid var(--line); padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; z-index: 50; box-shadow: 0 -2px 10px rgba(0, 0, 0, .04); }
.cart-bar .total { font-weight: 700; }
.cart-bar.is-empty { display: none; }
/* 购物车条：徽标数量 + 合计 + 去结算 */
.cb-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cb-badge { min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--green); color: #fff; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.cb-total { font-size: 19px; font-weight: 800; color: var(--red, #d54941); font-variant-numeric: tabular-nums; }
.cb-sub { color: var(--text-3); font-size: 12px; }
.cb-go { height: 40px; padding: 0 26px; font-size: 15px; border-radius: 10px; }
/* 商品卡步进器：未选时是「＋加购」按钮，选了变成 − 数量 ＋ */
.qty-step { display: inline-flex; align-items: center; gap: 0; border-radius: 9px; overflow: hidden; }
.qs-btn { width: 36px; height: 36px; border: 1px solid var(--line); background: #fff; font-size: 17px; line-height: 1; color: var(--green-d); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.qs-btn:active { background: var(--green-bg); }
.qs-btn[data-dec] { border-radius: 9px 0 0 9px; }
.qs-btn[data-inc] { border-radius: 0 9px 9px 0; }
.qs-num { min-width: 40px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
/* 步进器中间数字改为可直接输入的输入框 */
input.qs-num { width: 46px; text-align: center; padding: 0 4px; border-left: 0; border-right: 0; border-radius: 0;
  background: #fff; color: var(--text); font-weight: 700; font-family: inherit; }
input.qs-num:focus { border-color: var(--green); outline: none; box-shadow: none; }
.qs-add { height: 36px; padding: 0 16px; border: none; border-radius: 9px; background: var(--green); color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.qs-add:active { background: var(--green-d); }
/* 商城两栏：左边商品、右边购物车（窄屏自动回落到底部购物车条） */
.mall-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 14px; align-items: start; }
.mall-main { min-width: 0; }
.mall-side { position: sticky; top: 66px; background: #fff; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; max-height: calc(100vh - 96px); overflow: hidden; }
.ms-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.ms-list { flex: 1; overflow-y: auto; padding: 4px 14px; }
.ms-empty { padding: 26px 6px; text-align: center; color: var(--text-3); font-size: 12.5px; line-height: 2; }
.ms-item { padding: 9px 0; border-bottom: 1px dashed var(--line); }
.ms-item:last-child { border-bottom: 0; }
.ms-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ms-row + .ms-row { margin-top: 6px; }
.ms-name { font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-amt { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.ms-foot { border-top: 1px solid var(--line); padding: 10px 14px; background: #fcfdfc; }
.ms-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.ms-total b { font-size: 18px; }
.ms-foot input { width: 100%; margin-bottom: 8px; }
.ms-foot .btn { width: 100%; }
@media (max-width: 1180px) { .mall-wrap { grid-template-columns: 1fr; } .mall-side { display: none; } }
@media (min-width: 1181px) { .cart-bar { display: none; } }

/* 客户账号顶部信息条：公司 / 客户 / 下单账号 / 账号编号 */
.cust-head { background: linear-gradient(90deg, #f2fbf5, #fff); border-bottom: 1px solid var(--line); padding: 0 18px; }
.ch-in { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; min-height: 42px; max-width: 1240px; margin: 0 auto; font-size: 12.5px; }
.ch-item { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.ch-item i { font-style: normal; color: var(--text-3); font-size: 11.5px; }
.ch-item b { color: var(--text); font-weight: 600; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-no { font-style: normal; color: var(--text-3); font-size: 11.5px; background: #f2f3f5; border-radius: 4px; padding: 1px 6px; }
.ch-tip { margin-left: auto; color: var(--orange); font-size: 11.5px; }

/* 顶栏右侧的客户信息条（浅绿胶囊）：公司 · 客户[身份] · 下单账号 编号 · 手机 */
.ch-top { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 680px; height: 34px; padding: 0 14px; border: 1px solid #bfe6cd; border-radius: 8px; background: #e6f8ed; font-size: 12.5px; color: var(--green-d); }
.ch-top b { min-width: 0; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--green-d); }
.ch-top-cus { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ch-top-sep { font-style: normal; color: rgba(0, 154, 41, .38); }
.ch-top-acc { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ch-top-k { font-size: 11.5px; color: rgba(0, 154, 41, .62); }
.ch-top .ch-no { background: rgba(0, 180, 42, .14); color: var(--green-d); }
.ch-top-tag { font-size: 10.5px; padding: 0 6px; }
.ch-top-phone { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 1280px) { .ch-top-phone { display: none; } }
/* 桌面端信息已在顶栏右侧，下方整条信息条只在手机端出现，避免同一份信息显示两遍 */
@media (min-width: 821px) { .cust-head { display: none; } }

/* 代客下单 · 客户选择（可搜索下拉面板，客户多时不用拉一长串原生下拉） */
.cpick { position: relative; display: inline-block; min-width: 280px; max-width: 360px; }
.cpick-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 36px; padding: 6px 12px; border: 1px solid #e5e6eb; border-radius: 8px; background: #fff; font-size: 13.5px; cursor: pointer; }
.cpick-btn:hover { border-color: var(--green); }
.cpick.open .cpick-btn { border-color: var(--green); box-shadow: 0 0 0 2px rgba(0, 180, 42, .12); }
.cpick-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.cpick-caret { width: 8px; height: 8px; border-right: 1.6px solid var(--text-3); border-bottom: 1.6px solid var(--text-3); transform: rotate(45deg) translateY(-2px); flex: none; }
.cpick-panel { position: absolute; top: calc(100% + 5px); left: 0; width: max-content; min-width: 100%; max-width: min(420px, calc(100vw - 56px)); background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 28px rgba(0, 0, 0, .13); z-index: 70; }
.cpick-search { padding: 8px; border-bottom: 1px solid var(--line); }
.cpick-search input { width: 100%; font-size: 13px; }
.cpick-list { max-height: 300px; overflow-y: auto; padding: 4px 0 6px; }
.cpick-group { font-size: 11px; color: var(--text-3); padding: 8px 12px 3px; letter-spacing: .3px; }
.cpick-item { display: flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.cpick-item:hover { background: var(--green-bg); }
.cpick-item.on { color: var(--green-d); font-weight: 600; background: var(--green-bg); }
.cpick-item.sub { padding-left: 26px; }
.cpick-item.dis { color: var(--text-3); cursor: not-allowed; }
.cpick-item.dis:hover { background: none; }
.cpick-item .cp-tag { margin-left: auto; padding-left: 14px; font-size: 10.5px; font-weight: 400; color: var(--text-3); }
.cpick-empty { padding: 20px; text-align: center; color: var(--text-3); font-size: 12.5px; }

/* 用户与权限：子账号折叠在主账号下 */
.u-fold { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; padding: 2px 10px;
  font-size: 12px; color: var(--green-d); background: var(--green-bg); border: 0; border-radius: 999px; cursor: pointer; }
.u-fold:hover { filter: brightness(.96); }
.u-fold[aria-expanded="true"] { color: var(--text-2); background: #f2f3f5; }
tr.u-sub-row td { background: #fafcfa; }
tr.u-sub-row td:first-child { padding-left: 24px; }
.u-sub-row .tree { font-style: normal; color: var(--text-3); }
.qty { display: inline-flex; align-items: center; gap: 8px; }
.qty button { width: 24px; height: 24px; border-radius: 6px; border: 1px solid #e5e6eb; background: #fff; cursor: pointer; font-size: 14px; line-height: 1; color: var(--text-2); }
.qty button:hover { border-color: var(--green); color: var(--green-d); }
.qty span { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.qty input.qty-num { width: 46px; text-align: center; padding: 2px 4px; border: 1px solid #e5e6eb; border-radius: 6px;
  background: #fff; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.qty input.qty-num:focus { border-color: var(--green); outline: none; box-shadow: none; }

/* ---------- 分拣 ---------- */
.pick-row input { width: 76px; text-align: right; }
.pick-sum { display: flex; gap: 18px; font-size: 13px; color: var(--text-2); margin-bottom: 10px; flex-wrap: wrap; }
/* 同一下单人的多单分组：组头横条 + 合并按钮，卡片缩进一层 */
.pk-group { border-left: 3px solid var(--blue); padding-left: 10px; margin-bottom: 6px; }
.pk-group-hd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0 8px; }
.pk-group-hd .pk-gt { font-weight: 600; font-size: 13.5px; }
.pk-group-hd .btn { margin-left: auto; }
/* 订单备注：暖色底提示，一眼能看到客户交代的话 */
.pk-remark { background: #fff8e6; color: #a86800; border: 1px solid #ffe1a8; border-radius: 6px; padding: 5px 9px; font-size: 12.5px; margin: 0 0 8px; line-height: 1.55; }

/* ---------- 订单列表：下单账号小标签（客户子账号 / 主账号名） ---------- */
.oc-cust { min-width: 150px; }
.oc-sub {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 6px;
  padding: 1px 9px 1px 4px; border-radius: 999px;
  background: var(--green-bg); color: var(--text-2); font-size: 12px; line-height: 1.7;
  vertical-align: middle; white-space: nowrap; max-width: 46%; overflow: hidden; text-overflow: ellipsis;
}
.oc-sub i { font-style: normal; flex: 0 0 auto; font-size: 11px; color: var(--green-d); background: #fff; border-radius: 999px; padding: 0 7px; }

/* ---------- 打印 ---------- */
.print-link { color: var(--blue); cursor: pointer; font-size: 13px; }
.edit-link { color: var(--blue); cursor: pointer; font-size: 13px; }
/* 修改订单弹窗：行式布局，名称 + 小计 + 数量输入 + 删除 */
.oe-list { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.oe-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.oe-row:last-child { border-bottom: none; }
.oe-row.is-del { opacity: 0.45; }
.oe-row.is-del .oe-name b { text-decoration: line-through; }
.oe-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.oe-name b { font-size: 13.5px; }
.oe-sub { flex: none; min-width: 74px; text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-2); }
.oe-x { flex: none; color: var(--text-3); font-size: 12px; }
.oe-qty { width: 84px; text-align: center; padding: 6px 8px; font-variant-numeric: tabular-nums; }
.oe-del { flex: none; }
.oe-total { margin-top: 10px; text-align: right; font-size: 13.5px; }
.oe-total b { color: #e03131; font-size: 16px; }
/* 修改订单弹窗：加货品搜索 + 新增行标记 */
.oe-addrow { position: relative; margin-bottom: 8px; }
.oe-addrow .row { position: relative; }
.oe-addrow > input { width: 100%; }
#oe-search-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); z-index: 30; max-height: 240px; overflow: auto; }
.oe-hit { padding: 8px 12px; display: flex; align-items: baseline; gap: 8px; cursor: pointer; border-bottom: 1px solid var(--line); font-size: 13px; }
.oe-hit:last-child { border-bottom: none; }
.oe-hit:hover { background: var(--green-bg); }
.oe-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 9px; font-size: 10.5px; line-height: 17px; background: var(--green-bg); color: var(--green-d); font-weight: 600; }
.oe-row.is-new { background: #f6fcf7; }
/* 商品库面板：分类筛选 + 可售商品列表，点行加入 */
#oe-lib { margin-top: 2px; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.oe-lib-cats { display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.oe-lib-cats .chip { white-space: nowrap; }
.oe-lib-list { max-height: 32vh; overflow: auto; }
.oe-lib-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); cursor: pointer; }
.oe-lib-item:last-child { border-bottom: none; }
.oe-lib-item:hover { background: var(--green-bg); }
.oe-lib-item.added { opacity: 0.55; }
.oe-lib-item.added:hover { background: transparent; cursor: default; }
.oe-lib-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.oe-lib-name b { font-size: 13px; }
.oe-lib-price { flex: none; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--text-2); }
.oe-lib-add { flex: none; min-width: 56px; text-align: right; font-size: 12px; color: var(--green-d); font-weight: 600; }

/* ---------- 移动端 ---------- */
.tabbar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line); z-index: 60; padding: 5px 0 env(safe-area-inset-bottom); }
.tabbar-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--text-3); cursor: pointer; }
.tabbar-item.active { color: var(--green-d); font-weight: 600; }
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main { margin-left: 0; }
  .content { padding: 12px; padding-bottom: 90px; }
  .tabbar { display: flex; }
  .cart-bar { left: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .stat .num { font-size: 19px; }
  .hide-mobile { display: none !important; }
  /* 窄屏顶栏：标题与套餐徽章不许被压成竖排 */
  .topbar { gap: 8px; padding: 0 10px; }
  .topbar-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-right { gap: 6px; min-width: 0; }
  .tenant-pill { display: none; }
  .topbar .plan-pill, .topbar .wh-pill { white-space: nowrap; }
}

/* ---------- 批量添加商品（文字/表格/图片） ---------- */
.bi-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.bi-tab { padding: 8px 16px; border: 0; background: none; font-size: 14px; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; }
.bi-tab.active { color: var(--green-d); font-weight: 600; border-bottom-color: var(--green); }
.bi-pane > p { margin: 0 0 8px; }
.bi-drop { border: 2px dashed var(--line); border-radius: 12px; padding: 26px 16px; text-align: center; color: var(--text-2); cursor: pointer; transition: .15s; }
.bi-drop:hover, .bi-drop-over { border-color: var(--green); background: #f6fef8; }
.bi-progress { height: 8px; background: #f0f1f3; border-radius: 4px; overflow: hidden; margin-top: 10px; }
.bi-progress-bar { height: 100%; width: 0; background: var(--green); transition: width .2s; }
.bi-thumb { max-width: 220px; max-height: 160px; border-radius: 8px; border: 1px solid var(--line); display: block; margin: 8px 0; }
.bi-preview th, .bi-preview td { padding: 4px 6px; }
.bi-preview { min-width: 822px; table-layout: fixed; }
.bi-preview input { padding: 5px 7px; font-size: 13px; width: 100%; box-sizing: border-box; }
.bi-preview .num input { text-align: right; }
.bi-preview th:nth-child(1), .bi-preview td:nth-child(1) { width: 46px; }
.bi-preview th:nth-child(2), .bi-preview td:nth-child(2) { width: 84px; }
.bi-preview th:nth-child(3), .bi-preview td:nth-child(3) { width: 118px; }
.bi-preview th:nth-child(4), .bi-preview td:nth-child(4) { width: 104px; }
.bi-preview th:nth-child(5), .bi-preview td:nth-child(5) { width: 68px; }
.bi-preview th:nth-child(6), .bi-preview td:nth-child(6),
.bi-preview th:nth-child(7), .bi-preview td:nth-child(7),
.bi-preview th:nth-child(8), .bi-preview td:nth-child(8) { width: 72px; }
.bi-preview th:nth-child(9), .bi-preview td:nth-child(9) { width: 84px; }
.bi-preview th:nth-child(10), .bi-preview td:nth-child(10) { width: 56px; }
.bi-preview th:nth-child(11), .bi-preview td:nth-child(11) { width: 46px; }
.bi-preview .bi-st { white-space: nowrap; font-size: 12px; }
.bi-preview td .bi-nil { display: block; font-size: 11px; color: var(--text-2); text-align: right; margin-top: 1px; }
.bi-preview tr.bi-row-bad td { background: #fff6f6; }
.bi-mode { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: #f7f8fa; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.bi-mode label { display: flex; align-items: center; gap: 7px; cursor: pointer; flex-wrap: wrap; }
.bi-mode input { width: 15px; height: 15px; }
.qi-up { color: #0b6bcb; font-weight: 600; }
.bi-export { font-size: 12px; color: var(--red); margin-left: 6px; }

/* ---------- 订单打印菜单 ---------- */
.print-menu { display: flex; flex-direction: column; gap: 8px; }
.print-menu-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font-size: 14px; text-align: left; }
.print-menu-item:hover { border-color: var(--green); background: #f6fef8; }

/* ---------- 套餐体系（徽章 / 提示条 / 套餐页 / 租户页） ---------- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 768px) { .grid-2 { grid-template-columns: 1fr; } }
.small { font-size: 12px; }
.green-text { color: var(--green-d); }
.red-text { color: var(--red); }
.amber-text { color: var(--orange); }

.plan-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 20px; }
.plan-pill.tone-gray { background: #f2f3f5; color: #4e5969; }
.plan-pill.tone-blue { background: #e8f3ff; color: #165dff; }
.plan-pill.tone-green { background: var(--green-bg); color: var(--green-d); }
.plan-pill.tone-purple { background: #f5e8ff; color: #722ed1; }
.plan-pill.tone-teal { background: #e6fffb; color: #08979c; }
.plan-pill.warn { box-shadow: 0 0 0 1px var(--orange) inset; }
.topbar-right .plan-pill { cursor: pointer; }

.sidebar-plan { margin: 10px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.10); }
.sp-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sp-link { font-size: 12px; color: #6ee7a0; }
.sp-sub { margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.58); }
.sp-sub b { color: #fff; }
.badge-red { background: #ffece8; color: #cb2634; border-radius: 4px; padding: 1px 6px; font-size: 11px; }

#plan-banner:empty { display: none; }
/* 提示条：文字作为整体一块（不可被 flex 拆散），右侧按钮固定，逐行左对齐 */
.plan-banner { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 10px 18px 0; padding: 9px 14px; border-radius: 8px; font-size: 13px; line-height: 1.55;
  background: #f2f7ff; color: #1d2129; border: 1px solid #dce8ff; }
.plan-banner::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; }
.plan-banner .pb-text { flex: 1 1 240px; min-width: 0; }
.plan-banner .pb-text b { font-weight: 700; }
.plan-banner.amber { background: #fff7e8; border-color: #ffe4ba; color: #8a5300; }
.plan-banner.red { background: #ffece8; border-color: #ffd2c8; color: #a8201a; }
.plan-banner .pb-btn { flex: none; margin-left: auto; padding: 3px 12px; border-radius: 6px; background: rgba(255,255,255,.85); border: 1px solid currentColor; color: inherit; font-size: 12px; white-space: nowrap; }
@media (max-width: 768px) { .plan-banner { margin: 8px 12px 0; } }

/* 客户订单审批：子账号提示条 / 订单审批信息 */
.notice { display: block; padding: 9px 14px; border-radius: 8px; line-height: 1.55;
  font-size: 13px; background: #fff7e8; border: 1px solid #ffe4ba; color: #8a5300; margin-bottom: 12px; }
.approval-banner { padding: 11px 14px; border-radius: 10px; background: #fff7e8; border: 1px solid #ffe4ba;
  color: #8a5300; margin-bottom: 12px; line-height: 1.7; }
.approval-banner.done { background: #f6ffed; border-color: #c9edb0; color: #257a1d; }
@media (max-width: 760px) { .approval-banner { font-size: 12px; } }

.upgrade-block { max-width: 460px; margin: 60px auto; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 32px 24px; }
.upgrade-block h3 { margin: 3px 0 8px; }
.upgrade-icon { width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; background: var(--green-bg); color: var(--green-d); display: flex; align-items: center; justify-content: center; }
.upgrade-icon svg { width: 22px; height: 22px; }

.plan-hero { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(128deg, #1e3328 0%, #2a5c3d 58%, #37945e 100%);
  border-radius: 14px; padding: 22px 28px; margin-bottom: 12px; position: relative; overflow: hidden;
  box-shadow: 0 8px 22px rgba(23, 64, 40, .16); }
.plan-hero::after { content: ''; position: absolute; right: -60px; top: -80px; width: 220px; height: 220px;
  border-radius: 50%; background: rgba(255, 255, 255, .06); pointer-events: none; }
.plan-hero::before { content: ''; position: absolute; right: 90px; bottom: -110px; width: 180px; height: 180px;
  border-radius: 50%; background: rgba(255, 255, 255, .05); pointer-events: none; }
.ph-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plan-hero h2 { margin: 8px 0 3px; font-size: 24px; color: #fff; letter-spacing: .5px; }
.plan-hero p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, .75); }
.plan-hero .plan-pill { background: rgba(255, 255, 255, .16); color: #fff; }
.plan-hero .plan-pill.tone-green { background: rgba(255, 255, 255, .16); color: #fff; }
.ph-badge { font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; }
.ph-badge.urgent { background: rgba(255, 125, 0, .85); }
.ph-badge.stopped { background: rgba(245, 63, 63, .85); }
.ph-right { text-align: right; position: relative; z-index: 1; }
.ph-num { font-size: 44px; font-weight: 700; color: #fff; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ph-num small { font-size: 14px; font-weight: 400; color: rgba(255, 255, 255, .7); margin-left: 5px; }
.ph-sub { font-size: 12px; color: rgba(255, 255, 255, .7); margin-top: 4px; }

/* 套餐页：配额/功能两块各自高度，不被拉伸出大片空白 */
.plan-grid { align-items: start; }
@media (max-width: 768px) { .plan-grid { grid-template-columns: 1fr; } }

.quota-list { display: flex; flex-direction: column; gap: 12px; }
.quota-list .q-item { background: #f8faf9; border: 1px solid #eef2ef; border-radius: 10px; padding: 10px 13px 9px; }
.quota-list .q-item.full { background: #fff8f7; border-color: #ffdcd6; }
.q-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; color: var(--text); font-weight: 600; }
.q-head .q-val { display: inline-flex; align-items: baseline; gap: 2px; }
.q-head b { color: var(--green-d); font-size: 15px; font-variant-numeric: tabular-nums; }
.q-item.full .q-head b { color: var(--red); }
.q-limit { font-size: 12px; font-weight: 400; color: var(--text-3); }
.q-track { height: 8px; background: #e8ebe9; border-radius: 4px; overflow: hidden; margin-top: 7px; }
.q-bar { height: 100%; background: linear-gradient(90deg, #22c55e, #00b42a); border-radius: 4px; transition: width .3s; }
.q-bar.near { background: linear-gradient(90deg, #ffb84d, var(--orange)); }
.q-bar.full { background: linear-gradient(90deg, #ff7d78, var(--red)); }
/* 不限量：条纹浅色轨，避免"满格绿条"被误读成已达上限 */
.q-bar.inf { background: repeating-linear-gradient(45deg, #cdecd9 0 6px, #e9f8f0 6px 12px); }
.q-note { font-size: 11px; color: var(--text-3); margin-top: 5px; }

.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 10px; }
@media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; } }
.feat-item { display: flex; align-items: flex-start; gap: 8px; padding: 7px 10px; font-size: 13px; border-radius: 8px; background: #f8faf9; border: 1px solid #eef2ef; }
.feat-item.off { background: #fafafa; border-color: #f0f0f0; }
.fi-mark { flex: 0 0 16px; text-align: center; font-weight: 700; line-height: 1.4; }
.feat-item.on .fi-mark { color: var(--green); }
.feat-item.off .fi-mark { color: #c9cdd4; }
.feat-item.off b, .feat-item.off small { color: var(--text-3); }
.fi-body { display: flex; flex-direction: column; gap: 1px; }
.fi-body b { font-weight: 600; }
.fi-body small { color: var(--text-3); font-size: 11px; }

.plan-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 980px) { .plan-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .plan-cards { grid-template-columns: 1fr; } }
.plan-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.plan-card.current { border-color: var(--green); box-shadow: 0 2px 12px rgba(0,180,42,.12); background: #fbfefc; }
.plan-card.lower { opacity: .72; }
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pc-price { font-size: 12px; color: var(--text-2); font-weight: 600; }
.pc-tag { margin: 0; font-size: 12px; color: var(--text-3); min-height: 32px; }
.pc-limits { list-style: none; margin: 0; padding: 0; font-size: 12px; color: var(--text-2); display: flex; flex-direction: column; gap: 3px; }
.pc-limits b { color: var(--text); }
.pc-feat { font-size: 12px; color: var(--green-d); font-weight: 600; }
.plan-card .btn { margin-top: auto; }
.plan-card .btn:disabled { opacity: .55; cursor: default; }

/* ---------- 到期自动停止 ---------- */
.auto-stop { border-left: 3px solid var(--green); }
.auto-stop.urgent { border-left-color: var(--orange); background: #fffdf7; }
.auto-stop.stopped { border-left-color: var(--red); background: #fffafa; }
.as-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.as-title { font-size: 15px; font-weight: 700; color: var(--text); }
.as-badge { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--green-bg); color: var(--green-d); }
.as-badge.urgent { background: #fff5e6; color: #8a5300; }
.as-badge.stopped { background: #ffece8; color: #cb2634; }
.as-badge.gray { background: #f2f3f5; color: #4e5969; }
.as-when { margin-left: auto; font-size: 12px; color: var(--text-3); }
.as-when b { color: var(--text); }
.as-body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin-top: 12px; }
@media (max-width: 680px) { .as-body { grid-template-columns: 1fr; } }
.as-col-t { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; }
.as-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.as-chip { font-size: 12px; padding: 2px 9px; border-radius: 5px; border: 1px solid transparent; line-height: 19px; }
.as-chip.stop { background: #fff2f0; color: #cb2634; border-color: #ffd8d2; }
.as-chip.keep { background: #f2fbf5; color: var(--green-d); border-color: #cfeddb; }
.as-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.as-foot .as-note { flex: 1 1 260px; font-size: 12px; color: var(--text-3); line-height: 1.6; }

/* ---------- 套餐对比表 ---------- */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp-table { width: 100%; min-width: 660px; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.cmp-table th, .cmp-table td { padding: 8px 10px; text-align: center; border-bottom: 1px solid var(--line); }
.cmp-table thead th { background: #fafbfc; border-bottom: 1px solid var(--line); vertical-align: bottom; }
.cmp-table .cmp-dim { text-align: left; position: sticky; left: 0; z-index: 2; background: #fff; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.cmp-table thead .cmp-dim { background: #fafbfc; vertical-align: middle; }
.cmp-table .is-cur { background: #f2fbf6; }
.cmp-table thead th.is-cur { background: #e3f7ec; box-shadow: inset 0 3px 0 var(--green); }
.cmp-table .is-cur.cmp-dim { background: #f2fbf6; }
.cmp-plan-name { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cmp-price { font-size: 12px; font-weight: 700; color: var(--text); }
.cmp-price small { font-weight: 400; color: var(--text-3); }
.cmp-cur-tag { display: inline-block; font-size: 11px; font-weight: 600; color: var(--green-d); background: var(--green-bg); border-radius: 999px; padding: 2px 10px; }
.cmp-buy .btn { width: 100%; }
.cmp-th-tag { font-size: 11px; color: var(--text-3); }
.cmp-sec td { background: #f7f8fa; font-size: 12px; font-weight: 700; color: var(--text-2); text-align: left; padding: 6px 10px; letter-spacing: .5px; }
.cmp-sec td.cmp-dim { background: #f7f8fa; }
.cmp-sub td { background: #fcfcfd; font-size: 11px; color: var(--text-3); text-align: left; padding: 4px 10px; }
.cmp-sub td.cmp-dim { background: #fcfcfd; }
.cmp-y { color: var(--green); font-weight: 700; }
.cmp-n { color: #c9cdd4; }
.cmp-y.gain { position: relative; }
.cmp-y.gain::after { content: '新'; font-size: 9px; font-weight: 600; color: #fff; background: var(--orange); border-radius: 3px; padding: 0 3px; margin-left: 3px; vertical-align: 1px; }
.cmp-num { color: var(--text); font-weight: 600; }
.cmp-num small { font-weight: 400; color: var(--text-3); margin-left: 2px; }
.cmp-note { font-size: 12px; color: var(--text-3); }
.cmp-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); margin-top: 8px; }
.cmp-hint { display: none; font-size: 12px; color: var(--text-3); text-align: center; margin-top: 8px; }
@media (max-width: 768px) { .cmp-hint { display: block; } }

.mini-quota { display: inline-block; background: #f2f3f5; color: var(--text-2); border-radius: 4px; padding: 1px 6px; font-size: 11px; margin: 1px 2px 1px 0; }
.mini-quota.full { background: #ffece8; color: #cb2634; }

.lock-tag { background: #f2f3f5; color: #86909c; border-radius: 4px; padding: 0 5px; font-size: 11px; margin-left: 2px; font-weight: 400; }
.bi-drop.locked { background: #fafafa; color: #c9cdd4; cursor: not-allowed; border-color: #e5e6eb; }
.bi-drop.locked:hover { background: #fafafa; border-color: #e5e6eb; }

/* ---------- 分仓 ---------- */
.wh-pill { display: inline-flex; align-items: center; gap: 5px; background: #eef4ff; color: #165dff; border-radius: 999px; padding: 3px 11px; font-size: 12px; font-weight: 600; }
.wh-pill svg { width: 13px; height: 13px; }
.wh-switch { width: auto; padding: 4px 8px; font-size: 12px; font-weight: 600; color: #165dff; background: #eef4ff; border-color: #cfe0ff; }
.wh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.wh-card { border: 1px solid var(--line); border-radius: 10px; padding: 14px; background: #fff; }
.wh-card.current { border-color: #b7d3ff; box-shadow: 0 0 0 2px #eef4ff inset; }
.wh-name { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.wh-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; text-align: center; }
.wh-stats > div { background: #f7f8fa; border-radius: 8px; padding: 7px 4px; }
.wh-stats b { display: block; font-size: 15px; }
.wh-stats span { font-size: 11px; color: var(--text-3); }
@media (max-width: 720px) {
  .wh-pill { display: none; }
  .wh-switch { max-width: 120px; }
  .wh-grid { grid-template-columns: 1fr; }
}

/* ---------- 客户报价（一客一价） ---------- */
.qb-filter-card .qb-title { font-size: 17px; font-weight: 700; margin-bottom: 14px; }
.qb-filters { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.qb-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; }
.qb-field label { font-size: 12px; color: var(--text-3); }
.qb-field select, .qb-field input { height: 34px; }
.qb-group { font-size: 12px; color: var(--text-2); padding-bottom: 9px; flex: 0 1 auto; }
.qb-group b { color: var(--text); }
.qb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 12px; }
.qb-name { margin: 0 0 5px; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.qb-sub { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qb-wh { display: inline; white-space: nowrap; }
.qb-wh .wh-pill { display: inline-flex; padding: 1px 8px; font-size: 11px; margin-right: 6px; }
.qb-hint { display: none; font-size: 12px; color: var(--text-3); margin: 0 0 8px; }
@media (max-width: 640px) { .qb-hint { display: block; } }
.qb-sum { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.qb-sum b { color: #165dff; font-size: 14px; }
.qb-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #f7f8fa; border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; }
.qb-sel { font-size: 12px; color: var(--text-2); }
.qb-sel b { color: #165dff; font-size: 14px; }
.qb-wrap { max-height: 62vh; overflow: auto; }
.qb-table { min-width: 700px; }
.qb-table td:nth-child(2) { white-space: nowrap; }
.qb-table th.qb-ck, .qb-table td.qb-ck { width: 34px; text-align: center; padding-left: 8px; padding-right: 0; }
.qb-table td.qb-ck input { width: 14px; height: 14px; cursor: pointer; }
.qb-price { width: 106px; height: 30px; text-align: right; padding: 2px 8px; font-size: 13px; }
.qb-price::placeholder { color: #c9cdd4; font-size: 12px; }
.qb-deal.up { color: #f53f3f; font-weight: 600; }   /* 高于分组价：红色提醒 */
.qb-deal.down { color: var(--text); font-weight: 600; } /* 低于分组价：正常深色，不喧宾夺主 */
.qb-own { font-weight: 600; color: #165dff; }
/* 可售品类：范围摘要 + 设置弹窗 */
.qb-scope { display: flex; align-items: center; gap: 8px; height: 34px; }
.qb-scope-txt { font-size: 13px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qb-scope-txt.is-all { background: #eef4ff; color: #165dff; }
.qb-scope-txt.is-limited { background: #fff4e8; color: #b25f00; }
.qb-scope .btn { flex: 0 0 auto; }
.qb-empty { padding: 26px 0; }
.cs-switch { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.cs-switch input { width: 16px; height: 16px; cursor: pointer; }
.cs-search { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.cs-search input { flex: 1 1 auto; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.cs-sum { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.cs-sum b { color: var(--green-d); font-size: 13px; }
.cs-groups { max-height: 340px; overflow: auto; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fafbfc; transition: opacity .15s; }
.cs-groups.is-off { opacity: .45; pointer-events: none; }
.cs-group { padding: 6px 0; border-bottom: 1px dashed #ebeef2; }
.cs-group:last-child { border-bottom: 0; }
.cs-ghead { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 3px 4px; border-radius: 6px; cursor: pointer; }
.cs-ghead:hover { background: #fff; }
.cs-ghead input { width: 15px; height: 15px; cursor: pointer; flex: 0 0 auto; }
.cs-ghead .cs-gname { font-size: 13px; }
.cs-ghead .cs-gcount { margin-left: auto; }
.cs-group.cs-cat-on > .cs-ghead .cs-gname::after { content: '整类'; margin-left: 6px; font-size: 10px; font-weight: 400;
  color: var(--green-d); background: var(--green-bg); border-radius: 999px; padding: 1px 6px; vertical-align: 1px; }
.cs-group.cs-cat-on > .cs-goods .cs-item input { opacity: .55; }
.cs-goods { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 8px; padding: 4px 0 2px 22px; }
.cs-item { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 6px; border-radius: 6px; cursor: pointer; }
.cs-item:hover { background: #fff; }
.cs-item input { width: 14px; height: 14px; cursor: pointer; flex: 0 0 auto; }
.cs-item input:disabled { cursor: default; }
.cs-item .cs-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-tools { margin-top: 10px; gap: 8px; flex-wrap: wrap; }
/* 报价表上传 */
.qi-tpl { display: inline-block; margin-bottom: 12px; font-size: 13px; color: var(--green-d); text-decoration: none; border-bottom: 1px dashed currentColor; }
.qi-drop { margin-top: 2px; padding: 20px 14px; }
.qi-sum { font-size: 13px; margin-bottom: 8px; color: var(--text-1); }
.qi-wrap { max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.qi-table th, .qi-table td { padding: 5px 8px; font-size: 13px; }
.qi-table thead th { position: sticky; top: 0; background: #f7f8fa; z-index: 1; }
.qi-ok { color: var(--green-d); font-weight: 600; }
.qi-warn { color: #b25f00; font-weight: 600; }
.qi-bad { color: var(--red); font-weight: 600; }
.qi-muted { color: var(--text-2); }
.qi-open { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; cursor: pointer; }
.qi-open input { width: 15px; height: 15px; }
@media (max-width: 720px) {
  .cs-groups { max-height: 40vh; }
  .cs-goods { grid-template-columns: 1fr; padding-left: 8px; }
  .qb-scope { height: auto; }
}
@media (max-width: 720px) {
  .qb-field { flex: 1 1 100%; min-width: 100% !important; }
  .qb-group { padding-bottom: 0; }
  .qb-head { flex-direction: column; }
  .qb-sum { white-space: normal; }
  .qb-wrap { max-height: none; }
  .qb-toolbar { gap: 8px; padding: 10px; }
  .qb-toolbar > .muted.small { flex: 1 1 100%; }
  .qb-table { min-width: 640px; }
  .qb-price { width: 92px; }
}

/* 开通租户：初始数据勾选项 */
.t-demo { display: flex; align-items: flex-start; gap: 6px; font-size: 12px; color: var(--text-2); line-height: 1.6; font-weight: 400; }
.t-demo input { width: 14px; height: 14px; margin-top: 2px; flex: 0 0 auto; }

/* 可输入下拉（商品规格 / 单位）：右侧箭头弱化，提示「可选可填」 */
input[list] { padding-right: 26px; }
input[list]::-webkit-calendar-picker-indicator { opacity: .5; cursor: pointer; }
input[list]:hover::-webkit-calendar-picker-indicator { opacity: .85; }

/* 组合下拉：输入框 + 箭头按钮 + 预设列表（下拉选，也可直接手填自定义） */
.combo { position: relative; }
.combo .combo-input { width: 100%; padding-right: 30px; }
.combo-btn { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 28px; display: flex; align-items: center;
  justify-content: center; border: 0; background: transparent; color: var(--text-3); cursor: pointer; border-radius: 0 8px 8px 0; padding: 0; }
.combo-btn:hover { color: var(--green-d); background: #f7f8fa; }
.combo.open .combo-btn svg { transform: rotate(180deg); }
.combo-btn svg { transition: transform .15s; }
.combo-list { position: absolute; z-index: 70; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px;
  list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(29, 33, 41, .12); max-height: 220px; overflow: auto; }
.combo-list li { padding: 6px 9px; font-size: 13px; color: var(--text); border-radius: 6px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-list li:hover { background: #f2f3f5; }
.combo-list li[hidden] { display: none; }
.combo-hint { font-size: 11px; color: var(--text-3); margin-top: 3px; }

/* 套餐 → 到期日自动计算提示条 */
.expire-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px;
  background: #f5f7fa; border: 1px solid #ebedf0; border-radius: 8px; padding: 6px 10px;
  font-size: 12px; color: var(--text-2); line-height: 1.5; }
.expire-bar .btn { flex: 0 0 auto; }
.expire-bar span { min-width: 0; }
.expire-bar span.on { color: #165dff; }
.expire-bar span.on::before { content: '✓ '; }
@media (max-width: 720px) {
  .expire-bar { flex-wrap: wrap; }
}

/* 批量添加：上传表格 */
.bi-tabs { flex-wrap: wrap; }
.bi-drop-main { margin-top: 6px; font-weight: 600; color: var(--text-1); }
.bi-drop #bi-file-status, #bi-file-status { margin-top: 10px; }
.bi-pane a, #bi-tpl { color: var(--green-d); text-decoration: none; border-bottom: 1px dashed currentColor; cursor: pointer; }
@media (max-width: 480px) {
  .bi-tabs { gap: 4px; }
  .bi-tab { padding: 8px 10px; font-size: 13px; }
  .bi-drop { padding: 18px 12px; }
}

/* 供应商列表：固定列宽，避免「关联商品/状态/操作」被挤到最右留一大片空白
   （只在桌面生效，≤820px 由 mobile.css 接管成卡片） */
.sup-table .sup-count { color: var(--green); font-weight: 600; font-variant-numeric: tabular-nums; }
.sup-table .sup-count:hover { text-decoration: underline; }
.sup-table .sup-count.muted { color: var(--text-3); font-weight: 400; }
@media (min-width: 821px) {
  .sup-table { table-layout: fixed; }
  .sup-table .col-name { width: 27%; }
  .sup-table .col-contact { width: 14%; }
  .sup-table .col-phone { width: 18%; }
  .sup-table .col-count { width: 11%; }
  .sup-table .col-status { width: 11%; }
  .sup-table .col-ops { width: 19%; }
  .sup-table td, .sup-table th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* 商品编码（等宽字体，弱化显示） */
.p-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; color: var(--text-2); white-space: nowrap; letter-spacing: .2px; }

/* 表头与数值右对齐（否则表头左、数字右，整列看着是歪的） */
table.table th.num { text-align: right; }

/* 商品中心表格：固定列宽 + 单行，保证各列文字左边缘严格对齐 */
.products-table { table-layout: fixed; min-width: 990px; }
.products-table th, .products-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.products-table .col-code { width: 9.5%; }
.products-table .col-spec { width: 8.6%; }
.products-table .col-cat { width: 8.6%; }
.products-table .col-unit { width: 4.8%; }
.products-table .col-money { width: 7.6%; }
.products-table .col-cost { width: 7%; }
.products-table .col-stock { width: 11%; }
.products-table .col-status { width: 7.8%; }
.products-table .col-ops { width: 21%; }
.products-table .p-spec { font-size: 12px; color: var(--text-3); }
.products-table .p-remark { font-size: 11px; color: var(--text-3); line-height: 1.5; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.products-table .col-ops .btn-sm { padding: 4px 9px; }
.products-table .col-ops .btn-sm + .btn-sm { margin-left: 4px; }

/* 筛选行控件同高，避免输入框/下拉/按钮上下错位 */
.filter-row { align-items: center; }
.filter-row > input, .filter-row > select { height: 34px; padding: 0 10px; line-height: 32px; }
.filter-row > .btn { height: 34px; padding: 0 14px; }
.filter-row > .btn#p-search { margin-left: 2px; }

/* ---------- 客户管理（对齐参考后台：搜索 / 筛选 / 列设置 / 主账号 / 账号模式 / 订单数） ---------- */
.cust-card { position: relative; padding: 0; }
.ct-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; }
.ct-bar-l { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-3); white-space: nowrap; }
.ct-sum b { color: var(--text); font-weight: 600; }
.ct-sep { color: #c9cdd4; }
.ct-bar-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ct-search { position: relative; display: flex; align-items: center; }
.ct-search svg { position: absolute; left: 10px; color: var(--text-3); pointer-events: none; }
.ct-search input { width: 268px; height: 34px; padding: 0 12px 0 32px; font-size: 13px; border-radius: 8px; }
.ct-ic { position: relative; width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #e5e6eb; background: #fff; border-radius: 8px; color: var(--text-2); cursor: pointer; }
.ct-ic:hover { border-color: #c9cdd4; color: var(--text); }
.ct-dot { position: absolute; top: 5px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.ct-dot[hidden] { display: none; }

.ct-pop { position: absolute; z-index: 60; right: 18px; top: 58px; width: 252px; padding: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(29, 33, 41, .14); }
.ct-pop[hidden] { display: none; }
.ct-pop-t { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.ct-pop-hint { font-size: 11px; color: var(--text-3); line-height: 1.55; margin: 0 0 8px; }
.ct-fr { margin-bottom: 10px; }
.ct-fr label { display: block; font-size: 12px; color: var(--text-3); margin-bottom: 4px; }
.ct-fr select { height: 32px; padding: 0 8px; font-size: 13px; }
.ct-pop-f { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px; padding-top: 9px; border-top: 1px solid var(--line); }
.ct-ckrow { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 0; cursor: pointer; color: var(--text-2); }
.ct-ckrow input { width: 15px; height: 15px; accent-color: var(--green); cursor: pointer; }
.ct-pop-note { font-size: 11px; color: var(--text-3); margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }

.ct-batch { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 18px 10px; padding: 8px 12px;
  background: var(--green-bg); border: 1px solid #cfeddb; border-radius: 8px; font-size: 13px; color: var(--green-d); }
.ct-batch[hidden] { display: none; }
.ct-batch-t b { font-size: 14px; }

.cust-table th { padding: 10px; vertical-align: middle; }
.cust-table td { height: 52px; }
.cust-table th:first-child, .cust-table td:first-child { padding-left: 18px; }
.cust-table th:last-child, .cust-table td:last-child { padding-right: 18px; }
.cust-table .ct-ck { width: 38px; padding-right: 0; }
.cust-table .ct-ck input { width: 15px; height: 15px; accent-color: var(--green); cursor: pointer; }
.cust-table td.ct-c-name { min-width: 156px; }
.cust-table td.ct-c-contact { min-width: 92px; color: var(--text-2); }
.cust-table td.ct-c-phone { min-width: 104px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cust-table td.ct-c-addr { min-width: 150px; max-width: 260px; white-space: normal; line-height: 1.4; color: var(--text-2); }
.cust-table .ct-c-master { min-width: 108px; }
.cust-table .ct-c-mode { min-width: 178px; }
.cust-table .ct-c-orders { width: 82px; text-align: center; font-variant-numeric: tabular-nums; }
.cust-table th.ct-c-orders { text-align: center; }
.cust-table .ct-c-ops { width: 112px; white-space: nowrap; }

.cust-table th.ct-sortable { cursor: pointer; user-select: none; }
.cust-table th.ct-sortable:hover { color: var(--text-2); }
.ct-sort { display: inline-flex; align-items: center; margin-left: 5px; color: #b4bac3; vertical-align: -2px; }
.ct-sort svg { width: 13px; height: 13px; stroke-width: 2; }
.ct-sort.on { color: var(--green-d); font-size: 11px; }

/* 主账号：浅绿胶囊；账号模式：蓝字，需审批转橙 */
.acc-pill { display: inline-block; max-width: 148px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--green-bg); color: var(--green-d); border-radius: 999px; padding: 2px 10px; font-size: 12px; line-height: 18px; vertical-align: bottom; }
.acc-mode { font-size: 13px; color: var(--blue); white-space: nowrap; }
.acc-mode.warn { color: var(--orange); }

/* 行内文字操作：编辑（绿）/ 删除（红） */
.lk { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--green-d); cursor: pointer; }
.lk:hover { text-decoration: underline; }
.lk.danger { color: var(--red); }
.lk-sep { color: #c9cdd4; font-style: normal; margin: 0 7px; font-size: 12px; }

.ct-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px 14px; border-top: 1px solid var(--line); }
.ct-info { font-size: 13px; color: var(--text-3); }
.ct-pager { display: flex; align-items: center; gap: 8px; }
.ct-pg { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ct-size { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); white-space: nowrap; }
.ct-size select { width: auto; height: 30px; padding: 0 6px; font-size: 13px; }

@media (max-width: 768px) {
  .ct-bar { padding: 12px; gap: 8px; }
  .ct-bar-l { width: 100%; }
  .ct-bar-r { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .ct-search { flex: 1 1 100%; order: -1; }
  .ct-search input { width: 100%; }
  .ct-bar-r .btn-primary { margin-left: auto; }
  .ct-pop { left: 12px; right: 12px; width: auto; top: 96px; }
  .ct-batch { margin: 0 12px 10px; }
  .ct-foot { padding: 10px 12px; }
  .ct-pager { width: 100%; justify-content: space-between; }
  .cust-table th:first-child, .cust-table td:first-child { padding-left: 12px; }
  .cust-table th:last-child, .cust-table td:last-child { padding-right: 12px; }
}

/* ---------- 客户弹窗：登录账号（主账号 / 子账号 / 财务账号） ---------- */
.acc-sec { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.acc-sec-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.acc-sec-t { font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.acc-sec-t .muted { font-weight: 400; }
.acc-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); cursor: pointer; white-space: nowrap; }
.acc-switch input { width: 15px; height: 15px; accent-color: var(--green); cursor: pointer; }
.acc-switch input:disabled + span { color: var(--text-3); }
.acc-note { font-size: 12px; color: var(--text-3); line-height: 1.6; margin: 8px 0 0; }
.acc-appr { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }

.acc-sub { position: relative; margin: 10px 0 0; padding: 10px 34px 0 12px; background: #fafbfc; border: 1px solid var(--line); border-radius: 10px; }
.acc-sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.acc-sub .form-row { margin-bottom: 10px; }
.acc-x { position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; border: 0; background: none;
  font-size: 16px; line-height: 1; color: var(--text-3); cursor: pointer; border-radius: 6px; }
.acc-x:hover { background: #f2f3f5; color: var(--red); }
.acc-add { margin-top: 10px; }

.acc-new { margin-bottom: 10px; padding: 12px 12px 10px; background: #fafbfc; border: 1px solid var(--line); border-radius: 10px; }
.acc-new[hidden] { display: none; }
.acc-new-f { display: flex; justify-content: flex-end; gap: 8px; }

/* 批量添加账号：一行一个账号 */
.an-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.an-head b { font-size: 13px; }
.an-head .btn { margin-left: auto; }
.an-row { position: relative; margin: 0 0 8px; padding: 10px 34px 0 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.an-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px; }
.an-row .form-row { margin-bottom: 10px; }
.an-row .form-row label { font-size: 12px; }

.acc-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: #fff; margin-bottom: 8px; }
.acc-item.off { background: #fafbfc; }
.acc-item.master { border-left: 3px solid var(--green); padding-left: 10px; }
.acc-item.off .acc-l1 b { color: var(--text-3); }
.acc-main { min-width: 0; flex: 1; }
.acc-l1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.acc-l1 b { font-weight: 600; }
.acc-l2 { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.acc-ops { display: flex; align-items: center; white-space: nowrap; }
.acc-role { display: inline-block; font-size: 11px; line-height: 17px; padding: 0 8px; border-radius: 999px; }
.acc-role.master { background: var(--green-bg); color: var(--green-d); }
.acc-role.sub { background: #fff4e8; color: #b45309; }
.acc-role.fin { background: #eaf2ff; color: var(--blue); }
.acc-role.off { background: #f2f3f5; color: var(--text-3); }
.acc-empty { font-size: 13px; color: var(--text-3); margin: 0; padding: 10px 0; }

@media (max-width: 768px) {
  .acc-sub-grid { grid-template-columns: 1fr; }
  .an-grid { grid-template-columns: 1fr 1fr; }
  .acc-sec-h { flex-wrap: wrap; }
  .acc-item { flex-wrap: wrap; gap: 8px; }
  .acc-ops { width: 100%; padding-top: 6px; border-top: 1px dashed var(--line); }
}
@media (max-width: 560px) {
  .an-grid { grid-template-columns: 1fr; }
}

/* ---------- 租户管理：编辑弹窗内的「管理账号」区块 ---------- */
.t-acc-block { margin-bottom: 16px; padding: 12px 14px 6px; background: #fafbfc; border: 1px solid var(--line); border-radius: 10px; }
.t-acc-block .acc-sec-h { margin-bottom: 8px; }
/* 客户登录账号：批量操作栏（勾选后出现） */
.tcust-batch { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 8px 10px; background: #eef4ff; border: 1px solid #d5e3ff; border-radius: 8px; }
.tcust-batch[hidden] { display: none; }
.tcust-batch .btn-sm { padding: 3px 8px; }
.tcust-batch .btn-danger { background: var(--red, #e5484d); color: #fff; border-color: var(--red, #e5484d); }
.t-acc-table th { padding: 6px 8px; }
.t-acc-table td { padding: 7px 8px; font-size: 13px; }
.t-acc-table .btn-sm { padding: 3px 8px; }
.t-acc-table .btn-sm + .btn-sm { margin-left: 4px; }
/* 删除租户确认框 */
.del-box { padding: 12px 14px; background: #fff5f5; border: 1px solid #ffe0e0; border-radius: 10px; }
.del-title { font-weight: 600; color: var(--red); margin-bottom: 6px; }
/* 租户列表操作列：4 个按钮要在 203px 内排成一行 */
.t-ops { white-space: nowrap; }
.t-ops .btn-sm { padding: 4px 8px; }
.t-ops .btn-sm + .btn-sm { margin-left: 4px; }

/* ---------- 租户管理：列表表格（列多，统一不折行 + 2×2 用量格） ---------- */
.tenant-table { font-size: 13px; table-layout: fixed; width: 100%; }
.tenant-table th { padding: 10px 9px; font-size: 12px; }
.tenant-table td { padding: 9px 9px; vertical-align: middle; }
.tenant-table tr:last-child td { border-bottom: 0; }
.tenant-table td.t-name { max-width: 240px; }
.t-title { display: block; font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-sub { margin-top: 3px; font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-plan, .t-exp, .t-status { white-space: nowrap; }
.t-exp-date { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-ops-h { text-align: right; }
.t-ops { text-align: right; padding-right: 14px !important; white-space: nowrap; }
.op-group { display: inline-flex; gap: 3px; }
.op-group .btn-sm { padding: 4px 7px; }
.tenant-table .plan-pill { white-space: nowrap; }

.q-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 4px; }
/* 租户管理页配额格（tq-* 前缀，避免与套餐页 .q-item 进度条冲突） */
.tq-item { display: flex; align-items: baseline; justify-content: space-between; gap: 3px; padding: 1px 4px; overflow: hidden; border-radius: 5px; background: #f7f8fa; font-size: 11px; color: var(--text-2); white-space: nowrap; }
.tq-item i { font-style: normal; color: var(--text-3); }
.tq-item b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.tq-item s { text-decoration: none; font-weight: 400; color: var(--text-3); }
.tq-item.full { background: #ffece8; }
.tq-item.full b { color: var(--red); }

/* ---------- 删除租户弹窗 ---------- */
.del-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 12.5px; color: var(--text-2); }
.del-stats b { color: var(--text); }
.del-tip { margin-top: 6px; font-size: 12px; color: var(--text-3); }
.del-tip.ok { color: var(--green-d); }
.del-tip.bad { color: var(--red); }
#del-name.bad { border-color: var(--red); }
@keyframes shake-x { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.shake { animation: shake-x .4s; }
.modal-foot { position: sticky; bottom: -20px; margin-bottom: 0; padding: 12px 0 4px; background: #fff; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
/* 租户表列多：改用固定列宽比例自适应容器宽（见文件末尾 v3.11 规则），不再横向滚动 */

/* ---------- 经营看板：近 7 日趋势（桌面柱状 / 手机条形，见 mobile.css） ---------- */
.dash-split { grid-template-columns: 1.6fr 1fr; }
.trend { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding: 6px 2px; }
.tr-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.tr-amt { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.tr-bar { display: block; width: 70%; max-width: 44px; height: calc(var(--v, 4) * 1%); min-height: 4px;
  background: linear-gradient(180deg, #00b42a, #009a29); border-radius: 6px 6px 3px 3px; }
.tr-day { font-size: 12px; color: var(--text-3); white-space: nowrap; }

/* ---------- 打印模板编辑器 ---------- */
.pt-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.pt-tab { background: none; border: 0; padding: 8px 16px; font-size: 14px; color: var(--text-2); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit; }
.pt-tab:hover { color: var(--green); }
.pt-tab.active { color: var(--green); border-bottom-color: var(--green); font-weight: 600; }
.pt-body { display: grid; grid-template-columns: 380px 1fr; gap: 20px; align-items: start; }
.pt-form .form-row { margin-bottom: 12px; }
.pt-form .form-row > label { display: block; margin-bottom: 5px; }
.pt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border: 1px solid var(--line); border-radius: 16px; font-size: 13px; cursor: pointer; background: #fff; user-select: none; color: var(--text-2); }
.pt-chip .pt-mv { display: inline-block; margin-left: 2px; padding: 0 5px; font-size: 11px; line-height: 16px; border-radius: 8px; background: rgba(0, 0, 0, .07); cursor: pointer; font-weight: 600; }
.pt-chip .pt-mv:hover { background: rgba(0, 0, 0, .14); }
.pt-chip .pt-mv[data-dis] { opacity: .3; cursor: default; }
.pt-chip input { margin: 0; cursor: pointer; }
.pt-chip[draggable="true"] { cursor: grab; }
.pt-chip[draggable="true"]:active { cursor: grabbing; }
.pt-chip.drag-src { opacity: .45; }
.pt-chip.drag-over { outline: 2px dashed var(--green-d, #2f9e44); outline-offset: 1px; }
.pt-chip.on { border-color: var(--green); background: var(--green-bg); color: var(--green-d); }
.pt-chip.fixed { opacity: .8; cursor: default; }
.pt-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); padding-bottom: 4px; }
/* 表头自定义行：一行一个「标签 + 内容」，可增删 */
.pt-hd-rows { display: flex; flex-direction: column; gap: 6px; }
.pt-hd-row { display: flex; gap: 6px; align-items: center; }
.pt-hd-row .pt-hd-l { width: 96px; flex: none; }
.pt-hd-row .pt-hd-t { flex: 1; min-width: 0; }
.pt-hd-row .btn-sm { flex: none; padding: 5px 9px; }
.pt-preview-h { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); margin-bottom: 8px; }
.pt-preview-h .btn { margin-left: auto; }
.pt-preview { position: relative; }
.pt-preview iframe { width: 100%; height: 640px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); display: block; }
/* 预览失败兜底提示：盖在 iframe 上看清原因（旧版后端 / 登录过期 / 空白） */
.pt-warn { position: absolute; left: 0; right: 0; bottom: 0; top: 34px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 18px 24px;
  border: 1px dashed #e6b8b8; border-radius: 10px; background: #fff8f6; color: #a33;
  font-size: 13px; line-height: 1.7; }
.pt-warn[hidden] { display: none; }
.pt-warn b { font-size: 14px; }
.pt-warn code { background: #f6e7e4; padding: 1px 5px; border-radius: 4px; font-size: 12px; }
@media (max-width: 900px) {
  .pt-body { grid-template-columns: 1fr; }
  .pt-preview iframe { height: 460px; }
  .pt-tabs { overflow-x: auto; }
  .pt-tab { white-space: nowrap; padding: 8px 12px; }
}

/* ---------- 商品中心：分类管理弹窗 ---------- */
.cat-add-row { display: flex; gap: 8px; margin-bottom: 12px; }
.cat-add-row input { flex: 1; min-width: 0; }
.cat-add-row .btn { white-space: nowrap; }

/* ---------- 系统设置：开关行（二级分类等） ---------- */
.sw-line { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: #fafbfc; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.sw-line input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.sw-track { position: relative; flex: none; width: 44px; height: 24px; margin-top: 1px; border-radius: 12px; background: #cbd5e1; transition: background .18s; }
.sw-dot { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: transform .18s; }
.sw-line input:checked + .sw-track { background: #2f7d32; }
.sw-line input:checked + .sw-track .sw-dot { transform: translateX(20px); }
.sw-line input:focus-visible + .sw-track { outline: 2px solid #2f7d32; outline-offset: 2px; }
.sw-text { display: flex; flex-direction: column; gap: 3px; }
.sw-text b { font-size: 14px; }
.sw-text .small { display: block; line-height: 1.5; }
/* 分类树形展示（二级分类） */
.cat-lv2 { padding-left: 22px; position: relative; }
.cat-lv2::before { content: "└"; position: absolute; left: 8px; color: #94a3b8; }
.cat-lv1-tag { display: inline-block; margin-left: 6px; padding: 0 5px; font-size: 11px; line-height: 16px; border-radius: 4px; background: #eef2f7; color: #64748b; }

/* ---------- 商品中心：批量修改（勾选列 / 批量条 / 弹窗表格） ---------- */
.products-table .ct-ck { width: 36px; padding-right: 0; }
.products-table .ct-ck input { width: 15px; height: 15px; accent-color: var(--green); cursor: pointer; }
.p-batch { margin: 0 0 10px; }
.bulk-tbl td, .bulk-tbl th { vertical-align: middle; }
.bulk-tbl .combo, .bulk-tbl input[type="number"], .bulk-tbl select { max-width: 320px; }
.bulk-l { display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; font-weight: 600; color: var(--text-2); }
.bulk-l input { width: 15px; height: 15px; accent-color: var(--green); cursor: pointer; }
.combo-off { opacity: .5; }
.combo-off .combo-btn { pointer-events: none; }
@media (max-width: 720px) {
  .bulk-tbl .combo, .bulk-tbl input[type="number"], .bulk-tbl select { max-width: none; }
}

/* ---------- 下单页分类条：一二级分类 + 子类数徽标 ---------- */
.chip .chip-sub {
  display: inline-block; margin-left: 5px; padding: 0 5px; min-width: 14px;
  border-radius: 999px; background: rgba(0, 0, 0, .08); font-size: 10px;
  font-style: normal; line-height: 14px; text-align: center; color: var(--text-3);
}
.chip.active .chip-sub { background: rgba(255, 255, 255, .25); color: #fff; }

/* ---------- 采购单 ---------- */
.po-bar-sep { width: 1px; height: 20px; background: var(--line); margin: 0 2px; }

/* ---------- 我的（个人中心）：头像卡 + 分类功能九宫格 ---------- */
.me-page { max-width: 760px; }
.me-hero {
  display: flex; align-items: center; gap: 14px; padding: 20px 20px;
  border-radius: 18px; margin-bottom: 16px;
  background: linear-gradient(135deg, #e9f9ef 0%, #f6fdf9 58%, #ffffff 100%);
  border: 1px solid #e2f3e9; box-shadow: 0 4px 16px rgba(16, 40, 26, .06);
}
.me-ava {
  width: 54px; height: 54px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #00c94f, #009a29); color: #fff;
  font-size: 22px; font-weight: 700; box-shadow: 0 6px 16px rgba(0, 180, 42, .3);
}
.me-id { flex: 1; min-width: 0; }
.me-name { font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.3; }
.me-sub { margin-top: 3px; font-size: 12.5px; color: var(--text-2); }
.me-plan { flex: 0 0 auto; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: #f2f3f5; color: #4e5969; }
.me-plan.tone-green { background: var(--green-bg); color: var(--green-d); }
.me-plan.tone-blue { background: #e8f3ff; color: #165dff; }
.me-plan.tone-purple { background: #f5e8ff; color: #722ed1; }
.me-plan.tone-teal { background: #e6fffb; color: #08979c; }
.me-plan.tone-gray { background: #f2f3f5; color: #4e5969; }

.me-group { background: #fff; border: 1px solid #eef0f3; border-radius: 18px; padding: 14px 14px 8px;
  margin-bottom: 12px; box-shadow: 0 2px 10px rgba(16, 40, 26, .05); }
.me-gt { font-size: 12.5px; font-weight: 600; color: var(--text-3); letter-spacing: .4px; margin-bottom: 2px; }
.me-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; }
.me-cell { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 13px 4px 15px;
  border-radius: 13px; color: var(--text); text-align: center; transition: background .15s; }
.me-cell:hover { background: #f7f8fa; }
.me-ic { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: var(--green-bg); color: var(--green-d); }
.me-ic svg { width: 21px; height: 21px; }
.me-lb { font-size: 12px; color: var(--text-2); line-height: 1.3; word-break: break-all; }
.me-links { background: #fff; border: 1px solid #eef0f3; border-radius: 18px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(16, 40, 26, .05); }
.me-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 15px 16px; border: 0; background: transparent; font-size: 14px; color: var(--text);
  text-align: left; border-bottom: 1px solid #f2f3f5; cursor: pointer; font-family: inherit; }
.me-link:last-child { border-bottom: 0; }
.me-link i { color: var(--text-3); font-style: normal; }
.me-link#me-logout { color: #cb2634; }
.me-foot { text-align: center; color: var(--text-3); font-size: 11.5px; padding: 18px 0 6px; }
@media (min-width: 821px) {
  .me-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- 登录页：同账号多公司时选择公司 ---------- */
.tenant-opts { display: flex; flex-direction: column; gap: 9px; margin: 4px 0 12px; }
.tenant-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
  background: #fff; cursor: pointer; text-align: left; font: inherit;
  transition: border-color .15s, background .15s;
}
.tenant-opt:hover { border-color: var(--green); background: #f6fcf7; }
.tenant-opt:active { background: #eaf7ec; }
.tenant-opt .to-name { font-size: 14.5px; font-weight: 600; color: var(--text); }
.tenant-opt .to-role { flex: 0 0 auto; font-size: 12px; color: var(--text-3);
  background: var(--bg); border-radius: 999px; padding: 3px 10px; }

/* ---------- 租户存储标识行（v3.11：共享库/独立库 + 升级/回退链接） ---------- */
.t-store { margin-top: 4px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.t-store .tag { flex: 0 0 auto; }
.t-link { background: none; border: 0; padding: 0; font-size: 11.5px; color: var(--blue); cursor: pointer; }
.t-link:hover { text-decoration: underline; }
.t-link:disabled { color: var(--text-3); cursor: default; text-decoration: none; }

/* 固定列宽比例：整表恒等于容器宽，杜绝横向溢出（v3.11） */
.tenant-table th:nth-child(1){width:24%}.tenant-table th:nth-child(2){width:10%}.tenant-table th:nth-child(3){width:11%}.tenant-table th:nth-child(4){width:19%}.tenant-table th:nth-child(5){width:14%}.tenant-table th:nth-child(6){width:10%}.tenant-table th:nth-child(7){width:12%}
.tenant-table .t-plan,.tenant-table .t-exp,.tenant-table .t-status,.tenant-table .t-num,.tenant-table .t-ops{overflow:hidden;text-overflow:ellipsis}
.tenant-table .t-ops{white-space:normal}
.tenant-table .op-group{flex-wrap:wrap}.tenant-table .op-group .btn-sm{padding:3px 5px;font-size:12px}

/* ---------- 分拣对比：商品行可点击（点开看谁下的单） ---------- */
.pc-row { transition: background .12s; }
.pc-row:hover { background: #f6fcf7; }
.pc-row:hover .pc-name { color: var(--green-d); text-decoration: underline; }
.pc-row .pc-name { transition: color .12s; }

/* ---------- 分拣对比：订单行可点击（点开看这单的下单 vs 实配） ---------- */
.pc-od-row { transition: background .12s; }
.pc-od-row:hover { background: #f6fcf7; }
.pc-od-row:hover .pc-name { color: var(--green-d); text-decoration: underline; }
.pc-od-row .pc-name { transition: color .12s; cursor: pointer; }

/* ================= 分拣对比：看板头部 + KPI + 表格（v3.15） ================= */
.pc-hero { background: linear-gradient(180deg, #ffffff 0%, #fbfdfb 100%); }
.pc-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 15px; }
.pc-hero-title h3 { margin: 0 0 5px; font-size: 16px; letter-spacing: .2px; position: relative; padding-left: 10px; }
.pc-hero-title h3::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 15px; border-radius: 3px; background: linear-gradient(180deg, var(--green), #37c24a); }
.pc-hero-title p { margin: 0; max-width: 560px; line-height: 1.65; }
.pc-hero-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-date-field { display: flex; align-items: center; gap: 9px; background: #f7f8f7; border: 1px solid #e8eae8; border-radius: 10px; padding: 4px 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.pc-date-field:hover { border-color: var(--green); background: #fff; }
.pc-date-field span { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.pc-date-field input { border: 0 !important; background: transparent; padding: 5px 0; width: 132px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.pc-date-field input:focus { outline: none; border: 0 !important; }
.pc-quick { display: flex; gap: 6px; }
.pc-quick .chip { padding: 6px 12px; background: #fff; }
.pc-quick .chip.active { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }

.pc-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.pc-kpi-item { position: relative; background: #fff; border: 1px solid #eef0ef; border-radius: 11px; padding: 11px 13px 11px 15px; overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.pc-kpi-item::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--k, #00b42a); }
.pc-kpi-item:hover { box-shadow: 0 5px 16px rgba(29, 33, 41, .07); border-color: #e3e6e4; }
.pc-kpi-row { display: block; }
.pc-kpi-label { display: block; font-size: 12.5px; color: var(--text-3); }
.pc-kpi-val { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.5px; margin-top: 3px; color: var(--text); font-variant-numeric: tabular-nums; }
.pc-kpi-val em { font-style: normal; font-size: 12px; font-weight: 500; color: var(--text-3); margin-left: 2px; }
.pc-kpi-sub { font-size: 11.5px; color: var(--text-3); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 双端文案：pc-only-m 只在手机端出现，pc-only-pc 只在桌面端出现 */
.pc-only-m { display: none; }
.pc-kpi-item.is-warn .pc-kpi-val { color: var(--orange); }
.pc-kpi-item.is-warn { background: linear-gradient(180deg, #fffdf8, #fff); }
.pc-kpi-item.is-bad .pc-kpi-val { color: var(--red); }
.pc-kpi-item.is-bad { background: linear-gradient(180deg, #fffafa, #fff); }
/* 商品行：下单量沉稳、实配量点色，一眼看出有没有少配 */
.pc-v-pick { color: var(--green-d); }
.pc-v-pick.is-short { color: #d64545; }
.pc-bar { height: 5px; border-radius: 999px; background: #eef1ef; margin-top: 8px; overflow: hidden; }
.pc-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffc53d, #f53f3f); }

.pc-count { display: inline-block; min-width: 24px; padding: 0 9px; margin-left: 7px; border-radius: 999px; background: var(--green-bg); color: var(--green-d); font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; vertical-align: 2px; }
.pc-hint { white-space: nowrap; }
.pc-tbl { max-height: 560px; overflow: auto; border: 1px solid #f2f4f3; border-radius: 10px; }
.pc-table thead th { position: sticky; top: 0; z-index: 1; background: #fafbfa; color: var(--text-2); font-weight: 600; padding: 9px 12px; border-bottom: 1px solid #eef0ef; }
.pc-table td { padding: 9px 12px; font-variant-numeric: tabular-nums; }
.pc-table tbody tr:last-child td { border-bottom: 0; }
.pc-table tbody tr { transition: background .12s; }
.pc-table .pc-pname { font-weight: 600; }
.pc-table .pc-strong { font-weight: 700; }
.pc-table .pc-neg { color: var(--red); font-weight: 700; }
.pc-table .pc-warn { color: #d48806; font-weight: 700; }
.pc-no { font-weight: 700; color: var(--green-d); }
.pc-od-row.has-short td:first-child { box-shadow: inset 3px 0 0 #ffc53d; }
.pc-rate { display: flex; align-items: center; gap: 7px; justify-content: flex-end; }
.pc-rate-track { flex: none; width: 36px; height: 5px; border-radius: 999px; background: #eef1ef; overflow: hidden; }
.pc-rate-track > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ffb020, #f53f3f); }
.pc-rate b { font-size: 12.5px; font-weight: 600; color: #cb2634; min-width: 34px; text-align: right; }
.pc-rate.is-zero b { color: var(--text-3); font-weight: 500; }

/* 固定列宽比例：商品表 / 订单表整表恒等于容器宽 */
.pc-tp { table-layout: fixed; }
.pc-tp th:nth-child(1) { width: 21%; } .pc-tp th:nth-child(2) { width: 20%; } .pc-tp th:nth-child(3) { width: 8%; }
.pc-tp th:nth-child(4) { width: 11%; } .pc-tp th:nth-child(5) { width: 11%; } .pc-tp th:nth-child(6) { width: 9%; }
.pc-tp th:nth-child(7) { width: 8%; } .pc-tp th:nth-child(8) { width: 12%; }
.pc-tp td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 订单表（一行 = 一个下单账号）：9 列 */
.pc-to { table-layout: fixed; }
.pc-to th:nth-child(1) { width: 26%; } .pc-to th:nth-child(2) { width: 10%; } .pc-to th:nth-child(3) { width: 10%; }
.pc-to th:nth-child(4) { width: 8%; } .pc-to th:nth-child(5) { width: 8%; } .pc-to th:nth-child(6) { width: 8%; }
.pc-to th:nth-child(7) { width: 9%; } .pc-to th:nth-child(8) { width: 10%; } .pc-to th:nth-child(9) { width: 11%; }
.pc-to td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 客户 + 下单账号 + 「N 单」徽标挤在一列：靠 flex 排，超长客户名省略 */
.pc-to td.pc-o-cust { display: flex; align-items: center; gap: 6px; overflow: hidden; }
.pc-to td.pc-o-cust > * { flex: none; }
.pc-o-name { flex: 0 1 auto !important; min-width: 0; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-o-multi { flex: none; display: inline-flex; align-items: baseline; gap: 2px;
  padding: 0 8px; border-radius: 999px; background: #eaf3ff; color: #2559b8;
  font-size: 11.5px; line-height: 20px; font-weight: 500; letter-spacing: .2px; }
.pc-o-multi b { font-size: 12.5px; font-weight: 800; }
.pc-sec-note { margin-left: 6px; font-weight: 500; white-space: nowrap; }
.pc-od-row.is-loading { opacity: .55; }

/* 分拣对比：按下单账号的弹层（订单号 + 每单货品明细） */
.pc-acc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 14px; flex-wrap: wrap;
  padding: 9px 12px; margin-bottom: 10px; border-radius: 10px;
  background: #f4f8ff; border: 1px solid #e2edff; }
.pc-acc-who { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 14px; font-weight: 700; color: var(--text); }
.pc-acc-who .oc-sub { background: #e4eefd; color: #1d4ed8; }
.pc-acc-who .oc-sub i { color: #3b6fd6; }
.pc-acc-ver { font-size: 12px; font-weight: 500; color: var(--text-3); }
.pc-acc-kpis { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pc-acc-kpi { display: flex; align-items: baseline; gap: 4px; font-size: 12px; color: var(--text-3); }
.pc-acc-kpi b { font-size: 14px; font-weight: 800; color: #2559b8; font-variant-numeric: tabular-nums; }
.pc-acc-kpi b.is-bad { color: #d64545; }
.pc-acc-list { display: flex; flex-direction: column; gap: 8px; }
.pc-acc-ord { border: 1px solid #e6edf7; border-radius: 10px; background: #fff; overflow: hidden; }
.pc-acc-ord > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; cursor: pointer; list-style: none; background: #fbfcfe; }
.pc-acc-ord > summary::-webkit-details-marker { display: none; }
.pc-acc-ord > summary::before { content: "▸"; flex: none; width: 10px; color: #7f8fa6; font-size: 10px; }
.pc-acc-ord[open] > summary { border-bottom: 1px solid #eef2f8; }
.pc-acc-ord[open] > summary::before { content: "▾"; }
.pc-acc-no { font-weight: 700; color: #2559b8; letter-spacing: .2px; font-variant-numeric: tabular-nums; }
.pc-acc-meta { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pc-acc-sum { margin-left: auto; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pc-acc-sum b { font-weight: 800; color: var(--text); }
.pc-acc-short { font-style: normal; font-weight: 700; color: #d64545; }
.pc-acc-body { padding: 8px 12px 9px; }
.pc-acc-links { margin-top: 6px; text-align: right; }
.pc-acc-links a { font-size: 12.5px; font-weight: 600; color: #2559b8; cursor: pointer; }
.pc-acc-links a:hover { text-decoration: underline; }
/* 缺货率为 0 时只留百分比，不画空进度条 */
.pc-rate.is-zero .pc-rate-track { display: none; }

/* ---------- 分拣对比：合计行（报表收口） ---------- */
.pc-table tr.pc-sum td {
  background: #fafcfb; font-weight: 700; color: var(--text);
  border-top: 1px solid #e9edeb; padding-top: 10px; padding-bottom: 10px;
}
.pc-table tr.pc-sum td:first-child { color: var(--text-2); }
.pc-sum-n { margin-left: 5px; font-size: 11.5px; font-weight: 500; color: var(--text-3); }