/* ═══════════════════════════
   Modals
   ═══════════════════════════ */
.ac-modal-overlay {
  /* EU compliance fix v3.2 (2026-04-25): light theme variables on modal overlay
     原因：.ac-modal-overlay 不是 .ac-panel 后代，浅色变量不继承；深色已有 line 1277
     真实变量名（grep accountCenter.css 验证）：--ac-bg / --ac-text / --ac-border / --ac-brand etc.
     不存在的变量（禁用）：--ac-modal-bg / --ac-border-subtle / --ac-accent-primary / --ac-accent-soft
     Phase 2 A.5 part1: alias 全局 token (与 .ac-panel 段保持一致) */
  /* B8 纸墨换皮（2026-08-01）：ac-* 这一族本就是「可换皮的变量层」，故换皮从这里
     改值，而不是在文件尾巴上叠第二套覆盖规则（那会留两套皮互相打架）。
     取值全部指向既有 paper token 族，深色档在文件末尾的 dark 段同步。
     为什么要换：付费窗与设置面板是全产品最后两块旧白皮，与纸墨主题割裂
     （0731 真机遗留挂账②）。 */
  --ac-bg: var(--tm-paper-raised, #fbf8f1);
  --ac-surface: var(--tm-paper-band, #f4eee1);
  --ac-surface-hover: var(--tm-paper-2, #f1eadb);
  --ac-text: var(--tm-paper-ink, #2b2534);
  --ac-text-dim: var(--tm-paper-ink-2, #5c5468);
  --ac-text-muted: var(--tm-paper-ink-mut, #8b8296);
  --ac-border: var(--tm-paper-hairline, #d8cdb6);
  --ac-brand: var(--tm-brand-purple, #5545b6);
  --ac-brand-light: var(--tm-brand-purple-alpha-08, rgba(85, 69, 182, 0.08));
  --ac-brand-border: var(--tm-brand-purple-alpha-28, rgba(85, 69, 182, 0.28));
  /* 纸上不用「成功绿」：当前档位是事实不是喜报，用墨色描边 + band 纸底表达 */
  --ac-success: var(--tm-paper-ink-2, #5c5468);
  --ac-success-light: var(--tm-paper-band, #f4eee1);
  --ac-danger: var(--tm-cinnabar, #8a4032);
  --ac-accent: var(--tm-ink-purple, #4c3fa5);
  --ac-pro-from: var(--tm-brand-purple, #5545b6);
  --ac-pro-to: var(--tm-brand-purple, #5545b6);
  /* 金橙渐变糖果签退役：纸面上的「最受欢迎」是一枚朱砂小签，不是霓虹 */
  position: fixed;
  inset: 0;
  /* 墨洗而非黑纱：底下是暖纸，压一层冷黑会把整屏调子拉灰（顶栏白纱同族教训） */
  background: rgba(43, 37, 52, 0.34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* C-09(4): 等值接 token scale（10100 = modal-top 上方微层，D§3.5 calc 语义） */
  z-index: calc(var(--tm-z-modal-top, 10000) + 100);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  /* 关闭态必须真隐（visibility 延迟到淡出结束）：opacity:0 残留会占读屏
     文档流（0813 全页清点 I 项；narrow-panel-precheck 禁形同族） */
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  pointer-events: none;
}
.ac-modal-overlay.ac-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
  pointer-events: auto;
}
.ac-modal-card {
  width: 310px;                            /* IE11 fallback */
  width: min(360px, calc(100vw - 32px));   /* C-05: 480px 面板下更舒展（现代 WebView2/Edge/Chromium） */
  background: var(--ac-bg);
  border-radius: 18px;
  border: 1px solid var(--tm-paper-hairline-2, #c9bda2);
  box-shadow: 0 24px 64px rgba(43, 37, 52, 0.22);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  /* EU compliance fix v3.2: flex column 让 .ac-modal-footer sticky 生效（保持 max-height 90vh） */
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}
.ac-modal-overlay.ac-active .ac-modal-card {
  transform: scale(1) translateY(0);
}
.ac-modal-card::-webkit-scrollbar {
  width: 0;
}

/* 眉头 = 刊头习语：题名衬线，下面一道 2px 墨线（与侧栏刊头、托盘书眉同一条线） */
.ac-modal-header {
  padding: 16px 18px 11px;
  margin: 0 0 2px;
  border-bottom: 2px solid var(--ac-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ac-modal-title {
  font-family: var(--tm-serif, Georgia, serif);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ac-text);
}
.ac-modal-close {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--ac-border);
  color: var(--ac-text-dim);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ac-modal-close::after {
  content: "";
  position: absolute;
  inset: calc(var(--tm-space-3) * -1);
}
.ac-modal-close:hover {
  background: var(--ac-surface-hover);
  color: var(--tm-cinnabar, #8a4032);
  border-color: var(--tm-cinnabar, #8a4032);
}
.ac-modal-body {
  /* EU compliance fix v3.2: 让 plan list 区域可滚，footer sticky 生效 */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 18px 14px;
}

/* EU compliance fix v3.2 (2026-04-25): sticky footer ─ ToS+Privacy + EU waiver + Confirm 始终在视口
   max-height 50vh + overflow-y 兜底防 footer 内容过长成为新遮挡源 */
.ac-modal-footer {
  position: sticky;
  bottom: 0;
  flex-shrink: 0;
  padding: 12px 18px 18px;
  background: var(--ac-bg, #ffffff);
  border-top: 1px solid var(--ac-border, #e5e7eb);
  max-height: 50vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* B8 摘旧类（0802 物理回收）：升级窗价目卡的 `ac-plan-option` 全族、
   `ac-option-badge`、`ac-plan-bullets` 已随 markup 摘除成死码——卡族现由
   billing.css 的 `tm-plan-card` 单班承担，旧规则整块删除（designBudget 回收）。 */

.ac-upgrade-review {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: #fafafa;
}
.ac-upgrade-review-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ac-text);
  margin-bottom: 8px;
}
.ac-upgrade-review-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  font-size: 11px;
  line-height: 1.35;
  color: var(--ac-text-dim);
}
.ac-upgrade-review-row:first-of-type {
  border-top: 0;
}
.ac-upgrade-review-row strong {
  max-width: 58%;
  text-align: right;
  color: var(--ac-text);
  font-weight: 650;
}
/* C-05: Today due 人话辅助说明行 */
.ac-upgrade-review-hint {
  padding: 2px 0 6px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ac-text-muted, #9ca3af);
}

.ac-modal-confirm {
  width: 100%;
  padding: 11px;
  border-radius: 12px;
  border: none;
  /* EU compliance fix v3.2: solid color 兜底；gradient 在 background-image 上叠加，var 失效时按钮仍可见 */
  background-color: #5545b6;
  background-image: linear-gradient(135deg, var(--ac-pro-from, #5545b6), var(--ac-pro-to, #8d81da));
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 14px;
  transition: all 0.2s;
}
.ac-modal-confirm:hover {
  box-shadow: 0 4px 20px rgba(85,69,182,0.4);
  transform: translateY(-1px);
}
/* EU compliance fix v3.2: disabled 用 solid color，避免 gradient + opacity 渲染异常 */
.ac-modal-confirm:disabled {
  background-image: none;
  background-color: #c4b5fd;
  color: #fff;
  opacity: 1;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.ac-modal-confirm:disabled:hover {
  transform: none;
  box-shadow: none;
}
.ac-modal-confirm.ac-recharge {
  background-color: #10b981;
  background-image: linear-gradient(135deg, #059669, #34d399);
}
.ac-modal-confirm.ac-recharge:hover {
  box-shadow: 0 4px 20px rgba(52,211,153,0.4);
}
.ac-modal-confirm.ac-recharge:disabled {
  background-image: none;
  background-color: #6ee7b7;
}

/* ── v3.4 Modal Action Buttons (Bug B + C) ──
 * The opened/confirming/needs_refresh/error/mismatch_fulfilling states swap the
 * footer to a vertically stacked action stack. The three role classes mirror
 * the existing .ac-modal-confirm visual language but are explicitly named so
 * the markup stays self-documenting (primary/secondary/tertiary) and so future
 * actions can pick the right tier without re-deriving CSS.
 *
 * Layout: column flex, full-width buttons, generous gap. Word task pane is
 * roughly 280px wide so horizontal layout would crowd. Desktop also stacks
 * for visual consistency. */
.ac-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.ac-modal-action-primary,
.ac-modal-action-secondary,
.ac-modal-action-tertiary {
  width: 100%;
  padding: 11px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  line-height: 1.2;
}

/* Primary — purple solid (mirrors ac-modal-confirm). Recharge variant uses
 * green via the data-action-type="recharge" parent attr. */
.ac-modal-action-primary {
  border: none;
  background-color: #5545b6;
  background-image: linear-gradient(135deg, var(--ac-pro-from, #5545b6), var(--ac-pro-to, #8d81da));
  color: #fff;
}
.ac-modal-action-primary:hover {
  box-shadow: 0 4px 20px rgba(85,69,182,0.4);
  transform: translateY(-1px);
}
.ac-modal-action-primary:disabled {
  background-image: none;
  background-color: #c4b5fd;
  color: #fff;
  opacity: 1;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.ac-modal-actions[data-action-type="recharge"] .ac-modal-action-primary {
  background-color: #10b981;
  background-image: linear-gradient(135deg, #059669, #34d399);
}
.ac-modal-actions[data-action-type="recharge"] .ac-modal-action-primary:hover {
  box-shadow: 0 4px 20px rgba(52,211,153,0.4);
}

/* Secondary — purple-bordered ghost. */
.ac-modal-action-secondary {
  background: #fff;
  border: 1.5px solid #5545b6;
  color: #5545b6;
}
.ac-modal-action-secondary:hover {
  background: #f5f3ff;
  box-shadow: 0 2px 12px rgba(85,69,182,0.15);
}
.ac-modal-actions[data-action-type="recharge"] .ac-modal-action-secondary {
  border-color: #10b981;
  color: #047857;
}
.ac-modal-actions[data-action-type="recharge"] .ac-modal-action-secondary:hover {
  background: #ecfdf5;
}

/* Tertiary — text/ghost button. WCAG AA contrast: #6d28d9 on white ~ 7.6:1. */
.ac-modal-action-tertiary {
  background: transparent;
  border: 1px solid transparent;
  color: #6d28d9;
}

/* Launch P0 v0.9.53 (plan §3.6): popup_blocked_fallback modal state.
   Shown when browser/WebView blocked the checkout popup. URL must be
   user-selectable so user can copy manually if clipboard.writeText fails
   (Word WebView2 may deny clipboard permission). Long URL (Creem checkout
   IDs are short, but defensive) wraps inside narrow viewport (320px+). */
.ac-popup-blocked-fallback {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}
.ac-popup-blocked-title {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.4;
}
.ac-popup-blocked-desc {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.5;
  overflow-wrap: anywhere;
  max-width: 100%;
}
.ac-popup-blocked-url-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.ac-popup-blocked-url {
  font-size: 12px;
  font-family: var(--tm-font-mono);
  color: #6d28d9;
  text-decoration: underline;
  /* clipboard fallback: must always be selectable */
  user-select: text;
  -webkit-user-select: text;
  /* C-12(2): 视觉单行省略（href 保留完整；Copy URL 按钮为主通道） */
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  line-height: 1.5;
}
.ac-popup-blocked-url:hover {
  color: #5b21b6;
}
@media (max-width: 360px) {
  .ac-popup-blocked-title { font-size: 14px; }
  .ac-popup-blocked-desc { font-size: 12px; }
  .ac-popup-blocked-url { font-size: 11px; }
}
.ac-modal-action-tertiary:hover {
  background: #f5f3ff;
  border-color: #ddd6fe;
}
.ac-modal-actions[data-action-type="recharge"] .ac-modal-action-tertiary {
  color: #047857;
}
.ac-modal-actions[data-action-type="recharge"] .ac-modal-action-tertiary:hover {
  background: #ecfdf5;
  border-color: #a7f3d0;
}

/* Focus ring for keyboard navigation across all three roles. */
.ac-modal-action-primary:focus-visible,
.ac-modal-action-secondary:focus-visible,
.ac-modal-action-tertiary:focus-visible {
  outline: 2px solid #5545b6;
  outline-offset: 2px;
}

/* ── v3.4 Modal Status Banner Variants (ADR-6) ──
 * Three semantic variants. Default (no variant class) inherits whatever the
 * existing .ac-modal-status-banner block defines. */
.ac-modal-status-banner.ac-banner-info {
  background: #f5f3ff;
  border: 1px solid #ddd6fe;
  color: #5b21b6;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 4px;
}
.ac-modal-status-banner.ac-banner-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 4px;
}
.ac-modal-status-banner.ac-banner-sync {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 4px;
}
.ac-modal-status-banner.ac-banner-success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 10px;
}

/* ── C-07 · 等待期三点能量脉冲（banner 内，currentColor 随变体配色）──
   reduce 降级由 system.css 全局层承担（iteration-count:1 → 静止显示基础态）。 */
.ac-modal-status-banner {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ac-banner-label {
  flex: 1;
  min-width: 0;
}
.ac-pulse-dots {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
}
.ac-pulse-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  animation: ac-pulse 1.2s ease-in-out infinite;
}
.ac-pulse-dots i:nth-child(2) { animation-delay: 0.15s; }
.ac-pulse-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ac-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.25); }
}

/* ── C-07 · 支付成功能量注入仪式 ── */
.ac-success-rite {
  position: relative;
  text-align: center;
  padding: 8px 0 12px;
}
.ac-success-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--ac-pro-from, #5545b6), var(--ac-pro-to, #8d81da));
  animation: ac-ring-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.ac-success-ring::after {
  /* 一次性能量辉光扩散（burst）——注入感的第二拍 */
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  pointer-events: none;
  animation: ac-ring-burst 0.9s ease-out 0.25s both;
}
.ac-success-ring--recharge {
  background: linear-gradient(135deg, #059669, #34d399);
}
@keyframes ac-ring-pop {
  0% { transform: scale(0.4); opacity: 0; }
  70% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes ac-ring-burst {
  0% { box-shadow: 0 0 0 0 rgba(85, 69, 182, 0.45); }
  100% { box-shadow: 0 0 0 16px rgba(85, 69, 182, 0); }
}
.ac-success-title {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ac-text);
}
.ac-success-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ac-text-dim);
}
.ac-success-balance {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 13px;
  background: var(--ac-brand-light, rgba(85, 69, 182, 0.08));
  color: var(--ac-brand, #5545b6);
}
.ac-success-balance b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* v3.4 Bug C: error state retry visibility hardening.
 * The retry button is .ac-modal-confirm rendered after the error banner.
 * Make sure the footer never collapses the button below the visible viewport
 * by enforcing min-height + a bottom margin so the page-fold cutoff in Word's
 * narrow task pane doesn't hide it. */
.ac-modal-footer[data-modal-state="error"] {
  min-height: 120px;
}
.ac-modal-footer[data-modal-state="error"] .ac-modal-status-banner--error {
  margin-bottom: 12px;
}
.ac-modal-footer[data-modal-state="error"] .ac-modal-confirm {
  margin-top: 0;
}
.ac-modal-note {
  font-size: 12px; /* C-09(3): 10px 不可读下限 → 12px */
  color: var(--ac-text-dim, var(--ac-text-muted));
  text-align: center;
  margin-top: 10px;
  line-height: 1.5;
}

/* ── C-09(2) · 弹窗同意区（脱内联提类；EU 法务文案与逻辑零改动） ── */
.ac-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ac-text);
  cursor: pointer;
}
.ac-consent-row input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  width: 15px;
  height: 15px;
  accent-color: var(--ac-brand); /* Chromium ≥93 渐进增强 */
}
.ac-eu-waiver-fallback-hint {
  font-size: 12px;
  color: var(--ac-text-muted);
  margin: 4px 0 8px 23px;
}
.ac-region-loading-skeleton {
  font-size: 12px;
  color: var(--ac-text-muted);
  margin: 12px 0;
}

/* B8 摘旧类（0802 物理回收）：充值窗 `ac-recharge-grid/option/price/credits/
   unit/bonus` 全族死码删除——加油包卡现由 billing.css 的 `tm-pack-*` 承担。 */
:root[data-theme="dark"] .ac-modal-overlay {
  /* Phase 2 A.5 part1: dark alias (与 :root[data-theme="dark"] .ac-panel 一致) */
  --ac-bg: var(--bg-secondary, #1e1e1e);
  --ac-surface: #121212;
  --ac-surface-hover: #2a2a2a;
  --ac-text: var(--text-primary, #f1f5f9);
  --ac-text-dim: var(--text-secondary, #cbd5e1);
  --ac-text-muted: var(--text-muted, #94a3b8);
  --ac-border: var(--border-color, #2a2a2a);
  --ac-brand: var(--tm-brand-purple, #988be4);
  --ac-brand-light: rgba(152, 139, 228, 0.12);
  --ac-brand-border: rgba(152, 139, 228, 0.25);
  --ac-success: #34d399;
  --ac-success-light: rgba(52, 211, 153, 0.12);
  --ac-danger: #f87171;
  --ac-accent: var(--ac-brand);
  --ac-accent-glow: rgba(152, 139, 228, 0.25);
  --ac-energy: var(--ac-success);
  --ac-energy-low: var(--ac-danger);
  /* C-01: dark 下徽标渐变提亮一档 */
  background: rgba(0,0,0,0.5);
}
:root[data-theme="dark"] .ac-modal-card {
  background: #1e1e1e;
}
:root[data-theme="dark"] .ac-upgrade-review {
  background: #171717;
  border-color: rgba(255,255,255,0.10);
}
:root[data-theme="dark"] .ac-upgrade-review-row {
  border-top-color: rgba(255,255,255,0.08);
}
:root[data-theme="dark"] .ac-modal-status-banner.ac-banner-success {
  background: rgba(16,185,129,0.12);
  border-color: rgba(52,211,153,0.28);
  color: #a7f3d0;
}