/* ============================================================
   Recharge · Swiss Engineer Redesign (2026-04)
   作用域：body.page-recharge
   注：recharge.html 同时引入 purchase.css，但所有规则作用域互斥。
   ============================================================ */

body.page-recharge {
  background: var(--sw-bg);
  background-image:
    linear-gradient(var(--sw-line-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--sw-line-grid) 1px, transparent 1px);
  background-size: var(--sw-grid-cell) var(--sw-grid-cell);
  color: var(--sw-ink);
  font-family: var(--sw-sans);
}
body.page-recharge .recharge-container {
  max-width: 560px; margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 32px) clamp(48px, 8vw, 96px);
}

/* ---------- Stepper (3 格) ---------- */
body.page-recharge .stepper {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--sw-ink);
  background: #fff;
  margin-bottom: 24px;
  padding: 0;
}
body.page-recharge .stepper-item {
  padding: 10px 12px;
  border-right: 1px solid var(--sw-ink);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sw-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--sw-ink-soft);
  flex-direction: row;
}
body.page-recharge .stepper-item:nth-of-type(3) { border-right: none; }
body.page-recharge .stepper-circle {
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sw-line-soft);
  background: #fff; color: var(--sw-ink-soft);
  font-weight: 700; font-size: 10px; border-radius: 0;
}
body.page-recharge .stepper-item.active {
  background: var(--sw-ink); color: #fff;
}
body.page-recharge .stepper-item.active .stepper-circle {
  background: var(--sw-accent); color: #fff; border-color: var(--sw-accent);
}
body.page-recharge .stepper-item.done .stepper-circle {
  border-color: var(--sw-ink); color: var(--sw-ink);
}
body.page-recharge .stepper-label { white-space: nowrap; color: inherit; }

/* ---------- Step card / form / button ---------- */
body.page-recharge .step-panel { display: none; }
body.page-recharge .step-panel.active { display: block; }
body.page-recharge .step-card {
  background: #fff; border: 1px solid var(--sw-ink);
  padding: 28px; margin-bottom: 16px;
}
body.page-recharge .step-card.hidden { display: none; }

body.page-recharge .step-kicker {
  font-family: var(--sw-mono); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--sw-ink-soft); margin: 0 0 6px;
}
body.page-recharge .step-title {
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em;
  margin: 0 0 6px; line-height: 1.25;
}
body.page-recharge .step-subtitle {
  font-family: var(--sw-mono); font-size: 11px;
  letter-spacing: 0.08em; color: var(--sw-ink-soft);
  margin: 0 0 24px;
}
body.page-recharge .step-tip {
  font-family: var(--sw-mono); font-size: 10px;
  letter-spacing: 0.08em; color: var(--sw-ink-soft);
  text-align: center; margin: 14px 0 0;
}
body.page-recharge .step-help {
  font-family: var(--sw-mono); font-size: 10px;
  letter-spacing: 0.1em; text-align: center;
  color: var(--sw-ink-soft); margin: 12px 0 0;
}
body.page-recharge .step-help a { color: var(--sw-accent); text-decoration: underline; }

body.page-recharge .form-group { margin-bottom: 18px; }
body.page-recharge .form-label {
  display: block; font-family: var(--sw-mono);
  font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--sw-ink-soft); margin-bottom: 8px;
}
body.page-recharge .form-required { color: var(--sw-accent); }
body.page-recharge .form-input,
body.page-recharge select.form-input {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--sw-line-soft);
  background: #fff; color: var(--sw-ink);
  padding: 11px 12px;
  font-size: 15px; font-family: var(--sw-sans);
  outline: none; border-radius: 0;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
body.page-recharge .form-input::placeholder { color: #b8b8b8; }
body.page-recharge .form-input:focus,
body.page-recharge select.form-input:focus {
  border-color: var(--sw-ink);
  box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08);
}
body.page-recharge .form-input.error {
  border-color: var(--sw-bad);
  box-shadow: 0 0 0 3px rgba(156, 28, 28, 0.12);
}
body.page-recharge .form-input.error:focus {
  border-color: var(--sw-bad);
  box-shadow: 0 0 0 3px rgba(156, 28, 28, 0.18);
}
body.page-recharge .form-input-mono,
body.page-recharge textarea.form-input {
  font-family: var(--sw-mono); font-size: 13px;
  letter-spacing: 0.02em;
}
body.page-recharge textarea.form-input { min-height: 120px; line-height: 1.5; }
body.page-recharge .form-hint {
  font-family: var(--sw-mono); font-size: 11px;
  color: var(--sw-ink-soft); margin: 6px 0 0;
}
body.page-recharge .form-hint-success { color: var(--sw-ok); }
body.page-recharge .form-hint-warning { color: var(--sw-warn); }
body.page-recharge .form-error {
  display: none;
  font-family: var(--sw-mono); font-size: 11px;
  color: var(--sw-bad); margin: 6px 0 0;
}

