(function () {
  'use strict';
  const NS = (window.Pricing20 = window.Pricing20 || {});

/* screens-mobile.jsx — Pricing 2.0 · 移动端
   视觉对齐 mobile-v1-companion（新版移动端标准，iOS/安卓通用）：
   Screen + .appbar 真实 className、SectionGroup/Row、Raccoon 头像卡、
   免费版深紫渐变升级 Banner / 升级版浅紫管理卡，与 screens-account.jsx 一致。
   A. 设置首页（新增「资源用量」入口 + 积分余额摘要）
   B. 资源用量页 · 免费版
   C. 资源用量页 · 升级版（积分 + 明细 + 常见问题）
   D. 积分明细页
   E. iOS 会员方案页 · 免费版（Pricing 2.0 更新后）
   F. iOS 会员方案页 · 已订阅升级版（包年）
*/
/* global React, Screen, Ic, Raccoon */

/* ---------- AppBar：对齐 mobile-v1-companion screens-account.jsx 的 AccountAppBar ---------- */
function AccountAppBar({ title }) {
  return (
    <div className="appbar">
      <button className="iconbtn"><Ic.back size={22} /></button>
      <div className="appbar-title" style={{ fontSize: 16 }}>{title}</div>
      <div className="spacer" />
      <div style={{ width: 32 }} />
    </div>);

}

/* ---------- Section + Row：对齐 mobile-v1-companion 的 SectionGroup/Row ---------- */
function SGroup({ children }) {
  return (
    <div style={{ background: '#fff', marginTop: 10, borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      {children}
    </div>);

}
function SRow({ label, value, arrow, badge, sub }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', padding: '14px 16px',
      borderBottom: '1px solid var(--bg-subtle)', minHeight: 22
    }}>
      <div style={{ flex: 1 }}>
        <div style={{ fontSize: 14, color: 'var(--t1)' }}>{label}</div>
        {sub && <div style={{ fontSize: 11.5, color: 'var(--muted)', marginTop: 2 }}>{sub}</div>}
      </div>
      {badge &&
      <span style={{
        fontSize: 11, fontWeight: 700, padding: '2px 8px', borderRadius: 6, marginRight: 6,
        background: badge === '免费版' ? 'var(--bg-subtle)' : 'var(--purple-bg)',
        color: badge === '免费版' ? 'var(--muted)' : 'var(--purple-dark)'
      }}>{badge}</span>
      }
      {value && <div style={{ fontSize: 13.5, color: 'var(--muted)', marginRight: arrow ? 6 : 0 }}>{value}</div>}
      {arrow && <Ic.chevR size={14} color="var(--muted)" />}
    </div>);

}

/* ---------- 进度条卡片：与 mobile-v1-companion 的 UsageCard 同结构（第 211-230 行），
   仅加了 danger 态（知识库库容告急时提示，UsageCard 原版没有这个场景） ---------- */
function UsageCard({ title, used, total, unit, pct, danger }) {
  const barColor = danger ? 'var(--danger)' : pct > 80 ? 'var(--warning)' : 'var(--purple)';
  return (
    <div style={{ background: '#fff', borderRadius: 12, padding: '14px 16px', border: '1px solid var(--border)', marginBottom: 10 }}>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <div style={{ flex: 1, fontSize: 14, fontWeight: 600, color: 'var(--t1)' }}>{title}</div>
        <div style={{ fontSize: 12.5, color: 'var(--muted)', fontVariantNumeric: 'tabular-nums' }}>
          {used}{unit ? '' : ''} / {total}{unit ? ' ' + unit : ''}
        </div>
      </div>
      <div style={{ marginTop: 10, height: 6, background: 'var(--bg-subtle)', borderRadius: 3, overflow: 'hidden' }}>
        <div style={{ width: pct + '%', height: '100%', background: barColor }} />
      </div>
    </div>);

}

/* ===== A. 设置首页 ===== */
function MB_SettingsHome({ isPro = false }) {
  return (
    <Screen>
      <AccountAppBar title="设置" />
      <div className="body">
        <div className="scroll" style={{ overflow: 'auto', background: 'var(--bg-subtle)' }}>
          {/* 账户入口卡（对齐 mobile-v1-companion SettingsHome） */}
          <div style={{
            background: '#fff', marginTop: 10,
            borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)'
          }}>
            <div style={{ display: 'flex', alignItems: 'center', padding: '16px' }}>
              <Raccoon size="md" brand />
              <div style={{ flex: 1, marginLeft: 12, minWidth: 0 }}>
                <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--t1)' }}>RaccoonMichael</div>
                <div style={{
                  marginTop: 6, display: 'inline-flex', alignItems: 'center', gap: 4,
                  fontSize: 11.5, fontWeight: 600,
                  color: isPro ? 'var(--purple-dark)' : 'var(--muted)',
                  background: isPro ? 'var(--purple-bg)' : 'var(--bg-subtle)',
                  padding: '3px 10px', borderRadius: 10
                }}>
                  {isPro ? <><Ic.sparkle size={11} /> 升级版</> : '免费版'}
                </div>
              </div>
              <div style={{ fontSize: 13.5, color: 'var(--muted)', marginRight: 6 }}>账户信息</div>
              <Ic.chevR size={14} color="var(--muted)" />
            </div>
          </div>

          {/* 积分余额摘要（Pricing 2.0 新增，替代原「今日可用 N 积分」文字行） */}
          <div style={{ padding: '14px 16px 0' }}>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              background: '#fff', border: '1px solid var(--border)', borderRadius: 14,
              padding: '14px 16px'
            }}>
              <div>
                <div style={{ fontSize: 12, color: 'var(--muted)' }}>可用积分</div>
                <div style={{ marginTop: 3, fontSize: 20, fontWeight: 800, color: 'var(--t1)', fontVariantNumeric: 'tabular-nums' }}>
                  {isPro ? '1820' : '200'} <span style={{ fontSize: 12, fontWeight: 500, color: 'var(--muted)' }}>积分</span>
                </div>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 13, color: 'var(--purple-dark)', fontWeight: 600 }}>
                资源用量 <Ic.chevR size={14} color="var(--purple-dark)" />
              </div>
            </div>
          </div>

          {/* 会员卡片：免费版 → 深色渐变横幅（强引导）；升级版 → 淡紫卡（弱引导，仅用于管理） */}
          <div style={{ padding: '14px 16px 0' }}>
            {!isPro ?
            <div style={{
              padding: '18px 18px 16px',
              background: 'linear-gradient(135deg, #8E6BF2 0%, #6E45D9 100%)',
              borderRadius: 16, color: '#fff'
            }}>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 700, letterSpacing: '0.6px', opacity: 0.95 }}>
                  OFFICE RACCOON <span style={{
                  background: 'rgba(255,255,255,0.22)', padding: '2px 8px', borderRadius: 8,
                  fontSize: 11, fontWeight: 700
                }}>升级版</span>
                </div>
                <div style={{ marginTop: 10, fontSize: 13, opacity: 0.92, lineHeight: 1.6 }}>
                  订阅升级版即可获得每日 500 + 每月 5000 积分、升级模型与自定义 VIP 模版
                </div>
                <button style={{
                marginTop: 14, height: 38, padding: '0 16px', borderRadius: 999,
                background: 'rgba(255,255,255,0.95)', color: 'var(--purple-dark)',
                border: 'none', fontSize: 13.5, fontWeight: 600,
                display: 'inline-flex', alignItems: 'center', gap: 4
              }}>获取升级版 <Ic.chevR size={12} /></button>
              </div> :

            <div style={{
              padding: '16px 18px 14px',
              background: 'var(--purple-bg)',
              border: '1px solid var(--purple-border, rgba(110,69,217,0.18))',
              borderRadius: 16, color: 'var(--purple-dark)'
            }}>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 700, letterSpacing: '0.6px' }}>
                  OFFICE RACCOON <span style={{
                  background: 'rgba(110,69,217,0.12)', padding: '2px 8px', borderRadius: 8,
                  fontSize: 11, fontWeight: 700
                }}>升级版</span>
                </div>
                <div style={{ marginTop: 10, fontSize: 12.5, color: 'var(--t2)', lineHeight: 1.6 }}>
                  下次续订 · 2026-11-13
                </div>
                <button style={{
                marginTop: 12, height: 34, padding: '0 14px', borderRadius: 999,
                background: '#fff', color: 'var(--purple-dark)',
                border: '1px solid var(--purple-border, rgba(110,69,217,0.24))',
                fontSize: 13, fontWeight: 600,
                display: 'inline-flex', alignItems: 'center', gap: 4
              }}>管理订阅 <Ic.chevR size={12} /></button>
              </div>
            }
          </div>

          {/* 功能设置 */}
          <SGroup>
            <SRow label="通知设置" arrow />
            <SRow label="语言" value="简体中文" arrow />
            <SRow label="主题" value="跟随系统" arrow />
          </SGroup>

          {/* 法律链接 */}
          <SGroup>
            <SRow label="关于我们" arrow />
            <SRow label="隐私条款" arrow />
            <SRow label="用户协议" arrow />
            <SRow label="人工智能生成内容标识公告" arrow />
          </SGroup>

          {/* 退出登录（文字链接，对齐 mobile-v1-companion） */}
          <div style={{ textAlign: 'center', padding: '28px 0 32px' }}>
            <span style={{ fontSize: 14, color: 'var(--danger)', fontWeight: 500 }}>退出登录</span>
          </div>
        </div>
      </div>
    </Screen>);

}

