/* ===== 开店搭子小程序 · 设计系统 =====
 * 视觉方向：A · 深墨商务（冷灰克制）
 * 规范版本：v1.0（红色主题）
 * 主色红 #D93025 仅用于：主按钮 / TabBar 选中 / 分段选中 / 输入框聚焦 / 品牌强调
 * 成功绿 #07C160 独立成 --ok，不随主色走（规范强制：成功态保留绿色）
 * 价格：常规价深墨 #1F2328，促销价橙 #FF6B35（.price.promo）
 */
:root{
  --brand:#d93025;         /* 主色红 */
  --brand-dark:#b3261e;    /* 主色按下 / 品牌文字 */
  --brand-soft:#fdecea;    /* 品牌浅底 */
  --promo:#ff6b35;         /* 促销橙 */
  --promo-soft:#fff0e8;
  --ok:#07c160;            /* 成功绿（独立，专用） */
  --ok-soft:#e8f8ef;
  --blue:#4a90d9;          /* 代卖蓝 */
  --blue-soft:#eaf3fb;
  --warn:#e8892b;          /* 警告橙 */
  --danger:#e64340;        /* 错误红（危险操作专用，不与主色混用） */
  --danger-soft:#fdecec;
  --text:#1f2328;
  --text-2:#5b6470;
  --text-3:#98a1ac;
  --line:#eceef1;
  --bg:#f4f5f7;
  --card:#ffffff;
  --radius:12px;
  --shadow:0 1px 3px rgba(18,24,33,.06);
  --muted:#98a1ac;          /* 历史别名，等价于 --text-3，勿再新增引用 */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:#e9ebef;
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  font-size:14px;line-height:1.5;
  display:flex;justify-content:center;
  min-height:100vh;
}
img{display:block;max-width:100%}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
a{color:inherit;text-decoration:none}

/* 手机容器 */
#root{width:100%;max-width:420px;min-height:100vh;background:var(--bg);position:relative;box-shadow:0 0 24px rgba(0,0,0,.08)}
body.admin #root{max-width:100%;box-shadow:none;background:#f2f4f7}

/* 导航栏 */
.navbar{
  position:sticky;top:0;z-index:50;background:#fff;
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;height:48px;padding:0 8px;
}
.navbar .nb-title{flex:1;text-align:center;font-size:16px;font-weight:600;letter-spacing:.3px}
.navbar .nb-side{min-width:60px;display:flex;align-items:center;gap:4px}
.navbar .nb-side.right{justify-content:flex-end}
.navbar .nb-btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:32px;padding:0 10px;border-radius:8px;font-size:13px;color:var(--text-2);
}
.navbar .nb-btn:active{background:var(--bg)}
.navbar .nb-btn.primary{color:var(--brand);font-weight:600}
/* 第十九批：报表分享图标 —— 橙色、比正文小一号，跟红色主按钮区分开，
   免得页面上到处都是红按钮（任务书 2.2：红色大按钮太多，视觉疲劳） */
.navbar .nb-btn.nb-orange{color:var(--promo);font-size:17px;padding:0 8px}
.navbar .back{font-size:20px;width:32px;height:32px;display:flex;align-items:center;justify-content:center}

.page{padding:12px 12px 24px}
.page.no-pad{padding:0 0 24px}
.footer-space{height:76px}

/* 底部 tabbar */
.tabbar{
  position:fixed;bottom:0;width:100%;max-width:420px;z-index:60;
  background:#fff;border-top:1px solid var(--line);
  display:flex;padding-bottom:env(safe-area-inset-bottom);
}
.tabbar .tab{flex:1;padding:6px 0 8px;text-align:center;color:var(--text-3);font-size:11px}
.tabbar .tab .ico{font-size:20px;line-height:22px;display:block;position:relative}
.tabbar .tab.on{color:var(--brand);font-weight:600}
/* Tab 图标右上角红点：供货商端「有未查看的新订单」提醒。
   位置按图标本身定位（图标是整行居中的），所以从图标中线往右偏一点点，
   视觉上就落在图标右上角 —— 直接用 right 会贴到 Tab 的边缘去。 */
