:root {
  --bg: #f8f8f8;
  --ink: #333;
  --muted: rgba(0,0,0,.45);
  --brand: #89f800;
  --danger: #ff0028;
  --phone-w: 375px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100vh;
  background: #e9e9e9;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
}
.phone {
  width: min(100vw, var(--phone-w));
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg);
}
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  height: 48px; padding: 0 8px;
  background: #fff; border-bottom: 1px solid #f0f0f0;
}
.top h1 { font-size: 17px; font-weight: 600; }
.back {
  width: 40px; height: 40px; border: 0; background: transparent;
  font-size: 28px; line-height: 1; color: var(--ink); cursor: pointer;
}
.top-spacer { width: 40px; }
.main { padding: 12px 16px 32px; }
.card {
  background: #fff; border-radius: 10px; padding: 14px;
  margin-bottom: 10px;
}
.card h2 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.hint, .sub { font-size: 12px; color: var(--muted); }
.sub { text-align: center; margin-top: 12px; }
.new-tip {
  margin-top: 10px; padding: 8px 10px; border-radius: 8px;
  background: rgba(255,0,40,.08); color: var(--danger); font-size: 12px;
}
.qr-box {
  margin-top: 16px; min-height: 220px;
  display: flex; align-items: center; justify-content: center;
  background: #f7f8fa; border-radius: 12px;
}
.qr-box img {
  width: 200px; height: 200px; object-fit: contain;
  background: #fff; border-radius: 8px; padding: 8px;
}
.qr-loading, .qr-empty, .qr-error { font-size: 13px; color: var(--muted); }
.qr-error { color: var(--danger); }
.faq-item + .faq-item { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f2f2f2; }
.faq .q { font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.faq .a { font-size: 12px; color: var(--muted); line-height: 1.5; }