/* ============================================================================
   墨金账本 · 皮肤覆盖层（theme-mojin）
   ----------------------------------------------------------------------------
   用法：在 index.html 里 styles.css 之后加一行
     <link rel="stylesheet" href="/assets/theme-mojin.css">
   删掉这一行就完整回滚到橙白皮肤 —— 不改任何 JS、不改任何 HTML。

   设计原则（与设计稿一致）：
     1. 深色只装「钱」：账本头 / 余额 / 分档卡用 .ledger-head，一屏不超过一个深色块
     2. 浅色只装「事」：其余卡片保持纸白
     3. 金色只标记「价值」：金额、唯一主行动的描边强调；主按钮本体是墨黑
     4. 数字用等宽数字（tabular-nums），金额纵向永远对齐

   ⚠️ 这一层只改「颜色 / 圆角 / 阴影 / 字重」，不改布局与交互。
      需要改结构的四处（账本头替代轮播、待办前置、提现降级、考核进度条）
      见 theme-preview.html 里的分阶段说明。
   ========================================================================== */

:root {
  /* 主色从「消费橙」换为「琥珀金」—— 注意：金不再当主按钮底色，见下方 .btn */
  --brand: #B9893F;
  --brand-soft: #F6EEDF;
  --brand-line: #E3D3B4;
  --brand-press: #9C7133;

  /* 表面两分：纸面 / 纸白 */
  --surface: #FFFFFF;
  --surface-2: #F7F4EC;
  --bg: #F3F1EC;

  /* 墨色阶（比原来的中性灰更暖，和纸底同源） */
  --ink: #17150F;
  --ink-2: #4A443A;
  --ink-3: #8A8275;

  /* 细线：从冷灰 #EEE 换成暖灰，卡片不再「浮在灰底上」 */
  --line: #E8E3D9;
  --line-strong: #DCD5C6;

  /* 状态色：玉绿 / 朱砂（替代 #52C41A / #FF4D4F 的高饱和糖果色） */
  --danger: #B33B2E;
  --ok: #2E7D5B;
  --warn: #B9893F;

  /* 阴影：更大更软，配低对比纸底 */
  --shadow-sm: 0 2px 10px rgba(23, 21, 15, 0.06);
  --shadow-md: 0 6px 22px rgba(23, 21, 15, 0.10);
  --shadow-brand: 0 4px 14px rgba(185, 137, 63, 0.22);

  /* 圆角：16 → 18，卡片更「纸」 */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 18px;

  /* 深色块上的字色，供 .ledger-head 复用 */
  --on-ink: #EDE7DA;
  --on-ink-2: #8F887B;
  --gold-on-ink: #E3C48F;
}

/* ── 1. 数字：等宽数字，金额纵向对齐 ───────────────────────────────────── */
.amount,
.ts-v,
.tile .cnt .n,
.li .amt,
.apn-r b,
.h2 .earn-result .amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.01em;
}

/* ── 2. 顶部栏：去掉分割线，压成「纸面上的一行标题」 ──────────────────── */
.appbar {
  background: var(--bg);
  border-bottom: none;
}
.appbar .title { font-weight: 700; letter-spacing: 0.01em; }