.tabbar .tab .ico .dot{
  position:absolute;top:-1px;left:50%;margin-left:5px;
  width:7px;height:7px;border-radius:50%;background:var(--danger);
  box-shadow:0 0 0 2px #fff;
}
/* 通用红点（Web 后台侧边栏 / 顶栏共用）：与 Tab 红点同一颗，只是不用负定位 */

.dot-i{
  display:inline-block;min-width:16px;height:16px;line-height:16px;padding:0 4px;
  border-radius:8px;background:var(--danger);color:#fff;
  font-size:11px;font-weight:600;text-align:center;vertical-align:middle;
}
.admin-side a .dot-i{margin-left:6px}
.admin-top .u .dot-i{margin-right:4px}

/* 操作指引（第四批）：编号步骤列表 */
.guide-ol{margin:0;padding-left:20px}
.guide-ol li{font-size:13px;line-height:1.75;color:var(--text-2);margin-bottom:10px}
.guide-ol li:last-child{margin-bottom:0}
.guide-ol li::marker{color:var(--brand);font-weight:700}

/* 操作指引里的次级条目（第十批：小节内的说明列表） */
.guide-ul{margin:6px 0 0;padding-left:18px}
.guide-ul li{font-size:13px;line-height:1.8;color:var(--text-2);margin-bottom:4px}
.guide-ul li::marker{color:var(--line-2, #bbb)}
/* 末尾备注：不占编号，弱化成提示行 */
.guide-note{list-style:none;margin-left:-20px;background:var(--brand-soft);
  border-radius:8px;padding:8px 10px;color:var(--brand-dark)!important}

/* 操作指引卡片版（第十八批）：上方卡片列表 + 点击弹底部弹层看全文 */
.glist{display:flex;flex-direction:column;gap:10px}
.gcard{display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px}
.gcard:active{background:var(--brand-soft)}
.gcard-main{flex:1;min-width:0}
.gcard-t{font-size:15px;font-weight:600;line-height:1.45}
.gcard-s{font-size:12px;color:var(--text-3);margin-top:6px;line-height:1.6}
.gcard .chev{color:var(--text-3);font-size:18px;flex:none}

/* 弹层正文：按「你是哪一类 / 系统帮你做什么 / 你只需要做什么 / 亮点 / 常见问题」分节 */
.gsec{margin-bottom:16px}
.gsec:last-child{margin-bottom:0}
.gsec-t{font-size:14px;font-weight:600;margin-bottom:8px;padding-left:8px;border-left:3px solid var(--brand);line-height:1.4}
.gsec-p{font-size:13px;line-height:1.8;color:var(--text-2);padding-left:11px}
.gsec-ul{margin:0;padding-left:28px}
.gsec-ul li{font-size:13px;line-height:1.8;color:var(--text-2);margin-bottom:6px}
.gsec-ul li:last-child{margin-bottom:0}
.gsec-ul li::marker{color:var(--brand)}
.gsec-ol{margin:0;padding-left:28px}
.gsec-ol li{font-size:13px;line-height:1.8;color:var(--text-2);margin-bottom:8px}
.gsec-ol li:last-child{margin-bottom:0}
.gsec-ol li::marker{color:var(--brand);font-weight:700}
/* 只有关闭按钮、没有底部按钮条的弹层（纯展示型） */
.sheet-bd.nofoot{padding-bottom:calc(16px + env(safe-area-inset-bottom))}

/* 悬浮采购车：白底红边（方向 A 决策 3） */
.fab{
  position:fixed;z-index:70;
  right:max(16px, calc(50% - 194px));bottom:80px;   /* 距右 16px，距底 80px（TabBar 之上） */
  width:48px;height:48px;border-radius:50%;
  background:#fff;border:1px solid var(--brand);
  display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;
  box-shadow:0 4px 14px rgba(18,24,33,.14);
}
.fab:active{background:var(--brand-soft)}
.fab .badge{
  position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;line-height:18px;
  padding:0 5px;border-radius:9px;background:var(--danger);color:#fff;
  font-size:11px;font-weight:600;text-align:center;border:2px solid var(--bg);
}

/* 卡片 / 列表 */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:12px}
.card-hd{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.card-hd h3{margin:0;font-size:14px;font-weight:600}
.card-bd{padding:12px 14px}
.card-bd.tight{padding:0}
.list{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.cell{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:#fff}
.cell:last-child{border-bottom:none}
.cell .cell-main{flex:1;min-width:0}
.cell .cell-title{font-size:14px;font-weight:500}
.cell .cell-sub{font-size:12px;color:var(--text-3);margin-top:2px}
.cell .cell-right{font-size:13px;color:var(--text-2);text-align:right}
.cell .chev{color:var(--text-3);font-size:16px}
.cell.tappable:active{background:#fafbfc}

/* 通用元素 */
.row{display:flex;align-items:center;gap:8px}
.between{display:flex;align-items:center;justify-content:space-between;gap:8px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.muted{color:var(--text-3)}
.small{font-size:12px}
.b{font-weight:600}
.mt6{margin-top:6px}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}
.tc{text-align:center}
.ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 价格：常规价深墨，促销价橙 */
.price{color:var(--text);font-weight:700}
.price.promo{color:var(--promo)}
.price::before{content:'¥';font-size:11px;margin-right:1px;font-weight:600}
.price.lg{font-size:20px}
.price.sm{font-size:13px}
.price-old{color:var(--text-3);text-decoration:line-through;font-size:12px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  height:40px;padding:0 16px;border-radius:10px;background:var(--brand);color:#fff;font-weight:600;font-size:14px;
}
.btn:active{background:var(--brand-dark)}
.btn.block{display:flex;width:100%}
.btn.ghost{background:#fff;color:var(--text);border:1px solid var(--line)}
.btn.ghost:active{background:var(--bg)}
.btn.brand-ghost{background:var(--brand-soft);color:var(--brand-dark)}
.btn.gray{background:#f0f1f3;color:var(--text-2)}          /* 灰色次要按钮：列表里的「设为默认」 */
.btn.gray:active{background:#e6e8eb}
.btn.danger{background:var(--danger)}
.btn.warn{background:var(--warn)}
.btn.sm{height:32px;padding:0 12px;font-size:13px;border-radius:8px;font-weight:500}
.btn.xs{height:26px;padding:0 8px;font-size:12px;border-radius:6px;font-weight:500}   /* 步进器 / 删除 */
.btn[disabled]{opacity:.45;pointer-events:none}
/* 两行按钮：主文案 + 小字说明。
   像「委托配送（送货给采购商）」这种长文案挤在一行会溢出或被截断，
   拆成「主标题 / 说明」两行，视觉上是一个按钮而不是两句话。 */
.btn.two{flex-direction:column;gap:0;height:auto;min-height:44px;padding:8px 14px;line-height:1.25}
.btn.two .sub{font-size:11px;font-weight:400;opacity:.85;margin-top:2px;white-space:nowrap}
.btn.two.sm{min-height:34px;padding:6px 12px}
.btn-row{display:flex;gap:10px}

.tag{display:inline-block;padding:1px 6px;border-radius:4px;font-size:11px;line-height:17px;background:var(--bg);color:var(--text-2)}
.tag.green{background:var(--ok-soft);color:var(--ok)}
.tag.orange{background:var(--promo-soft);color:var(--promo)}
.tag.blue{background:var(--blue-soft);color:var(--blue)}
.tag.red{background:#fdecec;color:var(--danger)}
.tag.gray{background:#f0f1f3;color:var(--text-3)}

/* 改单对比：原值灰色+删除线，改后黑色加粗。
   只给改过的字段用；没改的字段照常显示一次，不套这两层样式。 */
.diff-old{color:var(--text-3);text-decoration:line-through;margin-right:6px}
.diff-new{color:var(--text);font-weight:700}
/* 商品行里的对比行（数量 / 单价各一行，避免挤在一行溢出） */
.diff-line{font-size:12px;line-height:18px;color:var(--text-2)}
/* 卡片底部金额对比：原 → 改后 */
.diff-total{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:12px;color:var(--text-2);display:flex;justify-content:space-between;gap:8px}
.diff-total .nv{color:var(--text);font-weight:700}
/* 折叠明细：点「查看对比」展开 */
.diff-more{display:none;margin-top:8px}
.diff-more.open{display:block}
/* 改单编辑页：一行一个商品，数量/单价可编辑 */
.editrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.editrow:last-child{border-bottom:0}
.editrow .ei{flex:1;min-width:0}
.editrow .eqty,.editrow .eprice{width:74px;height:30px;border:1px solid var(--line);border-radius:6px;padding:0 8px;text-align:right;font-size:13px}
.editrow .esub{width:78px;text-align:right;font-weight:600;font-size:13px}

/* 空态：红色系插画（暂无商品 / 暂无订单 / 代卖未解锁） */
.empty{padding:44px 20px;text-align:center;color:var(--text-3);font-size:13px}
.empty .eico{
  width:64px;height:64px;margin:0 auto 12px;border-radius:50%;
  background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;font-size:28px;line-height:1;
}
.empty .eill{display:block;margin:0 auto 10px}
.empty .eill svg{display:block}

/* 表单 */
.form{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.fitem{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.fitem:last-child{border-bottom:none}
.fitem>.flabel{width:88px;flex:none;color:var(--text-2);font-size:13px}
.fitem .finput{flex:1;min-width:0}
.fitem input,.fitem textarea,.fitem select{
  width:100%;border:none;outline:none;background:transparent;padding:0;font-size:14px;
}
.fitem textarea{resize:none;min-height:56px;line-height:1.5}
.fitem input::placeholder,.fitem textarea::placeholder{color:var(--text-3)}
.fitem .unit{color:var(--text-3);font-size:13px}

/* 品类选择器（第二十二批，三端通用）
   触发区：左文字右箭头，整行可点；未选时用占位色 */
.cp-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;min-height:22px;cursor:pointer;-webkit-user-select:none;user-select:none}
.cp-trigger .cp-text{font-size:14px;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-trigger .cp-text.ph{color:var(--text-3)}
.cp-trigger .cp-arrow{color:var(--text-3);font-size:16px;line-height:1;flex:none}
/* 弹层独立成一层（第二十二批补）：商品源库「编辑」本身是底部弹层，
   选择器要叠在它上面，摘掉自己这一层时不动底下那张表单 */
.cp-layer{position:relative;z-index:901}
/* 弹层里的搜索框 */
.cp-search{width:100%;height:34px;border:1px solid var(--line);border-radius:8px;
  padding:0 10px;font-size:14px;outline:none;background:#fff;color:var(--text)}
.cp-search:focus{border-color:var(--brand)}
.cp-search::placeholder{color:var(--text-3)}

.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg .opt{
  padding:5px 12px;border-radius:16px;background:var(--bg);font-size:13px;color:var(--text-2);border:1px solid transparent;
}
.seg .opt.on{background:var(--brand-soft);color:var(--brand-dark);border-color:var(--brand);font-weight:600}

/* 商品 */
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pcard{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.pcard .thumb{
  height:96px;background:linear-gradient(135deg,#eef0f3,#e0e4ea);
  display:flex;align-items:center;justify-content:center;font-size:30px;color:#98a1ac;
}
.pcard .thumb.promo{background:linear-gradient(135deg,#ffe1d2,#ffcdb4);color:#c86a3c}
.pcard .pbody{padding:8px 10px 10px}
.pcard .pname{font-size:13px;font-weight:500;height:36px;overflow:hidden}
.pcard .pmeta{margin-top:6px;display:flex;align-items:center;justify-content:space-between}

/* 商品图缩略框（详情页头图/正文图） */
.imgbox{
  width:50px;height:50px;border-radius:8px;flex:none;
  background:linear-gradient(135deg,#eef0f3,#e0e4ea);
  display:inline-flex;align-items:center;justify-content:center;font-size:22px;color:#98a1ac;
  overflow:hidden;
}

/* 商品行（订单/购物车） */
.prow{display:flex;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line)}
.prow:last-child{border-bottom:none}
/* overflow:hidden —— 第六批：图片改成真正的 <img> 后，没有它图片会溢出圆角 */
.prow .pthumb{width:52px;height:52px;border-radius:8px;flex:none;background:linear-gradient(135deg,#eef0f3,#e0e4ea);display:flex;align-items:center;justify-content:center;font-size:22px;color:#98a1ac;overflow:hidden}
.prow .pinfo{flex:1;min-width:0}
.prow .pinfo .pn{font-size:13px;font-weight:500}
.prow .pinfo .ps{font-size:12px;color:var(--text-3);margin-top:2px}
.prow .pqty{font-size:12px;color:var(--text-3);flex:none;text-align:right}

/* 统计数字 */
.stat{background:#fff;border-radius:var(--radius);padding:12px;text-align:center}
.stat .sv{font-size:20px;font-weight:700;line-height:1.2}
.stat .sl{font-size:11px;color:var(--text-3);margin-top:2px}
.stat.primary .sv{color:var(--brand-dark)}
.stat.promo .sv{color:var(--promo)}
.stat.green .sv{color:var(--ok)}        /* 后台看板「今日交易」 */
.stat.blue .sv{color:var(--blue)}       /* 后台看板「采购商」 */

/* 段选择器 */
.segment{display:flex;background:#fff;border-radius:10px;padding:3px;box-shadow:var(--shadow);margin-bottom:12px}
.segment .sg{flex:1;text-align:center;padding:7px 0;font-size:13px;color:var(--text-2);border-radius:8px}
.segment .sg.on{background:var(--brand);color:#fff;font-weight:600}

/* 筛选条 */
.filters{display:flex;gap:8px;overflow-x:auto;padding:0 0 10px;margin-bottom:0}
.filters .chip{flex:none;padding:5px 12px;border-radius:14px;background:#fff;font-size:12px;color:var(--text-2);box-shadow:var(--shadow)}
.filters .chip.on{background:var(--brand);color:#fff;font-weight:600}

/* 品类胶囊条（采购商店铺页）：横向滚动，选中主色红 */
/* 品类条：横向滚动 + 左右箭头（商城式导航）
   品类一多，光靠手指拖不够明显 —— 加一对只在「确实滚不动的方向」才隐藏的箭头：
   左侧到头了左箭头淡出，右侧到底了右箭头淡出，中间两边都亮。
   箭头本身用渐变遮罩压住被切一半的 chip，避免视觉上像出错。 */
.chipbar{position:relative;display:flex;align-items:center}
.chipbar .chips{flex:1;min-width:0}
.chipbar .car{
  flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:#fff;color:var(--text-2);font-size:13px;line-height:1;
  box-shadow:var(--shadow);border:1px solid var(--line);cursor:pointer;user-select:none;
}
.chipbar .car.off{opacity:0;pointer-events:none}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chips .chip{
  flex:none;padding:6px 14px;border-radius:16px;background:#fff;font-size:13px;color:var(--text-2);
  box-shadow:var(--shadow);border:1px solid transparent;
}
.chips .chip.on{background:var(--brand);color:#fff;font-weight:600;border-color:var(--brand)}

/* 底部固定结算条（采购车 / 提交订单） */
.stick-bottom{
  position:fixed;bottom:0;width:100%;max-width:420px;z-index:65;
  background:#fff;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:12px;padding:10px 12px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  box-shadow:0 -2px 10px rgba(18,24,33,.06);
}
.stick-bottom .sb-l{flex:none;font-size:13px;color:var(--text-2)}
.stick-bottom .btn{flex:1}
/* 有底部结算条的页面自动留出避让高度 */
.page:has(.stick-bottom){padding-bottom:92px}

/* 二维码 */
.qrcode{
  width:200px;height:200px;margin:0 auto;border-radius:12px;
  background:
    repeating-linear-gradient(0deg,#1f2328 0 6px,#fff 6px 12px),
    repeating-linear-gradient(90deg,#1f2328 0 6px,#fff 6px 12px);
  background-blend-mode:multiply;
  padding:10px;box-shadow:var(--shadow);position:relative;
}
.qrcode .qr-inner{
  width:100%;height:100%;background:#fff;border-radius:6px;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:4px;
}
.qrcode .qr-inner .logo{font-size:26px}
.qrcode .qr-inner .t{font-size:12px;font-weight:600}
.qrcode .qr-inner .s{font-size:10px;color:var(--text-3)}

/* toast & modal */
.toast{
  position:fixed;left:50%;top:44%;transform:translate(-50%,-50%);
  background:rgba(20,24,30,.88);color:#fff;padding:10px 16px;border-radius:8px;font-size:13px;
  z-index:999;opacity:0;pointer-events:none;transition:opacity .18s;max-width:80%;text-align:center;
}
.toast.show{opacity:1}
.mask{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:900;display:flex;align-items:flex-end;justify-content:center}
.mask.center{align-items:center}
.sheet{width:100%;max-width:420px;background:#fff;border-radius:16px 16px 0 0;overflow:hidden;animation:up .2s}
@keyframes up{from{transform:translateY(30px);opacity:.6}to{transform:translateY(0);opacity:1}}
.sheet-hd{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.sheet-hd h3{margin:0;font-size:15px}
.sheet-bd{padding:14px 16px;max-height:60vh;overflow:auto}
.sheet-ft{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:10px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
.dialog{width:86%;max-width:320px;background:#fff;border-radius:14px;overflow:hidden;animation:up .16s}
.dialog .d-bd{padding:20px 18px;text-align:center;font-size:14px}
.dialog .d-ft{display:flex;border-top:1px solid var(--line)}
.dialog .d-ft button{flex:1;padding:12px 0;font-size:15px}
.dialog .d-ft button+button{border-left:1px solid var(--line)}
.dialog .d-ft button.confirm{color:var(--brand);font-weight:600}
.dialog .d-ft button.del{color:var(--danger);font-weight:600}

/* 步骤条 */
.steps{display:flex;align-items:center;padding:14px 4px 6px}
.steps .st{flex:none;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-3)}
.steps .st .n{width:18px;height:18px;border-radius:50%;background:#e6e8eb;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px}
.steps .st.on{color:var(--brand-dark);font-weight:600}
.steps .st.on .n{background:var(--brand)}
.steps .line{flex:1;height:1px;background:var(--line);margin:0 6px}

/* 后台布局 */
body.admin{display:block}
body.admin #root{display:flex;min-height:100vh}
.admin-side{
  width:196px;flex:none;background:#1f2733;color:#c3ccd6;padding:16px 0;position:sticky;top:0;height:100vh;overflow:auto;
}
/* 第四批：抬头改成「开店搭子 · 管理后台」并强制排成一行。
   侧栏只有 196px，15px 字号的 12 个字会被挤成两行，所以字号降到 14px + nowrap。 */
.admin-side .logo{padding:0 18px 16px;font-size:14px;font-weight:700;color:#fff;display:flex;align-items:center;gap:6px;white-space:nowrap}
.admin-side .grp{padding:12px 18px 6px;font-size:11px;color:#6d7b8b;letter-spacing:1px}
.admin-side a{
  display:block;padding:9px 18px;font-size:13px;color:#c3ccd6;border-left:3px solid transparent;
}
.admin-side a:hover{background:#263041;color:#fff}
.admin-side a.on{background:#263041;color:#fff;border-left-color:var(--brand);font-weight:600}
.admin-main{flex:1;min-width:0;display:flex;flex-direction:column}
.admin-top{
  height:52px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;padding:0 20px;position:sticky;top:0;z-index:40;
}
.admin-top .t{font-size:15px;font-weight:600}
.admin-top .u{font-size:13px;color:var(--text-2);display:flex;align-items:center;gap:8px}
.admin-body{padding:18px 20px 40px;flex:1}
.admin-body .page{padding:0;max-width:1180px}
.crumb{font-size:12px;color:var(--text-3);margin-bottom:10px}
.crumb b{color:var(--text);font-weight:600}

/* 表格内可点击链接（后台用户管理：名称 → 详情） */
.lk{color:var(--brand-dark);font-weight:600;cursor:pointer;text-decoration:none}
.lk:hover{text-decoration:underline}

/* 表格横向滚动容器（后台窄屏） */
.tablewrap{overflow-x:auto;border-radius:var(--radius);box-shadow:var(--shadow)}
.tablewrap .tbl{min-width:720px;border-radius:0;box-shadow:none}

/* 表格 */
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);font-size:13px}
.tbl th{background:#fafbfc;text-align:left;padding:10px 12px;font-weight:600;color:var(--text-2);font-size:12px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:#fbfcfd}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}

/* 搜索/工具栏 */
/* 商品源库（第五批）：行尾勾选框。□ 未选 / ☑ 已选，点一下切换。 */
.srcpick{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border:1px solid var(--line);border-radius:7px;background:#fff;font-size:16px;line-height:1;
  cursor:pointer;color:var(--text-3);user-select:none}
.srcpick.on{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-dark)}

.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.toolbar input,.toolbar select{
  height:34px;border:1px solid var(--line);border-radius:8px;padding:0 10px;background:#fff;outline:none;font-size:13px;
}
.toolbar .grow{flex:1;min-width:160px}
.toolbar .btn{height:34px;font-size:13px}

/* ===== 订单搜索区（供货商 s/orders · 采购商 b/orders 共用）=====
   统一规格：控件高 38px / 圆角 10px / 行间距 8px / 查询按钮宽 84px。
   控件一律 flex:1 1 0 + min-width:0，窄屏（375px）等比缩小，不会换行错位。
   结构：第一行日期（起 ~ 止），第二行下拉框 + 固定宽查询按钮。 */
.searchbar{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:12px;margin-bottom:10px}
.sbrow{display:flex;gap:8px;align-items:center}
.sbrow + .sbrow{margin-top:8px}
.sbctl{
  flex:1 1 0;min-width:0;height:38px;
  border:1px solid var(--line);border-radius:10px;background:#fff;
  padding:0 10px;font-size:13px;line-height:1.2;color:var(--text);outline:none;
}
.sbctl:focus{border-color:var(--brand)}
select.sbctl{
  -webkit-appearance:none;appearance:none;padding-right:28px;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 17px,calc(100% - 11px) 17px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
input.sbctl::-webkit-clear-button,input.sbctl::-webkit-inner-spin-button{display:none}
.sbsep{flex:none;width:16px;text-align:center;color:var(--text-3);font-size:13px}
.sbbtn{flex:none;width:84px;height:38px;border-radius:10px;font-size:13px;font-weight:600}
.sbtip{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:12px;line-height:1.65;color:var(--text-3)}
.sbtip .sbcount{color:var(--text-2);font-weight:600}

/* 采购商端订单详情：紧跟状态标签下方的那句「供货商会跟你确认」
   刻意用最小号的灰字（12px / --text-3），和页面上其它补充说明一个规格，
   不抢状态标签的视线，但眼睛扫到状态那一眼就能看见它 */
.order-tip{margin-top:8px;font-size:12px;line-height:1.6;color:var(--text-3)}

/* ===== 小程序端登录页（供货商 / 采购商共用） ===== */
.mp-login{max-width:360px;margin:0 auto;padding:44px 18px 24px;text-align:center}
.mp-logo{font-size:46px;line-height:1}
.mp-name{font-size:22px;font-weight:700;margin-top:10px;letter-spacing:.5px}
.mp-sub{font-size:12px;color:var(--text-3);margin-top:6px}
.divider{display:flex;align-items:center;color:var(--text-3);font-size:12px;margin:16px 0}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)}
.divider span{padding:0 10px}
.wx-btn{background:var(--brand)}
.al-entry{margin-top:14px;font-size:12px}
.al-entry a{display:inline-block;color:var(--text-3);border:1px dashed var(--line);padding:6px 12px;border-radius:8px}

/* ===== 平台后台独立登录（深色，与小程序端完全隔离） ===== */
body.admin-login{display:block;background:linear-gradient(135deg,#0f1722,#1b2735);min-height:100vh}
body.admin-login #root{
  max-width:460px;margin:0 auto;background:transparent;box-shadow:none;
  display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px;
}
.al-wrap{width:100%}
.al-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  border-radius:16px;padding:26px 22px;
}
.al-head{text-align:center;margin-bottom:18px}
.al-logo{font-size:18px;font-weight:700;color:#fff;letter-spacing:.5px}
.al-desc{font-size:12px;color:#9fb0c3;margin-top:6px}
.admin-login .segment{background:rgba(255,255,255,.06);margin-bottom:16px}
.admin-login .segment .sg{color:#aebccb}
.admin-login .segment .sg.on{background:var(--brand);color:#fff}
.admin-login .form{background:transparent}
.admin-login .fitem{border-bottom:1px solid rgba(255,255,255,.1)}
.admin-login .flabel{color:#9fb0c3}
.admin-login .fitem input,.admin-login .fitem textarea{color:#fff}
.admin-login .fitem input::placeholder,.admin-login .fitem textarea::placeholder{color:rgba(255,255,255,.35)}
.admin-login .btn.ghost{background:transparent;color:#cfe8ff;border-color:rgba(255,255,255,.3)}
.al-btn{
  display:flex;width:100%;height:44px;align-items:center;justify-content:center;
  margin-top:18px;border-radius:10px;background:var(--brand);color:#fff;font-size:15px;font-weight:600;letter-spacing:4px;
}
.al-btn:active{background:var(--brand-dark)}
.al-tip{font-size:11px;color:#7e8ea0;margin-top:12px;line-height:1.6}
.al-err{font-size:12px;color:#ff8a80;margin-top:10px;min-height:16px;text-align:center}
.al-foot{text-align:center;color:rgba(255,255,255,.3);font-size:11px;margin-top:20px}

/* 只读字段（编辑供货商/采购商备注页：对方本人的资料只读，能改的只有备注） */
.ro-val{padding:9px 0;color:var(--text-3);font-size:14px;word-break:break-all}
.ro-tip{
  font-size:12px;line-height:1.7;color:var(--text-3);background:var(--brand-soft);
  padding:9px 11px;border-radius:8px;margin-bottom:12px;
}

/* ==========================================================
 * 第二十批：打印预览 / 打印设置（屏幕上那一层，纸本身的样式由
 * sc.js 的 printCssOf() 动态生成，因为它随纸张尺寸和字号模板变）
 * ========================================================== */
.pp-bar{
  position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);
  padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.pp-bar-l{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pp-bar-r{font-size:12px}
.pp-warn{
  margin:0 12px 10px;padding:8px 10px;border-radius:8px;font-size:12px;line-height:1.6;
  background:#fff4e5;color:#8a4b00;border:1px solid #ffd8a8;
}
/* 打印设置页 */
.pp-radio{display:block;padding:8px 0;font-size:14px;cursor:pointer}
.pp-radio input{margin-right:6px;vertical-align:middle}
.pp-radio .muted{font-size:12px}
/* 第二十批补记：两块收款码**左右并排**，块内图在上、按钮在下 */
.pp-qrrow{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px}
.pp-qrbox{
  width:84px;height:84px;flex:none;border:1px solid var(--line);border-radius:8px;background:#f6f7f9;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.pp-qrbox img{width:100%;height:100%;object-fit:contain}
/* 订单列表的勾选列 */
.ck{
  width:18px;height:18px;flex:none;border:1px solid var(--line-2,#c6cad0);border-radius:4px;background:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1;color:#fff;
}
.ck.on{background:var(--brand);border-color:var(--brand)}
.tbl td.ck-cell{text-align:center;width:34px;padding-left:0;padding-right:0}

/* ===========================================================
 * 第二十四批：打印单 PDF 预览层（页面内 iframe，不新开标签页）
 * -----------------------------------------------------------
 * 独立一层挂在 body 上，不占用 #modal-root（老规矩：弹层里再弹层不许覆盖）。
 * =========================================================== */
.pdf-layer{
  position:fixed;left:0;right:0;top:0;bottom:0;z-index:1200;
  background:rgba(20,24,28,.62);display:flex;align-items:center;justify-content:center;padding:18px;
}
.pdf-layer-bd{
  width:92vw;height:90vh;max-width:1180px;background:#fff;border-radius:12px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,.32);
}
.pdf-layer-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--line);background:#fafbfc;flex:none;
}
.pdf-layer-t{font-size:15px;font-weight:700;color:#222}
.pdf-layer-sub{font-size:12px;font-weight:400;color:#6b7280;margin-left:8px}
.pdf-layer-act{display:flex;gap:8px;flex:none}
.pdf-layer-tip{
  flex:none;padding:6px 14px;font-size:12px;color:#8a4b00;background:#fff4e5;
  border-bottom:1px solid #ffd8a8;
}
.pdf-layer-frame{flex:1 1 auto;width:100%;border:0;background:#525659}
@media (max-width:720px){
  .pdf-layer{padding:0}
  .pdf-layer-bd{width:100vw;height:100vh;border-radius:0}
}