/* ============================================================
   Billing guards — 账户限制横幅 (C-02) + 充能站补充 (C-03)
   新分区落新文件（styles.css 冻结令，D§3.8 步骤 0）。
   全部经 --tm-* token 表达（暗色由 token 层自动切换，T3 铁律）。
   ============================================================ */

/* ── C-02 · Account Restriction Banner ── */
.account-restriction-banner {
  display: flex;
  align-items: center;
  gap: var(--tm-space-2);
  padding: var(--tm-space-2) var(--tm-space-3);
  font-size: var(--tm-text-sm);
  line-height: var(--tm-leading-snug);
  border-bottom: 1px solid var(--tm-border-default);
  animation: arb-slide-in var(--tm-dur-normal) var(--tm-ease-out) both;
  position: relative;
  z-index: var(--tm-z-banner);
}
.arb--warning {
  background: var(--tm-status-warning-bg);
  color: var(--tm-status-warning-fg);
}
.arb--critical {
  background: var(--tm-status-danger-bg);
  color: var(--tm-status-danger-fg);
}
.arb-icon {
  flex-shrink: 0;
  display: inline-flex;
  opacity: 0.85;
}
.arb-message {
  flex: 1;
  min-width: 0;
}
.arb-cta {
  flex-shrink: 0;
  font-weight: var(--tm-weight-semibold);
  text-decoration: none;
  padding: 3px 10px;
  border-radius: var(--tm-radius-full);
  color: inherit;
  border: 1px solid currentColor;
  opacity: 0.9;
  transition: opacity var(--tm-dur-fast) var(--tm-ease-out), background var(--tm-dur-fast) var(--tm-ease-out);
}
.arb-cta:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.35);
}
@keyframes arb-slide-in {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
/* reduce 兜底由 system.css 全局层（0.01ms 压缩）承担，无需本地 @media */

/* ── C-03 · 充能站 ghost 动作键（"不花钱的出路"）── */
.qb-btn-ghost {
  background: transparent;
  border: none;
  color: var(--tm-text-muted);
  font-weight: var(--tm-weight-medium);
  transition: color var(--tm-dur-fast) var(--tm-ease-out);
}
.qb-btn-ghost:hover {
  color: var(--tm-text-primary);
  background: transparent;
}
/* 三键窄面板兜底换行 */
.qb-actions {
  flex-wrap: wrap;
}

/* ── C-06 · 充能站 v2：电表读数行 + rate_limited 恢复行（CP-4 槽位）── */
.qb-context {
  margin: 2px 0 0;
  font-size: var(--tm-text-sm);
  color: var(--tm-text-muted);
}
.qb-recovery {
  margin: 2px 0 0;
  font-size: var(--tm-text-sm);
  color: var(--tm-text-secondary);
  font-variant-numeric: tabular-nums;
}
/* 窄面板（<360px）拦截卡改纵排：横排局促、message + 上下文行放不下 */
@media (max-width: 360px) {
  .qb-content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--tm-space-2);
  }
}

/* ── C-11（s06）· 订阅页当前计划价值卡 ──
   品牌淡紫渐变描边（free 中性灰变体）；bullets 复用 C-05 check 视觉语言。
   数据驱动：无 price 无 bullets 时自动只剩名称行（CP-3 红线）。 */
