/* ============================================================
 * 大鲵肽臻选商城 — 全局样式（单文件，约 690 行）
 * ------------------------------------------------------------
 * 视觉规范：深蓝(#0a2a5e / #0d3b78) + 金(#d4af37) + 清水留白
 * 移动端优先 (H5)，PC 端自适应
 *
 * 【怎么改颜色】只改下面 :root 里的 19 个变量，全站自动跟着变，
 * 不要在具体规则里写死 #0a2a5e 这类色值（会有色差、且难统一）。
 *   --blue-900/800/700  主色梯度（顶部栏、侧边栏、标题）
 *   --gold              强调色（金额、关键按钮、会员标识）
 *   --ok/--warn/--danger 状态色（成功/进行中/危险操作）
 *   --maxw: 480px       H5 内容最大宽度；PC 端靠 @media (min-width:768px) 切换成侧边栏布局
 *
 * 【结构顺序】（读代码时按这个顺序找，不用通读全文件）
 *   1. :root 变量 → 2. reset 与基础排版 → 3. 顶栏 / 底部 tabbar / PC 侧边栏
 *   4. 卡片与列表 → 5. 积分活动馆（倒计时、抢单卡、动画）
 *   6. 弹窗 .modal / .modal-mask → 7. 表单与按钮 → 8. toast / retry-bar / 空状态
 *   9. @media 响应式断点（360 / 380 / 768）
 *
 * 【约定】
 *   · class 命名是「区块-元素」风格（.flash-card / .flash-card-hd / .flash-card-num），
 *     新增样式请沿用，不要引入 BEM 之外的命名体系，否则和现有规则冲突难查。
 *   · 动效都尊重 prefers-reduced-motion（144 / 233 行），系统开了「减弱动态效果」会自动关掉。
 *   · 弹窗层级：.modal-mask 固定 z-index，新增浮层不要超过它，否则会被盖住。
 * ============================================================ */
:root {
  --blue-900: #0a0e2e;
  --blue-800: #141a52;
  --blue-700: #262a78;
  --blue-600: #3f3da0;
  --blue-500: #6358cf;
  --blue-300: #9a93e6;
  --blue-50: #eef0fb;
  --gold: #d4af37;
  --gold-soft: #f0c44c;
  --ink: #14233b;
  --gray: #6b7a90;
  --line: #e3e9f2;
  --bg: #f4f8fd;
  --ok: #18a058;
  --warn: #e88b1a;
  --danger: #d4380d;
  --radius: 14px;
  --shadow: 0 8px 26px rgba(10, 42, 94, .10);
  --maxw: 480px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }

