:root {
  --bg: #FAF6EF;
  --bg-deep: #F1EADD;
  --card: #FFFFFF;
  --ink: #2B2622;
  --ink2: #6B6259;
  --ink3: #9C9288;
  --line: rgba(43, 38, 34, 0.12);
  --primary: #B03A2E;
  --primary-dark: #8C2B22;
  --primary-soft: #F7E8E5;
  --gold: #A88132;
  --gold-soft: #F5EDDA;
  --green: #4A7A5A;
  --radius: 12px;
  --radius-sm: 8px;
  /* 底栏预留高度：固定底栏实测 111px（两行按钮），再留 25px 呼吸空间，系统字体放大导致底栏多一行时也不遮挡；.phone 的 padding-bottom
     会同步叠加 env(safe-area-inset-bottom)，所以 iPhone 底栏加高时留白同步加高，两者不会互相遮挡 */
  --bar-h: 136px;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* 用 min-height 而非 height：height:100% 会把 .phone 压成视口高度，
   导致其 padding-bottom 不产生滚动空间，固定底栏因此遮挡末尾内容 */
html, body { min-height: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: var(--bg-deep);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  display: flex;
  justify-content: center;
}
.phone {
  width: 100%;
  max-width: 420px;
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom));
}
h1, h2, h3 { font-weight: 600; }
.card {
  background: var(--card);
  border: 0.5px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin: 0 16px 14px;
}
.btn-primary {
  display: block;
  width: calc(100% - 32px);
  margin: 0 16px;
  padding: 14px 0;
  border: none;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.btn-primary:active { background: var(--primary-dark); }
.btn-ghost {
  display: inline-block;
  padding: 8px 18px;
  border: 0.5px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink2);
  font-size: 13px;
  cursor: pointer;
}
.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 12px;
  margin-right: 6px;
}
.chip-gold { background: var(--gold-soft); color: var(--gold); }
.chip-gray { background: var(--bg-deep); color: var(--ink2); }
.seal {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 26px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(140, 43, 34, 0.25);
  flex-shrink: 0;
}
.divider { height: 0.5px; background: var(--line); margin: 14px 0; }
.price-strike { color: var(--ink3); text-decoration: line-through; font-size: 13px; }
.progress-wrap {
  height: 4px;
  background: var(--bg-deep);
  border-radius: 2px;
  overflow: hidden;
  margin: 0 16px;
}
.progress-bar { height: 100%; background: var(--primary); border-radius: 2px; transition: width 0.25s; }
.section-title { font-size: 16px; font-weight: 600; margin: 0 16px 10px; display: flex; align-items: center; gap: 8px; }
.section-title::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--primary); }
.muted { color: var(--ink2); font-size: 13px; }
.tiny { color: var(--ink3); font-size: 11px; }
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 420px;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  background: rgba(250, 246, 239, 0.95);
  backdrop-filter: blur(8px);
  border-top: 0.5px solid var(--line);
  z-index: 50;
}
#toast {
  position: fixed;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 320px;
  padding: 10px 18px;
  border-radius: 8px;
  background: rgba(43, 38, 34, 0.92);
  color: #fff;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 99;
  text-align: center;
}
#toast.show { opacity: 1; }
.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(43, 38, 34, 0.5);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 60;
}
.modal-mask.show { display: flex; }
.modal {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border-radius: 16px 16px 0 0;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  animation: slideUp 0.25s ease-out;
}
@keyframes slideUp { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.pay-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 0.5px solid var(--line);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  cursor: pointer;
}
.pay-option:active { background: var(--bg); }
.pay-dot { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink3); flex-shrink: 0; }
.fade-in { animation: fadeIn 0.4s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.locked-preview { filter: blur(5px); pointer-events: none; user-select: none; }

/* 可访问性兜底：键盘焦点可见 / 弱动效偏好，不改变默认观感 */
button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}