/* redeem.css —— 兑换页样式（docs/233 起，本轮统一为站点「萌宠元宝」浅色玻璃卡风格）
 *
 * 口径：
 *   ① 站点不出现任何交易类内容 —— 本文件只管样式，不动文案。
 *   ② 类名与 id 是 redeem.js 的接口，**不许改**（card/tabs/tab/field/help/machine-row/
 *      btn.btn.small/btn.primary/msg/result/steps/warn/hidden/noscript/footer）。
 *
 * ⚠️ 本轮修的坑：原先写了 @media (prefers-color-scheme: dark){ --paper:#23262B … }，
 *    在系统深色主题下整页变成深色卡片（用户报告"兑换页是黑色的"），
 *    而外层站点是暖色动态背景 → 一深一浅割裂。
 *    现在用 color-scheme:light 锁定浅色：既不再跟随系统深色，也阻止浏览器把
 *    input/textarea/滚动条按深色主题重绘。
 */
:root {
  color-scheme: light;

  /* 与站点 make-site.py 的 :root 对齐 */
  --ink: #2E2A26;
  --ink2: #6B625A;
  --dim: #A79B8E;
  --gold: #E0A62B;
  --coral: #FF8A5B;
  --pink: #FF7AB6;
  --jade: #3FC7B0;

  --line: rgba(255, 255, 255, .9);
  --card: rgba(255, 255, 255, .88);

  --accent: #B4791A;        /* 链接/强调：白底上 3.7:1（大字够用） */
  --accent-ink: #9A5A0F;    /* 小字号强调：白底上 5.5:1 */
  --grad: linear-gradient(120deg, #C77800, #D9531B 55%, #D6336C);  /* 白字压它 ≥3.4:1 */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* 透明：让站点那层动态光斑透上来（原来实色纸色把背景整个盖住了） */
  background: transparent;
  color: var(--ink);
  font-family: 'Microsoft YaHei UI', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* 卡片：与站点 .card 同款玻璃质感（白玻璃 + 顶部高光边 + 柔和投影） */
.card {
  position: relative;
  padding: 26px 30px 30px;
  max-width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(180, 150, 120, .16);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  backdrop-filter: blur(10px) saturate(1.15);
}
.card:before {
  content: '';
  position: absolute; left: 16%; right: 16%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95), transparent);
}
@media (min-width: 641px) { .card { max-width: 560px; margin: 28px auto 40px; } }
@media (max-width: 640px) { .card { margin: 12px; border-radius: 18px; padding: 22px 18px 26px; } }

h1 { font-size: 1.32rem; margin: 0 0 12px; color: #241F1B; letter-spacing: -.01em; }
h2 { font-size: 1.06rem; margin: 0 0 10px; color: #241F1B; }

/* 页签 */
.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tab {
  flex: 1;
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: var(--ink2);
  font-size: .95rem;
  font-family: inherit;
  padding: 8px 4px;
  cursor: pointer;
  transition: color .2s, box-shadow .2s, transform .2s;
}
.tab:hover { transform: translateY(-1px); }
.tab.active {
  border-color: transparent;
  color: #FFFFFF;
  font-weight: 700;
  background: linear-gradient(120deg, #FFC53D, #FF8A5B 52%, #FF6FA5);
  box-shadow: 0 10px 24px rgba(255, 138, 91, .32);
}

/* 表单 */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .9rem; margin-bottom: 4px; color: var(--ink2); }
.field input {
  width: 100%;
  min-height: 48px;
  font-size: 1rem;
  font-family: inherit;
  padding: 10px 12px;
  border: 1px solid rgba(226, 214, 198, .95);
  border-radius: 12px;
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
}
.field input:focus { outline: 2px solid var(--coral); outline-offset: 1px; border-color: transparent; }
.machine-row { display: flex; gap: 8px; }
.machine-row input { flex: 1; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }

.help { font-size: .85rem; margin-top: 6px; color: var(--ink2); }
.help summary { cursor: pointer; color: var(--accent); }
.help p { margin: 6px 0 0; }

/* 按钮：主按钮 ≥48px 高 */
.btn {
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(226, 214, 198, .95);
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  font-size: 1rem;
  font-family: inherit;
  padding: 10px 16px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s, opacity .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary {
  width: 100%;
  background: var(--grad);
  border-color: transparent;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 12px 28px rgba(214, 51, 108, .26);
}
.btn.small { min-height: 48px; padding: 10px 14px; border-radius: 12px; }
.btn:disabled { opacity: .55; cursor: default; transform: none; }

/* 提示区（失败/限速/网络异常） */
.msg {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(224, 166, 43, .55);
  color: var(--ink);
  background: rgba(255, 246, 226, .92);
  font-size: .95rem;
}

/* 成功结果区（同页替换，成功后表单隐藏） */
.result { margin-top: 22px; border-top: 1px solid rgba(226, 214, 198, .9); padding-top: 16px; }
.result textarea {
  width: 100%;
  min-height: 9.5rem;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .8rem;
  padding: 12px;
  border: 1px solid rgba(226, 214, 198, .95);
  border-radius: 12px;
  background: rgba(255, 255, 255, .95);
  color: var(--ink);
  resize: vertical;
  overflow: auto;
  word-break: break-all;
  margin-bottom: 10px;
}
.steps { padding-left: 20px; font-size: .92rem; color: var(--ink2); }
.steps li { margin-bottom: 4px; }
.warn { font-size: .88rem; color: var(--accent-ink); }

footer { margin-top: 24px; font-size: .85rem; color: var(--dim); text-align: center; }

.noscript { padding: 16px; text-align: center; }

.hidden { display: none; }