/*!
 * 丽人·养生 O2O 到店核销平台 · style.css
 * 设计令牌：马尔斯绿（primary）/ 爱马仕橙（accent）
 * 移动端优先，三端（顾客端 / 老板端 / 平台后台）共用
 */

:root {
  --primary: #0E5C4A;
  --primary-lt: #126E58;   /* 主色渐变亮色：顾客端/手机壳顶部渐变第二色（主色可配时由 JS 同规则推导覆盖） */
  --primary-tint: #ECF2F1; /* 主色浅底（themeStyle 随主色注入，保留备用） */
  --primary-700: #0A4A3B;
  --primary-600: #0C5240;
  --primary-100: #E7F2EE;
  --primary-50: #F3F9F6;

  --accent: #F26B21;
  --accent-600: #D95B15;
  --accent-100: #FDEEE5;

  --bg: #F4F6F5;
  --surface: #FFFFFF;
  --line: #E3E8E6;
  --line-2: #EEF1F0;

  --text: #172723;
  --text-2: #5A6B65;
  --text-3: #93A19C;

  --ok: #2E8B57;
  --warn: #C98A16;
  --danger: #D0453F;
  --info: #2A6FB0;

  /* 顾客端底部固定操作条（.buy-bar）的高度，容器底部让位要用。
     ⚠ 77px 只是**首帧兜底**：真值由 app-customer.js 的 syncBarHeight() 渲染后实测
       offsetHeight 写回本变量（用户要求卡片底边与按钮栏无缝相接，手测常量差 1px 就露馅）。
     ⚠ 引用处**不要再叠加 env(safe-area-inset-bottom)**：.buy-bar 的 padding 已含安全区，
       offsetHeight 也就含它，再加 = 双倍安全区（底部空一大截）。
       实测口径（414×900 视口）：按钮内容 57 + 上下 padding 各 10 = 77px。 */
  --buybar-h: 77px;
  /* 确认订单页橙色支付条（.co-bar）高度，同理只是首帧兜底（实测写入）。
     引用处同样不得再加 env(safe-area-inset-bottom)。 */
  --cobar-h: 65px;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(16, 40, 34, .04), 0 8px 24px rgba(16, 40, 34, .06);
  --shadow-sm: 0 1px 2px rgba(16, 40, 34, .06);
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --mono: "SF Mono", "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.35; }
h1 { font-size: 20px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0 0 8px; }

/* ================= 布局 ================= */
.shell { min-height: 100vh; display: flex; flex-direction: column; }

/* 站点版权底栏（仅老板端/申请页等还在用：置于 .shell 内，flex 列自动贴底）
   ⚠ 顾客端已改用它下面的 .card-foot（版权进卡片内），customer.html 里不再有 <footer class="site-foot"> */
.site-foot {
  text-align: center; font-size: 12px; line-height: 1.6;
  color: var(--text-2); padding: 16px 12px calc(16px + env(safe-area-inset-bottom, 0px));
  letter-spacing: .4px;
}
.shell > .site-foot { margin-top: auto; }

/* 顾客端：卡片**直接吸到屏幕顶**（2026-09-29 用户「最顶上还是有一个空行，不需要留空」）
   —— 那条空行就是 .container 的 16px 上内边距（后台页面需要它，顾客端手机视角不需要）。
   左右 16px 保留：卡片不贴边，才有手机壳的观感。
   配合：顶部两圆角一并抹平，否则卡片上沿两侧露出两个底色小月牙，看着还是"没吸住"。
   ⚠ class `cust` 写在 customer.html 的 <body> 上，别删（删了顶部空行立刻回来）。 */
body.cust .container { padding-top: 0; }
body.cust .phone { border-top-left-radius: 0; border-top-right-radius: 0; }

/* 顾客端「卡片内版权行」（2026-09-28 用户要求：版权放进模块内、上下各隔一行、50% 黑）
   —— 改前它是卡片外的 .site-foot：卡片下沿先收口，版权孤零零飘在灰底上，再往下一截才是
      按钮栏，三段各说各话，用户原话「太丑了」。
   四条硬指标，改任一都算回退：
     ① 与正文最后一句隔**整整一行** = 12px × 1.7 ≈ 20px（margin-top）。
        （.shop-notice 的 margin-bottom 已从 4px 归零，否则会叠加成 24px，多出小半行）
     ② 与**卡片底边**也隔整整一行 = 20px（padding-bottom）。
        ⚠ 这是 2026-09-28 第二轮才补的：上一版只顾着「别让卡片底部多出白底」把下间距归零，
          结果字贴着卡片下沿、上下不对称，用户原话「还是不行」。
          正确口径是**上 20 / 下 20 对称**，而不是「下间距=0」。
     ③ 字色 **25% 黑** rgba(0,0,0,.25)。演变：先用 `--text-3`（带绿调的灰，压白卡上不像"版权"）
        → 改 50% 黑（用户点名要半黑）→ **2026-09-29 再淡一半到 25%**（用户反馈"目前太重了"）。
        ⚠ 别再往回加浓；真要调整也只在 .25~.35 之间微调，超过 .4 就会被说"太抢眼"。
     ④ 底部**仍要给 fixed 操作条让位**（.buy-bar，见下面 body.has-buybar 规则）。
        ⚠ 这条是 2026-09-28 刚修完的老 bug（版权一度整条被按钮压住看不见），别当冗余删掉。
        ⚠ 让位量垫在 .container 上、**不是**垫在 .card-foot 自己身上 ——
          垫自己 = 让位量 83px 全变成卡片底部的白底（营销页内容短时肉眼可见，像卡片没关严）；
          垫容器 = 那段空白是页面底色，跟卡片下沿之间有干净的收口。
          ★ 一句话区分：这里的 20px 是**排版留白**（一行），容器那 83px 是**避让 fixed 条**（不能省）。 */
.card-foot {
  margin: 20px 18px 0; padding-bottom: 20px;
  text-align: center; font-size: 12px; line-height: 1.7;
  color: rgba(0, 0, 0, .25); letter-spacing: .4px;
}
/* 顾客端有底部固定操作条时（仅营销页）：在容器底部留出**正好一个操作条的高度**，
   把卡片连同版权行整体抬到按钮栏上方（量少了版权被压住、量多了中间裂一条灰缝）。
   ★ 2026-09-28 用户拍板：「模块底部要和下面两个大按钮连起来，不要中间离个缝」
     —— 所以这里是 var(--buybar-h) **不加任何呼吸位**（原来多给 6px，那条灰缝就是它）。
   ★ --buybar-h 由 app-customer.js 的 syncBarHeight() 渲染后**实测写入**（本文件 :root 里的
     77px 只是首帧兜底）。手测常量做不到无缝：按钮行数/字号/安全区一变就差几 px。
   ⚠ 这里**不再加 env(safe-area-inset-bottom)**：.buy-bar 自己的 padding 已含它，
     offsetHeight 也就含它，再加一遍 = 双倍安全区，iPhone 上底部会空出一大截。 */
body.has-buybar .container {
  padding-bottom: var(--buybar-h, 77px);
}
/* 同上「连起来」的一部分：白卡底部两圆角在按钮栏两侧会露出两个底色小月牙，
   接缝看着还是断的 → 有底栏时把卡片下方两角抹平，让白卡与白色按钮栏真正连成一整块。 */
body.has-buybar .phone {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
/* ★ 内容不到一屏时也要「连起来」（2026-09-28 确认订单页实测踩到）：
   .shell 有 min-height:100vh，内容短时卡片被留在半空，卡片底边与按钮栏之间又裂出一条
   底色缝（实测 15px）—— 让位量算得再准也没用，因为缝隙来自"卡片压根没长到那儿"。
   做法：.shell 的弹性列把 .container 撑满剩余高度，容器再用弹性列把 .phone 撑到底。
   内容超过一屏时 flex-grow 不生效（按内容高），营销页的长页面行为完全不变。 */
body.has-buybar .shell > .container,
body.has-cobar .shell > .container {
  flex: 1 1 auto; display: flex; flex-direction: column;
}
body.has-buybar .phone,
body.has-cobar .phone { flex: 1 1 auto; }
/* 光把卡片撑高还不够：卡片变高后，剩下的空白会堆在**卡片内部最后一个块之后**
   （确认页实测 .co-body 底与卡片底差 81px，版权行被空白顶起来，缝照样在）。
   → 卡片走弹性列，内容块吃满高度，再把版权行用 margin-top:auto 顶到内容区底边：
     此时「版权行底 → 按钮栏顶」正好等于版权行自己的 20px 留白，与营销页完全一致。
   ⚠ 内容超过一屏时这些规则全都不产生额外空间（flex-grow 无效、auto 外边距为 0），
     所以长页面的营销页行为不变；只有「内容不到一屏」时才会被它们接管。 */
body.has-buybar .phone,
body.has-cobar .phone { display: flex; flex-direction: column; }
/* ⚠ 只给营销页用（has-buybar）：把版权行顶到内容区底，使它同时满足「离正文一行」+「离按钮 20px」。
   确认订单页（has-cobar）**刻意不用**：那里内容往往不到一屏，若把版权也顶到底，它会孤零零
   飘在页面最下方（用户此前明确吐槽过这种「卡片没关严掉出来的一行字」）。
   确认页取「版权紧贴正文、下方的白卡一直延伸到支付条」—— 一样无缝，也不孤零零。 */
body.has-buybar .card-foot { margin-top: auto; }
body.has-cobar .co-body { flex: 1 1 auto; display: flex; flex-direction: column; }
/* ⚠ margin-top:auto 在「上方没有剩余空间」时退化成 0 —— 那时版权行会贴住上一块，
   一行间距就没了。所以把那一行改由 ::before 固定兜住：有剩余空间时 auto 把整行推到底、
   没剩余空间时 ::before 保证至少一行。两种情形都恰好「隔一行」，与营销页口径一致。
   （非 flex 容器里 auto 等于 0，同理由 ::before 兜住 —— 支付中/结果/海报三个视图各不受影响。） */
body.has-buybar .card-foot::before {
  content: ''; display: block; height: 20px;
}

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--primary);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.topbar .brand { font-weight: 600; font-size: 15px; letter-spacing: .3px; }
.topbar .brand small { display: block; font-size: 11px; font-weight: 400; opacity: .72; letter-spacing: 0; }
.topbar .spacer { flex: 1; }
.topbar .tag {
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22);
}
.topbar a.navlink {
  color: rgba(255, 255, 255, .85); font-size: 12px; padding: 5px 10px;
  border-radius: 8px; border: 1px solid rgba(255, 255, 255, .18);
}
.topbar a.navlink:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.container { width: 100%; max-width: 960px; margin: 0 auto; padding: 16px; }
.container.narrow { max-width: 460px; }