.settings-plan-value-card {
  padding: 14px 16px;
  border: 1px solid var(--tm-brand-purple-alpha-28);
  background:
    linear-gradient(135deg, var(--tm-brand-purple-alpha-08), transparent 60%);
}
.settings-plan-value-card--free {
  border-color: var(--border-color, rgba(148, 163, 184, 0.25));
  background: transparent;
}
.settings-plan-value-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.settings-plan-value-name {
  font-size: var(--tm-text-lg);
  font-weight: var(--tm-weight-semibold);
  color: var(--text-primary);
}
.settings-plan-value-price {
  font-size: var(--tm-text-md);
  font-weight: var(--tm-weight-semibold);
  color: var(--tm-brand-purple);
  white-space: nowrap;
}
.settings-plan-value-cycle {
  margin-left: 2px;
  font-size: var(--tm-text-xs);
  font-weight: var(--tm-weight-regular);
  color: var(--text-muted);
}
.settings-plan-value-bullets {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-plan-value-bullets li {
  position: relative;
  padding-left: 20px;
  font-size: var(--tm-text-sm);
  line-height: 1.5;
  color: var(--text-secondary);
}
.settings-plan-value-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: var(--tm-radius-full);
  background: var(--tm-brand-purple-alpha-10);
  /* check 视觉语言（C-05 同族）：紫底内嵌对勾 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c5cfc' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 8px 8px;
  background-position: center;
  background-repeat: no-repeat;
}
.settings-plan-value-renew {
  margin-top: 10px;
  font-size: var(--tm-text-xs);
  color: var(--text-muted);
}

/* ── R2-s03 U10 · Paywall Reforge ─────────────────────────────
   This layer supersedes the legacy accountCenter modal card styling without
   touching the payment state machine. Values are tokenized; accountCenter.css
   keeps compatibility rules for older surfaces below this cascade. */
.ac-modal-overlay {
  background: color-mix(in srgb, var(--tm-bg-1) 34%, transparent);
  transition: opacity var(--tm-dur-normal) var(--tm-ease-out);
}

.ac-modal-card {
  width: min(380px, calc(100vw - var(--tm-space-8)));
  background: var(--tm-surface-1);
  border: 1px solid var(--tm-border-default);
  border-radius: var(--tm-radius-xl);
  box-shadow: var(--tm-shadow-float);
  color: var(--tm-text-primary);
  transform: translateY(var(--tm-space-3)) scale(0.98);
  transition:
    transform var(--tm-dur-normal) var(--tm-ease-out),
    opacity var(--tm-dur-normal) var(--tm-ease-out);
}

.ac-modal-overlay.ac-active .ac-modal-card {
  transform: translateY(0) scale(1);
}

.ac-modal-header {
  padding: var(--tm-space-4) var(--tm-space-4) 0;
}

.ac-modal-title {
  color: var(--tm-text-primary);
  font-size: var(--tm-text-lg);
  font-weight: var(--tm-weight-semibold);
  line-height: var(--tm-leading-tight);
}

.ac-modal-close {
  position: relative;
  width: calc(var(--tm-space-6) + var(--tm-space-1));
  height: calc(var(--tm-space-6) + var(--tm-space-1));
  border: 1px solid var(--tm-border-default);
  background: var(--tm-surface-2);
  color: var(--tm-text-muted);
  transition:
    background var(--tm-dur-fast) var(--tm-ease-out),
    color var(--tm-dur-fast) var(--tm-ease-out),
    border-color var(--tm-dur-fast) var(--tm-ease-out);
}

.ac-modal-close::after {
  content: "";
  position: absolute;
  inset: calc(var(--tm-space-3) * -1);
}

.ac-modal-close:hover {
  background: var(--tm-brand-purple-alpha-08);
  border-color: var(--tm-brand-purple-alpha-28);
  color: var(--tm-brand-purple);
}

.ac-modal-body {
  display: grid;
  /* 行轨按内容定高:body 是定高滚动容器,auto 行轨会被「剩余空间」限死——
     overflow:hidden 的项(对比矩阵)自动最小高为 0,行只分到残高,表格被剪/
     后续行透叠(0802 实测 343px 表被压进 75px 轨)。max-content 轨不受容器
     定高限制,内容超出走 body 滚动。 */
  grid-auto-rows: max-content;
  gap: var(--tm-space-3);
  padding: var(--tm-space-4);
}

.ac-modal-footer {
  padding: var(--tm-space-3) var(--tm-space-4) var(--tm-space-4);
  background: var(--tm-surface-1);
  border-top: 1px solid var(--tm-border-default);
}

.ac-modal-footer.is-hidden {
  display: none;
}

/* B8 纸墨换皮：主动作 = 墨色实底方角（与侧栏立信卡 CTA、托盘主按钮同一形制），
   不再是紫色胶囊药丸。上浮 1px 的 hover 也撤掉——纸不弹。 */
.ac-modal-confirm,
.ac-modal-action-primary {
  min-height: calc(var(--tm-space-6) + var(--tm-space-4));
  border: none;
  border-radius: 4px;
  background: var(--tm-paper-ink, #2b2534);
  color: var(--tm-paper-raised, #fbf8f1);
  font-family: var(--tm-serif, Georgia, serif);
  font-size: var(--tm-text-md);
  font-weight: var(--tm-weight-semibold);
  letter-spacing: 0.08em;
  box-shadow: 0 2px 6px rgba(43, 37, 52, 0.20);
  transition:
    opacity var(--tm-dur-fast) var(--tm-ease-out),
    background var(--tm-dur-fast) var(--tm-ease-out);
}

.ac-modal-confirm:hover,
.ac-modal-action-primary:hover {
  opacity: 0.88;
}

.ac-modal-confirm:disabled,
.ac-modal-action-primary:disabled {
  background: var(--tm-paper-ink, #2b2534);
  color: var(--tm-paper-raised, #fbf8f1);
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ac-modal-confirm.ac-recharge,
.ac-modal-actions[data-action-type="recharge"] .ac-modal-action-primary {
  background: var(--tm-brand-purple);
}

.ac-modal-confirm.ac-recharge:hover,
.ac-modal-actions[data-action-type="recharge"] .ac-modal-action-primary:hover {
  background: var(--tm-brand-purple-dark);
}

.ac-modal-confirm.ac-recharge:disabled,
.ac-modal-actions[data-action-type="recharge"] .ac-modal-action-primary:disabled {
  background: var(--tm-surface-2);
  color: var(--tm-text-muted);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.ac-modal-note,
.ac-consent-row,
.ac-eu-waiver-fallback-hint,
.ac-region-loading-skeleton {
  color: var(--tm-text-secondary);
}

.ac-consent-row {
  font-size: var(--tm-text-sm);
  line-height: var(--tm-leading-normal);
  align-items: flex-start;
}

.ac-consent-row input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: calc(var(--tm-space-1) / 2);
  accent-color: var(--tm-brand-purple);
}

/* B2 s1 店面形制（0802 还原刀）：卡 = 竖排一栏（瓶→名→for 人群→大衬线价→
   billed 小字→递进行→卖点→CTA），CTA 沉底靠卖点列 flex:1 撑开——网格拉伸时
   三卡 CTA 齐脚。旧 `ac-plan-option`/`ac-option-badge` 全族已随 markup 摘除，
   规则本轮物理回收（designBudget）。 */
.tm-plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px 18px 16px;
  border: 1.5px solid var(--tm-paper-hairline-2);
  border-radius: 16px;
  background: var(--tm-paper-raised);
  color: var(--tm-paper-ink);
  text-align: left;
  box-shadow: none;
  transition:
    box-shadow var(--tm-dur-fast) var(--tm-ease-out),
    background var(--tm-dur-fast) var(--tm-ease-out),
    border-color var(--tm-dur-fast) var(--tm-ease-out);
}

.tm-plan-card:hover {
  border-color: var(--tm-brand-purple-alpha-28);
  background: var(--tm-brand-purple-alpha-08);
}

/* 推荐卡：一道实紫边 + 一层极淡的紫墨投影。原先是「渐变描边」（padding-box/
   border-box 双背景），纸面上那是塑料感最强的一处。 */
.tm-plan-card--recommended {
  /* 0813 采纳:紫边只归「选中」一义——推荐身份由丝带+raised 纸承担,
     消掉推荐/选中共用紫边的误读(c4-pro 真机观察实证) */
  border-color: var(--tm-paper-hairline-2);
  background: var(--tm-paper-raised);
  /* ②B 顺手修：写死亮档紫 rgba → token 化，暗档随 --tm-brand-purple-rgb 翻转 */
  box-shadow: 0 10px 30px rgba(var(--tm-brand-purple-rgb), 0.13);
}

.tm-plan-card--selected {
  border-color: var(--tm-ink-purple);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tm-ink-purple) 22%, transparent);
}

/* 用户 0802 拍板「当前套餐和更低档应该界面一个颜色」：当前档/降档卡与其余
   同皮同墨（mockup 三卡等观），身份只落在 CTA（当前套餐虚线钮/降档禁用钮+小注）。
   旧的 band 纸底+虚线边与降档减淡整组撤除。 */

/* B2 s1：名走正文字重，价才是这张卡的衬线主角 */
.tm-plan-card-name {
  color: var(--tm-paper-ink);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin: 8px 0 2px;
}

.tm-plan-card-for {
  color: var(--tm-paper-ink-2);
  font-size: 12px;
  line-height: 1.5;
  min-height: 18px;
}

.tm-plan-card-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 14px 0 2px;
}

.tm-plan-price-n {
  font-family: var(--tm-serif);
  color: var(--tm-paper-ink);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tm-plan-price-unit {
  color: var(--tm-paper-ink-2);
  font-size: 13px;
  font-weight: 500;
}

/* 年付态:原月价删除线(弱化,大字同基线行尾;装饰性数字用 mut 合法) */
.tm-plan-price-was {
  color: var(--tm-paper-ink-mut);
  font-size: 13px;
  font-weight: 500;
  margin-left: 2px;
}

.tm-plan-card-billed {
  color: var(--tm-paper-ink-2);
  font-size: 11.5px;
  line-height: 1.5;
  margin-bottom: 10px;
}

/* 递进行「包含 X 全部，另有」：虚线上缘的紫墨小引 */
.tm-plan-card-incl {
  color: var(--tm-ink-purple);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  border-top: 1px dashed var(--tm-paper-hairline);
  padding-top: 10px;
  margin-top: 2px;
}

.tm-plan-card-desc {
  color: var(--tm-paper-ink-2);
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.5;
}

.tm-plan-card-bullets {
  display: block;
  margin: 6px 0 16px;
  padding: 0;
  list-style: none;
  flex: 1 0 auto; /* B2 s1:卖点列撑开余高,三卡 CTA 齐脚 */
}

/* 卖点行 = 墨点引导符（B2 s1 稿圆点）：不用对勾——这里没有「成功/失败」语义 */
.tm-plan-card-bullets li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--tm-paper-ink-2);
  font-size: 13px;
  line-height: 1.5;
  padding: 4px 0;
}

.tm-plan-card-bullets li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--tm-ink-purple);
  margin-top: 7px;
  flex: none;
}


