/* 手机优先，无框架 */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, "PingFang SC", "Noto Sans SC", sans-serif;
  background: linear-gradient(160deg, #1b1f3a 0%, #2a2050 60%, #3d1f4e 100%);
  color: #f0f0f8;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center;
}
.page { width: 100%; max-width: 480px; padding: 24px 20px 60px; flex: 1; }
.hidden { display: none !important; }

.hero { text-align: center; padding-top: 12vh; }
.title { font-size: 36px; font-weight: 800; background: linear-gradient(90deg, #ff9a56, #ff5d8f, #b565d9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.subtitle { margin: 16px 0 32px; font-size: 16px; line-height: 1.7; color: #c9c9e2; }
.hint { margin-top: 14px; font-size: 12px; color: #8a8ab0; }

.btn-primary { display: block; width: 100%; padding: 14px 0; border: none; border-radius: 12px; background: linear-gradient(90deg, #ff5d8f, #b565d9); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px rgba(255, 93, 143, 0.35); }
.btn-primary:active { transform: scale(0.98); }
.btn-ghost { display: block; width: 100%; padding: 12px 0; border: 1px solid #56567f; border-radius: 12px; background: transparent; color: #c9c9e2; font-size: 15px; cursor: pointer; }
.btn-link { display: block; margin: 16px auto 0; border: none; background: none; color: #8a8ab0; font-size: 13px; cursor: pointer; text-decoration: underline; }

.progress { margin-bottom: 24px; }
.progress span { font-size: 13px; color: #8a8ab0; }
.progress-bar { margin-top: 8px; height: 6px; border-radius: 3px; background: #2c2c52; overflow: hidden; }
#progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, #ff9a56, #ff5d8f); transition: width 0.3s; }

.question { font-size: 20px; line-height: 1.6; margin-bottom: 24px; min-height: 66px; }
.options { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.option { text-align: left; padding: 14px 16px; border: 1px solid #3a3a6a; border-radius: 12px; background: rgba(255,255,255,0.04); color: #e4e4f2; font-size: 15px; line-height: 1.5; cursor: pointer; transition: all 0.15s; }
.option:active { background: rgba(181, 101, 217, 0.25); border-color: #b565d9; }
.option.selected { background: rgba(181, 101, 217, 0.3); border-color: #b565d9; }

.card { text-align: center; padding: 32px 20px; border-radius: 16px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); margin-bottom: 16px; }
.card .emoji { font-size: 56px; display: block; }
.card .pname { font-size: 26px; font-weight: 800; margin: 12px 0 8px; }
.result-summary { font-size: 15px; line-height: 1.8; color: #c9c9e2; text-align: center; margin-bottom: 20px; }
#btn-share { margin-bottom: 24px; }

.pay-box { border-radius: 16px; padding: 20px; background: rgba(255, 157, 86, 0.08); border: 1px solid rgba(255, 157, 86, 0.35); text-align: center; }
.pay-title { font-size: 18px; font-weight: 700; color: #ffb27a; }
.pay-desc { font-size: 13px; color: #c9c9e2; margin: 8px 0 16px; line-height: 1.6; }
.pay-note { margin-top: 10px; font-size: 11px; color: #8a8ab0; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 10; padding: 20px; }
.modal-box { width: 100%; max-width: 360px; border-radius: 16px; background: #26264a; padding: 24px; }
.modal-title { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.modal-body { font-size: 15px; line-height: 1.6; color: #e4e4f2; }
.modal-price { font-size: 17px; font-weight: 700; color: #ff9a56; margin: 10px 0 6px; }
.modal-note { font-size: 12px; color: #8a8ab0; margin-bottom: 18px; }
.modal-actions { display: flex; gap: 12px; }
.modal-actions .btn-primary { width: 60%; }
.modal-actions .btn-ghost { width: 40%; }

.footer { width: 100%; text-align: center; padding: 16px; font-size: 11px; color: #6d6d95; line-height: 1.8; }
.footer a { color: inherit; text-decoration: none; }