.stack > * + * { margin-top: 14px; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.grow { flex: 1; }

/* ================= 卡片 ================= */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card > .card-hd {
  padding: 13px 15px;
  border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 10px;
}
.card > .card-hd h3 { flex: 1; }
.card > .card-bd { padding: 15px; }
.card > .card-ft {
  padding: 12px 15px; border-top: 1px solid var(--line-2);
  background: var(--primary-50);
}
.card.accent-top { border-top: 3px solid var(--accent); }
.card.primary-top { border-top: 3px solid var(--primary); }

/* 顾客端兜底：外层容器是 .phone 而不是 .card，上面那组 `.card > *` 子选择器命中不到，
   导致「支付成功 / 推广海报」等视图同样零内边距、文字贴边（2026-09-18 修）。
   确认订单页已改走自带的 .co-* 样式，不再依赖这里。 */
.phone > .card-hd {
  padding: 13px 15px;
  border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 10px;
}
.phone > .card-hd h3 { flex: 1; }
.phone > .card-bd { padding: 15px; }

.hint { color: var(--text-3); font-size: 12px; line-height: 1.65; }
.sub { color: var(--text-2); font-size: 12.5px; }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: .2px; }
.nowrap { white-space: nowrap; }

/* ================= 按钮 ================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer; transition: background .15s, border-color .15s, transform .06s;
  white-space: nowrap;
}
.btn:hover { border-color: var(--text-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; pointer-events: none; }

.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-600); border-color: var(--primary-600); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-600); border-color: var(--accent-600); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--primary); }
.btn-ghost:hover { background: var(--primary-100); border-color: transparent; }
/* 灰边文字按钮：保留主色文字，但给一圈可见的灰边框（用于「帐号」这类次级操作） */
.btn-ghost-line { background: var(--surface); border-color: var(--line); color: var(--primary); }
.btn-ghost-line:hover { background: var(--primary-50); border-color: var(--primary); }
.btn-danger { color: var(--danger); border-color: #F0CFCD; background: #FDF4F3; }
.btn-danger:hover { border-color: var(--danger); }
.btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: 8px; }
.btn-lg { padding: 13px 22px; font-size: 15px; border-radius: 12px; width: 100%; }
.btn-block { width: 100%; }

/* ================= 表单 ================= */
.field { margin-bottom: 12px; }
.field > label {
  display: block; margin-bottom: 5px;
  font-size: 12.5px; color: var(--text-2); font-weight: 500;
}
.input, .select, textarea.input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 14px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(14, 92, 74, .1);
}
.input.mono { font-family: var(--mono); letter-spacing: 1px; }
.input-lg { font-size: 22px; text-align: center; letter-spacing: 6px; font-family: var(--mono); padding: 14px; }
.select { appearance: none; background-image: none; }
.inline-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 申请表单：门店名称（宽）+ 经营类目（窄）同行 */
.apply-card .inline-2.name-cat { grid-template-columns: 1.7fr 1fr; }
.inline-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }

.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.switch input { display: none; }
.switch .track {
  width: 40px; height: 22px; border-radius: 999px;
  background: #D5DBD9; position: relative; transition: background .18s;
}
.switch .track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .18s;
}
.switch input:checked + .track { background: var(--primary); }
.switch input:checked + .track::after { transform: translateX(18px); }

/* ================= 徽标 ================= */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; line-height: 1.7;
  background: var(--line-2); color: var(--text-2); white-space: nowrap;
}
.badge-ok { background: #E7F4EC; color: #1F6B41; }
.badge-warn { background: #FBF1DC; color: #8C5F0C; }
.badge-danger { background: #FBEAE9; color: #A5322D; }
.badge-info { background: #E8F1FA; color: #1F5B8F; }
.badge-primary { background: var(--primary-100); color: var(--primary); }
.badge-accent { background: var(--accent-100); color: var(--accent-600); }

/* ================= 表格 ================= */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tb { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tb th, table.tb td {
  padding: 10px 12px; text-align: left;
  border-bottom: 1px solid var(--line-2); vertical-align: middle;
}
table.tb th {
  font-size: 12px; font-weight: 500; color: var(--text-2);
  background: var(--primary-50); white-space: nowrap;
}
table.tb td.num, table.tb th.num { text-align: right; font-family: var(--mono); font-size: 12.5px; }
table.tb tbody tr:last-child td { border-bottom: none; }
table.tb tbody tr:hover { background: #FAFCFB; }
table.tb tfoot td {
  background: var(--primary-50); font-weight: 600;
  border-top: 1px solid var(--line);
}

/* ================= 状态与统计 ================= */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 620px) {
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}

.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 13px;
}
.stat .k { font-size: 11.5px; color: var(--text-3); }
.stat .v { font-size: 19px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }
.stat .v.sm { font-size: 15px; }
.stat.hl { border-color: #CFE3DA; background: var(--primary-50); }
.stat.hl .v { color: var(--primary); }

.kv { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line-2); font-size: 13px; }
.kv:last-child { border-bottom: none; }
.kv .k { color: var(--text-2); }
.kv .v { font-weight: 500; font-variant-numeric: tabular-nums; }

.note {
  padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--primary-50); border: 1px solid #DCEBE4;
  font-size: 12.5px; color: var(--text-2); line-height: 1.7;
}
.note.warn { background: #FDF7EA; border-color: #F2E2BE; color: #7A5A10; }
.note.danger { background: #FDF3F2; border-color: #F1D3D1; color: #97332E; }
.note.accent { background: var(--accent-100); border-color: #F8D9C6; color: #8A3F0D; }
.note b { color: var(--text); }

/* ================= 标签页 ================= */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs .tab {
  padding: 9px 14px; font-size: 13.5px; color: var(--text-2);
  border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
  background: none; border-top: none; border-left: none; border-right: none;
  font-family: inherit;
}
.tabs .tab:hover { color: var(--text); }
.tabs .tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 500; }

/* ================= 弹窗 ================= */
.modal-mask {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(12, 28, 24, .45);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  animation: fadeIn .16s ease;
}
.modal {
  width: 100%; max-width: 560px; max-height: 86vh;
  background: var(--surface); border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(10, 28, 23, .28);
  display: flex; flex-direction: column; overflow: hidden;
  animation: popIn .18s ease;
}
.modal-hd {
  padding: 14px 18px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: center; gap: 10px;
}
.modal-hd h3 { flex: 1; }
.modal-bd { padding: 18px; overflow-y: auto; flex: 1; }
.modal-ft {
  padding: 13px 18px; border-top: 1px solid var(--line-2);
  background: var(--primary-50); display: flex; gap: 10px; justify-content: flex-end;
}
.contract-clause { margin-bottom: 13px; }
.contract-clause h4 { font-size: 13px; color: var(--primary); margin-bottom: 3px; }
.contract-clause p { font-size: 12.5px; color: var(--text-2); line-height: 1.75; margin: 0; }

/* ================= 门店帐号配置弹窗（一店一页 · 2026-09-24） =================
   字段多、分组多，故用大号弹窗（940px）+ 双列栅格；窄屏自动回落单列。
   配色沿用既有语义色：ok=绿、warn=橙、error=红。 */
.modal-lg { max-width: 940px; max-height: 90vh; }
.sa-status {
  border-radius: var(--radius-sm); padding: 12px 14px; margin: 4px 0 12px;
  border: 1px solid var(--line); background: var(--primary-50);
}
.sa-status-ok { border-color: var(--ok); background: rgba(14, 92, 74, .06); }
.sa-status-bad { border-color: var(--accent); background: rgba(242, 107, 33, .07); }
.sa-status-t { font-weight: 600; font-size: 13.5px; color: var(--text); }
.sa-blockers { margin: 8px 0 0 18px; padding: 0; }
.sa-blockers li { font-size: 12.5px; color: var(--accent-600); line-height: 1.8; }
.sa-chk { border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; }
.sa-chk-row {
  display: grid; grid-template-columns: 22px 176px 1fr; gap: 6px;
  padding: 7px 12px; font-size: 12.5px; align-items: start;
  border-top: 1px solid var(--line-2);
}
.sa-chk-row:first-child { border-top: 0; }
.sa-chk-lv { font-weight: 700; text-align: center; }
.sa-chk-ok .sa-chk-lv { color: var(--ok); }
.sa-chk-warn .sa-chk-lv { color: var(--accent); }
.sa-chk-error .sa-chk-lv { color: var(--danger, #c0392b); }
.sa-chk-lb { color: var(--text-2); }
.sa-chk-ms { color: var(--text); line-height: 1.7; }
.sa-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 10px;
}
.sa-grid .field { margin: 0; }
.sa-imgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sa-img { display: flex; flex-direction: column; gap: 6px; }
.sa-img img {
  width: 100%; height: 132px; object-fit: cover;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--primary-50);
}
.sa-img-ph {
  height: 132px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
  color: var(--text-3); font-size: 12px; background: var(--primary-50);
}
.sa-img-act { display: flex; gap: 6px; }
/* 证照同步状态行：绿＝已换成微信 media_id，橙＝本地图未同步（进件会被驳） */
.sa-img-sync { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.sa-img-sync .btn-sm { padding: 2px 8px; font-size: 12px; }
.sa-calc {
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 12px 14px; margin-top: 10px;
}
.sa-calc-ok { border-color: var(--ok); }
.sa-calc-bad { border-color: var(--accent); }
.sa-calc-hd { font-weight: 600; font-size: 12.5px; color: var(--text-2); margin-bottom: 8px; }
.sa-calc-grid {
  display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 6px 12px;
  font-size: 12.5px; align-items: center;
}
.sa-calc-grid span { color: var(--text-3); }
.sa-calc-grid b { color: var(--text); font-weight: 600; }
.sa-calc-verdict {
  margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--primary);
}
.sa-calc-bad .sa-calc-verdict { color: var(--accent-600); }
@media (max-width: 720px) {
  .sa-grid, .sa-imgs { grid-template-columns: 1fr; }
  .sa-chk-row { grid-template-columns: 22px 1fr; }
  .sa-chk-ms { grid-column: 2; }
  .sa-calc-grid { grid-template-columns: 1fr auto; }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(.97) translateY(6px); } to { opacity: 1; transform: none; } }

/* ================= Toast ================= */
#o2o-toast {
  position: fixed; left: 0; right: 0; bottom: 24px; z-index: 200;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
/* 顾客端有底部固定操作条（.buy-bar）时，提示条抬到操作条上方，避免遮住抢购按钮 */
body:has(.buy-bar) #o2o-toast { bottom: 94px; }
.toast-item {
  max-width: 86%; padding: 9px 16px; border-radius: 10px;
  background: rgba(20, 40, 34, .92); color: #fff;
  font-size: 13px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  animation: toastIn .2s ease;
}
.toast-item.toast-ok { background: rgba(31, 107, 65, .95); }
.toast-item.toast-err { background: rgba(160, 45, 40, .95); }
.toast-item.toast-warn { background: rgba(140, 95, 12, .95); }
.toast-item.toast-out { opacity: 0; transform: translateY(8px); transition: all .3s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ================= 顾客端（手机视角） ================= */
.phone {
  /* ★ width:100% 不能省（2026-10-12 补）：.container 在 has-buybar/has-cobar 下是弹性列，
     .phone 是它的弹性项；而 `.phone` 自带 `margin:0 auto` —— 交叉轴外边距为 auto 时
     flex 的 stretch **不生效**，宽度退化成 fit-content（= min(内容 max-content, 可用宽, 420)）。
     内容短的门店量到卡片只有 338px，而 .buy-bar 是 420px 定宽 —— 按钮栏比卡片还宽，两侧探出去。
     显式 width:100% 把宽度钉死为「可用宽」，再交给 max-width 封顶。 */
  width: 100%; max-width: 420px; margin: 0 auto;
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: clip; border: 1px solid var(--line);
}
/* 顶部绿色区：只放封面（店名/地址已下沉页底，2026-09-17）
   主色可配：--primary / --primary-lt 由顾客端或手机壳预览按 merchant.themeColor 局部覆盖
   滚动效果：封面吸顶固定、倒计时起的内容从其下滚过（2026-09-18）
   2026-09-21：顾客端已去顶部绿色条（.topbar），无顶栏时吸顶于页面最顶端（--topbar-h 置 0） */
.hero {
  padding: 0;
  position: sticky; top: var(--topbar-h, 0px); z-index: 20;
  background: linear-gradient(150deg, var(--primary) 0%, var(--primary-lt) 100%);
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .10);
}
/* 未传封面图：emoji 图标居中放大在绿色底上 */
.hero .cover-ph {
  height: 190px; display: flex; align-items: center; justify-content: center;
  font-size: 64px; line-height: 1;
}
/* 封面大图：铺满顶部（hero 已无内边距） */
.hero .cover-img { aspect-ratio: 5 / 4; overflow: hidden; }
.hero .cover-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 商品标题/价格区已下线（2026-09-18 拍板：价格挪到底部抢购按钮，正文只留模块卡） */

/* 门店信息：页面最底部（margin-bottom 预留固定操作条高度） */
.shop-foot {
  margin: 4px 18px 6px; padding-top: 12px;
  border-top: 1px dashed var(--line-2); text-align: center;
}
.shop-foot .sf-name { font-size: 14px; font-weight: 600; color: var(--text); }
.shop-foot .sf-line { font-size: 12px; color: var(--text-3); margin-top: 4px; line-height: 1.7; }

/* 页底须知区：徽章行 + 使用规则 + 结算提示（居中，紧随门店信息，2026-09-17 整合）
   ★ margin-bottom 的演变（三次改小，都源于「文案下方太空/离按钮太远」）：
     78px（2026-09-17 起，本来是给 .buy-bar 让位而留）→ 43px → 4px → **0（2026-09-28 终版）**
     历史教训：让位职责被两处重复承担过 —— 这里留 78px，外加卡片外的 .site-foot 又垫一份，
     两份叠加才是真实空隙，所以怎么调都还差一口气。
     现在让位只归「容器」（.container 在 has-buybar 下的 padding-bottom）一个地方管，
     版权行自身不挂 padding-bottom（挂了卡片底部会长出一截白底）。
     这里只负责内容收尾，故归零 —— 版权行自带 20px margin-top 就是那「隔开的一行」。 */
.shop-notice { margin: 6px 18px 0; text-align: center; }
.sn-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.shop-notice .sn-line { font-size: 12px; color: var(--text-3); margin-top: 8px; line-height: 1.7; }

/* 底部固定操作条：分享 + 抢购（fixed 与 .phone 同宽居中，不随滚动消失） */
.buy-bar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 420px; z-index: 30;
  display: flex; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--line-2);
  box-shadow: 0 -4px 14px rgba(7, 53, 43, .10);
}

/* 抢购按钮（两行式：价格大字 + 原价删除线 / 立即抢购 + 已省提示）
   高度由 flex 拉伸与分享钮对齐，橙色微渐变 + 投影做体积感 */
.btn-share-bar { flex: 30; }
.btn-buy {
  /* ★ min-width:0 不能省（2026-10-12 补）：按钮里 .bb-line2 是 white-space:nowrap，
     其 min-content ≈130px 会把按钮的「自动最小尺寸」顶到 ~253px；窄屏（≤320）下
     flex-shrink 被这道下限顶住 → 按钮比 .buy-bar 还宽、右侧探出屏幕被切。
     归零后按钮可正常收缩，溢出文字由 .bb-line2 自带的 ellipsis 收尾。 */
  flex: 70; min-width: 0; border: none; cursor: pointer;
  display: flex; flex-direction: row; align-items: center;
  gap: 8px; padding: 9px 14px; border-radius: 12px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-600) 100%);
  color: #fff; font-family: inherit;
  box-shadow: 0 5px 14px rgba(242, 107, 33, .32);
  transition: transform .12s, box-shadow .12s;
}
.btn-buy:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(242, 107, 33, .28); }
.bb-info { flex: 0 0 60%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-width: 0; padding-left: 10px; }
.bb-line1 { display: flex; align-items: baseline; gap: 6px; line-height: 1.1; }
.bb-price { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bb-old { font-size: 11px; opacity: .82; text-decoration: line-through; }
.bb-line2 { font-size: 11px; letter-spacing: 1px; opacity: .95; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-ico { flex: 0 0 40%; display: flex; align-items: center; justify-content: center; }
.bb-ico svg { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .28)); }
.bb-ico .bag { animation: bb-pulse 1.6s ease-in-out infinite; }
@keyframes bb-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.item-list { list-style: none; margin: 0; padding: 0 18px 14px; }
.item-list li {
  padding: 8px 0 8px 20px; position: relative;
  font-size: 13px; color: var(--text-2); border-bottom: 1px dashed var(--line-2);
}
.item-list li:last-child { border-bottom: none; }
.item-list li::before {
  content: ''; position: absolute; left: 4px; top: 15px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
}