/* ⑥ 双 CTA 收敛（0814 拍板）：卡内「选择 X」按钮退役——整卡即单选件，
   选中态仍由 --selected 紫边+光圈表达；键盘焦点走 focus-visible 同款圈。 */
.tm-plan-card[data-settings-modal-action="select-plan"] {
  cursor: pointer;
}
.tm-plan-card[data-settings-modal-action="select-plan"]:focus-visible {
  outline: none;
  border-color: var(--tm-ink-purple);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tm-ink-purple) 22%, transparent);
}

/* 当前档静态签（替代原 CTA--current 虚线钮的文案位） */
.tm-plan-current-tag {
  display: block;
  margin-top: auto;
  padding-top: 10px;
  font-size: 12px;
  color: var(--tm-paper-ink-mut);
  text-align: center;
  border-top: 1px dashed var(--tm-paper-hairline);
}

/* 降档说明:低档卡底部的行内小注(真机缺陷「点低档零反馈」的修法——
   读屏与明眼看的是同一份文案,不再 sr-only) */
.tm-plan-downgrade-note {
  /* 中文小注:≥11px + 实墨二档(可读性总纲第8条) */
  font-size: 11px;
  line-height: 1.5;
  color: var(--tm-paper-ink-2);
  margin: 0 0 10px;
}

.tm-topup-gate-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  width: 100%;
  padding: 6px 16px;
  border: none;
  border-radius: 10px;
  background: var(--tm-ink-purple);
  color: var(--tm-paper-raised);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--tm-dur-fast) var(--tm-ease-out);
}

.tm-topup-gate-cta:hover {
  background: var(--tm-ink-purple-strong);
}