/* ===== B. 资源用量页 · 免费版 ===== */
function MB_ResourceFree() {
  return (
    <Screen tinted>
      <AccountAppBar title="资源用量" hasBack />
      <div className="body">
        <div className="scroll" style={{ overflow: 'auto', background: 'var(--bg-subtle)', padding: '14px 16px 28px' }}>
          {/* 积分余额卡片 */}
          <div style={{
            background: '#fff', borderRadius: 14,
            border: '1px solid var(--border)', padding: '16px 16px 14px',
            marginBottom: 10
          }}>
            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontSize: 12.5, color: 'var(--muted)', marginBottom: 4 }}>积分余额 · 个人免费版</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                  <span style={{ fontSize: 28, fontWeight: 800, color: 'var(--t1)', fontVariantNumeric: 'tabular-nums' }}>200</span>
                  <span style={{ fontSize: 14, color: 'var(--muted)' }}>积分</span>
                </div>
              </div>
              {/* 升级 CTA */}
              <button style={{
                height: 30, padding: '0 14px', borderRadius: 999,
                background: 'var(--purple)', color: '#fff', border: 'none',
                fontSize: 12, fontWeight: 700
              }}>升级</button>
            </div>

            {/* 四类积分 */}
            <div style={{ marginTop: 14, borderTop: '1px solid var(--bg-subtle)', paddingTop: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
              { label: '每日额度', amount: '200 积分', note: '每日 24:00 清零' },
              { label: '每月额度', amount: '0 积分' },
              { label: '奖励积分', amount: '0 积分' },
              { label: '加油包', amount: '0 积分' }].
              map((row, i) =>
              <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 13 }}>
                  <span style={{ color: 'var(--t2)' }}>
                    {row.label}
                    {row.note && <span style={{ fontSize: 11, color: 'var(--muted)', marginLeft: 6 }}>{row.note}</span>}
                  </span>
                  <span style={{ fontVariantNumeric: 'tabular-nums', color: 'var(--t1)', fontWeight: 500 }}>{row.amount}</span>
                </div>
              )}
            </div>

            {/* 置灰购买按钮 */}
            <div style={{ marginTop: 14 }}>
              <button style={{
                width: '100%', height: 36, borderRadius: 8, border: 'none',
                background: 'var(--bg-muted)', color: 'var(--subtle)', fontSize: 13.5, fontWeight: 600
              }}>购买加油包（升级版专属）</button>
            </div>
          </div>

          {/* 消耗顺序 */}
          <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 10, lineHeight: 1.7 }}>
            消耗顺序：每日额度 → 每月额度 → 奖励积分 → 加油包
          </div>

          {/* 容量 */}
          <UsageCard title="存储空间" used="388 MB" total="500 MB" pct={78} />
          <UsageCard title="知识库库容" used="96.8 MB" total="100 MB" pct={97} danger />
        </div>
      </div>
    </Screen>);

}