/* 活动倒计时卡（2026-09-18 四次改版：实拍「青柠结霜玻璃」图做底 +
   主色淡纱叠加保证文字可读且随主色联动 + 斜向高光带） */
.act-card {
  position: relative; overflow: hidden;
  margin: 20px 18px 14px; padding: 17px 14px 13px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--primary) 26%, transparent) 0%, color-mix(in srgb, var(--primary-lt) 18%, transparent) 100%);
  border-radius: 14px; text-align: center;
  box-shadow: 0 8px 22px rgba(14, 92, 74, .20);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--primary) 26%, transparent);
}
/* 背景照片层 + 轻纱层（2026-09-19 换图：act-cd-bg.jpg，整层 50% 透明度） */
.act-card::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(130px 95px at 10% -4%, rgba(255, 255, 255, .30), transparent 70%),
    radial-gradient(170px 130px at 92% 108%, rgba(255, 255, 255, .20), transparent 72%),
    url('../img/act-cd-bg.jpg');
  background-position: center, center, center;
  background-size: auto, auto, cover;
  background-repeat: no-repeat;
  opacity: .5;
  pointer-events: none;
}
/* 斜向高光带：玻璃反光 */
.act-card::after {
  content: ''; position: absolute; left: -16%; top: -82%;
  width: 52%; height: 250%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .34) 50%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(14deg);
  pointer-events: none;
}
.act-head {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 15px; font-weight: 700; color: var(--primary); letter-spacing: .5px;
  text-shadow: 0 1px 4px rgba(255, 255, 255, .55);
}
.act-clock { color: var(--primary); opacity: .9; flex: none; }
.cd-row { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 8px; margin-top: 14px; }
.cd-cell { width: 58px; }
.cd-num {
  background: linear-gradient(160deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .82) 100%);
  color: var(--primary);
  border: 1px solid rgba(255, 255, 255, .95);
  font-size: 24px; font-weight: 800; padding: 11px 0 10px;
  border-radius: 10px; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 #fff, 0 3px 9px rgba(0, 0, 0, .12);
}
.cd-lab { margin-top: 7px; font-size: 12px; color: var(--primary); opacity: .85; font-weight: 600; letter-spacing: 3px; text-shadow: 0 1px 3px rgba(255, 255, 255, .5); }
.cd-sep { color: var(--primary); opacity: .65; font-size: 19px; font-weight: 700; line-height: 46px; }
.act-range {
  position: relative;
  margin-top: 13px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .55);
  font-size: 11.5px; font-weight: 500; color: #37504a; letter-spacing: .5px;
  text-shadow: 0 1px 3px rgba(255, 255, 255, .5);
}