.tm-plan-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 3px;
  margin: 2px 0 8px;
  border-radius: 8px;
  background: var(--tm-paper-2);
  box-shadow: inset 0 0 0 1px var(--tm-paper-hairline);
}

.tm-plan-segment {
  min-height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--tm-paper-ink-2);
  font-family: var(--tm-font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition:
    background var(--tm-dur-fast) var(--tm-ease-out),
    color var(--tm-dur-fast) var(--tm-ease-out),
    box-shadow var(--tm-dur-fast) var(--tm-ease-out);
}

.tm-plan-segment.is-active {
  background: var(--tm-paper-raised);
  color: var(--tm-ink-purple);
  box-shadow: 0 1px 2px rgba(42, 39, 51, 0.10), inset 0 0 0 1px color-mix(in srgb, var(--tm-ink-purple) 35%, transparent);
}

/* B2 s1:legal 一行静音行,虚线上缘(续费口径 · MoR · 条款 · 退款) */
.tm-paywall-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 6px;
  row-gap: 2px;
  border-top: 1px dashed var(--tm-paper-hairline-2);
  margin-top: 4px;
  padding-top: 10px;
  color: var(--tm-paper-ink-2);
  font-size: 11px;
  line-height: 1.7;
}

.tm-paywall-legal button {
  border: none;
  background: transparent;
  color: var(--tm-ink-purple);
  font: inherit;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ── B2 s1 · 年付/月付页签 + 「年付立省」朱点签(mockup bill-toggle 1:1) ── */
.tm-bill-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6px 0 4px;
}

.tm-bill-tg {
  display: inline-flex;
  border: 1.5px solid var(--tm-paper-ink);
  border-radius: 999px;
  overflow: hidden;
}

.tm-bill-tab {
  border: none;
  background: transparent;
  padding: 7px 18px;
  font: inherit;
  font-size: 13px;
  color: var(--tm-paper-ink-2);
  cursor: pointer;
}

.tm-bill-tab.is-on {
  background: var(--tm-paper-ink);
  color: var(--tm-paper);
}

.tm-bill-save {
  margin-left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  /* ②B 紫墨统一（0814 批准）：付费面强调只剩紫墨一族，橙退出 */
  color: var(--tm-ink-purple);
}

/* ── B2 s1 D4 · 完整功能对比矩阵(折叠;点虚线小引展开) ── */
.tm-cmp-open {
  display: block;
  margin: 6px auto 0;
  border: none;
  background: transparent;
  color: var(--tm-ink-purple);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
}

.tm-cmp {
  border: 1px solid var(--tm-paper-hairline-2);
  border-radius: 14px;
  overflow: hidden;
}

.tm-cmp-scroll {
  overflow-x: auto;
}

.tm-cmp table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  min-width: 480px;
  color: var(--tm-paper-ink);
}

.tm-cmp th,
.tm-cmp td {
  padding: 9px 12px;
  text-align: center;
  border-top: 1px solid var(--tm-paper-hairline);
}

.tm-cmp tr:first-child th {
  border-top: none;
  background: var(--tm-paper-band);
  font-weight: 600;
}

.tm-cmp .tm-cmp-feature {
  text-align: left;
  color: var(--tm-paper-ink-2);
}

.tm-cmp .tm-cmp-grp td {
  background: var(--tm-paper-2);
  color: var(--tm-paper-ink-mut);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
}

/* 组描述行(mockup:组名下一行小注,如 Agent 工作流的「聊天内以 / 命令启动…」) */
.tm-cmp-grp-desc {
  font-weight: 400;
  letter-spacing: 0;
  font-size: 11px;
  color: var(--tm-paper-ink-2);
  margin-top: 2px;
}

.tm-cmp-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--tm-ink-purple);
  vertical-align: middle;
}

.tm-topup-header {
  display: grid;
  gap: var(--tm-space-1);
}

.tm-topup-title {
  margin: 0;
  font-family: var(--tm-serif);
  color: var(--tm-paper-ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
}

.tm-topup-note {
  margin: 0;
  color: var(--tm-paper-ink-2);
  font-size: 11.5px;
  line-height: 1.55;
}

/* 费率章:mockup=细紫描边小方章(不再用药丸底) */
.tm-topup-rate-note {
  justify-self: start;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--tm-ink-purple) 40%, transparent);
  border-radius: 3px;
  background: transparent;
  color: var(--tm-ink-purple);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.6;
}

.tm-pack-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.tm-pack-card {
  position: relative;
  display: grid;
  gap: 3px;
  align-content: start;
  min-height: 96px;
  padding: 14px 12px 12px;
  border: 1px solid var(--tm-paper-hairline);
  border-radius: 6px;
  background: var(--tm-paper-raised);
  color: var(--tm-paper-ink);
  text-align: left;
  cursor: pointer;
  transition:
    border-color var(--tm-dur-fast) var(--tm-ease-out),
    background var(--tm-dur-fast) var(--tm-ease-out),
    box-shadow var(--tm-dur-fast) var(--tm-ease-out);
}

.tm-pack-card:hover {
  border-color: color-mix(in srgb, var(--tm-ink-purple) 50%, transparent);
  background: var(--tm-paper);
}

.tm-pack-card--selected {
  border-color: var(--tm-ink-purple);
  background: var(--tm-paper);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tm-ink-purple) 18%, transparent);
}