/* ── 3. 卡片：去边框、加柔影，靠纸白与纸底拉开层次 ────────────────────── */
.card,
.tile,
.asset-pkg {
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.tile:active,
.asset-pkg:active { border-color: var(--brand-line); }

/* 分组标题：金色刻度收窄，字重降一档 —— 它只是路标，不该和金额抢 */
.h2 { font-size: 14px; font-weight: 700; letter-spacing: 0.01em; }
.h2 .ln { width: 3px; height: 14px; border-radius: 2px; }

/* ── 4. 主行动：墨底金浅字（金只做「唯一行动」的强调，不做大面积底色） ── */
.btn {
  background: var(--ink);
  color: var(--brand-soft);
  border-radius: var(--r-pill);
  font-weight: 600;
  box-shadow: none;
}
.btn:active { background: #2A2619; }
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn.soft { background: var(--brand-soft); color: #7A6544; }
.btn:disabled,
.btn.disabled { background: #E7E2D6; color: #A9A192; }

/* 标签：金浅底 + 金褐字，不再用糖果绿/糖果橙 */
.tag { border-radius: 6px; font-weight: 600; }
.tag.brand { background: var(--brand-soft); color: #7A6544; }
.tag.ok { background: #EAF3EE; color: var(--ok); }
.tag.warn { background: #FBF1E4; color: #A5762E; }

/* 申领/筛选胶囊 */
.chip { border-color: var(--line-strong); background: transparent; color: var(--ink-2); }
.chip.active { background: var(--ink); color: var(--brand-soft); border-color: var(--ink); }

/* ── 5. 收付款方向：保留「涨红跌绿」的中国习惯，只换色相 ──────────────── */
.li .amt.pos { color: #B33B2E; }  /* 入账 */
.li .amt.neg { color: #2E7D5B; }  /* 出账 */
.li .s .refund { color: #2E7D5B; }
.li .t { font-weight: 600; }

/* ── 6. 账本头（首页 / 余额 / 分档卡的深色容器） ──────────────────────── */
/* 深色只装「钱」：这是全屏唯一的深色块。
   结构由 vWorkbench 直接输出（.lh-* 这一组类名是新增的，下面的样式即其唯一定义）。 */
.ledger-head {
  background: var(--ink);
  border: none;
  border-radius: var(--r-lg);
  padding: 18px;
  color: var(--on-ink);
  box-shadow: 0 8px 24px rgba(23, 21, 15, 0.16);
}
.ledger-head .lh-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ledger-head .lh-k { font-size: 11.5px; color: var(--on-ink-2); }
.ledger-head .lh-lv {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--gold-on-ink);
  background: rgba(227, 196, 143, 0.14);
  border-radius: 6px;
  padding: 2px 7px;
  letter-spacing: 0.02em;
}
.ledger-head .lh-figure {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 5px;
}
.ledger-head .lh-big .amount {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--gold-on-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.ledger-head .lh-big .amount .cur {
  font-size: 0.5em;
  font-weight: 600;
  margin-right: 2px;
}
/* 去提现＝把钱拿走，不给实心主按钮，用金色细描边的小胶囊（同上方的 .withdraw-btn 语汇） */
.ledger-head .lh-btn {
  flex-shrink: 0;
  height: 30px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  background: rgba(227, 196, 143, 0.12);
  border: 1px solid rgba(227, 196, 143, 0.34);
  color: var(--gold-on-ink);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
}
.ledger-head .lh-btn:active { background: rgba(227, 196, 143, 0.22); }
.ledger-head .lh-meta {
  font-size: 10.5px;
  color: var(--on-ink-2);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.ledger-head .lh-line { height: 1px; background: #3A362C; margin: 14px 0 2px; }
.ledger-head .lh-rows { display: flex; flex-direction: column; }
.ledger-head .lh-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 0;
  border-bottom: 1px solid #2A2619;
}
.ledger-head .lh-row:last-child { border-bottom: none; padding-bottom: 1px; }
.ledger-head .lh-row-k { font-size: 12.5px; color: var(--on-ink); font-weight: 500; }
.ledger-head .lh-row-n { font-size: 10px; color: var(--on-ink-2); }
.ledger-head .lh-row-v {
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-on-ink);
  font-variant-numeric: tabular-nums;
}
.ledger-head .lh-row-v .amount { color: inherit; font-size: inherit; font-weight: inherit; }
.ledger-head .lh-row-v .cur { font-size: 0.78em; font-weight: 500; margin-right: 1px; }
.ledger-head .lh-row-c { display: flex; color: #5A5447; }
.ledger-head .lh-row-c svg { width: 13px; height: 13px; }

.ledger-head .lh-cell { flex: 1; }
.ledger-head .lh-cell .k { font-size: 10.5px; color: var(--on-ink-2); }
.ledger-head .lh-cell .v {
  font-size: 15px;
  font-weight: 700;
  color: var(--on-ink);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}

/* ── 7. 底部导航：整条 tabbar 变「浮动胶囊」，激活项墨底金 —— DOM 零改动 ── */
.tabbar {
  left: 12px;
  right: 12px;
  bottom: calc(8px + var(--safe-bottom));
  height: calc(var(--tabbar-h) + 4px);
  min-height: 0;
  padding: 4px;
  padding-bottom: 4px;
  border: 1px solid var(--line-strong);
  border-top: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(160%) blur(8px);
  box-shadow: 0 6px 20px rgba(23, 21, 15, 0.12);
  gap: 2px;
}
.tab {
  height: calc(var(--tabbar-h) - 4px);
  border-radius: var(--r-pill);
  font-size: 10.5px;
  color: var(--ink-3);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.tab svg { width: 20px; height: 20px; margin-bottom: 3px; }
.tab.active {
  background: var(--ink);
  color: var(--gold-on-ink);
  font-weight: 600;
}
/* 原 index.html 内联兜底里还有两条结构属性，皮肤接管后一并收进来，
   避免图标在部分 WebView 上被拉伸 / 描边随缩放变粗 */
.tab svg { flex-shrink: 0; display: block; }
.tab svg * { vector-effect: non-scaling-stroke; }

/* 胶囊浮起来了 ⇒ 内容区必须让出这段高度，否则最后一行被压住。
   （这是改版里代价最大的一处隐性问题，务必和第 7 条一起上） */
.view {
  bottom: calc(var(--tabbar-h) + 28px + var(--safe-bottom));
  padding-top: 10px;
}
.view.no-tab { bottom: 0; }

/* ── 8. 空态 / 说明文 / 平台提示：整体降噪 ────────────────────────────── */
.empty { color: var(--ink-3); }
.empty .ic { opacity: 0.5; }
.asset-tip {
  background: var(--brand-soft);
  border: none;
  border-radius: var(--r-md);
}
.asset-tip-ic,
.asset-tip-txt { color: #7A6544; }
.asset-platform-tip { background: var(--surface-2); border-radius: var(--r-md); }

/* ── 9. 登录页：从「橙光海报」改为「纸面 + 一枚墨印」 ──────────────────── */
/* .login-page 的背景图是 vLogin 里内联的 login-bg.svg（整张橙色渐变 + 装饰），
   内联优先级高于样式表，只能用 !important 顶掉。 */
.login-page {
  background-image: none !important;
  background: var(--bg) !important;
}
.login-mask {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(185, 137, 63, 0.14), rgba(243, 241, 236, 0) 62%),
    radial-gradient(90% 50% at 50% 100%, rgba(23, 21, 15, 0.05), rgba(243, 241, 236, 0) 70%);
}
.login-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 44px rgba(23, 21, 15, 0.10);
}
.login-title { font-weight: 800; letter-spacing: 0.02em; }
.login-field {
  background: var(--surface-2);
  border-color: var(--line);
  border-radius: 12px;
}
.login-field:focus-within { border-color: var(--brand-line); background: #fff; }
/* 主行动＝墨底金浅字，和 App 内 .btn 同一套语汇；金色只留在图标上 */
.login-btn {
  background: var(--ink);
  color: var(--brand-soft);
  border-radius: var(--r-pill);
  font-weight: 700;
  letter-spacing: 0.18em;
  box-shadow: none;
}
.login-btn:active { background: #2A2619; }
.login-guest {
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
}

/* ── 10. 工作台的运营位：轮播从首屏下移到页面末尾 ─────────────────────── */
/* 原来第一屏是「微信 AI 能力进化」的运营海报，经销商打开工作台先看到广告、
   后看到自己的待奖励 —— 层级是反的。改版把账本头提到第一块，轮播留作末尾的
   次级运营位（后台 banner 管理、点击跳转的能力**全部保留**，只是换了位置）。
   这里只把它压矮、压暗，避免它在末尾又抢一次注意力。 */
.banner {
  margin-top: 14px;
  height: 92px;
  background: #221F18;
  border-radius: var(--r-md);
}
.banner .slide {
  padding: 13px 16px;
  color: var(--on-ink);
}
.banner .slide .t { font-size: 14px; font-weight: 700; color: var(--gold-on-ink); }
.banner .slide .d { font-size: 11.5px; color: var(--on-ink-2); margin-top: 4px; }
.banner .badge {
  background: rgba(227, 196, 143, 0.16);
  color: var(--gold-on-ink);
  font-size: 10px;
}
.banner .dots { bottom: 8px; }
.banner .dots i { background: rgba(237, 231, 218, 0.28); }
.banner .dots i.on { background: var(--gold-on-ink); }

/* ── 11. 我的：身份头回到墨色（原来白字压在浅底上，服务期那行几乎看不见） ── */
.me-header {
  background: var(--ink) !important;
  border: none;
  border-radius: var(--r-lg);
  box-shadow: 0 10px 26px rgba(23, 21, 15, 0.16);
}
.me-name { color: #FFFFFF; }
.me-avatar {
  background: rgba(255, 255, 255, 0.08);
  color: var(--gold-on-ink);
  box-shadow: inset 0 0 0 1px rgba(227, 196, 143, 0.35);
}
.me-level {
  background: rgba(227, 196, 143, 0.16);
  color: var(--gold-on-ink);
  font-weight: 600;
}
/* 服务期那行在 JS 里写死 rgba(255,255,255,.85)，只有换成墨底才成立。
   内容「服务期至 2028-03-11（首期 1 年）」在 375 宽下必然折行，且断点会落在括号里
   （「（首期1」/「年）」），所以改成显式两行：第一行日期、第二行首期。 */
.me-info div[style*="rgba(255,255,255"],
.me-info .me-expire {
  color: rgba(237, 231, 218, 0.72) !important;
  font-size: 10.5px !important;
  line-height: 1.5;
  white-space: nowrap;
}
.me-invite {
  background: transparent;
  color: var(--gold-on-ink);
  border-color: rgba(227, 196, 143, 0.38);
  padding: 6px 10px;
  font-size: 11px;
  flex-shrink: 0;
}

/* ── 12. 列表页封面：去掉 16:9 运营海报，列表回到「比价 / 比额度」 ─────── */
/* 产品页卖的是等级权益、划拨页管的是额度，海报既重复标题又抢走一半屏。
   详情页的大图保留（那是用户主动点进来看的），只做轻微暖化。 */
.product-thumb,
.asset-pkg-cover { display: none; }
.product-hero-cover img,
.asset-pkg-hero img { filter: grayscale(0.3) sepia(0.2) saturate(0.8); }
/* 封面去掉后，卡片首行直接是正文：补一点上内距，别贴着圆角 */
.product-body { padding-top: 16px; }

/* ── 14. 划拨页：额度账本条 + 角标配额卡 ──────────────────────────────── */
/* 这页真正要回答的是「我还能划几份、划完会掉到哪一级」。原页面只给「剩余可转让 N 份」，
   没有分母 —— 用户无法判断这次划拨的后果。改版把额度账户提到首屏第一块。 */
.qp-ledger {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: 0 8px 24px rgba(23, 21, 15, 0.16);
}
.qp-lg-k { font-size: 11px; color: var(--on-ink-2); }
.qp-lg-v {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-top: 4px;
}
.qp-lg-v b {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--gold-on-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.qp-lg-v i { font-style: normal; font-size: 12px; color: var(--on-ink-2); }
.qp-lg-right {
  text-align: right;
  min-width: 108px;
  padding-bottom: 5px;
}
.qp-bar {
  height: 4px;
  border-radius: 2px;
  background: #3A362C;
  margin-top: 7px;
  overflow: hidden;
}
.qp-bar i { display: block; height: 100%; border-radius: 2px; background: var(--gold-on-ink); }
/* 口径说明：一行小字，解释这个数字从哪来 —— 划拨是破坏性操作，来源必须可追 */
.qp-cap {
  font-size: 10.5px;
  color: var(--ink-3);
  margin: 7px 2px 0;
  line-height: 1.5;
}
/* 平台免责：原先是整块红框，权重压过了额度本身；降成浅金细条 */
.qp-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--brand-soft);
  font-size: 10.5px;
  line-height: 1.7;
  color: #7A6544;
}

/* 配额包卡：封面之外还要给「可绑定家数」一个位置 —— 它决定了这一包值多少份。
   结构 = 40×40 角标（家数）+ 名称/门槛 + 右侧剩余份数（这页的主角）。 */
.asset-pkgs { display: flex; flex-direction: column; gap: 10px; }
.asset-pkg {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.asset-pkg .apk-badge {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: var(--brand-soft);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.asset-pkg .apk-badge b {
  font-size: 15px;
  font-weight: 800;
  color: #8A6A2F;
  font-variant-numeric: tabular-nums;
}
.asset-pkg .apk-badge span { font-size: 8px; color: #8A6A2F; margin-top: 2px; }
.asset-pkg .apk-mid { flex: 1; min-width: 0; }
.asset-pkg .apk-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.asset-pkg .apk-meta { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; }
.asset-pkg .apk-right {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.asset-pkg .apk-k { font-size: 9.5px; color: var(--ink-3); }
.asset-pkg .apk-n {
  font-size: 10px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.asset-pkg .apk-n b {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink);
  margin-right: 2px;
  letter-spacing: -0.02em;
}
/* 额度不足只标红「原因」，不整卡置灰 —— 卡片仍可点：点击后的
   「剩余额度不足，禁止转让」是需求指定文案，视觉不能把它吞掉。 */
.asset-pkg.is-short { background: #FBF9F3; border-color: #EFE9DB; }
.asset-pkg.is-short .apk-badge { background: #EFE9DB; }
.asset-pkg.is-short .apk-badge b,
.asset-pkg.is-short .apk-badge span { color: #A08F70; }
.asset-pkg .apk-short {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--danger);
}
.asset-pkg.is-short:active { border-color: var(--line-strong); }

/* 快捷入口的图标底：原来是 #FFF7F0（橙调），换成金浅；图标本身走金褐 */
.entry-ic {
  background: var(--brand-soft);
  color: #8A6A2F;
}

/* 邀请海报占位：橙渐变改墨底，价格改金浅字（海报要「贵」，不要「促销」） */
.pdp-invite-poster {
  background: linear-gradient(160deg, #2A2619 0%, var(--ink) 58%, #0E0D0A 100%);
}
.pdp-invite-poster .amount { color: var(--gold-on-ink); }
.pdp-invite-poster .pdp-invite-brand { color: var(--on-ink-2); }

/* ── 13. 我的余额：去掉橙色 SVG 底纹，余额条换成墨底账本 ──────────────── */
/* 原卡片是 var(--surface) + bg-balance-card.svg（一层橙色水彩底纹），
   金额又用金色压在上面，两套暖色互相打架；这里直接换成墨底。 */
.balance-card {
  background: var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 0 10px 26px rgba(23, 21, 15, 0.16);
}
.balance-card .hi { color: var(--on-ink-2); font-size: 12px; }
.balance-card .nm {
  color: var(--gold-on-ink);
  font-size: 30px;
  letter-spacing: -0.02em;
}
.balance-card .pill {
  background: rgba(255, 255, 255, 0.07);
  color: var(--on-ink);
  font-size: 11px;
}
/* 提现降级成金色描边小胶囊：它是「把钱拿走」，不该和主行动同权重 */
.withdraw-btn {
  background: rgba(227, 196, 143, 0.14);
  color: var(--gold-on-ink);
  border: 1px solid rgba(227, 196, 143, 0.34);
  font-weight: 600;
}
.withdraw-btn:active { background: rgba(227, 196, 143, 0.24); }

/* ── 15. 工作台待办：把「考核」和「服务留痕」从快捷入口升级成待办 ────── */
/* 原来四个入口平铺，考核和服务留痕是一张卡里的第四格，和「我的团队」同权重。
   但这两个是**本月必须动手的事**，团队/商户只是查数据 —— 拆开才对。 */
.todo-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 2px 15px;
}
.todo-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.todo-row:last-child { border-bottom: none; }
.todo-ic {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--brand-soft);
  color: #8A6A2F;
  display: flex;
  align-items: center;
  justify-content: center;
}
.todo-ic svg { width: 16px; height: 16px; }
.todo-main { flex: 1; min-width: 0; }
.todo-t { font-size: 13px; font-weight: 700; color: var(--ink); }
.todo-s { font-size: 10.5px; color: var(--ink-3); margin-top: 4px; }
.todo-hot { color: var(--danger); font-weight: 800; }
/* 考核进度条：9/10 这种分数画成长度，比一个百分比数字更快判断「差几家」 */
.todo-bar {
  height: 4px;
  border-radius: 2px;
  background: #EFE9DB;
  margin-top: 7px;
  overflow: hidden;
}
.todo-bar i { display: block; height: 100%; border-radius: 2px; background: var(--ink); }
.todo-r {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.todo-r.hot { font-size: 11.5px; color: var(--danger); }

/* ── 16. 产品与权益：三格选择器 + 选中档详情海报 ──────────────────────── */
/* 设计稿 05 的两屏合成一屏：左屏的「等级阶梯」做选择器，右屏的「产品详情」做海报。
   阶梯三格直接用设计稿的三个色值 —— A7 白 #FFFFFF、A8 墨 #17150F、A9 金浅 #F6EEDF，
   选中态靠「金环 + 恢复不透明度」，不再换色，否则三色系统会被选中态吃掉。
   海报头的配色按档位递进：A7 米底 → A8 白底 → A9 墨底金字，与阶梯、与卡片同源。
   价格 / 分佣 / 可绑定家数全部取自后台（产品管理 / 级别管理），页面不写死。 */
.pv-me {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 2px 12px;
}
.pv-me-k {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--ink-3);
}
.pv-me-k::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
}
.pv-me-v { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.pv-me-exp {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ── 等级阶梯（选择器） ─────────────────────────────────────────────── */
/* 三格配色**按档位固定**，每档一种「材质」：
     A7 纸 #F3F1EC · A8 墨黑 #17150F · A9 金浅 #F6EEDF
   选中不再换色 —— 底色是「这一档是什么」的人格，不该随点击变化；
   换色还会让「选中态」和「档位色」混成同一个信息，用户分不清点没点。
   选中只加一道环 + 上浮 1px。 */
.pv-seg { display: flex; gap: 8px; margin-bottom: 12px; }
.pv-seg-i {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  height: 60px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: box-shadow 0.16s ease, transform 0.16s ease;
}
.pv-seg-i b {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.pv-seg-i span {
  max-width: 100%;
  font-size: 9.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A7 · 纸色 —— 取纸的暗面 #EBE6DA，比页面底 #F3F1EC 深半档才看得出是个「格子」，
   又与 A9 的金浅（更浅、带黄）区分开 */
.pv-seg-i.t1 { background: #EBE6DA; border-color: #DBD3C0; }
.pv-seg-i.t1 b { color: #17150F; }
.pv-seg-i.t1 span { color: #6F675A; }

/* A8 · 墨黑 */
.pv-seg-i.t2 { background: #17150F; border-color: #17150F; }
.pv-seg-i.t2 b { color: #E6C08A; }
.pv-seg-i.t2 span { color: #BDB3A2; }

/* A9 · 金浅 —— 奶油底配琥珀金级别码，靠金色边把「贵」写在第一眼 */
.pv-seg-i.t3 { background: #F6EEDF; border-color: #E0C89A; }
.pv-seg-i.t3 b { color: #B9893F; }
.pv-seg-i.t3 span { color: #8A6A32; }

/* 「推荐升级」不能再靠换底色（三色已固定），改成状态字加粗 + 各档自己的强调色 */
.pv-seg-i.is-up span { font-weight: 700; }
.pv-seg-i.t1.is-up span { color: #17150F; }
.pv-seg-i.t2.is-up span { color: #E3C48F; }
.pv-seg-i.t3.is-up span { color: #8A5A12; }

/* 选中：只加环，不换色 */
.pv-seg-i.is-on {
  box-shadow: 0 0 0 2px #17150F, 0 6px 14px rgba(23, 21, 15, 0.16);
  transform: translateY(-1px);
}
/* A8 是墨格，墨环贴着它等于没描边 —— 换成金环把它点亮 */
.pv-seg-i.t2.is-on {
  box-shadow: 0 0 0 2px #E3C48F, 0 8px 18px rgba(23, 21, 15, 0.26);
}

/* ── 详情海报 ──────────────────────────────────────────────────────── */
/* A7 的纸色卡与页面纸底同族，靠描边 + 投影把「一张纸」从「桌面」上分出来 */
.pp {
  --pp-bg: #FFFFFF;
  --pp-head: #FFFFFF;
  --pp-line: rgba(23, 21, 15, 0.08);
  --pp-note: #7A7264;
  --h-ink: #17150F;
  --h-dim: #6F675A;
  --h-code: #B9893F;
  --h-price: #17150F;
  --h-badge-bg: #F6EEDF;
  --h-badge-fg: #8A6A2F;

  border: 1px solid var(--pp-line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--pp-bg);
  box-shadow: 0 6px 18px rgba(23, 21, 15, 0.08);
}
.pp[hidden] { display: none; }

/* 三档各是一套完整色调：头、正文、图片缝、说明字、按钮底色全部跟着走，
   换档等于换一张纸 —— 不再出现「头是墨的、身子是白的」这种半截配色。
     A7 纸（中性纸色，无彩色倾向）  A8 墨（通体黑）  A9 金浅（奶油底 + 琥珀金） */
.pp.t1 {
  --pp-bg: #EFE9DC;
  --pp-head: #E4DBC8;
  --pp-line: #D3C8AF;
  --pp-note: #6F675A;
  --h-ink: #17150F;
  --h-dim: #6F675A;
  --h-code: #17150F;
  --h-price: #17150F;
  --h-badge-bg: #FFFFFF;
  --h-badge-fg: #4A443A;
}
.pp.t1 .pp-head { border-bottom: 1px solid #D8CDB5; }

.pp.t2 {
  --pp-bg: #17150F;
  --pp-head: #100E09;
  --pp-line: rgba(246, 238, 223, 0.16);
  --pp-note: #BDB3A2;
  --h-ink: #F3F1EC;
  --h-dim: rgba(243, 241, 236, 0.58);
  --h-code: #E3C48F;
  --h-price: #F3F1EC;
  --h-badge-bg: rgba(246, 238, 223, 0.14);
  --h-badge-fg: #E8DFCC;
  box-shadow: 0 10px 26px rgba(23, 21, 15, 0.3);
}
.pp.t2 .pp-head { border-bottom: 1px solid rgba(227, 192, 138, 0.22); }

.pp.t3 {
  --pp-bg: #F6EEDF;
  --pp-head: #EFE2C4;
  --pp-line: #E4D0A6;
  --pp-note: #8A6A2F;
  --h-ink: #17150F;
  --h-dim: #7A5B1F;
  --h-code: #B9893F;
  --h-price: #B9893F;
  --h-badge-bg: rgba(255, 255, 255, 0.72);
  --h-badge-fg: #8A5A12;
}
.pp.t3 .pp-head { border-bottom: 1px solid #E4D0A6; }
.pp.t3 { box-shadow: 0 8px 22px rgba(185, 137, 63, 0.18); }

.pp-head { padding: 16px 16px 15px; background: var(--pp-head); }

.pp-hd { display: flex; align-items: center; gap: 8px; }
.pp-code {
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--h-code);
  font-variant-numeric: tabular-nums;
}
.pp-nm {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--h-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-badge {
  flex: 0 0 auto;
  display: inline-block;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--h-badge-bg);
  color: var(--h-badge-fg);
  /* 9.5px 在墨底上「含」字的笔画会糊成一团，读起来像缺字 —— 提到 10.5 并加粗一档 */
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}
.pp-intro {
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--h-dim);
}
.pp-money {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
}
.pp-price {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--h-price);
  font-variant-numeric: tabular-nums;
}
.pp-sold { padding-bottom: 2px; font-size: 10.5px; color: var(--h-dim); }

/* 正文从海报头直接开始，不留白条 —— 图本身是完整海报（自带标题与清单），
   中间夹一条「产品详情」等于在酒标和酒瓶之间贴张便利贴 */
.pp-body { padding: 0 16px 16px; background: var(--pp-bg); }
.pp-cap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.pp-cap b { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.pp-cap i { font-size: 10.5px; font-style: normal; color: var(--ink-3); }

/* 详情正文 = 后台配置的海报图（detailImages），通栏铺开，不缩进 ——
   缩进去会变成"插图"，通栏才像一张海报。多张纵向连排，缝用 1px 纸色隔开。 */
.pp-gallery {
  margin: 0 -16px;
  background: var(--pp-bg);
}
.pp-gallery img {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 1px solid var(--pp-bg);
}
.pp-gallery img:last-child { border-bottom: 0; }
.pp-empty {
  margin: 10px 0 0;
  padding: 32px 0;
  border: 1px dashed var(--pp-line);
  border-radius: 12px;
  text-align: center;
  font-size: 11.5px;
  color: var(--pp-note);
}
.pp-note {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--pp-note);
}
/* 下单按钮：金亮 #E6C08A 底 + 墨黑 #17150F 字（色值取自设计稿「A9按钮」5:381）。
   设计稿把它放在墨底上，所以金亮不需要描边；本页 A7 纸、A9 金浅两张卡的底色都在
   同一个明度带上，纯换色相分不出「这是个按钮」—— 统一补一道 1px 淡墨线与极浅投影，
   只做轮廓、不改颜色。 */
.pp-btn {
  width: 100%;
  height: 42px;
  margin-top: 14px;
  border: 1px solid rgba(23, 21, 15, 0.14);
  border-radius: 999px;
  background: #E6C08A;
  color: #17150F;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(23, 21, 15, 0.08);
}
.pp-btn:active { background: #D9B078; }
/* 墨卡上不需要那道淡墨线 */
.pp.t2 .pp-btn { border-color: transparent; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }

/* appbar 右上角的「邀请」 */
/* 原 styles.css 里 .spacer 是固定 40px 占位，不是弹性宽度 —— 一旦给 .action 塞内容，
   它会落在标题左边（back 40 + spacer 40）。撑开 spacer 把 action 推到最右。 */
.appbar .spacer { flex: 1; }
.pv-invite { font-size: 13px; font-weight: 600; color: var(--brand); }

.product-card .product-body { padding: 15px 15px 14px; }
.product-card .pc-head { display: flex; align-items: center; gap: 8px; }
.product-card .pc-lv {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  color: #7A6544;
  background: var(--brand-soft);
  border-radius: 6px;
  padding: 2px 6px;
  letter-spacing: 0.02em;
}
.product-card .pc-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-card .pc-flag {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  color: var(--ok);
  background: #EAF3EE;
  border-radius: 6px;
  padding: 2px 6px;
}
.product-card .pc-intro {
  font-size: 12px;
  font-weight: 600;
  color: #8A6A2F;
  margin-top: 7px;
}
.product-card .pc-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}
.product-card .pc-price .amount {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.product-card .pc-price .amount .cur { font-size: 0.6em; font-weight: 600; margin-right: 1px; }
.product-card .pc-more {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  color: var(--ink-3);
}
.product-card .pc-more svg { width: 12px; height: 12px; }
/* 当前级别的卡：只加一圈金线，不做第二块深色 */
.product-card.is-mine { border-color: var(--brand-line); }

/* 最近划拨：首屏自证「我确实划过」。只是历史，不做强调 —— 状态用玉绿，不抢额度条的戏 */
.qp-recs {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: 2px 14px;
}
.qp-rec {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.qp-rec:last-child { border-bottom: none; }
.qp-rec-l { flex: 1; min-width: 0; }
.qp-rec-t {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qp-rec-s { font-size: 10px; color: var(--ink-3); margin-top: 3px; }
.qp-rec-st { flex-shrink: 0; font-size: 10px; font-weight: 600; color: var(--warn); }
.qp-rec-st.ok { color: var(--ok); }

/* ── 17. 商户列表：额度账本 + 状态分段 + 三行条目 ─────────────────────── */
/* 这一页要回答的只有两件事：「我还能发展几家」和「哪一家卡住了」。
   原页面把六个数字平铺成一张汇总卡（家数/两类交易额/总额/两道额度），
   谁都不是重点；筛选叠了三层（搜索 + 类别 + 5 枚彩色胶囊），首屏剩不下商户。
   改版：额度收成一条深色账本（与划拨页同一语汇），状态胶囊带计数合并成
   一段筛选（既是概览也是过滤器），搜索与类别并排一行 —— 首屏能露出三家。 */

/* 账本改用「外层深色容器 + 内层复用 .qp-ledger」：
   这样划拨页与这一页共用同一套额度语汇，不产生第二份实现。 */
.mz-ledger {
  background: var(--ink);
  border-radius: var(--r-lg);
  padding: 16px 18px 14px;
  box-shadow: 0 8px 24px rgba(23, 21, 15, 0.16);
}
.mz-ledger .qp-ledger { padding: 0; background: none; box-shadow: none; border-radius: 0; }
/* 比划拨页小一档：这里的主角是下面的名单，额度只是前提 */
.mz-ledger .qp-lg-v b { font-size: 30px; }
/* 右侧「免费提交额度」再降一档 —— 它是附带条件，不该和「剩余可发展」等重。
   两个 30px 金数字并排会互相抢，用户反而不知道该看哪个。 */
.mz-ledger .qp-lg-right .qp-lg-v b { font-size: 20px; font-weight: 700; }
.mz-bar { margin-top: 10px; }
.mz-ledger-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 9px;
  font-size: 10.5px;
  color: var(--on-ink-2);
}
.mz-ledger-foot b { color: var(--on-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.mz-ledger-foot .amount { color: var(--gold-on-ink); font-weight: 700; font-size: 12px; }
.mz-ledger-foot .amount .cur { font-size: 0.85em; opacity: 0.8; }
/* 交易额的两条口径：第三层小字，知道在哪找就行，不参与首屏竞争 */
.mz-ledger-sub { margin-top: 5px; font-size: 10px; color: rgba(237, 231, 218, 0.4); }
.mz-ledger-sub b { color: rgba(237, 231, 218, 0.64); font-weight: 600; font-variant-numeric: tabular-nums; }

/* 状态分段：透明描边胶囊，选中态墨底金字 —— 一屏只有这一处「实心」，
   「待配合」的数字因此不需要靠糖果色喊，用户自己会先点它。
   五格**均分**而不是各自挤着排：等宽才好一眼扫完，也不会把最后一格裁在屏幕外。 */
.mz-seg {
  display: flex;
  gap: 5px;
  padding: 1px 0 3px;
}
.mz-chip {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 30px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.mz-chip b {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.mz-chip.active { background: var(--ink); border-color: var(--ink); color: var(--gold-on-ink); }
.mz-chip.active b { color: rgba(227, 196, 143, 0.66); }

/* 搜索 + 类别并排：类别收成 98px 的下拉，把整行高度还给名单 */
.mz-tools { display: flex; align-items: center; gap: 8px; }
.mz-search {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 13px;
  box-sizing: border-box;
}
.mz-search input { font-size: 13px; }
.mz-cat { width: 98px; flex-shrink: 0; }
.mz-cat .select {
  height: 42px;
  padding: 0 26px 0 12px;
  font-size: 12.5px;
  border-radius: var(--r-pill);
  border-color: var(--line-strong);
}
.mz-cat .select-arrow { right: 8px; width: 16px; height: 16px; }

/* 条目三行：名称+状态 / 类别·联系人+交易额 / 进度条+阶段+百分比。
   原来五排信息（还含一行蓝色 AppID）塞在一个 tile 里，两条就占满一屏。 */
.mz-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 13px 15px;
  cursor: pointer;
  transition: transform 0.15s var(--ease), box-shadow 0.2s, border-color 0.2s;
}
.mz-item:active { transform: scale(0.99); border-color: var(--brand-line); box-shadow: var(--shadow-md); }
.mz-r1 { display: flex; align-items: center; gap: 9px; }
.mz-name {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mz-st {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  border-radius: 5px;
  padding: 2px 6px;
  letter-spacing: 0.02em;
}
/* 推进中是常态，用中性色；只有「待配合」才配得上朱砂 —— 异常才该有颜色 */
.mz-st.run { background: #EDEAE3; color: var(--ink-2); }
.mz-st.act { background: #F8E9E6; color: var(--danger); }
.mz-st.done { background: #EAF3EE; color: var(--ok); }

.mz-r2 { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.mz-sub {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mz-amt {
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.mz-amt .amount { font-variant-numeric: tabular-nums; }
.mz-amt .cur { font-size: 0.85em; font-weight: 600; color: var(--ink-3); margin-right: 1px; }

.mz-r3 { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.mz-prog {
  flex-shrink: 0;
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: #EFE9DB;
  overflow: hidden;
}
.mz-prog i { display: block; height: 100%; border-radius: 2px; background: var(--ink); }
.mz-prog.act i { background: var(--danger); }
.mz-prog.done i { background: var(--ok); }
.mz-stage {
  flex: 1;
  min-width: 0;
  font-size: 10.5px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mz-prog.act ~ .mz-stage { color: #8C4A3F; font-weight: 600; }
.mz-pct {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ── 18. 商户详情 · 流水线：内联糖果色 → 令牌 ────────────────────────── */
/* 这块是一整套写死的内联样式（#ff6a00 进度条 / #07c160 勾 / #1890ff 蓝 / #fa8c16 橙），
   CSS 覆盖层改不动内联值，所以颜色已在 JS 里逐处替换 —— 这一节只补 CSS 管得着的那处：
   `.tag.danger` 原本**没有定义**。statusTag() 早在给「已驳回 / 已退款 / 分账失败」返回
   danger，但样式缺失，这些标签一直落在 `.tag` 的默认金浅底上，和「已完成」长得一样。 */
.tag.danger { background: #F8E9E6; color: var(--danger); }

/* ══════════════════════════════════════════════════════════════════════
   19. 工作台首页：按设计稿整幅还原
   ──────────────────────────────────────────────────────────────────────
   设计稿与旧版的差别不是配色，是「一屏装什么」：

   旧版                         新版
   ─────────────────────────    ─────────────────────────────
   顶栏标题「京择服务商工作台」    整幅深色头（问候 / 等级 / 铃铛 / 金额 / 提现）
   深色卡片（可圆角、浮在纸上）    通顶通栏，接得到屏幕边
   卡片内两行收益明细             两列并排（直推 | 团购），横着比
   去提现＝描边小胶囊             提现＝实心金胶囊（唯一实心）

   深色头仍然是全屏唯一的深色块：它现在从屏幕顶一直铺到「提现」条结束，
   下面的纸面卡片一件不深 —— 深色只装「钱」这条规则没变，只是装得更满。
   ⚠️ 这一节是**新增类名**（.wz-*），不动 .ledger-head：余额页 / 分档卡仍在用后者。
   ══════════════════════════════════════════════════════════════════════ */

/* bare 页（只有工作台）：顶栏不渲染，#view 从屏幕顶起算，深色头才能贴到边 */
.view.view--bare {
  top: 0;
  padding-top: 0;
}

.wz-head {
  margin: 0 -16px;
  padding: calc(15px + env(safe-area-inset-top, 0px)) 18px 20px;
  background: var(--ink);
  color: var(--on-ink);
}

.wz-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wz-hello {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--on-ink);
  min-width: 0;
}
.wz-lv {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 6px;
  color: var(--gold-on-ink);
  background: rgba(227, 196, 143, 0.14);
  letter-spacing: 0.02em;
}
.wz-bell {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  background: none;
  color: var(--on-ink);
  cursor: pointer;
}
.wz-bell svg { width: 19px; height: 19px; }
.wz-bell-dot {
  position: absolute;
  top: -1px;
  right: -4px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
}

.wz-k { margin-top: 22px; font-size: 11.5px; color: var(--on-ink-2); }
/* 金额是这一屏唯一要读的数字：34px 金字，其余一律退成 on-ink 的白 */
.wz-big { margin-top: 3px; display: flex; align-items: baseline; }
.wz-big .amount {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--gold-on-ink);
  font-variant-numeric: tabular-nums;
}
.wz-big .cur { font-size: 0.52em; font-weight: 600; margin-right: 2px; }

/* 两条收益线并排：竖线分隔，横着比「哪条在挣钱」 */
.wz-cols { display: flex; margin-top: 15px; }
.wz-col {
  flex: 1;
  min-width: 0;
  padding-left: 13px;
  border-left: 1px solid rgba(237, 231, 218, 0.13);
  cursor: pointer;
}
.wz-col:first-child { padding-left: 0; border-left: none; }
.wz-col-k {
  display: block;
  font-size: 10.5px;
  color: var(--on-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wz-col-v {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--on-ink);
  font-variant-numeric: tabular-nums;
}
.wz-col-v .cur { font-size: 0.8em; font-weight: 500; margin-right: 1px; }

/* 提现条：比头再亮一档的墨（不是第二个深色块，是同色系里的一层），
   右侧实心金胶囊是全屏唯一实心按钮 —— 提现就是这一屏的主动作。 */
.wz-take {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding: 10px 11px 10px 13px;
  border-radius: 14px;
  background: rgba(237, 231, 218, 0.07);
  border: 1px solid rgba(237, 231, 218, 0.09);
}
.wz-take-l { display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; color: var(--on-ink-2); }
.wz-take-l b { color: var(--on-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.wz-take-btn {
  flex-shrink: 0;
  height: 31px;
  padding: 0 17px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--gold-on-ink);
  color: #241D11;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.wz-take-btn:active { background: #D6B27A; }

/* ── 纸面卡片：快捷入口 / 考核 / 待办 ── */
.wz-card {
  padding: 15px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.wz-card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}
.wz-card-n { font-size: 10.5px; font-weight: 600; color: var(--ink-3); }

/* 四格等分：格子少一个不少 —— 用 flex:1，3 格与 4 格都不会出现半格空位 */
.wz-quick { display: flex; gap: 4px; margin-top: 14px; }
.wz-q {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.wz-q-ic {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: #8A6A2F;
}
.wz-q-ic svg { width: 19px; height: 19px; }
.wz-q-n {
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.wz-q-k { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }

/* 考核：进度条走墨（不是金色）—— 金色留给「钱」与推荐档，这里量的是「做到没有」 */
.wz-kpi-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.wz-kpi-h b { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.wz-kpi-h span { font-size: 10.5px; color: var(--ink-3); }
.wz-kpi-bar {
  height: 5px;
  margin-top: 12px;
  border-radius: 3px;
  background: #EFE9DB;
  overflow: hidden;
}
.wz-kpi-bar i { display: block; height: 100%; border-radius: 3px; background: var(--ink); }
.wz-kpi-f {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  font-size: 10.5px;
  color: var(--ink-3);
}
.wz-kpi-f .hot { color: var(--brand); font-weight: 700; }
.wz-kpi-f .ok { color: var(--ok); font-weight: 700; }

/* 待办：一行一件事，左边点色区分「要我先动」和「等对方」 */
.wz-todo { margin-top: 6px; }
.wz-todo-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.wz-todo-row:first-child { border-top: none; }
.wz-dot {
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
}
.wz-dot.hot { background: var(--danger); }
.wz-todo-t {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wz-todo-r { flex-shrink: 0; font-size: 11px; color: var(--ink-3); }
.wz-todo-r.hot { color: var(--danger); }
.wz-todo-empty {
  padding: 18px 0 8px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
}

/* ══════════════════════════════════════════════════════════════════════
   20. 我的：资料头 + 三段分组（按设计稿）
   ──────────────────────────────────────────────────────────────────────
   旧版把 7 个入口塞进一张卡，条目之间没有分组，也没有任何「状态值」——
   「银行卡」绑没绑、「协议」签没签，都得点进去才知道。设计稿的做法是：

   ① 资料头整幅深色，把头像/姓名/手机/等级/有效期/三列数据全收进去；
   ② 下面按「账户与结算 / 资质与合规 / 帮助与支持」三段分组，每行右侧直接写状态。

   深色头仍然是这一屏唯一的深色块，且只装「身份与钱」——不装按钮列表。
   ══════════════════════════════════════════════════════════════════════ */

.me-head {
  margin: 0 -16px;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 18px 18px;
  background: var(--ink);
  color: var(--on-ink);
}
.meh-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.meh-id { display: flex; align-items: center; gap: 11px; min-width: 0; cursor: pointer; }
.meh-avatar {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 600;
  color: var(--gold-on-ink);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(227, 196, 143, 0.34);
}
.meh-avatar img { width: 100%; height: 100%; object-fit: cover; }
.meh-info { min-width: 0; }
.meh-name {
  font-size: 17px;
  font-weight: 700;
  color: #FFF;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meh-sub {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--on-ink-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 右上两枚动作：消息（带未读角标）/ 邀请码。深色底上只做线条，不做按钮块 */
.meh-acts { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.meh-act {
  position: relative;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  background: none;
  color: var(--on-ink);
  cursor: pointer;
}
.meh-act svg { width: 18px; height: 18px; }
.meh-dot {
  position: absolute;
  top: 0;
  right: -2px;
  min-width: 14px;
  height: 14px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #FFF;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}
.meh-tags { display: flex; align-items: center; gap: 8px; margin-top: 13px; }
.meh-lv {
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 6px;
  color: var(--gold-on-ink);
  background: rgba(227, 196, 143, 0.14);
}
.meh-exp { font-size: 10px; color: var(--on-ink-2); }

/* 三列数据：与工作台的收益两列同一套语汇（竖线分隔、标签在上、值在下） */
.meh-stats {
  display: flex;
  margin-top: 15px;
  padding: 11px 0;
  border-radius: 14px;
  background: rgba(237, 231, 218, 0.07);
  border: 1px solid rgba(237, 231, 218, 0.09);
}
.meh-stat {
  flex: 1;
  min-width: 0;
  padding: 0 4px;
  text-align: center;
  border-left: 1px solid rgba(237, 231, 218, 0.12);
  cursor: pointer;
}
.meh-stat:first-child { border-left: none; }
.meh-stat b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-on-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meh-stat span { display: block; margin-top: 3px; font-size: 9.5px; color: var(--on-ink-2); }

/* ── 分组 ── */
.me-sec { margin-top: 18px; }
.me-sec-h { margin: 0 3px 8px; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.me-group {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.me-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  cursor: pointer;
}
.me-row:first-child { border-top: none; }
.me-row:active { background: var(--surface-2); }
.me-row-ic {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--brand-soft);
  color: #8A6A2F;
}
.me-row-ic svg { width: 16px; height: 16px; }
.me-row-t { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); }
.me-row-v {
  flex-shrink: 0;
  max-width: 46%;
  font-size: 11.5px;
  color: var(--ink-3);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.me-row-v.ok { color: var(--ok); }
.me-row-v.hot { color: var(--danger); font-weight: 600; }
.me-row-v.muted { color: var(--ink-3); opacity: 0.75; }
.me-row-c { flex-shrink: 0; display: flex; color: #C9C2B2; }
.me-row-c svg { width: 14px; height: 14px; }

/* 页脚：账号与安全 / 个人信息维护 / 退出登录
   退出登录不做成一行卡片 —— 它不是日常动作，做成「连接」会让人误点。 */
.me-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 22px 0 6px;
  font-size: 11px;
  color: var(--ink-3);
}
.me-foot span { cursor: pointer; }
.me-foot-out em { font-style: normal; color: var(--danger); cursor: pointer; }

/* ══════════════════════════════════════════════════════════════════════
   21. 邀请码海报：紫黑 → 墨金
   ──────────────────────────────────────────────────────────────────────
   邀请页是**海报本体**：点「保存图片」时 html2canvas 截的就是这块 .iv 容器，
   所以这一页的配色直接等于分享出去那张图。

   原来的紫黑是品牌手册的紫色系（XINGTU 源码交付版），它和「墨金账本」是两套语汇：
   紫色在这里只说明「这是品牌页」，不承担任何信息。换成墨金之后：

     紫黑底 → 墨 #17150F        （与工作台账本头同色，同一套深色只出现在该出现的地方）
     紫罗兰强调 → 琥珀金         （唯一强调色仍然只给「复制」这个动作）
     品牌黄 #FFD200 → 金色 #E3C48F（黄在黑上像警示，金在黑上是「贵」）
     浅灰二维码盘 → 纯白 + 金发丝边 （扫描可靠性优先，纯白对扫码最稳）
     紫色光斑/光束 → 金色微光     （氛围留着，颜色换掉）

   做法与主站同源：**只覆盖令牌与少数写死的渐变**，不动结构与动效 ——
   删掉这一节就回到紫色版，删掉整个文件就回到橙白版。
   ══════════════════════════════════════════════════════════════════════ */

.iv {
  /* 语义别名整层换掉（组件只认这一层，所以换完基本就换完了） */
  --color-bg: #17150F;
  --color-surface: #221F18;
  --color-text: #EDE7DA;
  --color-muted: #8F887B;
  --color-ink: #1B1710;
  --color-accent: #E3C48F;
  --color-line: rgba(237, 231, 218, 0.14);
  --color-line-strong: rgba(237, 231, 218, 0.3);

  /* 品牌原色：紫 → 金（组件里还有几处直接引用这几个变量） */
  --brand-violet: #D9B77A;
  --brand-violet-soft: #C9AE7C;
  --brand-grey: #F6F0E4;
  --brand-yellow: #E3C48F;

  /* 阴影：紫环境色 → 暖墨，暗底上不再泛紫 */
  --shadow-3: 0 24px 64px rgba(10, 8, 4, 0.62), 0 0 0 1px rgba(227, 196, 143, 0.08);
}

/* 整屏底色与顶栏：invite-share.css 里这两处是写死的 #000 */
.view.view--dark { background: #17150F; }
.appbar.appbar--dark { background: #17150F; border-bottom-color: rgba(237, 231, 218, 0.1); }
.appbar.appbar--dark .title,
.appbar.appbar--dark .back,
.appbar.appbar--dark .action { color: #EDE7DA; }

/* 斜切光板：原来是紫→黑的四段渐变，靠明度差撑住「层叠玻璃」；
   换金之后同样用「暖褐 → 墨」的四段，避免整页变成一块棕纸。 */
.iv .beam {
  background: linear-gradient(152deg, #4C3A20 0%, #35291A 28%, #221C13 64%, #17150F 100%);
  opacity: 0.85;
}
.iv .beam--2 {
  background: linear-gradient(
    152deg,
    rgba(227, 196, 143, 0) 6%,
    rgba(227, 196, 143, 0.34) 36%,
    rgba(185, 137, 63, 0) 76%
  );
  opacity: 0.6;
}
.iv .glow--violet {
  background: radial-gradient(closest-side, rgba(185, 137, 63, 0.42), rgba(185, 137, 63, 0) 74%);
}
.iv .glow--soft {
  background: radial-gradient(closest-side, rgba(227, 196, 143, 0.12), rgba(227, 196, 143, 0) 72%);
}
/* 星座连线是内联 SVG 的 presentation 属性（紫/薰衣草），CSS 的 fill/stroke 能盖掉它们 */
.iv .constellation path { stroke: rgba(227, 196, 143, 0.18); }
.iv .constellation circle { fill: rgba(237, 231, 218, 0.42); }
.iv .constellation circle[r="3.4"] { fill: rgba(227, 196, 143, 0.7); }

/* 二维码盘：暖纸 + 一圈金发丝，让它在墨底上像一枚印章而不是一张白纸。
   二维码本身仍是纯黑白（扫描可靠性优先），只把底纸从 #F2F2F2 换成 #FFFFFF，
   靠外圈的纸色把它衬出来。 */
.iv .ticket__top {
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(185, 137, 63, 0.28);
}
.iv .ticket__id-name { color: #8A6A2F; }
.iv .ticket__seal { box-shadow: 0 0 0 4px #FFFFFF; }

/* 主按钮：金色实心（这一页的唯一实心），阴影里的黄也要跟着换 */
.iv .copy { box-shadow: 0 6px 22px rgba(185, 137, 63, 0.22); }
.iv .copy:hover { box-shadow: 0 10px 30px rgba(185, 137, 63, 0.3); }
.iv .copy--ghost {
  background: transparent;
  color: #EDE7DA;
  box-shadow: inset 0 0 0 1px rgba(237, 231, 218, 0.26);
}
.iv .copy--ghost:hover { box-shadow: inset 0 0 0 1px rgba(227, 196, 143, 0.5); }

/* 提示条与浮层：紫黑半透明 → 墨半透明 */
.iv .toast { background: rgba(28, 25, 18, 0.94); }
.iv .shot { background: rgba(12, 10, 6, 0.92); }

/* 头图：原来的 mark-arc-alpha.png 在仓库里**不存在**（一直 404，页面上显示的是 alt 文字），
   改用页脚同款字标。它比原来的图形标更宽（1130×685），所以把宽度收到 232px，
   在首屏里读作一个「字标」而不是一张图 —— 太大的话会和下面的标题抢层级。 */
.iv .hero__mark {
  width: min(58vw, 232px);
  opacity: 0.96;
}