body.page-recharge .info-collapse {
  border: 1px dashed var(--sw-line-soft);
  padding: 10px 14px; margin: 0 0 18px;
  background: #fafafa;
}
body.page-recharge .info-collapse-trigger {
  font-family: var(--sw-mono); font-size: 11px;
  letter-spacing: 0.1em; color: var(--sw-ink-soft);
  cursor: pointer;
}
body.page-recharge .info-collapse-trigger::before {
  content: "// "; color: var(--sw-accent);
}
body.page-recharge .info-collapse-content {
  font-size: 13px; line-height: 1.6; color: var(--sw-ink-soft);
  margin: 8px 0 0;
}
body.page-recharge .info-collapse-content code {
  font-family: var(--sw-mono); background: var(--sw-ink); color: #fff;
  padding: 1px 5px; font-size: 12px;
}

/* 按钮 */
body.page-recharge .btn-sw-primary {
  display: block; width: 100%; box-sizing: border-box;
  background: var(--sw-ink); color: #fff;
  padding: 14px; font-family: var(--sw-sans);
  font-weight: 700; font-size: 15px;
  letter-spacing: 0.04em;
  border: 1px solid var(--sw-ink); border-radius: 0;
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background var(--transition-fast);
}
body.page-recharge .btn-sw-primary:hover { background: #222; }
body.page-recharge .btn-sw-arrow { font-family: var(--sw-mono); font-weight: 600; }

body.page-recharge .btn-sw-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--sw-ink);
  padding: 8px 14px; font-family: var(--sw-sans);
  font-size: 12px; font-weight: 700;
  border: 1px solid var(--sw-ink); border-radius: 0;
  text-decoration: none; cursor: pointer;
  transition: background var(--transition-fast);
}
body.page-recharge .btn-sw-ghost:hover { background: var(--sw-bg); }

body.page-recharge .btn-loading,
body.page-recharge .btn-disabled {
  opacity: 0.55; cursor: not-allowed;
}
body.page-recharge .btn-sw-primary:disabled,
body.page-recharge .btn-sw-primary.btn-disabled {
  background: var(--sw-ink-soft);
  border-color: var(--sw-ink-soft);
}

body.page-recharge .recharge-back-link {
  display: block; margin: 12px auto 0;
  background: transparent; border: none;
  color: var(--sw-ink-soft);
  font-family: var(--sw-mono); font-size: 11px;
  letter-spacing: 0.1em; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
body.page-recharge .recharge-back-link:hover { color: var(--sw-accent); }

/* Token guide */
body.page-recharge .token-guide {
  padding: 16px; background: #fafafa;
  border: 1px dashed var(--sw-line-soft);
  margin-bottom: 20px;
}
body.page-recharge .token-guide h3 {
  font-family: var(--sw-mono); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--sw-ink); font-weight: 700; margin: 0 0 10px;
}
body.page-recharge .token-guide h3::before { content: "// "; color: var(--sw-accent); }
body.page-recharge .token-steps {
  list-style: none;
  counter-reset: token-step;
  padding: 0;
  margin: 0;
  font-size: 13px;
  color: var(--sw-ink); line-height: 1.7;
}
body.page-recharge .token-steps > li {
  counter-increment: token-step;
  padding-left: 36px;
  position: relative;
}
body.page-recharge .token-steps > li + li { margin-top: 10px; }
body.page-recharge .token-steps > li::before {
  content: counter(token-step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0.15em;
  font-family: var(--sw-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--sw-accent);
  font-weight: 700;
}
body.page-recharge .token-steps kbd {
  font-family: var(--sw-mono); font-size: 11px;
  background: #fff; border: 1px solid var(--sw-ink);
  padding: 1px 6px; border-radius: 0;
}
body.page-recharge .token-steps code,
body.page-recharge .token-url {
  font-family: var(--sw-mono);
  background: var(--sw-ink); color: #fff;
  padding: 2px 6px; font-size: 12px; word-break: break-all;
}
body.page-recharge .token-url { display: inline-block; margin: 4px 0; }

/* PE.14 · "去登录" 文字链（附在第 1 步右侧） */
body.page-recharge .token-step-link {
  display: inline-block; margin-left: 8px;
  font-family: var(--sw-mono); font-size: 12px;
  color: var(--sw-ink); text-decoration: underline;
  text-underline-offset: 3px;
}
body.page-recharge .token-step-link:hover { color: var(--sw-accent); }

/* PE.14 · 整行 URL 可点击（去掉旧的 "一键打开" 按钮） */
body.page-recharge .token-url-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 4px 0; text-decoration: none;
  transition: opacity 0.15s ease;
}
body.page-recharge .token-url-link:hover { opacity: 0.75; }
body.page-recharge .token-url-arrow {
  font-family: var(--sw-mono); font-size: 13px;
  color: var(--sw-ink); font-weight: 600;
}