/* ---------- 通用 ---------- */
#content { max-width: var(--maxw); margin: 0 auto; background: var(--bg); min-height: 100vh; position: relative; padding-bottom: 70px; }
#content.pad0 { padding: 0; }
.pad { padding: 14px; }
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px; }
.section-title { font-size: 17px; font-weight: 800; color: var(--blue-800); margin: 4px 0 12px; display: flex; align-items: center; gap: 8px; }
.section-title::before { content: ""; width: 4px; height: 18px; background: linear-gradient(var(--gold), var(--blue-600)); border-radius: 3px; }
.muted { color: var(--gray); font-size: 12px; }
.tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 20px; background: var(--blue-50); color: var(--blue-600); margin-right: 6px; }
.tag.gold { background: #fff7e0; color: #9a7400; }
.tag.ok { background: #e7f7ee; color: var(--ok); }
.tag.warn { background: #fdf0e0; color: var(--warn); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; border-radius: 10px; padding: 11px 16px; font-size: 14px; font-weight: 700; transition: .15s; }
.btn-primary { background: linear-gradient(135deg, var(--blue-700), var(--blue-500)); color: #fff; }
.btn-gold { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #3a2c00; }
.btn-ghost { background: #fff; color: var(--blue-700); border: 1px solid var(--line); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-block { width: 100%; }
.input { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; font-size: 14px; outline: none; }
.input:focus { border-color: var(--blue-500); }

/* ---------- 顶部品牌栏 ---------- */
.topbar { position: sticky; top: 0; z-index: 30; background: linear-gradient(135deg, var(--blue-800), var(--blue-600)); color: #fff; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.topbar .logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); display: grid; place-items: center; font-weight: 900; color: #3a2c00; font-size: 15px; }
.topbar .brand { font-weight: 800; font-size: 16px; letter-spacing: .5px; }
.topbar .brand small { display: block; font-weight: 400; font-size: 10px; opacity: .8; letter-spacing: 2px; }
.topbar .spacer { flex: 1; }
.topbar .icon-btn { position: relative; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.12); display: grid; place-items: center; font-size: 18px; }
.topbar .badge { position: absolute; top: -4px; right: -4px; background: var(--gold); color: #3a2c00; font-size: 10px; font-weight: 800; min-width: 16px; height: 16px; border-radius: 8px; display: grid; place-items: center; padding: 0 3px; }
/* 2026-10-30：已在消息页时，右上角铃铛变「✕」，再点一次即收回上一页 */
.topbar .icon-btn.bell-on { background: rgba(255,255,255,.24); }
.topbar .icon-btn.bell-on .bell-ico { display: none; }
.topbar .icon-btn.bell-on::before { content: '✕'; font-size: 17px; font-weight: 900; line-height: 1; color: #fff; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--blue-800), var(--blue-600) 60%, var(--blue-500)); color: #fff; }
.hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,12,40,.12) 0%, rgba(10,12,40,.42) 100%); z-index: 1; pointer-events: none; }
.hero .inner { position: relative; padding: 26px 18px 30px; z-index: 2; }
.hero h1 { margin: 0 0 6px; font-size: 26px; font-weight: 900; letter-spacing: 1px; }
.hero h1 .gold { color: var(--gold-soft); }
.hero p { margin: 0; opacity: .92; font-size: 13px; }
.hero .pill { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); padding: 6px 12px; border-radius: 20px; font-size: 12px; }

/* ---------- 倒计时 ---------- */
.countdown { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
.countdown .lbl { font-size: 12px; opacity: .9; }
.countdown .box { background: rgba(0,0,0,.28); border-radius: 8px; padding: 5px 8px; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 16px; min-width: 34px; text-align: center; }
.countdown .colon { font-weight: 800; }

/* ---------- 入口宫格 ---------- */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.grid .cell { background: #fff; border-radius: 12px; padding: 12px 6px; text-align: center; box-shadow: var(--shadow); }
.grid .cell .ic { font-size: 22px; }
.grid .cell .t { font-size: 12px; margin-top: 4px; color: var(--blue-800); font-weight: 700; }
/* 「我的服务」菜单：四宫格（2×2），点击进入独立页面/弹窗 */
.grid.menu-grid { grid-template-columns: repeat(2, 1fr); }
.grid.menu-grid .cell { padding: 16px 8px; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.grid.menu-grid .cell:active { transform: scale(.97); }
.grid.menu-grid .cell .ic { font-size: 26px; }
.grid.menu-grid .cell .t { font-size: 14px; margin-top: 6px; }
.grid.menu-grid .cell .s { font-size: 12px; margin-top: 3px; color: var(--gray); }

/* ---------- 商品卡 ---------- */
.product { display: flex; gap: 12px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px; margin-bottom: 12px; }
.product img { width: 88px; height: 88px; object-fit: cover; border-radius: 10px; background: var(--blue-50); }
.product .info { flex: 1; min-width: 0; }
.product .name { font-weight: 700; font-size: 14px; color: var(--ink); }
.product .points { color: var(--gold); font-weight: 800; font-size: 15px; margin: 4px 0; }
.product .points small { color: var(--gray); font-weight: 400; font-size: 11px; }
.product .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
/* 仓库内「提货 + 挂单」双入口并排对齐 */
.product .row.col2 { flex-wrap: wrap; }
.product .row.col2 .btn { flex: 1 1 46%; min-width: 0; padding-left: 8px; padding-right: 8px; }
.product .row.col3 { flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.product .row.col3 .btn { flex: 1 1 30%; min-width: 0; padding: 9px 4px; font-size: 12px; }

/* 积分活动区域：产品横排两个对齐 */
.flash-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.flash-grid .product { margin-bottom: 0; }

/* 积分活动馆卡片：上下（垂直）格式排版 */
.flash-grid .product.flash-product { flex-direction: column; overflow: hidden; }
.flash-grid .product.flash-product > img { width: 100%; height: 150px; border-radius: 0; }
.flash-grid .product.flash-product .info { width: 100%; padding: 2px 2px 0; }
.flash-grid .product.flash-product .name { font-size: 15px; line-height: 1.3; margin-top: 4px; min-height: 38px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.flash-grid .product.flash-product .muted { font-size: 11px; }
.flash-grid .product.flash-product .points { font-size: 18px; margin: 6px 0 12px; }
.flash-grab { width: 100%; padding: 13px; font-size: 15px; border-radius: 12px; box-shadow: 0 6px 16px rgba(10,42,94,.20); letter-spacing: 1px; }
.flash-grab:active { transform: translateY(1px); }
.flash-hint { text-align: center; margin-top: 8px; font-size: 11px; }

/* ---------- 抢单按钮动画（2026-10-29 用户要求）：开馆抢单中时呼吸光晕 + 轻微缩放，吸引点击 ---------- */
.flash-grab-pulse { animation: grabPulse 1.7s ease-in-out infinite; }
@keyframes grabPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 16px rgba(10,42,94,.20); }
  50% { transform: scale(1.035); box-shadow: 0 9px 24px rgba(255,176,32,.55), 0 0 0 3px rgba(255,176,32,.20); }
}
.btn-gold-pulse { animation: goldPulse 1.7s ease-in-out infinite; }
@keyframes goldPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 16px rgba(10,42,94,.16); }
  50% { transform: scale(1.035); box-shadow: 0 9px 24px rgba(255,176,32,.62); }
}
/* 尊重系统「减少动态效果」偏好：关闭动画，避免眩晕 */
@media (prefers-reduced-motion: reduce) {
  .flash-grab-pulse, .btn-gold-pulse { animation: none; }
}

/* ---------- 积分活动馆：昨日挂单 + 秒表倒计时 ---------- */
.flash-head { background: linear-gradient(135deg, var(--blue-700), var(--blue-500)); color: #fff; }
.flash-head .muted { color: #dce8fb; }
.flash-quota { margin-top: 8px; font-size: 12px; background: rgba(255,255,255,.14); border-radius: 8px; padding: 6px 10px; }
.flash-quota b { color: #ffd76a; font-size: 14px; }

.flash-card { position: relative; border: 1px solid #e7ecf5; }
.flash-card .fc-top { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 6px 8px 2px; }
.fc-badge { font-size: 10px; font-weight: 800; color: #b26a00; background: #fff4e0; border: 1px solid #ffd9a0; border-radius: 6px; padding: 2px 6px; }
.fc-badge.today { color: #0a5bb5; background: #eaf3ff; border-color: #c3dcff; }
.fc-live { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: #9aa6b8; }
.fc-live i { width: 6px; height: 6px; border-radius: 50%; background: #c9d2e0; display: inline-block; }
.fc-live.on { color: #d32f2f; }
.fc-live.on i { background: #ff3b30; animation: fcPulse 1s infinite; }
@keyframes fcPulse { 0% { box-shadow: 0 0 0 0 rgba(255,59,48,.65); } 70% { box-shadow: 0 0 0 7px rgba(255,59,48,0); } 100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); } }

.fc-imgwrap { position: relative; width: 100%; }
.fc-imgwrap > img { width: 100%; height: 150px; object-fit: cover; display: block; }
.fc-clock { position: absolute; left: 8px; bottom: 8px; right: 8px; display: flex; align-items: center; justify-content: space-between; gap: 6px; background: rgba(15,23,42,.72); color: #fff; border-radius: 8px; padding: 4px 8px; backdrop-filter: blur(2px); }
.fc-clock span { font-size: 10px; opacity: .85; }
.fc-clock b { font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 800; letter-spacing: .2px; color: #ffd76a; }
.fc-clock b.urgent { color: #ff5b4d; animation: fcBlink .8s steps(2, start) infinite; }
@keyframes fcBlink { 50% { opacity: .35; } }

/* ---------- 闭馆中 / 抢单中（毫秒倒计时） ---------- */
.countdown .box.ms { font-size: 12px; min-width: 40px; opacity: .82; padding: 5px 5px; }
.hero-state { margin-top: 8px; font-size: 12px; opacity: .92; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.flash-open { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: #dce8fb; }
.flash-open .fc-open-tip b { font-variant-numeric: tabular-nums; font-size: 16px; color: #ffd76a; margin-left: 4px; letter-spacing: .5px; }
.flash-closed { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); border-radius: 12px; padding: 10px 12px; text-align: center; }
.flash-closed .fc-cl-t { font-size: 13px; font-weight: 800; letter-spacing: 1px; opacity: .95; }
.flash-closed .fc-cl-c { margin-top: 4px; font-size: 12px; opacity: .92; }
.flash-closed .fc-cl-c b { display: inline-block; margin-left: 6px; font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 800; letter-spacing: 1px; color: #ffd76a; text-shadow: 0 2px 10px rgba(255,215,106,.35); }
.flash-closed .fc-cl-s { margin-top: 4px; font-size: 11px; opacity: .75; }

.fc-bar { width: 100%; height: 6px; border-radius: 999px; background: #eef2f8; overflow: hidden; margin: 0 0 10px; }
.fc-bar i { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, #ff8a00, #ff3b30); transition: width 1s linear; }
/* 规格/店主行统一两行高度，保证同一行卡片的价格、按钮上下对齐 */
.flash-card .fc-spec { min-height: 30px; line-height: 1.35; display: block; }

/* ---------- 2026-10-31 用户指定：活动馆挂单卡极简版 ----------
 * 参照样图：两列网格，每卡只有「产品图 / 产品名称 / 对应积分 / 抢单按钮」
 * （挂单日、卡片内秒表、规格店主行、进度条、赠送配比提示均已按要求去掉；
 *   本场倒计时仍在顶部大卡里，信息不丢） */
.flash-grid { gap: 10px; }
.fc2 {
  position: relative;
  padding: 0;
  gap: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #e9eef6;
  box-shadow: 0 2px 8px rgba(10, 42, 94, .06);
  background: #fff;
}
.fc2 .fc2-img { width: 100%; background: var(--blue-50); }
/* 2026-11-01 用户定型版式（参照样图，之后不再改动）：
   长方形产品图（4:3，铺满卡宽）+ 小字号名称 + 底部一行「左侧红色积分(带小字『积分』) · 右侧小绿按钮『抢单』」 */
.fc2 .fc2-img > img {
  width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: 0; display: block;
}
.fc2 .fc2-body { padding: 7px 10px 9px; display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; }
.fc2 .fc2-name {
  font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fc2 .fc2-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; }
.fc2 .fc2-price { display: flex; align-items: baseline; gap: 2px; min-width: 0; }
.fc2 .fc2-pv { color: #e5342b; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.fc2 .fc2-pu { font-size: 10px; color: var(--gray); font-weight: 600; white-space: nowrap; }
.fc2 .fc2-btn {
  width: auto; flex: 0 0 auto; padding: 6px 14px; border: 0; border-radius: 8px;
  background: #07c160; color: #fff; font-size: 12.5px; font-weight: 700;
  letter-spacing: .5px; box-shadow: none; white-space: nowrap;
}
.fc2 .fc2-btn:active { transform: translateY(1px); background: #06ad56; }
.fc2 .fc2-btn:disabled { background: #c7cfdb; color: #fff; }
.fc2 .fc2-btn-pulse { animation: fc2Pulse 1.7s ease-in-out infinite; }
@keyframes fc2Pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(7, 193, 96, .38); }
  50% { box-shadow: 0 0 0 5px rgba(7, 193, 96, 0); }
}
@media (prefers-reduced-motion: reduce) { .fc2 .fc2-btn-pulse { animation: none; } }

/* ---------- 仓库分区 Tabs ---------- */
.tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.tabs .tab { flex: 1 1 auto; min-width: 96px; padding: 10px 8px; border: 1px solid var(--line); background: #fff; border-radius: 10px; font-weight: 600; font-size: 13px; color: var(--gray); cursor: pointer; }
.tabs .tab.active { background: linear-gradient(135deg, var(--blue-700), var(--blue-500)); color: #fff; border-color: transparent; box-shadow: var(--shadow); }

/* ---------- 二维码展示块 ---------- */
.qr-row { display: flex; gap: 12px; margin: 10px 0 4px; flex-wrap: wrap; }
.qr { flex: 1 1 130px; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px; text-align: center; }
.qr-cap { font-size: 12px; font-weight: 700; color: var(--blue-700); margin-bottom: 6px; }
.qr img { width: 100%; max-width: 120px; height: auto; border-radius: 6px; }
/* 二维码可点开放大（长按识别）：默认给放大手势提示 */
.qr img.qr-tap { cursor: zoom-in; }

/* ---------- 二维码全屏放大查看（可长按识别） ---------- */
.qr-viewer { position: fixed; inset: 0; z-index: 9998; background: rgba(6, 16, 34, .94); display: none; flex-direction: column; align-items: center; justify-content: center; padding: 26px 18px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.qr-viewer.show { display: flex; }
.qr-big-close { position: absolute; top: 10px; right: 12px; color: #fff; font-size: 30px; line-height: 1; padding: 4px 12px 10px; cursor: pointer; opacity: .85; }
.qr-big-close:active { opacity: .5; }
.qr-big-cap { color: #fff; font-size: 16px; font-weight: 700; margin-bottom: 16px; text-align: center; letter-spacing: .5px; }
.qr-big-img { display: block; width: auto; max-width: min(86vw, 360px); max-height: 62vh; height: auto; background: #fff; padding: 12px; border-radius: 14px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45); -webkit-touch-callout: default; box-sizing: border-box; }
.qr-big-holder { display: flex; align-items: center; justify-content: center; min-height: 160px; width: 100%; }
.qr-big-tip { color: #c9d6e8; font-size: 12.5px; line-height: 1.9; margin-top: 16px; text-align: center; }
.qr-big-tip b { color: #8fd0ff; }
.qr-foot { font-size: 11px; color: var(--gray); margin-top: 4px; }
.qr-zoom { font-size: 11px; color: var(--blue-700); margin-top: 2px; font-weight: 700; }
.qr-none { font-size: 12px; color: var(--gray); padding: 22px 0; }
/* 订单二维码区：二维码 + 真实比例数据备注 */
.qr-wrap { flex: 1 1 150px; min-width: 150px; }
.qr-wrap .qr { width: 100%; }
/* 店主二维码第②张：与第①张同列堆叠时留出间距 */
.qr-wrap .qr + .qr { margin-top: 8px; }
/* 2026-10-28：店主有第①/第②两张码时「横排」并排展示（不上下堆叠） */
.qr-wrap .qr-multi { display: flex; gap: 8px; flex-wrap: nowrap; align-items: stretch; }
.qr-wrap .qr-multi > .qr { flex: 1 1 50%; width: auto; min-width: 0; margin: 0; }
.qr-wrap .qr-multi .qr img { max-width: 100%; }
.qr-wrap .qr-multi .qr-cap { font-size: 11px; line-height: 1.25; }
/* 两张码时要留够「可扫」宽度：店主区多分一些，平台服务码那列保持原宽 */
.qr-row.qr-row-multi > .qr-wrap:first-child { flex: 1.8 1 190px; }
.qr-row.qr-row-multi > .qr-wrap:last-child { flex: 1 1 132px; }
@media (max-width: 360px) {
  .qr-wrap .qr-multi { gap: 6px; }
  .qr-wrap .qr-multi > .qr { padding: 6px; }
}
.qr-note { font-size: 12px; line-height: 1.45; margin-top: 6px; padding: 5px 7px; border-radius: 8px; text-align: center; }
.qr-note.red { color: #d32f2f; font-weight: 700; background: #fff2f2; border: 1px solid #ffd9d9; }
.qr-note.gray { color: var(--gray); background: #f6f8fb; border: 1px solid var(--line); }
/* 上品服务费结算明细（直推分成抵扣 + 服务积分实付） */
.fee-note { font-size: 12px; line-height: 1.5; margin: 8px 0 2px; padding: 6px 9px; border-radius: 8px; background: #f0f7ff; border: 1px solid #d6e6ff; color: var(--blue-700); }
.fee-note b { color: #d32f2f; }
.fee-note.muted { background: #f6f8fb; border-color: var(--line); color: var(--gray); }
/* 结单界面：店主应收 / 上品服务费 红字自动计算 */
.settle-note { background: #fff5f5; border-color: #ffd9d9; }
.settle-note > div { margin: 2px 0; }
.settle-note .red { color: #d32f2f; font-weight: 800; font-size: 14px; }
/* 上品服务费一行：红字后面跟【抵扣】按钮 */
.fee-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn-sm { padding: 4px 12px; font-size: 12px; border-radius: 8px; line-height: 1.4; font-weight: 700; box-shadow: none; }
/* 直推分成抵扣框：显示在上品服务费之后，直接显示抵扣了多少 */
.offset-box { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  margin: 6px 0; padding: 7px 10px; border-radius: 9px; border: 1px dashed #f0b429; background: #fffdf4; }
.offset-box .ob-label { font-size: 12px; font-weight: 700; color: #8a6100; }
.offset-box .ob-val { font-size: 16px; font-weight: 800; color: #d32f2f; letter-spacing: .5px; }
.offset-box .ob-sub { flex: 1 1 100%; font-size: 11px; color: #9a8a6a; line-height: 1.4; }
.offset-box.zero { border-color: #e2e8f0; background: #f8fafc; }
.offset-box.zero .ob-val { color: #97a1b0; }
.offset-box.zero .ob-label { color: #7b8697; }
.offset-box.zero .ob-sub { color: #97a1b0; }
.qr-note-sub { margin-top: 3px; font-size: 11px; line-height: 1.35; color: #8a93a3; text-align: center; }

/* ---------- 表单标签 ---------- */
.field-label { display: block; font-size: 12px; font-weight: 700; color: var(--blue-700); margin-bottom: 2px; }

/* ---------- 积分中心 ---------- */
.points-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.points-grid .p { background: linear-gradient(135deg, var(--blue-700), var(--blue-500)); color: #fff; border-radius: 12px; padding: 12px; text-align: center; }
.points-grid .p .v { font-size: 20px; font-weight: 900; }
.points-grid .p .k { font-size: 11px; opacity: .85; margin-top: 2px; }
.points-grid .p.gold { background: linear-gradient(135deg, var(--gold), var(--gold-soft)); color: #3a2c00; }

/* ---------- 底部导航 ---------- */
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: var(--maxw); background: #fff; display: flex; border-top: 1px solid var(--line); z-index: 40; }
.tabbar a { flex: 1; text-align: center; padding: 7px 0 8px; color: var(--gray); font-size: 11px; }
.tabbar a .ic { font-size: 20px; display: block; line-height: 1.1; }
.tabbar a.active { color: var(--blue-700); font-weight: 800; }
.tabbar a.active .ic { color: var(--gold); }

/* ---------- 视图切换 ---------- */
.view { display: none; }
.view.active { display: block; }

/* ---------- 弹层 / 通用 ---------- */
.modal-mask { position: fixed; inset: 0; background: rgba(6,26,58,.55); z-index: 60; display: none; align-items: flex-end; justify-content: center; }
.modal-mask.show { display: flex; }
.modal { background: #fff; width: 100%; max-width: var(--maxw); border-radius: 18px 18px 0 0; padding: 18px 16px 22px; animation: up .2s ease; max-height: 86vh; overflow: auto; }
@keyframes up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
.modal h3 { margin: 0 0 12px; font-size: 16px; }
.close-x { float: right; font-size: 22px; color: var(--gray); }

/* 2026-10-31 用户要求：积分活动馆「抢单确认」弹窗改为屏幕中间弹出。
 * 只作用于带 .mid 的这个弹窗，其余弹窗仍从底部弹出，样式一字未改。 */
.modal-mask.mid { align-items: center; padding: 14px; }
.modal.mid {
  border-radius: 16px;
  max-height: 82vh;
  box-shadow: 0 18px 48px rgba(6, 26, 58, .26);
  animation: pop .18s ease;
}
@keyframes pop { from { transform: translateY(10px) scale(.985); opacity: .5; } to { transform: none; opacity: 1; } }

/* 手写签名板 */
#sigCanvas { width: 100%; height: 180px; border: 2px dashed var(--blue-300); border-radius: 12px; background: #fafdff; touch-action: none; display: block; }
.sig-wrap { position: relative; }
.sig-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; color: #9fb3cd; font-size: 13px; letter-spacing: 2px; font-family: "KaiTi", "STKaiti", "楷体", serif; }
.sig-tip { margin: 10px 2px 6px; font-size: 12.5px; line-height: 1.7; color: #7a4b00; background: #fff8ec; border: 1px dashed #f0cf94; border-radius: 10px; padding: 8px 10px; }
.sig-tip b { color: #d32f2f; }
.sig-row { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; }
.sig-row .sig-clear { flex: 0 0 auto; white-space: nowrap; padding-left: 14px; padding-right: 14px; }
.agree-lines label { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 8px 0; }

/* 协议文档（三个勾选协议） */
.agree-doc { max-height: 42vh; overflow: auto; margin: 8px 0; border: 1px solid var(--line); border-radius: 12px; background: #f7faff; }
.agree-doc.flat { max-height: none; overflow: visible; }
.agree-scroll-tip { font-size: 11.5px; color: #8b9bb4; text-align: center; margin: -2px 0 6px; }
.agree-block { padding: 10px 12px; border-bottom: 1px dashed var(--line); }
.agree-block:last-child { border-bottom: none; }
.agree-block h4 { margin: 0 0 6px; font-size: 13.5px; color: var(--blue-700); }
.agree-text { font-size: 12px; line-height: 1.7; color: #3a4a63; }
.agree-check { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; font-weight: 700; color: var(--blue-700); margin-top: 8px; cursor: pointer; }
.agree-check input { margin-top: 2px; }
.agree-check.view { cursor: default; align-items: center; flex-wrap: wrap; }
.agree-check.view .ac-box { font-size: 15px; line-height: 1; color: #0a7a45; }
.agree-check.view:not(.on) .ac-box { color: #c8d2e0; }
.agree-meta { background: #f2f7ff; border: 1px solid #d9e6f8; border-radius: 10px; padding: 8px 10px; font-size: 12px; line-height: 1.8; color: #3a4a63; margin: 4px 0 8px; }

/* 今日差额结算（自动匹配算账） */
.net-settle { background: linear-gradient(160deg, #f7fbff, #eef5ff); border: 1px solid #d9e6f8; border-radius: 12px; padding: 10px 12px; }
.ns-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 0; color: #3a4a63; }
.ns-row b { font-variant-numeric: tabular-nums; font-size: 15px; }
.ns-sub { font-size: 11.5px; color: #7b8aa0; padding-left: 2px; }
.ns-total { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 7px; border-top: 1px dashed #c9dbf3; font-size: 13.5px; font-weight: 800; color: var(--blue-800); }
.ns-total b { font-variant-numeric: tabular-nums; font-size: 20px; }
.plus { color: #0a7a45; }
.minus { color: #d32f2f; }
.net-hint { margin: 8px 0 2px; padding: 8px 10px; border-radius: 10px; background: #f4f9f5; border: 1px solid #cfe9d8; font-size: 12.5px; color: #2f5a41; }
.net-hint b { font-size: 16px; font-variant-numeric: tabular-nums; }
.ns-group { margin-top: 12px; }
.ns-cap { font-size: 12px; font-weight: 700; color: var(--blue-700); margin-bottom: 4px; }
.ns-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.ns-line:last-child { border-bottom: none; }
.ns-line b { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 差额匹配状态条（划拨缓冲期 / 已全部匹配完成） */
.ns-banner { margin: 8px 0 4px; padding: 9px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.55;
  background: #f2f7ff; border: 1px solid #d3e3fa; color: #26456e; }
.ns-banner b { font-variant-numeric: tabular-nums; }
.ns-banner.wait { background: #fff8ec; border-color: #f3ddb6; color: #8a5a13; }
.ns-banner.ok { background: #f1fbf4; border-color: #c9ead5; color: #1f6b40; }

/* 2026-10-29 v3029（用户要求）：差额匹配应付积分 / 待我确认改为上下结构（不再左右两栏），
 * 两个模块颜色区分：应付 = 红色系、待我确认 = 绿色系，各占整行宽度 */
.ns-duo { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.ns-duo > .ns-group { margin-top: 0; background: #f8fbff; border: 1px solid #e2edfa; border-radius: 12px; padding: 10px 10px 9px; min-width: 0; }
.ns-duo .ns-cap { line-height: 1.45; }
.ns-cap-amt { display: inline-block; white-space: nowrap; }
.ns-duo-pay { background: linear-gradient(165deg, #fff2f0, #fffdfd) !important; border-color: #f3c4bc !important; border-left: 4px solid #d9534f !important; }
.ns-duo-recv { background: linear-gradient(165deg, #eefaf3, #fcfffd) !important; border-color: #bfe5cd !important; border-left: 4px solid #27a05c !important; }
.ns-duo .ns-cap { font-size: 14px; padding: 7px 10px; border-radius: 8px; margin-bottom: 8px; }
.ns-duo-pay .ns-cap { background: #fdeceb; color: #a3271d; }
.ns-duo-recv .ns-cap { background: #e3f6e9; color: #1c6b3c; }
.ns-duo .sm-amt b { font-size: 18px; }
.ns-toggle { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 10px 12px;
  border: 1px solid #f3ddb6; border-radius: 10px; background: linear-gradient(135deg, #fff8ec, #fdeed6);
  font-size: 13px; font-weight: 600; color: #7a4a0a; cursor: pointer; text-align: left; }
.ns-toggle-amt { font-size: 18px; color: #d93025; font-variant-numeric: tabular-nums; margin-left: 2px; }
.ns-caret { margin-left: auto; font-size: 11px; color: #8a5a13; white-space: nowrap; }
.seq-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px;
  padding: 0 6px; margin-right: 6px; border-radius: 10px; vertical-align: 2px;
  background: linear-gradient(135deg, #2f5cff, #7a3cff); color: #fff; font-size: 11px; font-weight: 700; }
.sm-card { border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: #fff; margin-top: 8px; }
.sm-card:first-of-type { margin-top: 2px; }
.sm-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; flex-wrap: wrap; }
/* v3029：匹配订单卡片重排 —— 左侧信息（产品/店主/金额/凭证），右侧收款码，一张卡一眼看完不叠加 */
.sm-main { display: flex; gap: 10px; margin-top: 7px; align-items: flex-start; }
.sm-info { flex: 1 1 0; min-width: 0; }
.sm-side { flex: 0 1 auto; max-width: 46%; display: flex; flex-direction: column; align-items: stretch; }
.sm-side .sm-qrs { flex-wrap: wrap; justify-content: flex-end; margin-top: 0; }
.sm-side .sm-qr-img { max-width: 84px; }
.sm-side .sm-proof-img { max-width: 96px; }
.sm-side .sm-noqr { margin-top: 0; text-align: right; }
.sm-side .sm-qr-cap { text-align: right; }
/* v3029：匹配订单卡片按屏幕宽度自适应排版（手机一列、宽屏两列，互不叠加） */
.sm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 8px; align-items: start; }
.sm-grid > .sm-card { margin-top: 0; }
.sm-grid > .sm-empty { grid-column: 1 / -1; }
.sm-oid { font-weight: 800; color: var(--blue-800); word-break: break-all; font-variant-numeric: tabular-nums; }
.sm-amt { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-top: 5px; font-size: 12px; color: #5a6b82; flex-wrap: wrap; }
.sm-amt b { font-size: 17px; font-variant-numeric: tabular-nums; }
.sm-qrs { display: flex; gap: 8px; margin-top: 6px; align-items: flex-start; }
.sm-qrs > img { flex: 1 1 0; width: 0; min-width: 0; }
.sm-qr-img { width: 100%; max-width: 108px; border-radius: 8px; border: 1px solid var(--line); background: #fff; cursor: zoom-in; }
.sm-proof-img { width: 100%; max-width: 132px; border-radius: 8px; border: 1px solid var(--line); background: #fff; cursor: zoom-in; }
.sm-qr-cap { margin-top: 4px; font-size: 10.5px; color: #98a4b4; }
.sm-tip { margin-top: 6px; font-size: 11.5px; line-height: 1.5; color: #8a5a13; background: #fff8ec; border: 1px solid #f3ddb6; border-radius: 8px; padding: 6px 7px; }
.sm-noqr { margin-top: 6px; font-size: 11.5px; color: #98a4b4; }
.sm-empty { font-size: 12px; color: #8a97a8; padding: 6px 0; }
/* 差额匹配 · 应付积分卡片：产品名称 / 应付积分 / 收款码 / 上传凭证 / 我要结单 */
.sm-items { margin-top: 5px; border-top: 1px dashed #e6edf6; padding-top: 5px; }
.sm-item { font-size: 12px; font-weight: 700; color: #1f2b3d; line-height: 1.45; display: flex; justify-content: space-between; gap: 6px; }
.sm-item + .sm-item { margin-top: 2px; }
.sm-item-pts { font-weight: 400; font-size: 11px; color: #8a97a8; white-space: nowrap; }
/* 2026-10-29 v3027：应付卡片固定显示新匹配的收款店主名称 */
.sm-who { margin-top: 3px; font-size: 12px; color: #5b6b80; }
.sm-who b { color: #1f2b3d; font-weight: 800; }
.sm-up { display: block; margin-top: 7px; text-align: center; font-size: 12px; font-weight: 700; color: #8a5a13; background: #fff8ec; border: 1px dashed #eccf9c; border-radius: 9px; padding: 8px 6px; cursor: pointer; }
.sm-up:active { background: #fdf1dc; }
.sm-up-wrap { margin-top: 7px; }
.sm-up-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 4px; }
.sm-up-ok { font-size: 11px; color: #0a7d32; font-weight: 700; }
.sm-up-again { font-size: 11px; color: #2c6fd1; cursor: pointer; }
/* v3028：两张码 / 两张凭证（①必传 ②选传） */
.sm-qr-cell { flex: 1 1 0; min-width: 0; text-align: center; }
.sm-qr-tag { margin-top: 3px; font-size: 10.5px; color: #6b7a8d; font-weight: 700; }
.sm-ups { display: flex; gap: 8px; margin-top: 7px; }
.sm-ups > * { flex: 1 1 0; min-width: 0; }
.sm-ups .sm-up { margin-top: 0; }
.sm-must { color: #d32f2f; font-weight: 700; }
.sm-opt { color: #8a97a8; font-weight: 400; }
@media (max-width: 380px) {
  .ns-duo { gap: 10px; }
  .ns-duo > .ns-group { padding: 8px 7px; }
  .sm-card { padding: 6px; }
  .sm-main { gap: 8px; }
  .sm-side { max-width: 50%; }
  .sm-amt b { font-size: 15px; }
  .sm-tip { font-size: 11px; padding: 5px 6px; }
}

/* 我的积分 · 直推分成：浅底白字看不清 → 换深底白字 */
.points-grid .p.direct-tile { background: linear-gradient(135deg, #7d1d16, #c0392b); color: #fff; border: 1px solid #8e2a1e; }
.points-grid .p.direct-tile .v { color: #fff; }
.points-grid .p.direct-tile .k { color: #ffe9e4; opacity: 1; }

/* 进度条 */
.progress { height: 8px; background: var(--blue-50); border-radius: 6px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue-500), var(--gold)); }

/* 空态 */
.empty { text-align: center; color: var(--gray); padding: 40px 20px; }
.empty .big { font-size: 40px; opacity: .4; }

/* ---------- PC 端适配（客户端在桌面打开时） ---------- */
@media (min-width: 768px) {
  body { background: linear-gradient(135deg, #e9f1fb, #f4f8fd); }
  #topbar { display: none !important; }
  #tabbar { display: none !important; }
  #pcSide { display: block !important; position: fixed; left: 0; top: 0; width: 220px; height: 100vh; overflow: auto;
    background: linear-gradient(180deg, var(--blue-900), var(--blue-800)); color: #fff; padding: 18px 12px; z-index: 20; }
  #pcSide .logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; margin-bottom: 18px; }
  #pcSide .logo .mark { width: 36px; height: 36px; border-radius: 9px; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); display: grid; place-items: center; color: #3a2c00; font-weight: 900; }
  #pcSide a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; color: #cfe0f7; margin-bottom: 4px; font-weight: 600; }
  #pcSide a:hover, #pcSide a.active { background: rgba(255,255,255,.14); color: #fff; }
  #content { max-width: none; margin-left: 220px; padding: 22px 28px 40px; min-height: 100vh; }
  .pc-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
  .pc-products .product { margin: 0; flex-direction: column; }
  .pc-products .product img { width: 100%; height: 150px; }
  .pc-products .product .row { margin-top: 10px; }
  .flash-grid { grid-template-columns: repeat(2, 1fr); }
  .flash-grid .product { flex-direction: column; }
  .flash-grid .product img { width: 100%; height: 160px; }
  .flash-grid .product .row { margin-top: 10px; }
  .flash-grid .product .row.col2 .btn { flex: 1 1 46%; }
  .hero .inner { padding: 40px 30px 44px; }
  .hero h1 { font-size: 34px; }
  .grid .cell { padding: 16px 8px; }
}

/* ---------- 后台管理专用 ---------- */
.admin { max-width: 100%; }
.admin .top { background: linear-gradient(135deg, var(--blue-900), var(--blue-700)); color: #fff; }
.admin-shell { max-width: 1200px; margin: 0 auto; padding: 18px; }
.admin-login { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue-800), var(--blue-500)); }
.login-card { background: #fff; border-radius: 18px; padding: 30px; width: 340px; box-shadow: var(--shadow); }
.login-card h2 { margin: 0 0 4px; color: var(--blue-800); }
.admin-layout { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; }
/* 左侧菜单固定：页面滚动看订单时菜单保持可见（2026-10-31 需求） */
.admin-side { background: linear-gradient(180deg, var(--blue-900), var(--blue-800)); color: #fff; padding: 18px 12px; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; }
.admin-side .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; margin-bottom: 20px; }
.admin-side .brand .mark { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--gold), var(--gold-soft)); display: grid; place-items: center; color: #3a2c00; font-weight: 900; }
.admin-side a { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 10px; color: #cfe0f7; margin-bottom: 4px; font-weight: 600; }
.admin-side a:hover, .admin-side a.active { background: rgba(255,255,255,.14); color: #fff; }
/* 侧栏图标：内联 SVG（替代 emoji，避免缺字形时显示空白方块） */
.admin-side a svg { width: 18px; height: 18px; flex: 0 0 18px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.admin-side a.active svg, .admin-side a:hover svg { opacity: 1; }
.admin-side a > span { white-space: nowrap; }
.admin-main { padding: 20px 26px; background: var(--bg); overflow: auto; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat { background: #fff; border-radius: 14px; padding: 16px; box-shadow: var(--shadow); border-left: 4px solid var(--blue-500); }
.stat .v { font-size: 26px; font-weight: 900; color: var(--blue-800); }
.stat .k { color: var(--gray); font-size: 12px; margin-top: 2px; }
.stat.gold { border-left-color: var(--gold); }
.stat.ok { border-left-color: var(--ok); }
.stat.warn { border-left-color: var(--warn); }
.table { width: 100%; background: #fff; border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.table table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); }
.table th { background: var(--blue-50); color: var(--blue-800); font-weight: 700; }
.table tr:last-child td { border-bottom: none; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .input { max-width: 220px; }
.modal .full { max-width: 560px; }
/* 2026-10-29 v3033：后台「差额匹配单 · 查看订单」需要宽表格，单独给一个宽版弹层（不影响其他弹窗） */
.modal.wide { max-width: min(1180px, 96vw); border-radius: 18px; }
.modal.wide .table { box-shadow: none; border: 1px solid var(--line); }
.config-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.config-row .input { max-width: 160px; }
/* 抢单开放日（星期勾选）—— 2026-10-31 */
.wk-picks { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: flex-end; max-width: 460px; }
.wk-pick { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; white-space: nowrap; cursor: pointer; color: var(--blue-800); }
.wk-pick input { width: 15px; height: 15px; accent-color: var(--blue-600, #1e5aa8); cursor: pointer; }
.toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); background: var(--blue-900); color: #fff; padding: 10px 18px; border-radius: 24px; font-size: 13px; z-index: 99; box-shadow: var(--shadow); opacity: 0; transition: .25s; pointer-events: none; }
.toast.show { opacity: 1; }

/* ---------- 离线未提交动作重试条（常驻，坐底导航上方） ---------- */
.retry-bar { position: fixed; left: 50%; bottom: 58px; transform: translateX(-50%); width: calc(100% - 24px); max-width: calc(var(--maxw) - 24px); display: flex; align-items: center; gap: 8px; background: #b3261e; color: #fff; padding: 9px 12px; border-radius: 12px; font-size: 13px; z-index: 60; box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.retry-bar .retry-ico { font-size: 15px; }
.retry-bar .retry-txt { flex: 1; line-height: 1.3; }
.retry-bar .retry-btn { flex: none; background: #fff; color: #b3261e; border: 0; border-radius: 8px; padding: 7px 14px; font-size: 13px; font-weight: 800; cursor: pointer; }
.retry-bar .retry-btn:active { transform: scale(.96); }

/* ---------- 账号冻结提示 / 已完成卡片 ---------- */
.frozen-card { background: linear-gradient(160deg, #fff8e8, #fff1d6); border: 1px solid #f3d79b; }
.frozen-card .section-title { color: #8a5b00; }
.done-item { align-items: stretch; }
.done-item .info { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.done-item .name { font-weight: 800; color: var(--blue-800); }

/* ============================================================
 * 字号放大（适老化）
 * 目的：中老年用户看手机也能看清。只放大文字、行高与必要的点击区，
 * 不改配色、不改结构、不改页面宽度。
 * ============================================================ */
.section-title { font-size: 18px; }
.section-title::before { height: 19px; }
.muted { font-size: 13.5px; }
.tag { font-size: 12.5px; padding: 3px 9px; white-space: nowrap; }
.btn { font-size: 15px; padding: 12px 16px; }
.btn-sm { font-size: 13px; padding: 5px 12px; }
.input { font-size: 15.5px; }
.product .name { font-size: 15.5px; }
.product .points { font-size: 17px; }
.product .points small { font-size: 12px; }
.product .row.col3 .btn { font-size: 13px; }
.tabs .tab { font-size: 14px; padding: 11px 8px; }
.tabbar a { font-size: 12px; }
.tabbar a .ic { font-size: 21px; }
.qr-cap { font-size: 13px; }
.qr-foot, .qr-zoom { font-size: 12px; }
.qr-note { font-size: 13px; line-height: 1.5; }
.qr-note.red { font-size: 13.5px; }
.qr-note-sub { font-size: 12px; }
.qr-none { font-size: 13px; }
.fee-note { font-size: 13.5px; }
.settle-note .red { font-size: 15.5px; }
.offset-box .ob-label { font-size: 13px; }
.offset-box .ob-sub { font-size: 12px; }
.field-label { font-size: 13.5px; }
.modal h3 { font-size: 18px; }
.toast { font-size: 14px; padding: 11px 20px; }
.grid .cell .t { font-size: 13px; }
.grid.menu-grid .cell .t { font-size: 15px; }
.grid.menu-grid .cell .s { font-size: 13px; }
.flash-hint { font-size: 12.5px; }
.stat .k { font-size: 13px; }
.table table { font-size: 14px; }
.agree-text { font-size: 13.5px; }
.ns-line, .ns-row { font-size: 13.5px; }
/* 业务代码里大量内联小字（11/11.5/12/12.5/13px）统一托底放大。
 * 内联样式的优先级高于普通选择器，因此这里必须用 !important 才能生效。 */
[style*="font-size:11px"] { font-size: 12.5px !important; }
[style*="font-size:11.5px"] { font-size: 13px !important; }
[style*="font-size:12px"] { font-size: 13.5px !important; }
[style*="font-size:12.5px"] { font-size: 14px !important; }
[style*="font-size:13px"] { font-size: 14.5px !important; }

/* ============================================================
 * 结单付款凭证：上传（抢单人）/ 查看（店主 + 总后台）
 * ============================================================ */
.proof-box { margin-top: 8px; padding: 8px; border: 1px dashed #e0b96a; background: #fffdf5; border-radius: 10px; }
.proof-cap { font-size: 12.5px; font-weight: 700; color: #8a6100; margin-bottom: 6px; text-align: center; line-height: 1.4; }
.proof-cap b { color: #d32f2f; }
.proof-pick { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 15px 8px; border-radius: 9px; background: #fff; border: 1px solid #e3e9f2; color: var(--blue-700); font-weight: 700; font-size: 13.5px; cursor: pointer; text-align: center; }
.proof-pick:active { background: #eef5ff; }
.proof-img { width: 100%; max-height: 180px; object-fit: contain; border-radius: 8px; background: #fff; border: 1px solid var(--line); cursor: zoom-in; display: block; }
.proof-ok { font-size: 12.5px; color: #0a7d32; font-weight: 700; text-align: center; margin-top: 5px; }
.proof-again { display: block; margin-top: 5px; font-size: 12.5px; color: var(--blue-600); font-weight: 700; cursor: pointer; text-decoration: underline; text-align: center; }
.proof-show { margin: 10px 0 4px; padding: 10px; border-radius: 10px; background: #f2f8ff; border: 1px solid #d6e6ff; }
.proof-show-cap { font-size: 13px; font-weight: 800; color: var(--blue-800); margin-bottom: 8px; }
.proof-show-row { display: flex; gap: 10px; flex-wrap: wrap; }
.proof-cell { flex: 1 1 130px; min-width: 130px; text-align: center; }
.settle-proof-tip { font-size: 13px; line-height: 1.6; margin: 10px 0 8px; text-align: center; font-weight: 700; }
/* 后台订单行内的凭证入口 */
.proof-btn { display: inline-block; margin-top: 4px; padding: 3px 8px; border-radius: 8px; border: 1px solid #f0c98a; background: #fff8e8; color: #8a6100; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.proof-btn.none { border-color: var(--line); background: #f6f8fb; color: #97a1b0; cursor: default; }

/* 后台在电脑上操作、表格列多，字号放大幅度收小，避免列被挤成两行 */
.admin-layout { font-size: 13.5px; }
.admin-layout .table table { font-size: 13.5px; }
.admin-layout .table th, .admin-layout .table td { padding: 9px 10px; }
.admin-layout .btn { font-size: 13.5px; padding: 9px 12px; }
.admin-layout .btn-sm { font-size: 12.5px; padding: 5px 10px; }
.admin-layout .input { font-size: 14px; }
.admin-layout [style*="font-size:12px"] { font-size: 12.5px !important; }
.admin-layout [style*="font-size:13px"] { font-size: 13px !important; }

/* ---------- 直推分享：我的直推客户列表（2026-10-29） ----------
 * 只展示本人直接邀请的客户「名称 · 电话 · 加入日期」，跟随弹窗宽度自适应，
 * 人数多时随弹窗整体滚动（.modal 本身 86vh 可滚），不做二级内嵌滚动，避免双滚动条。 */
.dc-wrap { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.dc-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #f2f7ff; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 800; color: var(--blue-800); }
.dc-head b { color: #d32f2f; }
.dc-hint { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--gray); }
.dc-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; border-bottom: 1px solid #f2f5fa; }
.dc-row:last-child { border-bottom: 0; }
.dc-idx { flex: 0 0 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; background: #eef5ff; color: var(--blue-600); font-size: 11.5px; font-weight: 800; }
.dc-nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--ink); }
.dc-ph { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--blue-700); font-weight: 700; letter-spacing: .3px; }
.dc-dt { flex: 0 0 auto; font-size: 11.5px; color: var(--gray); }
.dc-empty { padding: 12px; font-size: 12.5px; color: var(--gray); line-height: 1.7; }

/* ---------- 今日差额「已定型」标记（2026-10-29 用户定稿） ----------
 * 闭馆 3 小时自动匹配 / 后台点「我已后台划拨完成」后，当天差额写死；
 * 顶部按钮旁挂一个锁标，明确告诉用户这个数字不再随确认/结单/新挂单变化。 */
.ns-lock { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 6px;
  font-size: 11px; font-weight: 800; color: #8a5a13; background: #fff3d6; border: 1px solid #f3ddb6;
  vertical-align: 1px; white-space: nowrap; }