/* ============================================================================
   redeem.css —— 前台「兑换码」：顶部胶囊 tab + 兑换面板 + 兑换动画
   加入：第三十三轮（兑换码功能）
   作用域：body:not(.adm-mode) —— 与 mm.css 里 .upx-* 同一套写法，
          保证只影响用户前台，绝不串到后台管理页。
   依赖变量：全部来自 mm.css 的 :root（--mm-blue / --bg-card / --mm-hair …），
          不自造颜色，主题改了自动跟着走。
   ============================================================================ */

/* ── 顶部胶囊 tab：会员套餐 / 兑换码 ────────────────────────────────── */
body:not(.adm-mode) .upx-caps {
  position: relative; display: flex; width: max-content; margin: 0 auto 26px;
  padding: 4px; gap: 2px;
  background: var(--bg-input);
  border: 1px solid var(--mm-hair);
  border-radius: 999px;
}
body:not(.adm-mode) .upx-caps-ind {
  position: absolute; top: 4px; bottom: 4px; left: 0; width: 0;
  background: var(--mm-blue); border-radius: 999px;
  transition: transform 320ms var(--mm-ease-drawer), width 320ms var(--mm-ease-drawer);
}
body:not(.adm-mode) .upx-caps-btn {
  position: relative; z-index: 1;
  border: 0; background: none; cursor: pointer;
  padding: 8px 22px; border-radius: 999px;
  font-family: inherit; font-size: 0.875rem; font-weight: 560;
  color: var(--text-muted);
  transition: color 220ms ease;
}
body:not(.adm-mode) .upx-caps-btn.active { color: #fff; }

/* tab 切换时另一面整体淡入（只动 opacity/transform，不触发重排） */
body:not(.adm-mode) .upx-view[hidden] { display: none; }
body:not(.adm-mode) .upx-view.is-enter { animation: upxCapsIn 260ms var(--mm-ease-out) both; }
@keyframes upxCapsIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── 兑换面板 ──────────────────────────────────────────────────────── */
body:not(.adm-mode) .rdx { max-width: 440px; margin: 0 auto; }
body:not(.adm-mode) .rdx-hero { margin-bottom: 26px; text-align: center; }
body:not(.adm-mode) .rdx-cap {
  margin: 0 0 10px; font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.14em; color: var(--text-muted);
}
body:not(.adm-mode) .rdx-title {
  margin: 0; font-size: 1.75rem; font-weight: 650;
  letter-spacing: -0.028em; line-height: 1.1; color: var(--text-primary);
}
body:not(.adm-mode) .rdx-sub {
  margin: 12px auto 0; max-width: 340px;
  font-size: 0.875rem; line-height: 1.65; color: var(--text-secondary);
}
body:not(.adm-mode) .rdx-card {
  padding: 22px;
  background: var(--bg-card);
  border: 1px solid var(--mm-hair); border-radius: 16px;
}
body:not(.adm-mode) .rdx-label {
  display: block; margin-bottom: 8px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em;
  color: var(--text-muted);
}
body:not(.adm-mode) .rdx-input {
  width: 100%; box-sizing: border-box;
  padding: 14px 16px;
  background: var(--bg-input);
  border: 1px solid var(--mm-hair); border-radius: 12px;
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.9375rem; font-weight: 560; letter-spacing: 0.08em; text-transform: uppercase;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
body:not(.adm-mode) .rdx-input::placeholder { color: var(--text-muted); font-weight: 400; letter-spacing: 0.06em; }
body:not(.adm-mode) .rdx-input:focus {
  outline: none; border-color: var(--mm-blue);
  box-shadow: 0 0 0 3px var(--mm-blue-soft);
}
body:not(.adm-mode) .rdx-input.is-bad { border-color: var(--u-crit); box-shadow: 0 0 0 3px rgba(239, 83, 80, 0.18); }
body:not(.adm-mode) .rdx-input.is-bad { animation: rdxShake 340ms var(--mm-ease-out); }
body:not(.adm-mode) .rdx-err {
  margin: 10px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--u-crit-text);
}
@keyframes rdxShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

/* ── 兑换按钮：三个「面」（兑换 / 转圈 / 打勾）叠在同一个按钮里 ──────── */
body:not(.adm-mode) .rdx-btn {
  position: relative; margin-top: 16px; width: 100%; min-height: 50px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--mm-blue); color: #fff;
  font-family: inherit; font-size: 1rem; font-weight: 620; letter-spacing: 0.01em;
  transition: transform 160ms var(--mm-ease-out), background 220ms ease, opacity 180ms ease;
}
@media (hover: hover) and (pointer: fine) {
  body:not(.adm-mode) .rdx-btn:not(:disabled):hover { opacity: 0.92; }
}
body:not(.adm-mode) .rdx-btn:not(:disabled):active { transform: scale(0.98); }
body:not(.adm-mode) .rdx-btn:disabled { cursor: default; }
body:not(.adm-mode) .rdx-btn.is-busy { background: var(--mm-blue-deep); }
body:not(.adm-mode) .rdx-btn.is-done { background: #2ea043; }

body:not(.adm-mode) .rdx-btn-face { display: none; align-items: center; justify-content: center; gap: 9px; }
body:not(.adm-mode) .rdx-btn .rdx-face-idle { display: inline-flex; }
body:not(.adm-mode) .rdx-btn.is-busy .rdx-face-idle,
body:not(.adm-mode) .rdx-btn.is-done .rdx-face-idle,
body:not(.adm-mode) .rdx-btn.is-busy .rdx-face-done,
body:not(.adm-mode) .rdx-btn.is-done .rdx-face-busy { display: none; }
body:not(.adm-mode) .rdx-btn.is-busy .rdx-face-busy { display: inline-flex; }
body:not(.adm-mode) .rdx-btn.is-done .rdx-face-done { display: inline-flex; }

/* 转圈：底环常驻 + 一小段高亮弧转 */
body:not(.adm-mode) .rdx-spin { width: 22px; height: 22px; animation: rdxSpin 760ms linear infinite; }
body:not(.adm-mode) .rdx-spin circle { fill: none; stroke: rgba(255, 255, 255, 0.28); stroke-width: 3; }
body:not(.adm-mode) .rdx-spin path {
  fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 42 100;
}
@keyframes rdxSpin { to { transform: rotate(360deg); } }

/* 打勾：走一段描边动画，不是直接蹦出来 */
body:not(.adm-mode) .rdx-check { width: 24px; height: 24px; }
body:not(.adm-mode) .rdx-check path {
  fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 30; stroke-dashoffset: 30;
  animation: rdxDraw 440ms var(--mm-ease-out) 60ms forwards;
}
@keyframes rdxDraw { to { stroke-dashoffset: 0; } }

body:not(.adm-mode) .rdx-tip {
  margin: 16px 0 0; text-align: center;
  font-size: 0.75rem; line-height: 1.7; color: var(--text-muted);
}

/* ── 成功弹窗（复用 core.js 的 .modal-sheet 外壳，内容自己排版）───────── */
body:not(.adm-mode) .rdx-done { padding: 10px 4px 4px; text-align: center; }
body:not(.adm-mode) .rdx-done-mark {
  width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(46, 160, 67, 0.15); color: #2ea043;
  animation: rdxPop 360ms var(--mm-ease-out) both;
}
body:not(.adm-mode) .rdx-done-mark svg { width: 34px; height: 34px; }
body:not(.adm-mode) .rdx-done-mark path {
  fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 30; stroke-dashoffset: 30;
  animation: rdxDraw 460ms var(--mm-ease-out) 160ms forwards;
}
@keyframes rdxPop { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
body:not(.adm-mode) .rdx-done h3 { margin: 0 0 10px; font-size: 1.125rem; font-weight: 650; color: var(--text-primary); }
body:not(.adm-mode) .rdx-done p { margin: 0 0 6px; font-size: 0.875rem; line-height: 1.65; color: var(--text-secondary); }
body:not(.adm-mode) .rdx-done b { color: var(--text-primary); font-weight: 650; }
body:not(.adm-mode) .rdx-done-btn {
  margin-top: 18px; width: 100%; min-height: 46px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--mm-blue); color: #fff;
  font-family: inherit; font-size: 0.9375rem; font-weight: 600;
}
body:not(.adm-mode) .rdx-done-btn:active { transform: scale(0.98); }

@media (max-width: 899px) {
  body:not(.adm-mode) .rdx-title { font-size: 1.5rem; }
  body:not(.adm-mode) .rdx-card { padding: 18px; }
}

/* 尊重「减少动态效果」：转圈保留（它是功能反馈），抖动/描边/位移一律去掉 */
@media (prefers-reduced-motion: reduce) {
  body:not(.adm-mode) .upx-caps-ind,
  body:not(.adm-mode) .upx-view.is-enter,
  body:not(.adm-mode) .rdx-input.is-bad,
  body:not(.adm-mode) .rdx-done-mark,
  body:not(.adm-mode) .rdx-check path,
  body:not(.adm-mode) .rdx-done-mark path { animation: none; transition: none; }
  body:not(.adm-mode) .rdx-check path,
  body:not(.adm-mode) .rdx-done-mark path { stroke-dashoffset: 0; }
}