/* 阅读统计卡（2026-09-17 高级感改版：白卡 + 顶部品牌渐变 hairline + 渐变大数字 + 细分隔线） */
.stats-card {
  position: relative; overflow: hidden;
  display: flex; margin: 0 18px 14px; padding: 0;
  background: #fff; border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(20, 40, 35, .06);
}
/* 顶边 3px 品牌渐变 hairline，与倒计时卡同色系呼应 */
.stats-card::before {
  content: ''; position: absolute; left: 0; top: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-lt));
}
.st-col { flex: 1; text-align: center; padding: 19px 0 15px; }
.st-col + .st-col { border-left: 1px solid var(--line-2); }
.st-num {
  color: var(--primary);
  font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: linear-gradient(140deg, var(--primary) 10%, var(--primary-lt) 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.st-lab { margin-top: 5px; font-size: 12px; color: #6b6b6b; letter-spacing: 2px; }

.code-box {
  margin: 4px 0; padding: 18px 14px; text-align: center;
  border: 1.5px dashed var(--primary); border-radius: var(--radius);
  background: var(--primary-50);
}
.code-box .code {
  font-family: var(--mono); font-size: 25px; letter-spacing: 3px;
  font-weight: 600; color: var(--primary); word-break: break-all;
}
.code-box .lbl { font-size: 12px; color: var(--text-2); margin-bottom: 6px; }
.poster-wrap { text-align: center; padding: 8px; }
.poster-wrap canvas { max-width: 100%; border-radius: 12px; }

/* ============ 顾客端 · 确认订单页（2026-09-18 版式重做） ============
   旧版误用 `.card-hd/.card-bd`（选择器写的是 `.card > *`，而外层是 .phone）导致样式完全不生效：
   内边距为 0、字贴边、头部无排版。本版自带 .co-* 命名空间，不再依赖 .card 上下文。
   结构：吸顶导航 → 商品卡（门店行/缩略图/标题/价格） → 信息卡（行式表单） → 推荐人卡 → 固定支付条 */
.co-page { background: var(--bg); }

/* 吸顶导航：钉在顶栏下方（与营销页 .hero 同一基准；2026-09-21 顾客端去顶栏后基准=页面顶端），
   底色同「分享给好友」按钮的 accent 橙 */
.co-nav {
  position: sticky; top: var(--topbar-h, 0px); z-index: 20;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: var(--accent);
  border-bottom: 1px solid var(--accent-600);
}
.co-back {
  flex: none; width: 66px;
  display: inline-flex; align-items: center; gap: 1px;
  background: none; border: none; padding: 4px 0;
  font-family: inherit; font-size: 13.5px; font-weight: 500; color: #fff;
  cursor: pointer;
}
.co-back svg { flex: none; margin-left: -3px; }
.co-back:active { opacity: .6; }
.co-nav-t { flex: 1; text-align: center; font-size: 15.5px; font-weight: 600; color: #fff; }
.co-nav-ph { flex: none; width: 66px; }

/* 内容区：底部留白给固定支付条（条高约 65px + 安全区） */
/* .co-body 下内边距 = 橙色支付条（.co-bar）的**实测高度**，让内容底与支付条无缝相接。
   ★ 原写死 84px，而支付条实高 65px —— 页底白多留 19px，用户看到的就是「版权下面又空一截」。
     现由 app-customer.js 的 syncBarHeight() 实测写回 --cobar-h（65px 只当首帧兜底）。
   ⚠ 不再叠加 env(safe-area-inset-bottom)：.co-bar 的 padding 已含安全区，offsetHeight 也含。 */
.co-body { padding: 12px 14px var(--cobar-h, 65px); }
/* 同上一并归零外层 .container 的默认 16px 下内边距：它夹在卡片底边与橙色支付条之间，
   就是用户看到的那条「缝」（2026-09-28 与营销页 .container 同款处理）。 */
body.has-cobar .container { padding-bottom: 0; }

.co-card {
  background: var(--surface); border: 1px solid var(--line-2);
  border-radius: 14px; padding: 0 14px; margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(20, 40, 35, .05);
}

/* 门店行 */
.co-shop {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 0 10px;
  font-size: 13.5px; font-weight: 600; color: var(--text);
  border-bottom: 1px dashed var(--line-2);
}
.co-shop svg { flex: none; color: var(--primary); }

/* 商品行：缩略图 + 信息列 */
/* 2026-09-21：缩略图加大（62 → 76px），高度严格跟随右侧三行文字
   （顶对齐标题、底对齐价格行）。
   ★ img 必须绝对定位脱离文档流：否则 .co-thumb 的自然高度由图片自身宽高比决定
   （height:100% 在父高 auto 时百分比失效），竖图会变成 76×100 的竖长条并反过来顶高卡片。
   脱离文档流后 .co-thumb 自然高度 = 0，完全由 align-self:stretch 拉伸到与 .co-gi 等高。 */
.co-goods { display: flex; align-items: stretch; gap: 12px; padding: 13px 0 14px; }
.co-thumb {
  position: relative;
  flex: none; align-self: stretch; width: 76px; border-radius: 12px; overflow: hidden;
  background: var(--primary-50); border: 1px solid var(--line-2);
}
.co-thumb img {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.co-thumb-ph { display: flex; align-items: center; justify-content: center; font-size: 28px; }
.co-gi { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.co-gt {
  font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.co-gd { font-size: 12px; color: var(--text-3); }
.co-gp { display: flex; align-items: baseline; gap: 7px; margin-top: auto; }
.co-gp b { font-size: 19px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.co-gp s { font-size: 11.5px; color: var(--text-3); }
.co-save {
  margin-left: auto; flex: none;
  font-size: 10.5px; font-weight: 600; color: #A94A12;
  background: var(--accent-100); border-radius: 999px; padding: 2px 8px;
}

/* 信息卡 */
.co-ct {
  display: flex; align-items: baseline; gap: 8px;
  padding: 13px 0 3px;
  font-size: 13.5px; font-weight: 600; color: var(--text);
}
.co-ct-h { font-size: 11.5px; font-weight: 400; color: var(--text-3); }
.co-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px dashed var(--line-2);
  transition: border-color .15s;
}
.co-lab { flex: none; width: 58px; font-size: 13px; color: var(--text-2); font-weight: 500; }
.co-lab i { color: var(--accent); font-style: normal; margin-left: 2px; }
.co-inp {
  flex: 1; min-width: 0;
  border: none; background: none; outline: none; padding: 2px 0;
  font-family: inherit; font-size: 14.5px; color: var(--text);
}
.co-inp::placeholder { color: var(--text-3); font-size: 13.5px; letter-spacing: 0; }
/* 手机号：占位态用正文字体（避免字距把提示语撑散），一旦输入再切等宽 + 字距 */
.co-inp.mono { font-family: var(--font); letter-spacing: 0; }
.co-inp.mono:not(:placeholder-shown) { font-family: var(--mono); letter-spacing: 1.5px; }
.co-row:focus-within { border-bottom-color: var(--primary); }
.co-radios { display: flex; gap: 18px; align-items: center; flex: 1; }
.co-rd { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: var(--text-1); cursor: pointer; }
.co-rd input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; cursor: pointer; }
/* 后台客户管理：按门店分模块 + 表格 + 操作按钮变体 */
.cust-mod { border: 1px solid var(--line-2); border-radius: 10px; margin-bottom: 14px; overflow: hidden; }
.cust-mod-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--bg-2); border-bottom: 1px solid var(--line-2); }
.cust-mod-ttl { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; cursor: pointer; user-select: none; }
.cust-mod-ttl:hover { color: var(--primary); }
.cust-caret { flex: none; color: var(--text-2); transition: transform .18s ease; }
.cust-mod.is-open .cust-caret { transform: rotate(180deg); }
.cust-mod.is-closed .cust-mod-hd { border-bottom: 0; }
.cust-empty { padding: 10px 14px; }
.cust-tb th, .cust-tb td { white-space: nowrap; }
.cust-tb td { padding: 8px 10px; }
.btn-line { border: 1px solid var(--line-2); background: #fff; color: var(--text); }
.btn-line:hover { border-color: var(--primary); color: var(--primary); }
.btn-danger-line { border: 1px solid #f0c9c2; background: #fff; color: #C0392B; }
.btn-danger-line:hover { background: #C0392B; color: #fff; border-color: #C0392B; }

/* 客户列表分页器（每店 10 条，列表外底部居中） */
.cust-pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line-2); background: var(--bg-2); }
.pg-btn { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid var(--line-2); background: #fff; color: var(--text); border-radius: 6px; cursor: pointer; font-size: 13px; line-height: 1; }
.pg-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.pg-btn.pg-on { background: var(--primary); color: #fff; border-color: var(--primary); }
.pg-btn:disabled { opacity: .4; cursor: not-allowed; }
.pg-info { margin-left: 6px; font-size: 12px; color: var(--text-2); }
.row.gap6 { gap: 6px; }
.nowrap { white-space: nowrap; }
.co-lock {
  display: flex; align-items: center; gap: 5px;
  padding: 10px 0 13px;
  font-size: 11.5px; color: var(--text-3);
}
.co-lock svg { flex: none; opacity: .7; }

/* 推荐人卡 */
.co-reco {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 12px 14px;
  font-size: 12px; line-height: 1.7; color: #8A3F0D;
  background: var(--accent-100); border-color: #F8D9C6;
}
.co-reco svg { flex: none; margin-top: 2px; }
.co-reco .mono { color: #7A370B; font-weight: 600; }

/* 原 .co-mock（「演示环境不产生真实扣款（支付通道为 Mock）」提示条）已下线 2026-10-12：
   面向顾客的确认订单页不再暴露演示/通道字样。 */

/* 购买数量步进器（2026-09-21 限购 + 单笔多件） */
.co-qty { display: inline-flex; align-items: center; gap: 0; flex: 1; min-width: 0; }
.co-qty-btn {
  flex: none; width: 34px; height: 34px;
  border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text-1);
  font-size: 20px; line-height: 1; border-radius: 8px; cursor: pointer; user-select: none;
}
.co-qty-btn:hover { border-color: var(--primary); color: var(--primary); }
.co-qty-btn:active { background: var(--bg-3); }
.co-qty-btn:disabled { opacity: .4; cursor: not-allowed; }
.co-qty-inp {
  width: 56px; flex: none; text-align: center; margin: 0 8px;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--surface);
  font-size: 15px; font-weight: 700; color: var(--text); padding: 7px 0;
  -moz-appearance: textfield;
}
.co-qty-inp::-webkit-outer-spin-button,
.co-qty-inp::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.co-qty-hint { padding: 2px 0 13px; font-size: 11.5px; color: var(--text-3); }
.co-bar-sub { font-size: 11.5px; color: var(--text-2); font-weight: 500; }

/* 固定支付条：与营销页 .buy-bar 同规格（同宽居中、不随滚动消失） */
.co-bar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 420px; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--line-2);
  box-shadow: 0 -4px 14px rgba(7, 53, 43, .10);
}
.co-bar-l { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; }
.co-bar-k { font-size: 12px; color: var(--text-2); }
.co-bar-l b { font-size: 20px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.co-bar .co-pay {
  flex: none; min-width: 152px; padding: 12px 20px;
  border-radius: 12px; font-size: 15px; font-weight: 600; border: none;
}

/* ================= 通用 ================= */
.empty { padding: 36px 16px; text-align: center; color: var(--text-3); font-size: 13px; }
.divider { height: 1px; background: var(--line-2); margin: 14px 0; }
.fr { text-align: right; }
.fc { text-align: center; }
.mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; }
.pill-group { display: flex; gap: 6px; flex-wrap: wrap; }
.spin {
  display: inline-block; width: 13px; height: 13px;
  border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

.merchant-card {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px; background: var(--surface); cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.merchant-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.merchant-card .ttl { font-weight: 500; margin-bottom: 3px; }

/* ================= 平台后台 · 门店列表卡片（一店一行，2026-09-14 改版） =================
   用户拍板：A 方案左半段（大方块头像 + 店名信息）+ B 方案状态色条与右半段
   （竖线分隔 + 订单/已售大数字 + 按钮纵排）。入驻审批页仍用旧 .merchant-card。 */
.shop-list { display: flex; flex-direction: column; gap: 10px; }
.shop-card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); padding: 14px 16px 14px 21px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.shop-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}
.sc-strip { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }
.sc-strip-ok { background: var(--ok); }
.sc-strip-warn { background: var(--accent); }
.sc-avatar {
  width: 72px; height: 72px; border-radius: 18px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  box-shadow: inset 0 0 0 1px rgba(16, 40, 34, .05);
}
.sc-avatar-g { background: var(--primary-100); }
.sc-avatar-a { background: var(--accent-100); }
/* 2026-09-24 改版：数据区不再被 flex 撑到最右——门店信息区宽度封顶（行间对齐），
   数字与竖线紧随其后前移；入口按钮改为 2×2 四宫格并保持右对齐。
   注：封顶值取 420px —— 正好容下「商品 · 价格 ｜ 抽佣 ｜ L1/L2」一行不折行。 */
.sc-main { flex: 1 1 auto; min-width: 0; max-width: 420px; }
.sc-ttl {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-weight: 600; font-size: 14.5px; color: var(--text);
}
.sc-meta {
  font-size: 11.5px; color: var(--text-3);
  margin-top: 3px; letter-spacing: .2px;
}
.sc-prod { font-size: 12.5px; color: var(--text-2); margin-top: 5px; }
.sc-prod b { color: var(--accent-600); font-weight: 600; }
/* 商品未配置（申请阶段留空，数据从一店一页取）的占位文案 */
.sc-prod-empty { color: var(--text-3); }
.sc-sep { color: var(--line); margin: 0 6px; }
.sc-data {
  display: flex; align-items: center; gap: 16px;
  padding-left: 18px; border-left: 1px solid var(--line-2); flex-shrink: 0;
  margin-right: auto;    /* 吃掉剩余空白 → 数字贴近门店信息，按钮仍靠右 */
}
.sc-num { text-align: center; min-width: 44px; }
.sc-num b {
  display: block; font-size: 19px; font-weight: 700;
  color: var(--primary); line-height: 1.25;
}
.sc-num span { font-size: 10.5px; color: var(--text-3); }
/* 入口按钮 2×2（第 1 行 顾客端｜老板端，第 2 行 帐号｜删除） */
.sc-btns {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  flex-shrink: 0; width: 176px;
}
.sc-btns .btn { width: 100%; justify-content: center; }
@media (max-width: 860px) {
  .shop-card { flex-wrap: wrap; padding-left: 19px; }
  .sc-main { max-width: none; }
  .sc-data {
    width: 100%; border-left: 0; padding-left: 0; margin-right: 0;
    justify-content: flex-start; margin-top: 4px;
  }
  .sc-btns { margin-left: auto; width: 176px; }
}
@media (max-width: 460px) {
  .sc-data { width: auto; margin-right: auto; }
  .sc-btns { width: 100%; margin-left: 0; }
}

/* ================= 平台后台 · 登录门（2026-09-14 新增） ================= */
.login-mask {
  position: fixed; inset: 0; z-index: 999;
  background:
    radial-gradient(800px 400px at 85% -10%, rgba(242, 107, 33, .12), transparent 60%),
    linear-gradient(160deg, #0A4A3B 0%, #07352B 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto;
}
/* 统一登录页（login.html）：整页即登录背景，卡片居中（视觉与 login-mask 一致） */
/* 登录页：整体 flex 列，刚好一屏；卡片居中、版权条在底部自然占一席，不重叠不跨屏 */
body.login-page {
  display: flex; flex-direction: column; min-height: 100vh;
}
.login-wrap {
  flex: 1 1 auto;
  background:
    radial-gradient(800px 400px at 85% -10%, rgba(242, 107, 33, .12), transparent 60%),
    linear-gradient(160deg, #0A4A3B 0%, #07352B 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
/* 登录页版权底栏：置于底部（relative 占位、不 fixed，避免压住卡片 / 跨屏；
   z-index:1 与 .login-wrap 同层，避免 body.has-brand-bg::before 遮罩把文字压暗）。
   ★不加背景色（透明）：让页面的品牌大图 / 深绿渐变自然延续到底，不出现突兀的色块横条；
     文字转浅色 + 文字阴影，压在照片或深绿底上都清晰可读。 */
body.login-page .site-foot {
  position: relative; z-index: 1; flex: none;
  background: transparent;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
}

/* 合作申请页（apply.html）：与登录页同款「整页 flex 列」——
   表单区自动撑满、版权条贴底，一屏刚好放下，不因版权信息跨屏 */
body.apply-page { display: flex; flex-direction: column; min-height: 100vh; }
body.apply-page > main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.apply-page .apply-wrap { flex: 1 1 auto; min-height: 0; }
body.apply-page > .site-foot { flex: none; }
/* 有品牌大图（深色）时版权文字转浅色 + 文字阴影：
   否则 --text-2 深灰压在深底大图上等于隐形（申请页原状）。
   ★同样不加背景色（原为 primary-700 实色横条，用户要求删除）：
     文字直接浮在照片上，靠 text-shadow 保证对比度。 */
body.has-brand-bg .site-foot {
  position: relative; z-index: 1;
  background: transparent;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
/* 登录卡底部的申请合作入口 */
.login-apply {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--line-2);
  text-align: center; font-size: 13px; color: var(--text-2); line-height: 1.9;
}
.login-apply a { color: var(--accent-600); font-weight: 600; text-decoration: none; }
.login-apply a:hover { text-decoration: underline; }
.login-apply .hint { display: block; font-size: 11px; }
.login-card {
  width: 100%; max-width: 360px;
  background: var(--surface); border-radius: var(--radius-lg);
  padding: 28px 26px 22px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.login-card .login-logo {
  width: 64px; height: 64px; margin: 0 auto 10px;
  border-radius: 16px; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; box-shadow: 0 6px 16px rgba(242, 107, 33, .35);
}
.login-card .login-bt {
  text-align: center; font-weight: 600; font-size: 15px; color: var(--text);
}
.login-card .login-sub {
  text-align: center; font-size: 11.5px; color: var(--text-3); margin: 2px 0 18px;
}
.login-card .login-hint { text-align: center; margin-top: 14px; }

/* ================= 前台品牌背景（登录页 / 合作申请页共用 · 后台上传） =================
   --brand-bg 由 js/brand.js 注入（只接受本平台 /uploads/ 路径，非法值一律不上色）。
   body.has-brand-bg：大屏图铺满视口（cover 居中裁切，电脑端 1920×1080 图正好）+ 半透明
   深色遮罩，保证白卡片与文字在任何图上都清晰可读；未上传时 body 不带该类，
   两页各自保留原有渐变背景 —— 换图不影响任何布局。 */
body.has-brand-bg {
  background-color: #07352B;
  background-image: var(--brand-bg, none);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body.has-brand-bg::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 26, 21, .55) 0%, rgba(4, 26, 21, .68) 100%);
}
body.has-brand-bg .login-wrap,
body.has-brand-bg .apply-wrap {
  background: transparent; position: relative; z-index: 1;
}
/* 品牌区标题在深色背景上改白系（默认深色文字会被遮罩吃掉） */
body.has-brand-bg .apply-brand .ab-bt { color: #fff; }
body.has-brand-bg .apply-brand .ab-sub { color: rgba(255, 255, 255, .72); }

/* 老板端：与登录页 / 申请页三处共享同一张品牌背景图 —— 让内容层透出背景
   （卡片本身为白底不受影响；仅顶栏由实色绿改为半透明毛玻璃，背景图得以显现） */
body.has-brand-bg .shell { position: relative; z-index: 1; }
body.has-brand-bg .container { position: relative; z-index: 1; }
body.has-brand-bg .topbar {
  background: rgba(7, 53, 43, .30);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 申请表校验失败：问题字段红框（配合 markField 聚焦滚动，反馈不依赖底部 toast） */
.input.input-err,
.input.input-err:focus {
  border-color: #D64541;
  box-shadow: 0 0 0 3px rgba(214, 69, 65, .18);
}
body.has-brand-bg .input.input-err { background: #fff; }

/* 申请表：营业执照上传（标签与按钮同行，间距约一个汉字；选中即传，缩略图预览） */
.lic-head { display: flex; align-items: center; gap: 1em; }
.lic-head ~ .hint { display: block; margin-top: 2px; }
.lic-preview:empty { display: none; }
.lic-thumb { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.lic-thumb img {
  width: 96px; height: 64px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--line-2); display: block;
}
.lic-thumb a { font-size: 12px; }
/* 后台审批卡片：营业执照缩略图（点击原图放大） */
.lic-block { display: flex; align-items: center; gap: 6px; }
.lic-thumb-img {
  width: 72px; height: 48px; object-fit: cover; border-radius: 6px;
  border: 1px solid var(--line-2); display: block;
}

/* 申请表：入驻合作协议（2026-09-17 申请即签约，乙方勾选） */
.contract-box {
  border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--primary-50); overflow: hidden;
}
.contract-box summary {
  cursor: pointer; padding: 10px 12px; font-size: 13px;
  color: var(--primary-700, #0E5C4A); user-select: none; list-style: revert;
}
.contract-box .contract-body { max-height: 260px; overflow-y: auto; padding: 2px 12px 10px; background: #fff; }
.ct-clause h4 { font-size: 13px; margin: 10px 0 4px; }
.ct-clause p { font-size: 12px; margin: 0; line-height: 1.7; color: var(--text-2); }
/* 协议勾选行：.field > label 的 block/12.5px 会被本规则覆盖（故选择器带 .field > 提高优先级） */
.field > label.agree-row {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 10px 12px; margin: 8px 0 0; font-size: 13px; line-height: 1.5;
  background: var(--primary-50); border-radius: 10px;
}
/* 勾选文案强制单行（2026-09-17 第二十二轮）：文案较长，窄屏靠字号与内距让位 */
.agree-row span { white-space: nowrap; }
.agree-row input { width: 16px; height: 16px; flex: none; }
.agree-row.input-err { outline: 2px solid #D64541; color: #D64541; }
body.has-brand-bg .contract-box .contract-body { background: #fff; }
body.has-brand-bg .agree-row { background: #fff; }

/* 顶栏当前登录用户 */
.user-chip { display: flex; align-items: center; gap: 8px; }
.user-chip .uc-name { font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; }

/* ================= 前台品牌背景（后台「系统 → 账号管理」模块） ================= */
.bg-preview {
  position: relative; width: 100%; max-width: 520px; aspect-ratio: 16 / 9;
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-2); background: #0A4A3B;
}
.bg-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-preview .bg-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .62); font-size: 12px; text-align: center; padding: 0 20px;
}
.bg-preview .bg-tag { position: absolute; left: 8px; top: 8px; }
.bg-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* 经营类目管理（账号管理页卡片） */
.cat-list { display: flex; flex-direction: column; gap: 8px; }
.cat-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--bg); border-radius: 8px;
}
.cat-row .cat-label { font-weight: 600; flex: 1; min-width: 0; }
.bg-offline {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px; font-size: 13px; line-height: 1.7;
  background: #FFF7ED; border: 1px solid #FDBA74; color: #9A3412;
}
.bg-offline code { padding: 1px 5px; border-radius: 4px; background: rgba(154, 52, 18, .1); font-size: 12.5px; }

/* ================= 公开申请页 apply.html ================= */
.apply-wrap {
  min-height: 100vh; padding: 18px 14px 26px;
  background:
    radial-gradient(700px 340px at 90% -8%, rgba(242, 107, 33, .08), transparent 60%),
    var(--bg);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.apply-brand { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 420px; }
.apply-brand .ab-logo {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  background: var(--accent); color: #fff; font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(242, 107, 33, .3);
}
.apply-brand .ab-bt { font-weight: 600; font-size: 15px; color: var(--text); }
.apply-brand .ab-sub { font-size: 11.5px; color: var(--text-3); }
.apply-card { width: 100%; max-width: 420px; }
/* 手机友好的窄长表单：字段纵向间距加大，一屏更从容 */
.apply-card .field { margin-bottom: 16px; }
.apply-card .card-bd { padding: 20px 18px 22px; }
/* 卡片标题右对齐（2026-09-17：标题挪到原「公开入口」徽章位置）
   标题行底色 = 底部「提交合作申请」按钮同色（--primary 马尔斯绿），故文字转白 */
.apply-card .card-hd-end {
  justify-content: flex-end;
  background: var(--primary);
  border-bottom-color: var(--primary);
  padding: 14px 18px;
}
.apply-card .card-hd-end h3 { flex: none; color: #fff; }
/* 提交按钮下方：温馨提示通栏灰块；灰块内首行 = 「温馨提示」（左）+「返回登录」（右） */
.apply-tips {
  margin-top: 14px; padding: 10px 12px;
  font-size: 12px; line-height: 1.9; color: var(--text-3);
  background: var(--bg); border-radius: 8px;
}
.apply-tips b { color: var(--text); font-weight: 600; }
.apply-tips .at-hd { display: flex; align-items: center; justify-content: space-between; }
.apply-tips .at-hd .apply-login-link { padding: 0; font-size: 12px; }
/* 最底部：返回登录入口 */
.apply-login-link {
  display: block; text-align: center; padding: 12px 0 2px;
  font-size: 13px; color: var(--primary); text-decoration: none;
}
.apply-login-link:hover { text-decoration: underline; }
/* 手机端（≤600px）：两列字段收成单列，输入框 16px 防 iOS 聚焦自动放大 */
@media (max-width: 600px) {
  .apply-wrap { padding: 14px 12px 22px; }
  .apply-card .inline-2 { grid-template-columns: 1fr; gap: 0; }
  .apply-card .card-bd { padding: 18px 14px 20px; }
  .apply-card .input, .apply-card .select { font-size: 16px; }
  /* 协议勾选行：窄屏收紧内距与字号，保证文案始终单行 */
  .field > label.agree-row { padding: 9px 10px; gap: 7px; font-size: clamp(10.5px, 2.85vw, 12px); }
  .agree-row input { width: 14px; height: 14px; }
  .apply-brand .ab-logo { width: 40px; height: 40px; font-size: 20px; }
  .apply-brand .ab-bt { font-size: 14px; }
}
/* 超窄机（320~340px）：再收一档，仍保证单行 */
@media (max-width: 340px) {
  .field > label.agree-row { padding: 8px; gap: 5px; font-size: 9.5px; letter-spacing: -0.2px; }
  .agree-row input { width: 12px; height: 12px; }
}
.apply-ft { font-size: 11px; color: var(--text-3); }
.apply-sec {
  font-size: 12px; font-weight: 600; color: var(--primary);
  margin: 14px 0 8px; padding: 6px 10px;
  background: var(--primary-50); border-left: 3px solid var(--primary);
  border-radius: 0 8px 8px 0;
}
.emoji-row { display: flex; flex-wrap: wrap; gap: 6px; }
.emoji-opt { cursor: pointer; }
.emoji-opt input { display: none; }
.emoji-opt span {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--surface); font-size: 19px;
  transition: border-color .15s, background .15s, transform .1s;
}
.emoji-opt input:checked + span {
  border-color: var(--accent); background: var(--accent-100); transform: scale(1.06);
}

/* ================= 平台后台 · 侧边栏布局（参考电商后台样式） ================= */
.admin-shell { display: flex; min-height: 100vh; }

.admin-side {
  width: 208px; flex-shrink: 0;
  background: linear-gradient(180deg, #0A4A3B 0%, #07352B 100%);
  color: rgba(255, 255, 255, .8);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding-bottom: 16px;
}
/* 品牌区：100×100 正方形图标块居中在上、文字在下（2026-09-14 改版，用户指定规格）。
   原横排「34px logo + 标题/副标题」已下线；图标块用爱马仕橙 + 大圆角 + 投影，做成 App 图标质感。 */
.admin-side .side-brand {
  padding: 18px 14px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.admin-side .side-brand .logo-lg {
  width: 100px; height: 100px; border-radius: 24px; flex-shrink: 0;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 46px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.admin-side .side-brand .bt {
  font-weight: 600; font-size: 11px; letter-spacing: .5px;
  color: #fff; text-align: center; white-space: nowrap;
}

/* 大类目板块：线 — 文字 — 线（两侧对称、整体居中，无图标）
   分隔线用渐变，靠文字侧稍亮、向外淡出；层级由「线」承担，不与导航项 emoji 抢焦点。 */
.admin-side .side-group {
  margin: 16px 13px 7px;
  display: flex; align-items: center; gap: 9px;
}
.admin-side .side-group .sg-line {
  flex: 1; min-width: 8px; height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .24));
}
.admin-side .side-group .sg-line:last-child {
  background: linear-gradient(90deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .05));
}
.admin-side .side-group .sg-t {
  flex: none; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; letter-spacing: .8px;
  color: rgba(255, 255, 255, .62);
}
.admin-side .side-item {
  display: flex; align-items: center; gap: 10px;
  margin: 1px 8px; padding: 8px 10px;
  font-size: 13px; cursor: pointer; user-select: none;
  border-radius: 8px; color: rgba(255, 255, 255, .74);
  transition: background .12s, color .12s;
}
.admin-side .side-item .ico { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.admin-side .side-item:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.admin-side .side-item.active {
  background: rgba(255, 255, 255, .12); color: #fff; font-weight: 500;
  box-shadow: inset 3px 0 0 var(--accent);
}
.admin-side .side-item .cnt {
  margin-left: auto; font-size: 10.5px; padding: 0 7px; border-radius: 999px;
  background: var(--accent); color: #fff; font-weight: 600;
}
.admin-side .side-ft { margin-top: auto; padding: 14px 18px 0; font-size: 10.5px; color: rgba(255, 255, 255, .3); line-height: 1.7; }

.admin-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.admin-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 22px;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.admin-top .crumb { font-size: 13.5px; color: var(--text-2); }
.admin-top .crumb b { color: var(--text); font-weight: 600; }
.admin-top .avatar {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
}

/* 运行模式徽标：原先只定义了 .topbar .tag（深色顶栏），
   而平台后台的顶栏是 .admin-top（浅色），导致这个 tag 一直没有样式。
   两种模式各给一套配色：已连服务=绿，离线演示=琥珀。 */
.admin-top .tag {
  font-size: 11.5px; padding: 3px 10px; border-radius: 999px;
  background: var(--primary-50); border: 1px solid var(--line);
  color: var(--text-2); white-space: nowrap; cursor: default;
}
.admin-top .tag-ok { background: #E7F4EC; border-color: #CBE4D6; color: #1F6B41; }
.admin-top .tag-warn { background: #FBF1DC; border-color: #EFDFB8; color: #8C5F0C; }

.admin-content {
  flex: 1; width: 100%; max-width: 1080px;
  margin: 0 auto; padding: 18px 22px 40px;
}

/* 主页 · 统计卡（参考图样式：大数字 + 底部说明行） */
.home-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.home-stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 16px 0;
  box-shadow: var(--shadow-sm);
}
.home-stat .k { font-size: 13px; color: var(--text); font-weight: 500; display: flex; align-items: center; gap: 8px; }
.home-stat .v { font-size: 26px; font-weight: 600; margin: 8px 0 4px; font-variant-numeric: tabular-nums; }
.home-stat .foot {
  font-size: 12px; color: var(--text-3);
  border-top: 1px solid var(--line-2);
  padding: 9px 0; margin-top: 8px;
}
@media (max-width: 860px) { .home-stats { grid-template-columns: 1fr 1fr; } }

/* 主页 · 功能宫格（参考图彩色图标入口） */
.quick-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 10px; }
@media (max-width: 860px) { .quick-grid { grid-template-columns: repeat(4, 1fr); } }
.quick-item {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 6px 10px;
  text-align: center; cursor: pointer; user-select: none;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.quick-item:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.quick-item .ico {
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px; margin-bottom: 6px;
}
.quick-item .t { font-size: 12px; color: var(--text-2); }
.qi-1 .ico { background: #E8F1FA; } .qi-2 .ico { background: #E7F4EC; }
.qi-3 .ico { background: var(--accent-100); } .qi-4 .ico { background: #F3EEFA; }
.qi-5 .ico { background: #E6F7F5; } .qi-6 .ico { background: #FDF2F1; }
.qi-7 .ico { background: #FDF7EA; } .qi-8 .ico { background: #FCEEF7; }

/* 窄屏：侧边栏收为顶部横向菜单 */
@media (max-width: 860px) {
  .admin-shell { flex-direction: column; }
  .admin-side {
    position: static; width: 100%; height: auto;
    flex-direction: row; align-items: center;
    overflow-x: auto; overflow-y: hidden; padding-bottom: 0;
  }
  /* 窄屏：侧边栏收为顶部横条，100×100 图标块回缩为 34px 小横排，防止撑高 */
  .admin-side .side-brand { border-bottom: none; padding: 8px 14px; gap: 0; flex-direction: row; }
  .admin-side .side-brand .logo-lg { width: 34px; height: 34px; border-radius: 10px; font-size: 17px; box-shadow: none; }
  .admin-side .side-brand .bt { margin-left: 10px; }
  .admin-side .side-group, .admin-side .side-ft { display: none; }
  .admin-side .side-item { margin: 6px 2px; white-space: nowrap; padding: 7px 11px; }
  .admin-side .side-item.active { box-shadow: inset 0 -3px 0 var(--accent); }
  .admin-content { padding: 14px 14px 32px; }
  .admin-top { padding: 10px 14px; }
}

/* =========================================================
   营销页内容搭建（一店一页）· 2026-09-14 新增
   ========================================================= */

/* 两栏：左表单 + 右预览（窄屏自动堆叠） */
.cfg-2col { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 14px; align-items: start; }
.cfg-form { min-width: 0; }
.cfg-side { position: sticky; top: 74px; }
@media (max-width: 1100px) {
  .cfg-2col { grid-template-columns: 1fr; }
  .cfg-side { position: static; }
}

/* 表单分区标题 */
.sec-title {
  font-size: 13px; font-weight: 600; color: var(--primary);
  margin: 18px 0 10px; padding-left: 9px;
  border-left: 3px solid var(--accent); line-height: 1.2;
}
.sec-title:first-child { margin-top: 2px; }

/* 分区说明条（如「第一张商品图会被分享卡抓取」） */
.sec-note {
  margin: -4px 0 10px;
  padding: 8px 11px;
  border-radius: var(--radius-sm);
  background: var(--accent-100);
  border-left: 3px solid var(--accent);
  font-size: 12px; line-height: 1.7; color: var(--text-2);
}
.sec-note b { color: var(--accent-600); font-weight: 600; }

/* 图片上传器 */
.up-slot { margin-bottom: 4px; }
.up-hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.up-hd b { font-size: 13px; font-weight: 500; }
.up-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.up-item {
  position: relative; width: 96px; height: 96px;
  border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line); background: var(--bg);
}
.up-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.up-del {
  position: absolute; top: 3px; right: 3px;
  width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%;
  background: rgba(20, 30, 27, .62); color: #fff;
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.up-del:hover { background: var(--danger); }
/* 「分享卡」角标：标记会被微信分享卡片抓取的那张图（恒为第一张） */
.up-tag {
  position: absolute; left: 3px; bottom: 3px;
  padding: 1px 7px; border-radius: 20px;
  background: var(--accent); color: #fff;
  font-size: 10px; line-height: 1.7; letter-spacing: .3px;
  pointer-events: none; box-shadow: var(--shadow-sm);
}
.up-add {
  width: 96px; height: 96px; border-radius: var(--radius-sm);
  border: 1.5px dashed var(--line); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; color: var(--text-3); cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.up-add:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-50); }
.up-add.up-off {
  font-size: 12px; cursor: not-allowed; color: var(--text-3);
  background: var(--bg); border-style: solid; border-color: var(--line-2);
}
.up-add.up-off:hover { border-color: var(--line-2); color: var(--text-3); background: var(--bg); }

/* 可增删行（服务项目 / 使用规则） */
.lines { display: flex; flex-direction: column; gap: 8px; }
.line-row { display: flex; gap: 8px; align-items: center; }
.line-row .input { flex: 1; }
.line-del {
  flex-shrink: 0; width: 34px; height: 34px; padding: 0;
  font-size: 15px; line-height: 1; color: var(--text-2);
}
.line-del:hover { color: var(--danger); border-color: var(--danger); }

/* 费率实时自检条（分账与结算卡内，保存前就给结论） */
.rate-check {
  margin-top: 12px; padding: 8px 11px; border-radius: var(--radius-sm, 6px);
  font-size: 12.5px; line-height: 1.5;
  border: 1px solid var(--line); background: var(--bg); color: var(--text-2);
}
.rate-check.ok { border-color: var(--primary); background: var(--primary-50); color: var(--primary); }
.rate-check.err { border-color: var(--danger); background: #fef2f2; color: var(--danger); }

/* 顾客端实时预览（手机壳） */
.mpv {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--surface);
}
/* 壳顶标题栏：显示顾客端打开后真实的页面标题（店名 · 限时大福利）
   标题水平居中（2026-09-17 用户拍板），左侧三个窗口点绝对定位不占布局 */
.mpv-bar {
  position: relative; display: block; text-align: center;
  padding: 7px 36px; background: var(--bg);
  border-bottom: 1px solid var(--line-2);
}
.mpv-dots {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 3px; flex-shrink: 0;
}
.mpv-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); display: block; }
.mpv-title {
  display: inline-block; max-width: 100%;
  font-size: 11.5px; color: var(--text-2); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mpv-cover {
  aspect-ratio: 5 / 4; background: var(--primary);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mpv-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mpv-cover-ph { font-size: 38px; }
.mpv-body { padding: 11px 12px 12px; }
/* mpv-sub / mpv-meta / mpv-price / mpv-strip 已随顾客端改版下线（2026-09-18：价格上抢购钮、商品图仅供分享卡） */

/* 手机壳预览 · 活动倒计时（与顾客端 .act-card 同构缩小版：实拍玻璃图做底 + 主色淡纱） */
.mpv-cd {
  position: relative; overflow: hidden;
  margin-top: 9px; padding: 8px 6px 6px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--primary) 26%, transparent) 0%, color-mix(in srgb, var(--primary-lt) 18%, transparent) 100%);
  border-radius: 8px; text-align: center;
}
/* 背景照片层（与顾客端同源，50% 透明度） */
.mpv-cd::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    radial-gradient(60px 44px at 10% -4%, rgba(255, 255, 255, .30), transparent 70%),
    radial-gradient(80px 60px at 92% 108%, rgba(255, 255, 255, .20), transparent 72%),
    url('../img/act-cd-bg.jpg');
  background-position: center, center, center;
  background-size: auto, auto, cover;
  background-repeat: no-repeat;
  opacity: .5;
  pointer-events: none;
}
.mpv-cd::after {
  content: ''; position: absolute; left: -14%; top: -80%;
  width: 46%; height: 240%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .40) 50%, rgba(255, 255, 255, 0) 100%);
  transform: rotate(14deg);
  pointer-events: none;
}
.mpv-cd-head { position: relative; font-size: 10.5px; font-weight: 700; color: var(--primary); }
.mpv-cd-row { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 3px; margin-top: 5px; }
.mpv-cd-cell { width: 26px; }
.mpv-cd-num {
  background: linear-gradient(160deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .82) 100%);
  color: var(--primary);
  border: 1px solid rgba(255, 255, 255, .95);
  font-size: 11px; font-weight: 800; padding: 4px 0; border-radius: 5px;
  box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0, 0, 0, .10);
}
.mpv-cd-lab { margin-top: 2px; font-size: 8.5px; font-weight: 600; color: var(--primary); opacity: .85; letter-spacing: 2px; }
.mpv-cd-sep { color: var(--primary); opacity: .65; font-size: 10px; font-weight: 700; line-height: 18px; }
.mpv-cd-range {
  position: relative;
  margin-top: 5px; padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, .55);
  font-size: 8.5px; color: #37504a;
}
.mpv-items { list-style: none; margin: 9px 0 0; padding: 0; }
.mpv-items li { font-size: 11.5px; color: var(--text-2); padding: 3px 0 3px 11px; position: relative; }
.mpv-items li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--primary);
}
.mpv-detail { margin-top: 10px; display: flex; flex-direction: column; gap: 0; }
.mpv-detail img { width: 100%; display: block; border-radius: 0; }
.mpv-detail img:first-of-type { border-radius: 5px 5px 0 0; }
.mpv-detail img:last-of-type { border-radius: 0 0 5px 5px; }
.mpv-foot {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-2);
  font-size: 11px; color: var(--text-3);
}
.mpv-foot b { color: var(--text-2); font-size: 11.5px; }
/* 底部按钮条示意（与顾客端固定操作条同构：分享=主色 / 抢购=橙底两行：价格+立即抢购） */
.mpv-ctas { display: flex; gap: 6px; margin-top: 10px; }
.mpv-cta {
  flex: 1; text-align: center; padding: 5px 0 4px; border-radius: 7px;
  font-size: 11.5px; font-weight: 500; color: #fff;
}
.mpv-cta-share { background: var(--primary); display: flex; align-items: center; justify-content: center; }
.mpv-cta-buy {
  flex: 1.35; background: linear-gradient(180deg, var(--accent) 0%, var(--accent-600) 100%);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.mpv-cta-buy b { font-size: 13px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mpv-cta-buy i { font-style: normal; font-size: 8.5px; letter-spacing: 1.5px; opacity: .92; line-height: 1.2; }

/* 一店一页 · 页面主色选择器 */
.color-input {
  width: 46px; height: 32px; padding: 2px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); cursor: pointer;
}

/* =========================================================
   顾客端 · 图片呈现 · 2026-09-14 新增
   ========================================================= */

/* 商品详情长图区（2026-09-18 拍板：左右通栏满幅展示，不留两侧边距） */
.detail-imgs { padding: 0 0 18px; }
.di-title {
  font-size: 13px; font-weight: 500; text-align: center; color: var(--text-2);
  margin: 12px 18px 10px; position: relative;
}
.di-title::before, .di-title::after {
  content: ''; position: absolute; top: 50%; width: 46px; height: 1px; background: var(--line);
}
.di-title::before { left: 12px; }
.di-title::after { right: 12px; }
/* 详情长图：无缝竖排满幅 —— 直角铺满，与屏幕边缘齐平 */
.detail-imgs img {
  width: 100%; display: block; border-radius: 0;
  margin: 0; border: none;
}

/* =========================================================
   顾客端 · 分享卡片预览（微信小程序分享卡规格 · 2026-09-17 新增）
   结构：品牌小行（店名） → 单行大字标题 → 大图（主题大字/价格/立即抢/卖点带）
   说明：H5 分享卡样式由微信客户端决定，这里是「分享出去长什么样」的 1:1 预览
        （2026-09-18：顶部改显店名；移除底部「小程序」角标；
         移除大图门店胶囊——店名只在顶部出现一次；主题大字单行显示）
   ========================================================= */
.wxc {
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  padding: 12px 13px 10px; box-shadow: var(--shadow-sm);
}
.wxc-hd { display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }
.wxc-logo {
  width: 18px; height: 18px; border-radius: 5px; background: var(--accent-100);
  display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0;
}
.wxc-app { font-size: 12px; color: var(--text-3); }
.wxc-title {
  font-size: 16.5px; font-weight: 600; line-height: 1.38; color: var(--text);
  margin-bottom: 11px; letter-spacing: .2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 标题装饰图标（姓名后 红玫瑰🌹/粉花🌺、末尾 火焰🔥🔥🔥）：内联 SVG 彩色图标
   用 SVG 而非 emoji，杜绝 emoji 在缺彩色字体环境 fallback 成单色描边的「黑边」；
   尺寸 0.7em ≈ 11.5px（相对正文 16.5px 缩小约一半，2026-09-18 用户拍板缩小 50%） */
.wxc-title .wxc-ico {
  width: 0.7em; height: 0.7em; display: inline-block;
  vertical-align: -.06em; margin: 0 1px;
}
/* 大图区：等比占位（padding-top 撑高），叠层内容绝对定位 */
.wxc-shot {
  position: relative; width: 100%; padding-top: 86%;
  border-radius: 10px; overflow: hidden; background: #F6EAF3;
}
.wxc-bg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.wxc-bg-ph {
  display: flex; align-items: center; justify-content: center; font-size: 54px;
  background: linear-gradient(135deg, #FBE3D8 0%, #F3E1F5 55%, #E7E9FB 100%);
}
.wxc-ov {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  padding: 11px 12px; display: flex; flex-direction: column; align-items: center;
}
.wxc-slogan {
  margin-top: auto; text-align: center;
  font-size: 23px; font-weight: 700; line-height: 1.14; letter-spacing: .1em;
  color: #C8402A; text-shadow: 0 2px 6px rgba(255, 255, 255, .55);
}
/* 主题大字单行显示（字号由 share.sloganFontSize 按字数内联下发） */
.wxc-slogan span { display: inline-block; white-space: nowrap; max-width: 100%; }
.wxc-price {
  display: flex; align-items: baseline; gap: 7px; margin-top: 8px;
}
.wxc-price b {
  font-size: 30px; font-weight: 800; color: #16181C; line-height: 1;
  font-variant-numeric: tabular-nums; text-shadow: 0 2px 6px rgba(255, 255, 255, .5);
}
.wxc-price s { font-size: 13px; color: #7A7F87; }
.wxc-grab {
  background: #16181C; color: #fff; border-radius: 6px;
  padding: 5px 11px; font-size: 13px; font-weight: 500;
}
.wxc-bar {
  width: 100%; margin-top: 9px; padding: 5px 8px; border-radius: 4px;
  background: rgba(255, 255, 255, .74); color: #4A4F57;
  font-size: 11.5px; text-align: center; letter-spacing: .2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 分享链接展示（长链接可换行） */
.share-url {
  margin-top: 8px; padding: 7px 9px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--line-2);
  font-size: 11.5px; color: var(--text-3); word-break: break-all; line-height: 1.5;
}

/* 微信内分享引导层（2026-09-21）：H5 不允许网页直呼好友列表，
   「发送给朋友」只存在于右上角菜单里 —— 用一层轻遮罩 + 指向右上角的箭头把用户引过去。
   点任意处即关闭，不阻塞页面。非微信环境不会出现。 */
.wx-guide {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: rgba(0, 0, 0, .74);
  color: #fff;
  animation: wx-guide-in .18s ease-out;
}
.wx-guide-arrow {
  position: absolute; right: 24px; top: 2.5vh;
  width: 44px; height: 76px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
}
.wx-guide-tip {
  position: absolute; right: 16px; top: calc(2.5vh + 84px);
  max-width: 80%; text-align: right;
}
.wx-guide-tip b { display: block; font-size: 17px; font-weight: 700; line-height: 1.45; }
.wx-guide-tip span { display: block; margin-top: 5px; font-size: 12.5px; opacity: .78; }
/* 卡片定位高亮：从「一店一页」跳到全局配置时闪一下，避免在长页里找不到（2026-09-23） */
@keyframes card-flash {
  0%   { box-shadow: 0 0 0 0 rgba(242, 107, 33, .55); border-color: var(--accent); }
  70%  { box-shadow: 0 0 0 8px rgba(242, 107, 33, 0); border-color: var(--accent); }
  100% { box-shadow: 0 0 0 0 rgba(242, 107, 33, 0); }
}
.card.flash { animation: card-flash 2.2s ease-out 1; border-color: var(--accent); }

@keyframes wx-guide-in { from { opacity: 0; } to { opacity: 1; } }

/* ================= 一店一页 · 营销页二维码模块 ================= */
.qr-block {
  margin-top: 14px; padding: 14px; border: 1px dashed var(--line);
  border-radius: 12px; background: var(--bg);
}
.qr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
/* 「未配置对外地址 / 已用全局对外地址」标签：相对标题上移 3px（视觉对齐微调；
   初版 -5px 偏高，2026-09-27 回落到 -3px）。
   用 position:relative 只做位移，不参与 flex 布局，改数值不影响标题行高。 */
.qr-head .badge { position: relative; top: -3px; }
.qr-block > .hint { margin: 0 0 12px; }
.qr-body { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.qr-canvas-box {
  flex: none; padding: 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.qr-canvas-box canvas {
  width: 200px; height: 200px; display: block;
  border-radius: 6px; image-rendering: pixelated;
}
.qr-cap {
  font-size: 12.5px; font-weight: 600; color: var(--primary);
  letter-spacing: .3px;
}
.qr-side { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 12px; }
.qr-side .field { margin: 0; }
.qr-side .btn-primary { align-self: flex-start; }

/* ================= 平台收付款配置（2026-09-24） ================= */
.pay-st {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 10px 12px;
  border-radius: var(--radius-sm); background: var(--bg);
  border: 1px solid var(--line);
}
.pay-st > .hint { flex: 1; min-width: 240px; }
.pay-alert {
  margin-bottom: 12px; padding: 10px 12px; border-radius: var(--radius-sm);
  background: var(--accent-100); border-left: 3px solid var(--accent);
  font-size: 13px; font-weight: 600; color: var(--accent-600);
}
.pay-alert > .hint { font-weight: 400; color: var(--text-2); margin-top: 3px; }
.pay-group { margin-top: 14px; }
.pay-gt {
  font-size: 13px; font-weight: 700; color: var(--text-1);
  padding-bottom: 6px; margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.pay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
@media (max-width: 860px) { .pay-grid { grid-template-columns: 1fr; } }
.pay-field { margin: 0; }
.pay-field > label {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 5px;
}
.pay-req, .pay-opt {
  font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px;
}
.pay-req { background: var(--accent-100); color: var(--accent-600); }
.pay-opt { background: var(--surface); color: var(--text-3); border: 1px solid var(--line); }
.pay-field textarea.input { resize: vertical; min-height: 84px; line-height: 1.6; }
.pay-chk-list { display: flex; flex-direction: column; gap: 6px; }
.pay-chk {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; line-height: 1.6; color: var(--text-2);
  padding: 7px 10px; border-radius: var(--radius-sm);
  background: var(--bg); border: 1px solid var(--line);
}
.pay-chk > b { flex: none; color: var(--text-1); }
.pay-chk-dot {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-3); margin-top: 6px;
}
.pay-chk-ok .pay-chk-dot { background: #1F9D55; }
.pay-chk-warn .pay-chk-dot { background: var(--accent); }
.pay-chk-error .pay-chk-dot { background: #D64545; }
.pay-chk-error { border-color: #F3C9C9; background: #FDF3F3; }

/* ================= 顾客端 · 支付中态（2026-09-27 异步支付改造） =================
   订单已建、钱还没确认到时的等待页。此时绝不展示核销码——
   核销码是「钱已到账」的凭证，早给一秒都是风险。 */
.pay-spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--primary);
  animation: pay-spin .8s linear infinite;
}
@keyframes pay-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pay-spin { animation: none; } }

/* ============ 顾客端 · 宽视口手机：左右铺开（2026-10-12） ============
   【问题】用户在手机上打开确认订单页，左右各留出一大块空白。「正常显示应该左右铺开」。
   【根因】不是缺 CSS，是**定宽封顶**被宽视口撞上了：
     · .container.narrow  max-width: 460px
     · .phone             max-width: 420px
     · .buy-bar / .co-bar max-width: 420px（fixed + left:50% 居中，与 .phone 同宽）
   视口一旦超过 460 + 2×16 = 492px，容器就居中封顶、两侧开始留白；用户的手机实测视口
   ≈527px（截图里卡片左边缘 54px 起 ＝ (527−460)/2 + 16 容器内边距 + 4 居中余量 = 54 ✓）。
   424px 的整块内容被塞进 527px 的屏幕，两侧各空 54px —— 手机上看着就是「没铺开」。
   （390/360 等常见窄机型上 420 < 可用宽，本来就不受影响，所以这个问题一直没暴露。）

   【做法】只在**手机档视口**（≤640px）解掉封顶，让内容吃满宽度：
     · .container.narrow / .phone → max-width:none（.phone 的 width:100% 已保证吃满）
     · .buy-bar / .co-bar → max-width:none（它们与 .phone 同宽居中，不改就比卡片窄一截）
   左右 16px 的卡片呼吸位**保留**（.container 的 padding 没动）：卡片不贴屏幕边，
   手机壳的观感还在，只是不再被强行收窄。
   ⚠ 桌面仍封顶 420px（走「手机壳」预览观感），所以用 640 而不是无限放宽。
   ⚠ 版本号随之 bump：改 CSS 必须同步 5 个页面的 ?v=（共 41 处）+
     tests/login_render_test.js，否则用户看到的是浏览器缓存里的旧样式。 */
@media (max-width: 640px) {
  .container.narrow { max-width: none; }
  .phone { max-width: none; }
  .buy-bar, .co-bar { max-width: none; }
}