* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, "PingFang SC", sans-serif; background: #f5f5f5; color: #333; font-size: 15px; }
.hidden { display: none !important; }
/* 顶部导航(#nav)与视图共用同一条"居中 + 内边距"的横向盒。
   为什么写成共用选择器、而不是给 .nav 再写一份: 下面还有安全区、≥720px、≥1024px 三段响应式
   各自调过 .view 的这三个值 —— 复制一份就是三个地方要同步改, 而漏一处不会报错, 只会让导航
   在某个宽度下与卡片对不齐。.view 独有的只有 min-height(100vh 是"整屏"语义, 导航不适用)。 */
.view, .nav { max-width: 720px; margin: 0 auto; padding: 16px; }
.view { min-height: 100vh; }
.topbar { display: flex; align-items: center; gap: 12px; padding: 12px 0 16px; font-size: 17px; font-weight: 600; }

/* 顶部导航: 三个 tab + 退出(退出靠 margin-left:auto 顶到最右)。
   样式沿用页面既有的字色/主色: 未选中灰、选中主色(e8657f)且加粗 —— 与 .badge/.btn-plain 同一套色。
   链接做成 <button> 而不是 <a href>: 切页是纯前端的事, 用 <a> 会改 URL/触发导航(且没后端路由接)。
   ⭐ 客户订单那一排状态筛选(.rp-tab, 见下面"客户订单的状态筛选"那段)与它**共用这两条规则** ——
   同样是"一排 tab、选中一个", 各写一份就是两套外观, 改了一处另一处不会红, 只会慢慢长得不一样。
   ⚠️ 共用的是**规则**, 类名各用各的: 那一排不能也叫 .nav-item(理由见下面那段)。 */
.nav { display: flex; align-items: center; gap: 4px; padding-bottom: 0;
  font-size: 15px; font-weight: 600;
  padding-top: max(12px, env(safe-area-inset-top)); } /* 登录后它是最顶上的元素, 刘海里要留开 */