/* PE.14 · 识别账号展开卡片（同页展示，不切子步） */
body.page-recharge .account-confirmed-section {
  margin-top: 28px; padding-top: 24px;
  border-top: 2px solid var(--sw-ink);
}
body.page-recharge .account-confirmed-divider {
  font-family: var(--sw-mono); font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--sw-accent); margin: 0 0 12px;
  font-weight: 700;
}

/* Email confirm */
body.page-recharge .email-confirm-card {
  border: 1px solid var(--sw-ink);
  background: var(--sw-bg);
  padding: 20px; margin: 0 0 20px;
  text-align: left;
}
body.page-recharge .email-confirm-label {
  font-family: var(--sw-mono); font-size: 10px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--sw-ink-soft); margin: 0 0 8px;
}
body.page-recharge .email-confirm-value {
  font-family: var(--sw-mono); font-size: 18px;
  font-weight: 800; color: var(--sw-ink); margin: 0 0 6px;
  word-break: break-all;
}
body.page-recharge .email-confirm-meta {
  font-family: var(--sw-mono); font-size: 11px;
  color: var(--sw-ink-soft); margin: 0;
}

/* Progress list */
body.page-recharge .progress-list {
  list-style: none; padding: 0; margin: 16px 0 20px;
  border: 1px solid var(--sw-line-soft);
}
body.page-recharge .progress-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px dashed var(--sw-line-soft);
  font-size: 13px;
}
body.page-recharge .progress-item:last-child { border-bottom: none; }
body.page-recharge .progress-indicator { font-family: var(--sw-mono); color: var(--sw-ink-soft); }
body.page-recharge .progress-indicator.active { color: var(--sw-accent); }
body.page-recharge .progress-indicator.done { color: var(--sw-ok); }
body.page-recharge .progress-indicator.waiting { color: var(--sw-line-soft); }
/* PE.20 · 失败/警告态 */
body.page-recharge .progress-indicator.failed { color: var(--sw-bad); font-weight: bold; }
body.page-recharge .progress-indicator.warning { color: #c78a00; font-weight: bold; }
body.page-recharge .progress-item.step-failed .progress-text { color: var(--sw-bad); }
body.page-recharge .progress-item.step-warning .progress-text { color: #c78a00; }
body.page-recharge .progress-status.failed { color: var(--sw-bad); font-weight: bold; }
body.page-recharge .progress-status.warning { color: #c78a00; font-weight: bold; }

/* PE.21 · 进行中动画：step-active 行的 "进行中" 后面跟循环变化的 "..."
   (依赖 Chrome 120+/Safari 17+/Firefox 117+ 对 content 属性的 @keyframes 支持；
    不支持的旧浏览器只会看到静态 "进行中"，功能无损) */
body.page-recharge .progress-item.step-active .progress-status {
  color: var(--sw-accent);
}
body.page-recharge .progress-item.step-active .progress-status::after {
  content: '';
  display: inline-block;
  width: 1.2em;
  text-align: left;
  animation: sw-progress-dots 1.2s steps(1, end) infinite;
}
@keyframes sw-progress-dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%  { content: '...'; }
}
@media (prefers-reduced-motion: reduce) {
  body.page-recharge .progress-item.step-active .progress-status::after {
    animation: none;
    content: '...';
  }
}
body.page-recharge .progress-text { flex: 1; color: var(--sw-ink); }
body.page-recharge .progress-status {
  font-family: var(--sw-mono); font-size: 10px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--sw-ink-soft);
}
body.page-recharge .progress-email {
  font-family: var(--sw-mono); font-size: 11px;
  color: var(--sw-ink-soft); text-align: center; margin: 0 0 12px;
}

/* PE.25 · 终态 result card 统一风格
   - 无边框，只靠底色区分语义（success=green / warning=yellow / error=red）
   - 相同的 padding / margin / 字号 / 字重 / 居中排版
   - 3 个变体：.inline-success（绿） / .inline-failure（红） / .inline-failure.is-warning（黄）
   共享样式用多选择器集中定义，变体仅覆盖 background-color */
body.page-recharge .inline-failure,
body.page-recharge .inline-success {
  margin: 16px 0 0;
  padding: 18px 20px;
  border: none;
  text-align: center;
}
body.page-recharge .inline-failure            { background: rgba(217, 48, 37, 0.10); }  /* 红 */
body.page-recharge .inline-failure.is-warning { background: rgba(199, 138, 0, 0.12); }  /* 黄（略高 alpha 补感知） */
body.page-recharge .inline-success            { background: rgba(26, 127, 55, 0.10); }  /* 绿 */

body.page-recharge .inline-failure-message,
body.page-recharge .inline-success-message {
  font-size: 14px; line-height: 1.7;
  color: var(--sw-ink); font-weight: 500;
  margin: 0 0 14px;
  text-align: center;
}
body.page-recharge .inline-failure .result-actions,
body.page-recharge .inline-success .result-actions {
  margin: 0 0 10px;
  justify-content: center;
}
body.page-recharge .inline-failure .result-info,
body.page-recharge .inline-success .result-info {
  margin-top: 10px; padding-top: 10px;
  text-align: center;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
  font-family: var(--sw-mono);
  font-size: 11px;
  color: var(--sw-ink-soft);
}

/* PE.22 · 副标题 / help 文字 warning 态（已等待 >90s 时升级） */
body.page-recharge .step-subtitle.is-warning { color: #c78a00; font-weight: 500; }
body.page-recharge .step-help.is-warning {
  color: #c78a00; font-weight: 500;
  padding: 6px 10px;
  border-left: 2px solid #c78a00;
  background: rgba(199, 138, 0, 0.06);
}
body.page-recharge .step-help.is-warning a { color: #c78a00; text-decoration: underline; }

/* PE.22 · 等待较久时的"联系客服"轻量 CTA（不突兀抢走 progress 焦点） */
body.page-recharge .recharge-hold-cta {
  margin: 12px 0 0;
  text-align: center;
}
body.page-recharge .recharge-hold-cta .btn-sw-ghost {
  display: inline-block;
  padding: 6px 20px;
  font-size: 13px;
}

/* PE.21 · back-link 单独一行，不再与 primary/ghost 按钮挤同行
   PE.25 · 改为居中对齐（配合统一 result card 居中排版） */
body.page-recharge .inline-failure-backrow {
  margin: 4px 0 10px;
  text-align: center;
}
body.page-recharge .inline-failure-backrow:empty { display: none; }
body.page-recharge .inline-failure-backrow .recharge-back-link {
  /* 沿用既有 .recharge-back-link 的视觉（淡色文字链接），不强行拉宽 */
  display: inline-block;
}

/* PE.21/23/24 的 inline-success 单独规则已在 PE.25 合并到统一 result card 基础规则。 */

/* Result */
body.page-recharge .result-badge {
  font-family: var(--sw-mono); font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase;
  display: inline-block; padding: 4px 10px;
  margin: 0 0 12px; color: #fff;
}
body.page-recharge .result-badge.ok { background: var(--sw-ok); }
body.page-recharge .result-badge.bad { background: var(--sw-bad); }
body.page-recharge .success-title,
body.page-recharge .failed-title { font-size: 22px; margin: 4px 0 12px; }
body.page-recharge .success-message,
body.page-recharge .failed-message,
body.page-recharge .timeout-text {
  font-size: 14px; line-height: 1.6; color: var(--sw-ink); margin: 8px 0 16px;
}
body.page-recharge .result-actions {
  display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 16px;
}
body.page-recharge .result-actions .btn-sw-primary,
body.page-recharge .result-actions .btn-sw-ghost {
  flex: 1 1 auto; text-align: center;
}
/* PE.23 · ghost 按钮本身是 inline-flex，默认 justify-content:flex-start 会让文字
   贴左对齐（尤其是被 flex 拉长时），这里强制居中，与 primary 视觉一致 */
body.page-recharge .result-actions .btn-sw-ghost {
  justify-content: center;
}
body.page-recharge .result-info {
  border-top: 1px dashed var(--sw-line-soft);
  padding-top: 12px; font-family: var(--sw-mono);
  font-size: 11px; color: var(--sw-ink-soft);
}
body.page-recharge .result-info code {
  background: var(--sw-ink); color: #fff; padding: 2px 6px;
  font-family: var(--sw-mono);
}

body.page-recharge .hidden { display: none !important; }

/* Spinner (for processing state) */
body.page-recharge .spinner-wrapper { display: flex; justify-content: center; padding: 8px 0; }
body.page-recharge .spinner {
  width: 24px; height: 24px;
  border: 2px solid var(--sw-line-soft);
  border-top-color: var(--sw-ink);
  border-radius: 50%;
  animation: sw-spin-recharge 0.9s linear infinite;
}
body.page-recharge .spinner-lg { width: 32px; height: 32px; }
@keyframes sw-spin-recharge { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  body.page-recharge .spinner { animation: none; }
}

/* Mobile */
@media (max-width: 640px) {
  body.page-recharge .stepper-label { display: none; }
  body.page-recharge .stepper-item { justify-content: center; padding: 12px 4px; }
  body.page-recharge .step-card { padding: 20px; }
}