/* ===== C. 资源用量页 · 升级版 ===== */
function MB_ResourcePro() {
  return (
    <Screen tinted>
      <AccountAppBar title="资源用量" hasBack />
      <div className="body">
        <div className="scroll" style={{ overflow: 'auto', background: 'var(--bg-subtle)', padding: '14px 16px 28px' }}>
          {/* 积分余额卡片 */}
          <div style={{
            background: '#fff', borderRadius: 14,
            border: '1px solid var(--border)', padding: '16px 16px 14px',
            marginBottom: 10
          }}>
            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
              <div>
                <div style={{ fontSize: 12.5, color: 'var(--muted)', marginBottom: 4 }}>积分余额 · 个人升级版（包年）</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                  <span style={{ fontSize: 28, fontWeight: 800, color: 'var(--t1)', fontVariantNumeric: 'tabular-nums' }}>1820</span>
                  <span style={{ fontSize: 14, color: 'var(--muted)' }}>积分</span>
                </div>
              </div>
              <button style={{
                height: 30, padding: '0 14px', borderRadius: 999,
                background: 'var(--purple-bg)', color: 'var(--purple-dark)', border: '1px solid var(--purple-border)',
                fontSize: 12, fontWeight: 700
              }}>购买加油包</button>
            </div>

            <div style={{ marginTop: 14, borderTop: '1px solid var(--bg-subtle)', paddingTop: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
              { label: '每日额度', amount: '500 积分', note: '每日 24:00 清零' },
              { label: '每月额度', amount: '1000 积分' },
              { label: '奖励积分', amount: '120 积分', note: '各笔到期日见明细' },
              { label: '加油包', amount: '200 积分' }].
              map((row, i) =>
              <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 13 }}>
                  <span style={{ color: 'var(--t2)' }}>
                    {row.label}
                    {row.note && <span style={{ fontSize: 11, color: 'var(--muted)', marginLeft: 6 }}>{row.note}</span>}
                  </span>
                  <span style={{ fontVariantNumeric: 'tabular-nums', color: 'var(--t1)', fontWeight: 500 }}>{row.amount}</span>
                </div>
              )}
            </div>
          </div>

          <div style={{ fontSize: 12, color: 'var(--muted)', marginBottom: 10, lineHeight: 1.7 }}>
            消耗顺序：每日额度 → 每月额度 → 奖励积分 → 加油包
          </div>

          <UsageCard title="存储空间" used="1.2 GB" total="10 GB" pct={12} />
          <UsageCard title="知识库库容" used="88 MB" total="500 MB" pct={18} />

          {/* 积分明细入口 */}
          <SGroup>
            <SRow label="积分明细" sub="查看收入与支出流水" arrow />
          </SGroup>

          {/* 常见问题入口 */}
          <SGroup>
            <SRow label="常见问题" arrow />
          </SGroup>
        </div>
      </div>
    </Screen>);

}