.nav-item, .rp-tab { background: none; border: 0; padding: 10px 8px; cursor: pointer;
  font-size: 15px; font-weight: 600; color: #999; border-bottom: 2px solid transparent; }
.nav-item.active, .rp-tab.active { color: #e8657f; border-bottom-color: #e8657f; }
.nav-logout { margin-left: auto; }
.topbar .dot { font-size: 12px; color: #999; font-weight: 400; }
.topbar .dot.open { color: #2e9e5b; }
.card { background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); }
.login-card { margin-top: 15vh; }
.login-card h1 { font-size: 22px; text-align: center; margin-bottom: 6px; }
.sub { color: #999; font-size: 13px; text-align: center; margin-bottom: 16px; }
label { display: block; margin-bottom: 12px; font-size: 13px; color: #666; }
input { width: 100%; margin-top: 6px; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 16px; }
.btn { display: inline-block; background: #e8657f; color: #fff; border: 0; border-radius: 8px; padding: 10px 18px; font-size: 15px; cursor: pointer; width: 100%; }
.btn-plain { background: none; border: 0; color: #e8657f; cursor: pointer; font-size: 14px; padding: 6px; }
.err { color: #e64340; font-size: 13px; margin-top: 10px; min-height: 18px; }
.empty { text-align: center; color: #aaa; padding: 60px 0; }
.list { display: block; }
/* 一行一实体、整行可点(场次卡 / 客户行共用一套外观: 都是 .card + 去按钮默认样式 + 左对齐)。
   ⚠️ 客户行**不能直接复用 .session-card 这个类名**: e2e 与手工验收都用 `.session-card` 定位场次
   (page.click('.session-card')), 客户行带上同名类会先被选中 —— 而它在另一个(隐藏的)视图里,
   表现是"点不动/找不到元素"。故共用选择器、不共用类名。 */
.session-card, .cust-card, .rp-card { width: 100%; text-align: left; border: 0; cursor: pointer; font-size: 15px; }
.row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.meta { color: #999; font-size: 12px; margin-top: 4px; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #eee; color: #666; }
.badge.submitted { background: #fff3e0; color: #e65100; }
.badge.confirmed { background: #e8f5e9; color: #2e7d32; }
.badge.cancelled { background: #f5f5f5; color: #999; }
.code-card { text-align: center; }
.code { font-size: 40px; font-weight: 700; letter-spacing: 4px; margin: 8px 0 16px; color: #e8657f; }
/* 三区订单列表: 未推送常显(卡片头 = .row.head), 已推送/已取消的卡片头是可点的收起条 */
.collapse-head { width: 100%; text-align: left; background: none; border: 0; padding: 0;
  font-size: 15px; font-weight: 600; color: #666; cursor: pointer; }
.collapse-head .meta { font-weight: 400; margin-left: 6px; }
.order { border-top: 1px solid #f0f0f0; padding-top: 10px; margin-top: 10px; }
/* 卡片头下面第一条订单不再画分隔线(首条紧贴标题, 线会显得多余) */
.list > .order:first-child { border-top: 0; padding-top: 0; }
.order.cancelled { opacity: 0.5; }
.line { color: #666; font-size: 13px; margin: 4px 0; }
/* 「折扣 2.8 折」那一格: 它是客户行里**唯一**可点的入口(整行也是个按钮, 点开客户详情),
   所以必须一眼看出"这里能点、且点的是另一件事" —— 虚线下划线是最省的写法
   (与 .btn-plain 的粉色文字同一个信号色)。点它时的 stopPropagation 见 agent.js 的 discountCell。 */
.disc-chip { color: #e8657f; border-bottom: 1px dashed #e8657f; cursor: pointer; }
/* 「我的客户」里那几格入口(客户行上的 手机号/门店/＋加一家店, 详情里的 改手机号/改名/地址/删除)。
   与 .disc-chip 同一套视觉信号(粉色 + 虚线下划线 = 这里能点, 且点的是另一件事),
   ⚠️ 但**刻意不共用一个类名**: 折扣那一格有一条 e2e 按 .disc-chip 逐个数(5 家客户 5 格),
   合并之后那些用例会把这里的入口一起数进去, 而它们在另一块区域(改的是别的东西)。
   white-space: nowrap —— 小格里的字不许被拆到两行("删除"的"删"在上、"除"在下, 更容易点错),
   而门店名那种长自由文本由 .cust-store 的 overflow-wrap 负责断行(见下)。 */
.cust-chip { color: #e8657f; border-bottom: 1px dashed #e8657f; cursor: pointer;
  margin-right: 10px; white-space: nowrap; }
/* 门店那一行: 名字 + 地址可能很长(都是自由文本), 与 .cust-phone 同一条理由要能断行 ——
   #cust-info 是 .card, 不在 .cust-card 那条规则(只见 .meta)的覆盖范围里, 单独写一条。
   ⚠️ 不加 `white-space: nowrap` 到这一整行: 那一行的三个小格就会被挤到第二行去。 */
.cust-store { overflow-wrap: anywhere; }
.cust-store .store-name { margin-right: 10px; }
.edit-box { background: #fafafa; border-radius: 8px; padding: 8px; margin-top: 8px; }
.edit-line { font-size: 14px; }
.line-name { font-size: 14px; }
.stepper { display: inline-flex; align-items: center; gap: 8px; }
.step { width: 32px; height: 32px; border: 0; background: #eee; border-radius: 6px; font-size: 16px; cursor: pointer; }
.num { min-width: 24px; text-align: center; }
.actions { margin-top: 8px; justify-content: flex-end; }
.actions .btn { width: auto; }

/* ==================== 汇总卡 + 款式订货汇总 ==================== */
#summary-card { text-align: center; }
.sum-qty { font-size: 15px; color: #666; margin-bottom: 12px; }
.sum-qty b { font-size: 30px; color: #e8657f; margin-right: 4px; }
.sum-money { display: flex; gap: 12px; margin-bottom: 10px; }
.sum-money > div { flex: 1; background: #faf7f8; border-radius: 8px; padding: 10px 8px; min-width: 0; }
.sum-label { display: block; font-size: 12px; color: #999; margin-bottom: 4px; }
.sum-money b { font-size: 17px; color: #333; word-break: break-all; }
.sum-profit { font-size: 14px; color: #666; }
.sum-profit b { color: #2e9e5b; font-size: 17px; }
/* 负毛利换色: 亏损是规格点名"要让代理看见"的情况, 盈利绿会把它淹没 */
.sum-profit b.neg { color: #e64340; }

/* 汇总降级(拉取失败): 卡片置灰 + 一行提示。冻结的旧数字照旧在屏上, 但被明确标记为不可信 ——
   比"隐藏卡片"好: 隐藏会让功能莫名消失(M4 那次排查的教训), 代理也无从知道刚才还有的数字去哪了。
   未下单商家卡同源(同一份 /summary), 一起标 —— 否则它的名单会显得比旁边置灰的数字更可信。 */
#summary-card.degraded, #styles-card.degraded, #not-ordered-card.degraded { opacity: .55; }
.warn { color: #e64340; font-size: 12px; margin: 0 0 10px; }

/* 未下单商家名单: 一行一个手机号(现场照着催单)。刻意不复用 .order ——
   那是订单行的语义, 复用会让"数订单行"的地方把催单名单也算进去。 */
.not-ordered-row { border-top: 1px solid #f0f0f0; padding: 8px 0; }
#not-ordered-list > .not-ordered-row:first-child { border-top: 0; padding-top: 0; }
.not-ordered-row .phone { display: block; font-size: 15px; color: #333;
  overflow-wrap: anywhere; } /* 超长/异常手机号在 375px 下换行而不是撑破卡片 */
/* 同号标注: 同一家店多个人各自扫码(一个微信号一行 customer) → 名单里同一手机号出现多次。
   不去重(去重会打破"已下单+未下单===分母"), 只标出来, 免得代理照着同一个号打 N 次。
   必须 block + 小字灰: .phone 是 block, 这行自然落到号码下方; 不能做成行内小标 —— 号码末尾
   如果被 overflow-wrap 断行, 行内标注会黏在断行后的半截号码后面, 看着像号码的一部分。 */
.not-ordered-row .dup { display: block; font-size: 12px; color: #999; margin-top: 2px; }

.style-row { border-top: 1px solid #f0f0f0; padding: 10px 0; }
.style-row:first-child { border-top: 0; }
.style-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.style-row b { white-space: nowrap; color: #e8657f; }

/* ==================== 我的客户 / 客户详情 / 我的订单(跨场次) ==================== */
/* 一行一实体, 与 .style-row / .not-ordered-row 同款(上分隔线, 首行不画线)。
   ⚠️ 刻意**不复用 .order**: 那是"场次详情里的订单行"的语义(它自带异常标记、核实改量按钮那一整套),
   复用会让数订单行的地方把这两张新表也算进去 —— 与 .not-ordered-row 那条注释同一个理由。 */
.data-row { border-top: 1px solid #f0f0f0; padding: 10px 0; }
.data-row:first-child { border-top: 0; padding-top: 0; }
/* 已取消单灰显: 与 .order.cancelled 同款, 且状态未知的单也归这一档(判据是 agent.js 的 normStatus)。 */
.data-row.cancelled { opacity: 0.5; }
/* 手机号/门店名都是商家自己填的自由文本, 长度不受控(现场实测有人填了 66 位):
   必须能断行 —— 375px 下少了这条就是整页横向滚动, 而 390px 的常驻视口根本复现不出来。 */
.cust-phone { font-size: 17px; }
.cust-card .meta, .data-row .meta, .cust-phone, .rp-card .meta, .rp-card b { overflow-wrap: anywhere; }

/* ==================== 客户订单(代理端默认页, 设计文档 §7.3) ==================== */
/* 状态筛选那一排(全部订单 / 待审核 / 已通过 / 退回): 四个并排, 外观沿用顶部导航那套 tab
   (.nav-item, 见上面那两条共用的规则)。
   ⚠️ 容器**不是** .nav: 那个类自带 max-width / margin:auto / 内边距与三段响应式(见文件头那条
      "共用横向盒"), 是给页面最顶上那一栏用的 —— 嵌在 .view 里会变成双层内边距, 而且会跟着
      .nav 一起在打印时消失(位置也不对)。
   ⚠️ 这几格也**不能**叫 .nav-item: 顶部导航与子视图切换器都用那个类定位(页面用例与 e2e 的选择器
      就写在它上面), 这一排带上同名类会被那些选择器一起选中 —— 与 .session-card/.cust-card
      那条注释是同一条理由(共用规则、不共用类名)。 */
.rp-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 10px; }
/* 「待审核」上的红点数字。0 条时整格是 hidden(判据在 agent.js 的 renderRpPending):
   一个红色的 0 比没有更吵, 而旁边"待审核"三个字已经把话说完了。
   形状借 .badge 那套(小字号/圆角/内边距), 只换红底白字 —— 与 .badge.abn(异常单)分开:
   那是"这一单不正常", 这是"有几单等着你", 两件事。 */
.rp-count { background: #e64340; color: #fff; margin-left: 4px; }

/* 行内反馈(审核结果 / 取数失败共用同一条位置)。三态: 默认灰(普通说明)、ok 绿、bad 红。
   ⚠️ 刻意**不复用** .warn: 那是 12px 且只为"坏消息"配的色, 补货这条要能在同一个位置上
   说好消息(#id 已通过)与坏消息(已经处理过了), 字号也要跟着 .msg 走。 */
.msg { font-size: 13px; line-height: 1.5; margin: 0 0 10px; color: #666; }
.msg.ok { color: #2e9e5b; }
.msg.bad { color: #e64340; }
/* 推送 ERP 那一行(补货明细: 一句人话 + [重推])。借用 .msg 的下边距 —— 它是行内反馈的**常驻版**
   (同样的位置、同样的语气, 只是不随下一次操作消失), 两处边距不一致会显得是两个人拼的。
   文字本身走 .meta 的字号/字色: 它是背景信息里"可能要人动手"的那一档, 但不是错误提示
   (错误提示由上面那条 .msg 承担, 它说的才是"这一次发生了什么")。 */
#rp-push { margin-bottom: 10px; }
/* 收货信息三行(补货明细: 收件人 / 省·市·区 / 客户原文)。**一行一件事**, 不拼成一句完整地址 ——
   客户原文里本来就常含省市区, 拼起来会重复(理由见 agent.js 的 rpShipLines)。
   标签定宽(而不是让它按内容宽): 不定宽的话三行的值起点各不相同, 代理要在三行之间来回找 ——
   而这一块的存在意义正是"让他一眼判断这单能不能发"。 */
.rp-ship { margin-top: 8px; }
.rp-ship-line { display: flex; gap: 8px; font-size: 13px; color: #666; margin-top: 4px; }
.rp-ship-k { flex: 0 0 auto; min-width: 8.5em; font-size: 12px; color: #999; }
/* 自由文本长度不受控 —— 与 .cust-phone / .rp-card .meta 同一条理由(现场实测有人填了 66 位):
   必须能断行, 否则长地址在 375px 下就是整页横向滚动。min-width:0 不能省: flex 项默认按内容撑开,
   只写 overflow-wrap 是拦不住它把整行顶宽的。中文自己会换行, 但英文/数字地址(海外单)不会。 */
.rp-ship-v { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* ==================== 异常单标红 ==================== */
.badge.abn { background: #d9534f; color: #fff; }

/* ==================== 响应式增强(大屏手机/折叠屏/平板全适配) ==================== */

/* 刘海屏/横屏安全区(HTML 已带 viewport-fit=cover), 不支持 env() 的浏览器自动回退 16px。
   .nav 必须一起带上(它的 padding-top 写在上面 .nav 规则里) —— 见那条"共用横向盒"的说明。 */
.view, .nav { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
.topbar { padding-top: max(12px, env(safe-area-inset-top)); }

/* 320px 小屏不破版: 场次码响应式字号+字距, 8 字符单行放下(40px 固定字号在小屏会溢出) */
.code {
  font-size: clamp(26px, 10vw, 40px);
  letter-spacing: clamp(1px, 1vw, 4px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 小屏防破版: 行内长文本(手机号/金额汇总/标题)可换行或省略, 避免横向溢出 */
.row { flex-wrap: wrap; }
/* 详情页顶栏按钮多(导出/导出已确认/打印/大屏): 允许整行换行, 且按钮内文字不折行 ——
   否则窄屏(375px)下每个按钮被压成一列单字。
   场次名单独占一行(窄屏不再被按钮挤成"2..."), 仅在详情视图生效, 不影响场次列表顶栏 */
.topbar { flex-wrap: wrap; }
.btn-plain { white-space: nowrap; }
#view-detail .topbar > span:first-of-type { flex: 1 1 100%; }
.topbar > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-plain { padding: 8px 10px; }

/* ≥720px: 大屏手机横屏 / 折叠屏展开 / 平板竖屏 */
@media (min-width: 720px) {
  body { font-size: 16px; }
  .view, .nav { max-width: 960px; padding: 24px; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
  .nav { padding-bottom: 0; } /* 上面那句 padding: 24px 会把导航的下边距也放大, 单独收回(与基础规则同款) */
  .card { padding: 20px; }
  .topbar { font-size: 18px; }
  .login-card { max-width: 480px; margin-left: auto; margin-right: auto; }
  .btn { min-height: 44px; }
  .btn-plain { min-height: 44px; padding: 10px 12px; }
  .step { width: 44px; height: 44px; font-size: 18px; border-radius: 8px; }
  .badge { font-size: 12px; padding: 3px 10px; }
  .meta { font-size: 13px; }
}

/* ≥1024px: 平板横屏 / 桌面。
   注: 原「商家组两列栅格」随按商家分组一并移除 —— 改版后三个区是按待办优先级排的,
   并列会把"未推送"这份待办摊平(设计规格三: 未推送是主角, 排最前), 故保持单列 */
@media (min-width: 1024px) {
  .view, .nav { max-width: 1120px; }
}

/* 触控设备: 步进器/主按钮命中区 ≥44px(全设备适配约束) */
@media (pointer: coarse) {
  .step { width: 44px; height: 44px; }
  .btn { min-height: 44px; }
}

/* ==================== 打印视图(本场订单明细) ==================== */
/* 打印头: 屏幕上不显示, 只在纸上出现 */
.print-head { display: none; }

@media print {
  /* 交互件与现场专用卡片(顶栏/按钮/场次码卡)不上纸。
     汇总卡/款式汇总卡也不上纸: 纸面会被带离系统, 进货额与毛利是代理的商业机密;
     且打印头写的是"订单明细", 汇总不是这张纸的内容。 */
  /* 未下单商家卡也不上纸: 它是现场动作清单(拿它去催单), 不是订单记录 ——
     打印头写的是"订单明细", 混进一份没有订单的商家名单会让纸面语义打架;
     且它与总览卡/款式卡同源(同一份 /summary), 一个上纸一个不上纸只会更费解。 */
  /* 顶部导航同 .topbar: 纸面上没有"点一下切页"这回事, 印出来只是一排死按钮。
     它不在任何 .view 里(是 body 的直接子元素), 所以必须单独列进来, 别以为 .topbar 那条盖住了它。
     ⚠️ #rp-tabs 同理, 而且它是**后加的**: 状态筛选原先是 .topbar 里的一个 <select>(跟着 .topbar
        一起不上纸), 改成 .topbar 之外的一排按钮之后, 少了这一格就会在纸面上多出一排死按钮
        —— 而打印这一屏是代理会做的事(照单核对)。红点角标也在里面, 一并收起。 */
  .topbar, .nav, #rp-tabs, .btn-plain, .btn, .actions, .code-card, #summary-card, #styles-card, #not-ordered-card { display: none !important; }
  body { background: #fff; }
  /* 100vh 是屏幕概念: 分页介质上会把内容撑满一页, 多出一张白纸 */
  .view { max-width: none; min-height: auto; padding: 0; }
  /* 折叠是屏幕上的减负装置(现场盯单时避免刷屏), 纸面要的是完整记录 ——
     收起态不得带进纸面: 默认就是收起, 不展开地打印会**静默少印**已推送/已取消两个区的明细,
     而代理昨天拿到的还是全量。
     介质限定在 @media print 内, 屏幕上的收起行为不受影响; 这里靠 ID 选择器的优先级压过
     .hidden{display:none!important}(同为 !important 时比优先级: #id > .class)。 */
  #order-pushed, #order-cancelled { display: block !important; }
  /* 纸上既然一律展开, 收起箭头就没有意义了(它会恒为 ▸, 与下方已展开的明细自相矛盾) */
  .collapse-head .arrow { display: none; }
  /* 「屏幕上有、纸上没有」的行内片段 —— 目前两种用法:
     ① 已取消区标题里的口径括注(「（不计入上方合计…）」): 汇总卡在纸面本就是隐藏的,
        这句注解会指向一个纸上不存在的东西 —— 不泄漏金额, 纯上下文噪音。计数本身照常印。
     ② 我的客户/我的订单/客户详情里的**成本侧金额**(进货额/毛利): 与汇总卡不上纸同一条理由 ——
        纸面会被带离系统, 进货额与毛利是代理的商业机密; 同一张表上的出货额(客户价)是代理自己
        那档价, 不是机密, 照印。e2e 用例 7 就是拿 `document.body.innerText` 全量搜「进货额/毛利」
        来钉这条的, 而 innerText 不含 display:none 的东西 —— 少了这里的 display:none,
        代理在那两屏上按一次 Ctrl+P 就把成本侧印出去了。 */
  .anno { display: none; }
  /* 单条订单尽量不跨页断开(整单高于一页时浏览器自动忽略, 不会丢内容)。
     原「一个商家的订单整组不断开」随商家分组一并移除, 现在的不可分单位是订单本身 */
  .order { break-inside: avoid; }
  .card { box-shadow: none; border: 1px solid #ccc; }
  .print-head { display: block; margin-bottom: 10px; }
  .print-head h1 { font-size: 17px; }
  .print-head p { font-size: 12px; color: #666; }
}

/* ── 「我的码」那一屏（2026-09-29 晚 加）───────────────────────────────────────
   码图居中 + 白底：微信出的是**白底方图**，压在 .card 的白底上正好连成一片；
   max-width 是给**桌面端**的（代理在电脑上打开时不该糊出一张 800px 的巨图），
   手机上它就占满卡片宽度 —— 那正是要长按/截图转发的那一份。 */
.mycode-imgwrap { display: flex; align-items: center; justify-content: center; min-height: 200px; margin: 12px 0; }
.mycode-img { width: 100%; max-width: 260px; height: auto; border-radius: 8px; }
/* 取不到时那句原因：与 .meta 同一档的灰字，但**左对齐**（它是一句话，不是居中占位） */
#mycode-fail { text-align: left; padding: 12px 0; }

/* ── 客户订单那一屏的「客户」下拉（2026-09-30 加）────────────────────────────
   与上面那排状态按钮**并排不同风格**是有意的（判据写在 index.html 那段）：
   状态是固定的四档、要一直看得见；客户数量不定，只适合收在下拉里。
   ⚠️ 不给它宽度 100%：那样它会跟那排按钮一样宽，看起来像"第五档"。 */
.rp-cust {
  display: block; width: auto; max-width: 100%;
  margin: 0 0 12px; padding: 8px 10px;
  font-size: 14px; color: #333;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
}

/* 登录页底部那句：编号/密码从哪来 + **忘了密码怎么办**。
   ⚠️ 它是登录页上唯一的"出路说明"，不是客套 —— 忘了密码的人正好卡在这一屏，
   而"联系品牌方重置"那句原先只写在**登录后**的账号格里（2026-09-30 加的），
   忘了密码的人永远走不到那儿。两处是同一件事的两个入口，改一处要一起改。 */
.login-note { color: #999; font-size: 12px; text-align: center; margin: 14px 0 0; line-height: 1.6; }

/* ── 导航：窄屏上**整格换行**，不许把字劈成两截（2026-09-30）─────────────────────
   起因：用户要把「改密码」挪到「退出」边上，而量出来导航在多窄的屏上放不下。
   ⚠️⚠️ 关键在于**折行会先折在字上**：不加 nowrap 的话，宽度不够时浏览器把
      "客户订单"劈成上下两行（导航从 55px 变 76px），那比"导航多一行"难看得多。
      加上 nowrap 之后，宽度不够时是**整格**换到下一行 —— 每个按钮的字都完整。
   ⚠️ 字号与内边距一起从 15px/8px 收到 14px/6px：390px 那一档靠这一收才放得下第 5 格。
      （375px 及以下仍会换成两行 —— 但那是**现在就已经发生的事**：360px 安卓上
       4 格 + 退出本来就已经断字两行了，这一改反而让它变整齐。） */
.nav { flex-wrap: wrap; }
.nav-item { white-space: nowrap; font-size: 14px; padding: 10px 6px; }
/* 「改密码」与「退出」同属账号类操作，都贴最右；它比退出小一号（低频、别喧宾夺主）。 */
.nav-pw { font-size: 12px; padding: 8px 4px; white-space: nowrap; margin-left: auto; }
/* ⚠️ 退出那个 margin-left:auto 是"把自己顶到最右"用的；现在它左边多了「改密码」，
   两个都 auto 会把它们各推一半 ⇒ 只在**改密码那格**上留 auto，退出跟着它走。 */
.nav-logout { margin-left: 0; }

/* ⭐ 代理编号：**要大、要好复制**（2026-09-30 用户：「应该把 A001 弄大点 前面的字弄小点」、
   「代理复制了发给他的客户」）。正式版发布前扫码那条路不通，代理只能让客户手输编号 ——
   这个编号他要反复复制、发进微信，界面上就该是**一眼找到、一手选中**的那样东西。
   ① **大**：22px 加粗 + 字距 —— 它比"代理编号"这四个字（.meta 的 12px 灰字）大一档，
      扫一眼就知道"要发出去的是这一串"；
   ② `user-select: all`：**点一下（或长按）就全选**，手动复制也容易 ——
      那是复制按钮失败时的兜底（clipboard API 在非安全上下文/老浏览器上会失败）。 */
.acct-code {
  font-size: 22px; font-weight: 700; color: #1f2937; letter-spacing: 1.5px;
  user-select: all; -webkit-user-select: all;
}
.acct-copy { font-size: 12px; padding: 2px 10px; margin-left: 8px; white-space: nowrap; vertical-align: 3px; }