/* ============================================================
   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;
  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;
}

.ac-modal-confirm,
.ac-modal-action-primary {
  min-height: calc(var(--tm-space-6) + var(--tm-space-4));
  border: none;
  border-radius: var(--tm-radius-full);
  background: var(--tm-brand-purple);
  color: var(--tm-text-on-inverse);
  font-size: var(--tm-text-md);
  font-weight: var(--tm-weight-semibold);
  transition:
    transform var(--tm-dur-fast) var(--tm-ease-out),
    box-shadow 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 {
  background: var(--tm-brand-purple-dark);
  box-shadow: var(--tm-shadow-2);
  transform: translateY(calc(-1 * var(--tm-space-px, 1px)));
}

.ac-modal-confirm:disabled,
.ac-modal-action-primary:disabled {
  background: var(--tm-surface-2);
  color: var(--tm-text-muted);
  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);
}

.ac-option-badge {
  color: var(--tm-text-on-inverse);
  box-shadow: var(--tm-shadow-1);
}

.ac-option-badge--recommended {
  background: var(--tm-brand-purple);
}

.ac-option-badge--popular {
  background: var(--tm-brand-orange);
}

.tm-plan-card {
  position: relative;
  display: grid;
  gap: var(--tm-space-3);
  width: 100%;
  padding: var(--tm-space-4);
  border: 1px solid var(--tm-border-default);
  border-radius: var(--tm-radius-xl);
  background: var(--tm-surface-1);
  color: var(--tm-text-primary);
  text-align: left;
  box-shadow: none;
  transition:
    transform var(--tm-dur-fast) var(--tm-ease-out),
    box-shadow 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);
  box-shadow: var(--tm-shadow-2);
  transform: translateY(calc(-1 * var(--tm-space-px, 1px)));
}

.tm-plan-card--recommended {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--tm-surface-1), var(--tm-surface-1)) padding-box,
    linear-gradient(135deg,
      var(--tm-brand-purple),
      color-mix(in srgb, var(--tm-brand-purple) 68%, var(--tm-surface-1))) border-box;
}

.tm-plan-card--selected {
  box-shadow: 0 0 0 3px var(--tm-brand-purple-alpha-28);
}

.tm-plan-card--current {
  border-color: var(--tm-border-default);
  background: var(--tm-surface-2);
  color: var(--tm-text-secondary);
}

.ac-plan-option.ac-current.tm-plan-card--current,
.ac-plan-option.ac-current.ac-selected.tm-plan-card--current {
  border-color: var(--tm-border-default);
  background: var(--tm-surface-2);
}

.ac-plan-option.ac-selected:not(.ac-current).tm-plan-card--selected {
  border-color: var(--tm-brand-purple-alpha-28);
  background: color-mix(in srgb, var(--tm-brand-purple) 6%, var(--tm-surface-1));
  box-shadow: 0 0 0 3px var(--tm-brand-purple-alpha-28);
}

.tm-plan-card-top {
  align-items: flex-start;
  gap: var(--tm-space-3);
  margin: 0;
}

.tm-plan-card-name {
  color: var(--tm-text-primary);
  font-size: var(--tm-text-lg);
  font-weight: var(--tm-weight-semibold);
  line-height: var(--tm-leading-tight);
}

.tm-plan-card-price {
  color: var(--tm-text-primary);
  font-size: var(--tm-text-2xl);
  font-weight: var(--tm-weight-semibold);
  line-height: var(--tm-leading-none);
  white-space: nowrap;
}

.tm-plan-card-price .ac-unit {
  color: var(--tm-text-muted);
  font-size: var(--tm-text-sm);
  font-weight: var(--tm-weight-medium);
}

.tm-plan-card-desc {
  color: var(--tm-text-secondary);
  font-size: var(--tm-text-sm);
  line-height: var(--tm-leading-snug);
}

.tm-plan-card-bullets {
  gap: var(--tm-space-2);
  margin: 0;
}

.tm-plan-card-bullets li {
  gap: var(--tm-space-2);
  color: var(--tm-text-primary);
  font-size: var(--tm-text-md);
  line-height: var(--tm-leading-snug);
}

.tm-plan-card-bullets li svg {
  width: calc(var(--tm-space-3) + var(--tm-space-1));
  height: calc(var(--tm-space-3) + var(--tm-space-1));
  margin-top: calc(var(--tm-space-1) / 2);
  color: var(--tm-status-success-fg);
}

.tm-plan-card-cta,
.tm-topup-gate-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--tm-space-6) + var(--tm-space-4));
  width: 100%;
  padding: var(--tm-space-2) var(--tm-space-4);
  border: 1px solid var(--tm-brand-purple-alpha-28);
  border-radius: var(--tm-radius-full);
  background: transparent;
  color: var(--tm-brand-purple);
  font: inherit;
  font-size: var(--tm-text-md);
  font-weight: var(--tm-weight-semibold);
  cursor: pointer;
  transition:
    background var(--tm-dur-fast) var(--tm-ease-out),
    color var(--tm-dur-fast) var(--tm-ease-out),
    transform var(--tm-dur-fast) var(--tm-ease-out);
}

.tm-plan-card-cta:hover,
.tm-topup-gate-cta:hover {
  background: var(--tm-brand-purple-alpha-08);
  transform: translateY(calc(-1 * var(--tm-space-px, 1px)));
}

.tm-plan-card-cta--primary,
.tm-topup-gate-cta {
  background: var(--tm-brand-purple);
  color: var(--tm-text-on-inverse);
}

.tm-plan-card-cta--primary:hover,
.tm-topup-gate-cta:hover {
  background: var(--tm-brand-purple-dark);
}

.tm-plan-card-cta--current,
.tm-plan-card-cta:disabled {
  border-color: var(--tm-border-default);
  background: color-mix(in srgb, var(--tm-surface-2) 70%, var(--tm-surface-3));
  color: var(--tm-text-muted);
  cursor: default;
  transform: none;
}

.tm-plan-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tm-space-1);
  padding: var(--tm-space-1);
  border-radius: var(--tm-radius-full);
  background: var(--tm-surface-2);
  box-shadow: inset 0 0 0 var(--tm-space-px, 1px) var(--tm-border-subtle);
}

.tm-plan-segment {
  min-height: var(--tm-space-8);
  border: none;
  border-radius: var(--tm-radius-full);
  background: transparent;
  color: var(--tm-text-secondary);
  font: inherit;
  font-size: var(--tm-text-sm);
  font-weight: var(--tm-weight-semibold);
  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-surface-1);
  color: var(--tm-brand-purple);
  box-shadow: var(--tm-shadow-1), 0 0 0 var(--tm-space-px, 1px) var(--tm-brand-purple-alpha-10);
}

.tm-paywall-legal {
  display: grid;
  gap: var(--tm-space-1);
  padding: var(--tm-space-2) var(--tm-space-1) 0;
  color: var(--tm-text-muted);
  font-size: var(--tm-text-xs);
  line-height: var(--tm-leading-snug);
}

.tm-paywall-legal-links {
  display: inline-flex;
  align-items: center;
  gap: var(--tm-space-1);
  flex-wrap: wrap;
}

.tm-paywall-legal button {
  border: none;
  background: transparent;
  color: var(--tm-brand-purple);
  font: inherit;
  padding: 0;
  cursor: pointer;
}

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

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

.tm-topup-note {
  margin: 0;
  color: var(--tm-text-secondary);
  font-size: var(--tm-text-sm);
  line-height: var(--tm-leading-snug);
}

.tm-topup-rate-note {
  justify-self: start;
  padding: calc(var(--tm-space-1) / 2) var(--tm-space-2);
  border-radius: var(--tm-radius-full);
  background: var(--tm-brand-purple-alpha-10);
  color: var(--tm-brand-purple);
  font-size: var(--tm-text-2xs);
  font-weight: var(--tm-weight-semibold);
  line-height: var(--tm-leading-tight);
}

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

.tm-pack-card {
  position: relative;
  display: grid;
  gap: var(--tm-space-1);
  min-height: calc(var(--tm-space-12) + var(--tm-space-10));
  padding: var(--tm-space-5) var(--tm-space-3) var(--tm-space-3);
  border: 1px solid var(--tm-border-default);
  border-radius: var(--tm-radius-xl);
  background: var(--tm-surface-1);
  color: var(--tm-text-primary);
  text-align: left;
  transition:
    transform var(--tm-dur-fast) var(--tm-ease-out),
    box-shadow var(--tm-dur-fast) var(--tm-ease-out),
    border-color var(--tm-dur-fast) var(--tm-ease-out);
}

.tm-pack-card:hover {
  border-color: var(--tm-brand-purple-alpha-28);
  background: color-mix(in srgb, var(--tm-brand-purple) 4%, var(--tm-surface-1));
  box-shadow: var(--tm-shadow-2);
  transform: translateY(calc(-1 * var(--tm-space-px, 1px)));
}

.ac-recharge-option.tm-pack-card:hover {
  border-color: var(--tm-brand-purple-alpha-28);
  background: color-mix(in srgb, var(--tm-brand-purple) 4%, var(--tm-surface-1));
}

.tm-pack-card--selected {
  border-color: var(--tm-brand-purple-alpha-28);
  background: color-mix(in srgb, var(--tm-brand-purple) 6%, var(--tm-surface-1));
  box-shadow: 0 0 0 3px var(--tm-brand-purple-alpha-10);
}

.ac-recharge-option.ac-selected.tm-pack-card--selected {
  border-color: var(--tm-brand-purple-alpha-28);
  background: color-mix(in srgb, var(--tm-brand-purple) 6%, var(--tm-surface-1));
  box-shadow: 0 0 0 3px var(--tm-brand-purple-alpha-10);
}

.tm-pack-card .ac-option-badge {
  top: var(--tm-space-2);
  right: var(--tm-space-2);
}

.tm-pack-price {
  color: var(--tm-text-primary);
  font-size: var(--tm-text-xl);
  font-weight: var(--tm-weight-semibold);
  line-height: var(--tm-leading-none);
}

.tm-pack-credits {
  display: inline-flex;
  align-items: center;
  gap: var(--tm-space-1);
  color: var(--tm-text-primary);
  font-size: var(--tm-text-lg);
  font-weight: var(--tm-weight-semibold);
  line-height: var(--tm-leading-tight);
}

.tm-pack-bolt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tm-brand-orange);
}

.tm-pack-bolt svg {
  width: var(--tm-space-4);
  height: var(--tm-space-4);
}

.tm-pack-desc {
  color: var(--tm-text-secondary);
  font-size: var(--tm-text-xs);
  line-height: var(--tm-leading-snug);
}

.tm-pack-bonus {
  justify-self: start;
  margin-top: var(--tm-space-1);
  min-height: calc(var(--tm-space-3) + var(--tm-space-1));
  padding: calc(var(--tm-space-1) / 2) var(--tm-space-2);
  border-radius: var(--tm-radius-full);
  background: var(--tm-status-warning-bg);
  color: var(--tm-status-warning-fg);
  font-size: var(--tm-text-2xs);
  font-weight: var(--tm-weight-semibold);
}

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

.tm-topup-gate {
  display: grid;
  gap: var(--tm-space-3);
  padding: var(--tm-space-4);
  border: 1px solid var(--tm-border-default);
  border-radius: var(--tm-radius-xl);
  background: var(--tm-surface-2);
}

.tm-topup-gate-title {
  color: var(--tm-text-primary);
  font-size: var(--tm-text-md);
  line-height: var(--tm-leading-snug);
}

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