/* ===== D. 积分明细页（07-03 变更：Tab 由「全部/收入/支出」改为「对话消耗/积分增加」，消耗按对话聚合） ===== */
function MB_CreditLog() {
  const [tab, setTab] = React.useState(0);
  const consumeByConv = [
  { title: '天气变化对城市骑行需求的影响分析', time: '刚刚', delta: -320 },
  { title: '产品定价方案讨论', time: '06-22 09:15', delta: -527 },
  { title: '周会纪要整理', time: '06-21 18:02', delta: -85 }];

  const creditIn = [
  { label: '每日积分发放', time: '06-22 00:00', delta: 500 },
  { label: '加油包购买（大包）', time: '06-20 14:32', delta: 1200 },
  { label: '奖励积分发放（09-19 到期）', time: '06-20 09:00', delta: 100 },
  { label: '每月积分发放', time: '06-01 00:00', delta: 3000 }];

  return (
    <Screen tinted>
      <AccountAppBar title="积分明细" hasBack />
      <div className="body">
        <div className="scroll" style={{ overflow: 'auto', background: 'var(--bg-subtle)', paddingBottom: 28 }}>
          {/* Tab：对话消耗 / 积分增加 */}
          <div style={{ background: '#fff', display: 'flex', borderBottom: '1px solid var(--border)' }}>
            {['对话消耗', '积分增加'].map((t, i) =>
            <div key={t} onClick={() => setTab(i)} style={{
              flex: 1, textAlign: 'center',
              padding: '12px 0', fontSize: 13.5,
              color: i === tab ? 'var(--purple)' : 'var(--muted)',
              fontWeight: i === tab ? 700 : 400,
              borderBottom: i === tab ? '2px solid var(--purple)' : '2px solid transparent'
            }}>{t}</div>
            )}
          </div>

          {/* 余额摘要 */}
          <div style={{ background: '#fff', padding: '12px 16px', borderBottom: '1px solid var(--border)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, color: 'var(--muted)' }}>
              <span>当前可用余额</span>
              <span style={{ fontVariantNumeric: 'tabular-nums', fontWeight: 700, color: 'var(--t1)', fontSize: 15 }}>1820 积分</span>
            </div>
          </div>

          {tab === 0 &&
          <div style={{ background: '#fff', padding: '10px 16px 0', fontSize: 12, color: 'var(--muted)' }}>
            近 30 天内有更新的对话，显示其累计消耗积分
          </div>
          }

          {/* 流水列表 */}
          <div style={{ background: '#fff', marginTop: 10, borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
            {tab === 0 ?
            consumeByConv.map((log, i) =>
            <div key={i} style={{
              display: 'flex', alignItems: 'center', padding: '13px 16px',
              borderBottom: '1px solid var(--bg-subtle)'
            }}>
                <div style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', paddingRight: 10 }}>
                  <div style={{ fontSize: 14, color: 'var(--t1)' }}>{log.title}</div>
                  <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 3 }}>{log.time}</div>
                </div>
                <span style={{ fontSize: 15, fontWeight: 700, fontVariantNumeric: 'tabular-nums', color: 'var(--danger)' }}>
                  {log.delta}
                </span>
              </div>
            ) :

            creditIn.map((log, i) =>
            <div key={i} style={{
              display: 'flex', alignItems: 'center', padding: '13px 16px',
              borderBottom: '1px solid var(--bg-subtle)'
            }}>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14, color: 'var(--t1)', marginBottom: 3 }}>{log.label}</div>
                  <div style={{ fontSize: 12, color: 'var(--muted)' }}>{log.time}</div>
                </div>
                <span style={{ fontSize: 15, fontWeight: 700, fontVariantNumeric: 'tabular-nums', color: 'var(--success)' }}>
                  +{log.delta}
                </span>
              </div>
            )}
            <div style={{ padding: '14px 16px', textAlign: 'center', fontSize: 13, color: 'var(--purple)' }}>
              加载更多 ↓
            </div>
          </div>
        </div>
      </div>
    </Screen>);

}