.tm-pack-price {
  font-family: var(--tm-serif);
  color: var(--tm-paper-ink);
  font-size: 21px;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tm-pack-credits {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--tm-paper-ink-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.tm-pack-bolt {
  display: inline-flex;
  align-items: center;
  align-self: center;
  color: var(--tm-ink-purple);
}

.tm-pack-bolt svg {
  width: 12px;
  height: 12px;
}

.tm-pack-desc {
  color: var(--tm-paper-ink-mut);
  font-size: 10.5px;
  line-height: 1.5;
}

.tm-pack-bonus {
  justify-self: start;
  margin-top: 5px;
  font-size: 10.5px;
  font-weight: 600;
}

.tm-pack-bonus--empty {
  visibility: hidden;
}

.tm-topup-gate {
  display: grid;
  gap: 14px;
  padding: 22px 16px;
  border: 1px dashed var(--tm-paper-hairline);
  border-radius: 10px;
  background: var(--tm-paper-raised);
  justify-items: center;
  text-align: center;
}

.tm-topup-gate-title {
  font-family: var(--tm-serif);
  color: var(--tm-paper-ink);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.5;
  max-width: 24em;
}

@media (max-width: 360px) {
  .tm-pack-grid {
    grid-template-columns: 1fr;
  }
}

/* ════════════════════════════════════════════════════════════
   B8 套装目录/火漆价签/灌墨凭单装置（B1 v2B s4/s5 1:1 移植,
   纸墨 token 化;齿孔=对账小票与凭单共用形制）
   ════════════════════════════════════════════════════════════ */

/* ── 墨水套装目录:B2 s1 竖排卡里瓶在卡顶 ── */
.tm-plan-bottle {
  display: block;
  color: var(--tm-paper-ink-2);
}
.tm-plan-bottle svg {
  width: 34px;
  height: 44px;
  display: block;
}

/* ── 瓶子即双轨开关（0814 拍板）：空瓶=纯功能版 / 灌墨=积分版 ──
   装饰图形升为主控件，所以要把「可点」写清楚：指针、悬停微抬、可见焦点环。
   状态只由墨块的有无表达（虚线墨槽 → 实心紫墨），瓶形与墨位仍只表档位。 */
.tm-plan-bottle--switch {
  cursor: pointer;
  border-radius: 8px;
  padding: 2px;
  margin: -2px 0 -2px -2px;
  transition: transform 140ms ease, color 140ms ease;
}
.tm-plan-bottle--switch:hover {
  transform: translateY(-1px);
  color: var(--tm-ink-purple);
}
/* 空↔满的差异不能只靠那一小块墨（Plus 墨块仅 52 单位瓶身里的 10 单位）——
   整瓶一起降/升存在感，小尺寸下才一眼读得出是哪一态。 */
.tm-plan-bottle--switch {
  opacity: 0.7;
}
.tm-plan-bottle--switch.is-inked {
  color: var(--tm-ink-purple);
  opacity: 1;
}
.tm-plan-bottle--switch:hover {
  opacity: 1;
}
.tm-plan-bottle--switch:focus-visible {
  outline: 2px solid var(--tm-ink-purple);
  outline-offset: 1px;
}
/* reduce 兜底由 system.css 全局层（0.01ms 压缩）承担，无需本地 @media（同本文件 C-02 先例） */

/* 瓶下状态行：当前版本 + 「这里能点」的唯一文字提示，同时是开关的可读 label */
.tm-plan-edition-line {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tm-paper-ink-2);
}
.tm-plan-edition-line.is-inked {
  color: var(--tm-ink-purple);
  font-weight: 600;
}
.tm-plan-edition-line.is-tappable {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--tm-ink-purple) 45%, transparent);
}
.tm-plan-edition-line.is-tappable:hover {
  color: var(--tm-ink-purple);
}
.tm-plan-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}
/* ── 折角丝带(推荐=紫墨;加油包 popular=火漆橙,充值身份专属) ── */
.ink-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 3px 9px 4px 12px;
  background: var(--tm-ink-purple);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0 9px 0 0;
  clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%, 0 50%);
}
.ink-ribbon--popular {
  /* ②B：橙折角重裁为紫墨底（继承基类 ink-purple），与升级窗推荐书签同语；
     折角形制（clip-path/圆角）不动 */
  border-radius: 0 5px 0 0;
}

/* B2 s1:价签卡上的「推荐」改悬垂书签形(挂在卡顶缘内 16px,圆底角),
   折角形保留给充值加油包的「热门」 */
.tm-plan-card .ink-ribbon {
  top: -1.5px;
  right: 16px;
  left: auto;
  padding: 5px 10px 7px;
  font-size: 11px;
  border-radius: 0 0 8px 8px;
  clip-path: none;
  color: #f4f0ff;
}

/* ── 变更 review = 对账小票齿孔撕边(g 轮实证:票面曾是 accountCenter 的
   #fafafa/#171717 中性灰,920 宽下读作纸上白条——整票收进纸墨) ── */
.ac-upgrade-review {
  position: relative;
  border: 1px solid var(--tm-paper-hairline);
  border-radius: 4px;
  background: var(--tm-paper-raised);
}

:root[data-theme="dark"] .ac-upgrade-review {
  background: var(--tm-paper-raised);
  border-color: var(--tm-paper-hairline);
}

/* h 轮移交：票题/条款句 g 轮曾 6.81:1,纸化时改 ink-mut 压到 3.42:1(AA 线下)
   ——要人读的句子回 ink-2 实墨(可读性总纲第8条),灰墨只留装饰 */
.ac-upgrade-review-title {
  color: var(--tm-paper-ink-2);
  border-bottom-color: var(--tm-paper-hairline);
}

