* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  background: #f2f4f8;
  color: #333;
  min-height: 100vh;
}
.page { max-width: 720px; margin: 0 auto; padding: 24px 16px 40px; }
.card {
  background: #fff;
  border-radius: 12px;
  padding: 28px 24px 32px;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
}
.form-title { font-size: 22px; text-align: center; margin-bottom: 18px; color: #1a1a2e; }

.notice {
  background: #fff8ef;
  border: 1px solid #f3d9b5;
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 22px;
  font-size: 13px;
  color: #7a5a26;
  line-height: 1.7;
}
.notice-title { font-weight: 600; margin-bottom: 6px; color: #8a6420; }
.notice ol { padding-left: 18px; }

.field { margin-bottom: 16px; }
.label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; color: #333; }
.label i { color: #e5484d; font-style: normal; }
.input {
  width: 100%;
  border: 1px solid #d5dae3;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
  background: #fff;
  font-family: inherit;
}
.input:focus { border-color: var(--accent, #3b82f6); }
textarea.input { resize: vertical; }

.check-group { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.check-item, .radio-item { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.radio-group { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.check-item input, .radio-item input { accent-color: var(--accent, #3b82f6); width: 16px; height: 16px; }

.submit-btn {
  width: 100%;
  background: var(--accent, #3b82f6);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 13px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
}
.submit-btn:hover { background: var(--accent, #3b82f6); filter: brightness(.9); }
.submit-btn:disabled { background: #a0b7d8; cursor: not-allowed; }

.modal-mask {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
}
.modal {
  background: #fff; border-radius: 12px; width: 100%; max-width: 500px;
  overflow: hidden; animation: pop .18s ease;
}
@keyframes pop { from { transform: scale(.95); opacity: .5; } to { transform: scale(1); opacity: 1; } }
.modal-head { position: relative; display: flex; align-items: center; justify-content: center; padding: 14px 18px; border-bottom: 1px solid #eee; }
.modal-title { font-size: 16px; font-weight: 600; color: #1a1a2e; }
.modal-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); border: none; background: none; font-size: 22px; cursor: pointer; color: #999; line-height: 1; }
.modal-close:hover { color: #333; }
.modal-body { padding: 22px 18px; text-align: center; }
.qr-tip { font-size: 14px; color: #333; line-height: 1.7; margin-bottom: 14px; }
.qr-tip b { color: #d4380d; }
.qr-img { width: 260px; height: 260px; object-fit: contain; border: 1px solid #eee; border-radius: 8px; background: #fff; }
.pay-methods { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0 0 16px; }
.pm-btn { background: #f1f3f7; border: 1px solid #dce1e8; color: #445; padding: 9px 20px; border-radius: 8px; font-size: 14px; cursor: pointer; transition: .15s; }
.pm-btn:hover { border-color: #16a34a; }
.pm-btn.active { background: #16a34a; border-color: #16a34a; color: #fff; }
.qr-note { font-size: 12px; color: #999; margin-top: 12px; line-height: 1.6; }
.success-check { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; }
.success-check span { color: #fff; font-size: 30px; line-height: 1; font-weight: 700; }

.footer { text-align: center; color: #999; font-size: 12px; margin-top: 18px; }