/* ===== E/F. iOS 会员方案统一页 · 一套页面多状态（对齐 mobile-v1-companion 的 MemberIOSPage） =====
   结构：AppBar（免费态右上角「恢复购买」）→ 顶部状态行 → 权益对比卡（紫色渐变 BenefitTable）
        → 月卡/年卡两栏（免费态可选，已订阅态锁定当前档位）→ CTA → 协议勾选 / 法律链接
   Pricing 2.0 差异点仅在 BenefitTable 内容（次数配额 → 积分口径）与顶部资源快照 */
function MB_MemberIOS({ status = 'free' }) {
  const isFree = status === 'free';
  const currentPlan = 'year'; // 演示态：包年续订中
  const subtitle = isFree ? null : '下次续订日期 2026-07-30';
  const levelLabel = isFree ? '个人免费版' : '个人升级版';

  return (
    <Screen>
      <div className="appbar">
        <button className="iconbtn"><Ic.back size={22} /></button>
        <div className="appbar-title" style={{ fontSize: 16 }}>会员方案</div>
        <div className="spacer" />
        {isFree ?
        <span style={{ fontSize: 13.5, color: 'var(--purple-dark)', fontWeight: 500, marginRight: 4 }}>恢复购买</span> :
        <div style={{ width: 32 }} />}
      </div>
      <div className="body">
        <div className="scroll" style={{ overflow: 'auto', background: 'var(--bg-subtle)' }}>
          {/* 顶部状态行 */}
          <div style={{ padding: '14px 16px 0', background: '#fff' }}>
            <div style={{ display: 'flex', alignItems: 'baseline' }}>
              <div style={{ flex: 1, fontSize: 18, fontWeight: 600, color: 'var(--t1)' }}>{levelLabel}</div>
            </div>
            <div style={{ marginTop: 6, fontSize: 12.5, color: 'var(--muted)', lineHeight: 1.6 }}>
              {isFree ? '每日 200 积分 · 永久免费' : subtitle}
            </div>
            <div style={{ height: 14 }} />
          </div>

          {/* 权益对比卡（积分口径） */}
          <div style={{ padding: '0 16px 4px', background: '#fff' }}>
            <BenefitTablePricing2 />
          </div>

          {isFree ?
          <>
            {/* 价格方案区 */}
            <div style={{ padding: '16px 16px 0' }}>
              <div style={{ display: 'flex', gap: 10 }}>
                <PlanColumn title="月卡" price="¥29.9" unit="/月" hint="每月 5000 积分 + 每日 500 积分" />
                <PlanColumn title="年卡" price="¥19.9" unit="/月起" hint="每月 5000 积分 + 每日 500 积分" recommend selected />
              </div>
            </div>

            {/* CTA */}
            <div style={{ padding: '18px 16px 0' }}>
              <button style={{
                width: '100%', height: 52, borderRadius: 999,
                background: 'var(--purple)', color: '#fff',
                border: 'none', fontSize: 16, fontWeight: 600
              }}>立即升级 · 首单限时 ¥19.9</button>
            </div>

            {/* 同意条款 */}
            <div style={{ padding: '14px 20px 0', display: 'flex', alignItems: 'flex-start', gap: 8 }}>
              <div style={{
                width: 16, height: 16, borderRadius: 4, marginTop: 2,
                border: '1.5px solid var(--border-strong)', background: '#fff', flexShrink: 0
              }} />
              <div style={{ fontSize: 11.5, color: 'var(--muted)', lineHeight: 1.7 }}>
                已阅读并同意
                <span style={{ color: 'var(--purple-dark)' }}>《用户协议》</span>
                和
                <span style={{ color: 'var(--purple-dark)' }}>《隐私政策》</span>
              </div>
            </div>
            <p style={{ fontSize: 11.5, color: 'var(--muted)', padding: '10px 20px 0', lineHeight: 1.7 }}>
              购买确认后费用将从 iTunes 账户扣除。订阅自动续订，可在到期前 24 小时取消。您可在 Apple ID 设置中管理。
            </p>
          </> :

          <>
            {/* 已订阅态：本周期资源快照 + 管理入口 */}
            <div style={{ padding: '16px 16px 0' }}>
              <div style={{ background: '#fff', border: '1px solid var(--border)', borderRadius: 14, padding: 16 }}>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--t1)', marginBottom: 10 }}>本周期资源快照</div>
                <div style={{ display: 'flex' }}>
                  {[
                  { label: '可用积分', val: '1820' },
                  { label: '存储空间', val: '1.2/10 GB' },
                  { label: '知识库', val: '88/500 MB' }].
                  map((item, i) =>
                  <div key={i} style={{ flex: 1, textAlign: 'center', borderRight: i < 2 ? '1px solid var(--border)' : 'none' }}>
                      <div style={{ fontSize: 14, fontWeight: 700, color: 'var(--t1)', fontVariantNumeric: 'tabular-nums' }}>{item.val}</div>
                      <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 3 }}>{item.label}</div>
                    </div>
                  )}
                </div>
                <button style={{
                  display: 'block', width: '100%', marginTop: 12,
                  height: 36, borderRadius: 8, border: 'none',
                  background: 'var(--purple-bg)', color: 'var(--purple-dark)',
                  fontSize: 13.5, fontWeight: 600
                }}>查看资源用量详情</button>
              </div>
            </div>

            <div style={{ padding: '16px 16px 0' }}>
              <SGroup>
                <SRow label="管理订阅" sub="在 App Store 中修改或取消" arrow />
                <SRow label="购买加油包" sub="补充积分 · 长期有效" arrow />
                <SRow label="订单记录" arrow />
              </SGroup>
            </div>
          </>
          }

          {/* 法律链接 */}
          <div style={{ padding: '20px 20px 28px', display: 'flex', justifyContent: 'center', gap: 14 }}>
            <span style={{ fontSize: 12, color: 'var(--purple-dark)' }}>会员订阅服务条款</span>
            <span style={{ fontSize: 12, color: 'var(--muted)' }}>·</span>
            <span style={{ fontSize: 12, color: 'var(--purple-dark)' }}>会员自动续费服务条款</span>
          </div>
        </div>
      </div>
    </Screen>);

}