.ac-upgrade-review-row {
  color: var(--tm-paper-ink-2);
}

:root[data-theme="dark"] .ac-upgrade-review-row {
  border-top-color: var(--tm-paper-hairline);
}

.ac-upgrade-review-row strong {
  font-family: var(--tm-serif);
  color: var(--tm-paper-ink);
  font-weight: 500;
}

.ac-upgrade-review-hint {
  color: var(--tm-paper-ink-2);
  /* 中文句斜体不清(e 轮同款裁定),撤 */
  font-style: normal;
}
.ac-upgrade-review::before,
.ac-upgrade-review::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  height: 5px;
  background-image: radial-gradient(circle at 4px 2.5px, var(--tm-paper) 2.2px, transparent 2.4px);
  background-size: 11px 5px;
  background-repeat: repeat-x;
}
.ac-upgrade-review::before { top: -1.5px; }
.ac-upgrade-review::after { bottom: -1.5px; transform: scaleY(-1); }

/* ── 火漆价签:瓶肩剪影 + 火漆点 bonus ── */
.tm-pack-card {
  position: relative;
  overflow: hidden;
}
/* 瓶肩剪影装置已裁撤(0802 f 轮拍板):mockup 的这笔装饰在 140px 真机价签上
   三轮三形态失败(d 空框/e 不可见/f 灰方块)——瓶口须高出瓶肩,而背景绘制区
   给不出盒外位置;价签身份已由衬线价+火漆点+丝带充分承担。若价签卡未来放大
   (如 920 宽弹窗两列布局)可重议。 */
.tm-pack-bonus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* ②B 换紫墨后沿用混四成墨保 AA 的写法(暗纸自动反向变亮) */
  color: color-mix(in srgb, var(--tm-ink-purple) 60%, var(--tm-paper-ink) 40%);
  font-variant-numeric: tabular-nums;
}
.tm-pack-bonus::before {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  /* ②B：火漆点三段渐变同结构换紫墨（高光/主体/收边），描边内影随族 */
  background: radial-gradient(circle at 34% 30%, #a99cf0 0%, var(--tm-ink-purple) 42%, #35297d 100%);
  box-shadow: 0 0 0 1.5px rgba(62, 49, 144, 0.25), inset 0 0 2px rgba(38, 28, 96, 0.55);
}
.tm-pack-bonus--empty {
  visibility: hidden;
}

/* ── 灌墨凭单(齿孔回执 + 印章落定;count-up 行沿用既有类) ── */
.tm-receipt {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 4px 2px 2px;
  padding: 26px 16px 22px;
  text-align: center;
  background: var(--tm-paper-raised);
  border: 1px solid var(--tm-paper-hairline);
  border-radius: 4px;
}
.tm-receipt::before {
  content: "";
  position: absolute;
  top: -1.5px;
  left: 6px;
  right: 6px;
  height: 5px;
  background-image: radial-gradient(circle at 4px 2.5px, var(--tm-paper) 2.2px, transparent 2.4px);
  background-size: 11px 5px;
  background-repeat: repeat-x;
}
.tm-receipt-stamp {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tm-ink-purple);
  transform: rotate(-4deg);
  border: 2px solid color-mix(in srgb, var(--tm-ink-purple) 75%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tm-ink-purple) 25%, transparent),
    inset 0 0 8px color-mix(in srgb, var(--tm-ink-purple) 12%, transparent);
  animation: tm-stamp-drop 500ms var(--tm-ease-out) 360ms both;
}
.tm-receipt-stamp::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--tm-ink-purple) 40%, transparent);
}
/* ②B：凭单章充值橙修饰类删除，与基类紫墨章合流（--recharge 类名仅余结构语义） */
.tm-receipt-title {
  font-family: var(--tm-serif);
  font-size: 15px;
  font-weight: 400;
  color: var(--tm-paper-ink);
}
.tm-receipt-amount {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--tm-serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--tm-paper-ink);
  font-variant-numeric: tabular-nums;
}
.tm-receipt-amount-bolt {
  display: inline-flex;
  align-self: center;
  color: var(--tm-ink-purple);
}
.tm-receipt-amount-bolt svg {
  width: 17px;
  height: 17px;
}
.tm-receipt-sub {
  font-size: 11px;
  color: var(--tm-paper-ink-mut);
}
@keyframes tm-stamp-drop {
  from {
    opacity: 0;
    transform: rotate(-4deg) scale(1.6);
  }
  60% {
    opacity: 1;
    transform: rotate(-4deg) scale(0.94);
  }
  to {
    opacity: 1;
    transform: rotate(-4deg) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tm-receipt-stamp {
    animation: none;
  }
}

/* ── B8 弹窗形态（Word 居中付费窗:同一 index.html 带 dialogPaywall 参数,
   壳全收,弹层撑满 dialog;≥760px 宽时套餐卡横排,B2 s1 920 店面律）── */
html.dialog-paywall-mode #app,
html.dialog-paywall-mode #left-panel,
html.dialog-paywall-mode #left-panel-overlay,
html.dialog-paywall-mode .cover-prologue {
  display: none !important;
}
html.dialog-paywall-mode body {
  background:
    linear-gradient(var(--tm-paper-veil), var(--tm-paper-veil)),
    var(--tm-paper-texture) var(--tm-paper);
  background-size: auto, 300px 300px;
}
html.dialog-paywall-mode .ac-modal-overlay {
  position: fixed;
  inset: 0;
  padding: 0;
}
/* 窗即是纸（用户 0802 拍板「初始弹出必须铺满」）：dialog 里不再浮一张 920 卡,
   纸面直接充满整窗;窗被拉宽时纸随窗走,内容列由下方 padding-inline 公式锁 920 居中 */
html.dialog-paywall-mode .ac-modal-card {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
}
/* 卡区包一层 tm-plan-grid（0802 用户「mockup 铺满,现界面很多空白」）：
   侧栏=单列纸叠;弹窗=body 转纵向弹性,卡区 flex:1 吃掉全部余高——
   卡随窗长高、CTA 沉底,任何窗高都满版(mockup 内容多高框多高的等效物) */
.tm-plan-grid {
  display: grid;
  gap: 14px;
  min-width: 0;
}
@media (min-width: 760px) {
  html.dialog-paywall-mode #settings-upgrade-modal .ac-modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  /* 定高滚动容器行为陷阱第三形态(同族:grid stretch 空卡/行轨压扁):flex 下
     内容超高时 shrinkable+overflow:hidden 的项(展开的矩阵)被压成空条——
     子项一律禁缩,超出走 body 滚动 */
  html.dialog-paywall-mode #settings-upgrade-modal .ac-modal-body > * {
    flex-shrink: 0;
  }
  /* 用户 0802 二调:卡回内容自然高(不再 flex:1 吃余高——卡内空腔比窗底留白
     更伤,mockup 卡永远饱满);行内三卡仍等高齐脚 */
  html.dialog-paywall-mode #settings-upgrade-modal .tm-plan-grid {
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 14px;
    align-items: stretch;
  }
  html.dialog-paywall-mode #settings-recharge-modal .tm-pack-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  /* 充值窗中段空纸(实测 52% 窗高下卡行与 footer 之间 122px 死纸全沉底):
     body 转纵向弹性,卡区吃余高且行居中——余纸变卡行上下对称呼吸;
     子项禁缩同 upgrade 窗(定高滚动容器陷阱同族) */
  html.dialog-paywall-mode #settings-recharge-modal .ac-modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  html.dialog-paywall-mode #settings-recharge-modal .ac-modal-body > * {
    flex-shrink: 0;
  }
  html.dialog-paywall-mode #settings-recharge-modal .ac-modal-body > .tm-pack-grid {
    flex: 1;
    align-content: center;
  }
  /* 拦购/未登录 gate 态只有一张小卡:垂直居中,不留整版底白 */
  html.dialog-paywall-mode #settings-recharge-modal .ac-modal-body > .tm-topup-gate {
    margin-block: auto;
  }
  /* footer 压实(实测 186px 吃掉 26% 窗高,卡 CTA 行被盖):只收行距与内衬,
     字号/文案/合规结构一字不动 */
  html.dialog-paywall-mode #settings-upgrade-modal .ac-modal-footer,
  html.dialog-paywall-mode #settings-recharge-modal .ac-modal-footer {
    /* 底衬 14px：末行注释的降部曾被窗口下缘切 2-3px（0813 真机实证） */
    padding: 10px 20px 14px;
  }
  html.dialog-paywall-mode #settings-upgrade-modal .ac-modal-footer .ac-consent-row,
  html.dialog-paywall-mode #settings-recharge-modal .ac-modal-footer .ac-consent-row {
    margin-block: 5px;
  }
  html.dialog-paywall-mode #settings-upgrade-modal .ac-modal-footer .ac-modal-confirm,
  html.dialog-paywall-mode #settings-recharge-modal .ac-modal-footer .ac-modal-confirm {
    margin-top: 9px;
  }
  html.dialog-paywall-mode #settings-upgrade-modal .ac-modal-footer .ac-modal-note,
  html.dialog-paywall-mode #settings-recharge-modal .ac-modal-footer .ac-modal-note {
    margin-top: 6px;
  }
}

/* ════════════════════════════════════════════════════════════
   B8 纸弹窗壳(两付费窗专属;ID 特异性压过 accountCenter 旧壳,
   规格 = B1 v2B mockup §9。板岩系统色/默认蓝链接在这两窗内退场)
   ════════════════════════════════════════════════════════════ */

#settings-upgrade-modal.ac-modal-overlay,
#settings-recharge-modal.ac-modal-overlay {
  background: rgba(42, 39, 51, 0.30);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

#settings-upgrade-modal .ac-modal-card,
#settings-recharge-modal .ac-modal-card {
  background: var(--tm-paper);
  border: 1px solid var(--tm-paper-hairline);
  border-radius: 14px;
  color: var(--tm-paper-ink);
  box-shadow: 0 24px 70px -18px rgba(42, 39, 51, 0.45);
}

/* mockup paperhead(用户 0802 点名):粗体无衬线题名 + 2px 墨线横贯窗眉 */
#settings-upgrade-modal .ac-modal-header,
#settings-recharge-modal .ac-modal-header {
  padding: 16px 18px 12px;
  background: transparent;
  border-bottom: 2px solid var(--tm-paper-ink);
}

#settings-upgrade-modal .ac-modal-title,
#settings-recharge-modal .ac-modal-title {
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  color: var(--tm-paper-ink);
}

#settings-upgrade-modal .ac-modal-close,
#settings-recharge-modal .ac-modal-close {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--tm-paper-hairline);
  background: transparent;
  color: var(--tm-paper-ink-mut);
  box-shadow: none;
}