/* 权益对比卡：对齐 mobile-v1-companion 的 BenefitTable 结构，内容改为积分口径 */
function BenefitTablePricing2() {
  const rows = [
  { fn: '积分额度', free: '每日 200', pro: '每日 500 + 每月 5000' },
  { fn: '加油包', free: '不可购买', pro: '可购买 · 永久有效' },
  { divider: true },
  { fn: 'PPT 模式', free: '仅标准模式', pro: '标准 + 创意模式' },
  { fn: '模型选择', free: '标准模型', pro: '标准 + 升级模型' },
  { fn: 'PPT 模版', free: '免费模版', pro: '自定义 + VIP 模版' },
  { divider: true },
  { fn: '存储空间', free: '500MB', pro: '10GB' }];

  return (
    <div style={{
      background: 'linear-gradient(135deg, #8E6BF2 0%, #6E45D9 100%)',
      borderRadius: 14, padding: '16px 14px', color: '#fff'
    }}>
      <div style={{
        display: 'inline-flex', alignItems: 'center', gap: 6,
        fontSize: 11, fontWeight: 700, letterSpacing: '0.6px', opacity: 0.95, marginBottom: 12
      }}>
        OFFICE RACCOON <span style={{
          background: 'rgba(255,255,255,0.22)', padding: '2px 7px', borderRadius: 7,
          fontSize: 10, fontWeight: 700
        }}>升级版</span>
      </div>
      <div style={{ display: 'flex', fontSize: 12, opacity: 0.92, fontWeight: 600, padding: '0 4px 8px' }}>
        <div style={{ flex: 1.2 }}>功能</div>
        <div style={{ flex: 1, textAlign: 'center' }}>免费版</div>
        <div style={{ flex: 1, textAlign: 'right' }}>升级版</div>
      </div>
      {rows.map((r, i) => r.divider ?
      <div key={i} style={{ height: 1, background: 'rgba(255,255,255,0.18)', margin: '6px 0' }} /> :

      <div key={i} style={{ display: 'flex', alignItems: 'center', padding: '7px 4px', fontSize: 12.5 }}>
          <div style={{ flex: 1.2, opacity: 0.92 }}>{r.fn}</div>
          <div style={{ flex: 1, textAlign: 'center', opacity: 0.85 }}>{r.free}</div>
          <div style={{ flex: 1, textAlign: 'right', fontWeight: 600 }}>{r.pro}</div>
        </div>
      )}
    </div>);

}

/* 月卡 / 年卡选择列：对齐 mobile-v1-companion 的 PlanColumn */
function PlanColumn({ title, price, unit, hint, recommend, selected }) {
  return (
    <div style={{
      flex: 1, padding: '14px 14px 16px', borderRadius: 14, position: 'relative',
      background: '#fff',
      border: '2px solid ' + (selected ? 'var(--purple)' : 'var(--border)')
    }}>
      {recommend &&
      <div style={{
        position: 'absolute', top: -10, right: 10,
        background: 'var(--purple)', color: '#fff',
        fontSize: 11, fontWeight: 600, padding: '3px 8px', borderRadius: 8
      }}>推荐</div>
      }
      <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--t1)' }}>{title}</div>
      <div style={{ marginTop: 12, display: 'flex', alignItems: 'baseline' }}>
        <span style={{ fontSize: 22, fontWeight: 700, color: 'var(--purple-dark)' }}>{price}</span>
        <span style={{ fontSize: 12, color: 'var(--muted)', marginLeft: 2 }}>{unit}</span>
      </div>
      {hint && <div style={{ marginTop: 8, fontSize: 11.5, color: 'var(--muted)', lineHeight: 1.6 }}>{hint}</div>}
    </div>);

}

function MB_PlanFree() {
  return <MB_MemberIOS status="free" />;
}

function MB_PlanSubscribed() {
  return <MB_MemberIOS status="subscribed" />;
}

  Object.assign(NS, { AccountAppBar, SGroup, SRow, UsageCard, MB_SettingsHome, MB_ResourceFree, MB_ResourcePro, MB_CreditLog, MB_PlanFree, MB_PlanSubscribed });
})();