#settings-upgrade-modal .ac-modal-close:hover,
#settings-recharge-modal .ac-modal-close:hover {
  border-color: var(--tm-ink-purple);
  color: var(--tm-ink-purple);
  background: transparent;
}

#settings-upgrade-modal .ac-modal-body,
#settings-recharge-modal .ac-modal-body {
  padding: 14px 18px 16px;
  gap: 14px;
  background: transparent;
}

#settings-upgrade-modal .ac-modal-footer,
#settings-recharge-modal .ac-modal-footer {
  background: var(--tm-paper);
  border-top: 1.5px solid var(--tm-paper-hairline-2);
  box-shadow: 0 -1px 0 var(--tm-paper), 0 -2.5px 0 var(--tm-paper-hairline);
}

#settings-upgrade-modal .ac-consent-row,
#settings-recharge-modal .ac-consent-row {
  color: var(--tm-paper-ink-2);
  font-size: 12px;
  line-height: 1.5;
}

#settings-upgrade-modal .ac-consent-row input[type="checkbox"],
#settings-recharge-modal .ac-consent-row input[type="checkbox"] {
  accent-color: var(--tm-ink-purple);
}

/* 条款/隐私链接:纸上一律紫墨细下划线,不出浏览器默认蓝 */
#settings-upgrade-modal .ac-modal-card a,
#settings-recharge-modal .ac-modal-card a {
  color: var(--tm-ink-purple);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

#settings-upgrade-modal .ac-modal-confirm,
#settings-recharge-modal .ac-modal-confirm {
  min-height: 40px;
  border: none;
  border-radius: 10px;
  background: var(--tm-ink-purple);
  color: var(--tm-paper-raised);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: none;
}

#settings-upgrade-modal .ac-modal-confirm:hover,
#settings-recharge-modal .ac-modal-confirm:hover {
  background: var(--tm-ink-purple-strong);
  box-shadow: none;
}

#settings-upgrade-modal .ac-modal-confirm:disabled,
#settings-recharge-modal .ac-modal-confirm:disabled {
  background: var(--tm-paper-band);
  color: var(--tm-paper-ink-mut);
  cursor: not-allowed;
}

/* i3 轮查获 ink-mut 同族第三处(3.25:1)后收网裁定:凡「完整句子」一律 ink-2
   实墨+≥11px(可读性总纲第8条),mut 只留标签/装饰/失效态——本批同改
   modal-note/for 行/billed 行/legal 行四处,杜绝第四轮打地鼠 */
#settings-upgrade-modal .ac-modal-note,
#settings-recharge-modal .ac-modal-note {
  color: var(--tm-paper-ink-2);
  font-size: 11px;
  line-height: 1.5;
}


/* 居中 dialog 里「窗就是框」(g 轮观察:窗内 modal 外还罩一圈墨帘=双重取景)——
   veil 只属于侧栏形态,dialog 形态退场,纸底直承卡片 */
html.dialog-paywall-mode #settings-upgrade-modal.ac-modal-overlay,
html.dialog-paywall-mode #settings-recharge-modal.ac-modal-overlay {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 窗即是纸·卡片外衣退场(ID 作用域压过上方 B8 纸壳的圆角/描边/投影):
   边框圆角投影都是「纸上摆着一个物件」的语法,铺满形态下窗框就是纸缘;
   scale 入场动画同理退场——页面不该像物件一样弹出来 */
html.dialog-paywall-mode #settings-upgrade-modal .ac-modal-card,
html.dialog-paywall-mode #settings-recharge-modal .ac-modal-card {
  border: none;
  border-radius: 0;
  box-shadow: none;
  transform: none;
  background:
    linear-gradient(var(--tm-paper-veil), var(--tm-paper-veil)),
    var(--tm-paper-texture) var(--tm-paper);
  background-size: auto, 300px 300px;
}

/* 拉伸策略(用户 0802 二调,否掉「内容列锁 920 居中」):内容贴窗走,
   两侧固定 20px 边距(mockup pad)——窗拉宽时三卡随窗变宽(mockup 1fr 行为) */
html.dialog-paywall-mode #settings-upgrade-modal .ac-modal-header,
html.dialog-paywall-mode #settings-recharge-modal .ac-modal-header,
html.dialog-paywall-mode #settings-upgrade-modal .ac-modal-body,
html.dialog-paywall-mode #settings-recharge-modal .ac-modal-body,
html.dialog-paywall-mode #settings-upgrade-modal .ac-modal-footer,
html.dialog-paywall-mode #settings-recharge-modal .ac-modal-footer {
  padding-inline: 20px;
}

/* 铺满后 body 比内容高:grid 默认 align-content:stretch 会把行撑开摊满
   剩余高度(充值窗实证:头块 265px/卡行 290px 的空卡)——内容从顶排,余纸留白 */
html.dialog-paywall-mode #settings-upgrade-modal .ac-modal-body,
html.dialog-paywall-mode #settings-recharge-modal .ac-modal-body {
  align-content: start;
}

/* 墨价值行（0814）：回答「多花的钱买到了什么」——放在价格正下方的收据位，
   钱的推理不混进功能卖点。三段=比纯功能版多付多少 · 单买多少 · 便宜几成。 */
.tm-plan-ink-value {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tm-ink-purple);
  font-variant-numeric: tabular-nums;
}
.tm-plan-ink-value.is-tappable {
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--tm-ink-purple) 40%, transparent);
}