* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: #f6f3ee;
  color: #7b5332;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.app { max-width: 720px; margin: 0 auto; padding: 0 16px 40px; }

/* ===== 水印 ===== */
.watermark {
  position: fixed; right: 12px; bottom: 12px; z-index: 0;
  width: 120px; height: auto; opacity: 0.06; pointer-events: none;
}

/* ===== 顶栏 / 进度 ===== */
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(246, 243, 238, 0.96);
  backdrop-filter: blur(8px);
  padding: 12px 0 8px;
}
.brand { font-weight: 700; font-size: 14px; color: #7b5332; margin-bottom: 8px; letter-spacing: .3px; }
.progress-wrap { height: 4px; background: #e5e2d8; border-radius: 99px; overflow: hidden; }
.progress-bar {
  height: 100%; width: 0%;
  background: #d29426;
  border-radius: 99px; transition: width .35s ease;
}
.progress-text { font-size: 11px; color: #a0957a; margin-top: 4px; text-align: right; }

/* ===== 卡片 ===== */
.card {
  background: #fff; border-radius: 12px; padding: 28px 22px; margin-top: 14px;
  box-shadow: 0 1px 8px rgba(123, 83, 50, 0.05);
  animation: fadeUp .3s ease;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.part-badge {
  display: inline-block; background: #f0ede6; color: #7b5332;
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 6px; margin-bottom: 14px;
  letter-spacing: .5px; text-transform: uppercase;
}
h1.hero-title { font-size: 22px; line-height: 1.4; margin-bottom: 10px; font-weight: 700; }
h2.question-title { font-size: 17px; line-height: 1.5; margin-bottom: 8px; font-weight: 700; }
.desc { color: #a0957a; font-size: 13px; line-height: 1.8; margin-bottom: 18px; }
.desc strong { color: #d29426; }
.hero-emoji { font-size: 40px; text-align: center; margin-bottom: 6px; }

/* ===== 选项按钮 ===== */
.options { margin-top: 2px; }
.option {
  display: flex; align-items: center; width: 100%; text-align: left;
  background: #fff; border: 1px solid #e5e2d8; border-radius: 10px;
  padding: 12px 14px; font-size: 14px; color: #7b5332; cursor: pointer;
  margin-bottom: 8px; transition: all .12s ease; font-family: inherit; line-height: 1.5;
}
.option:hover { border-color: #d29426; background: #faf7f0; }
.option.selected { border-color: #d29426; background: #d29426; color: #fff; font-weight: 600; }
.option .letter {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid #ddd8cc; color: #a0957a; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-right: 10px; transition: all .12s;
}
.option.selected .letter { border-color: #fff; color: #fff; background: rgba(255,255,255,.18); }
.option .box {
  flex: none; width: 20px; height: 20px; border-radius: 6px;
  border: 1px solid #ddd8cc; margin-right: 10px; position: relative; transition: all .12s;
}
.option.selected .box { border-color: #fff; background: rgba(255,255,255,.18); }
.option.selected .box::after {
  content: "✓"; position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700;
}
.multi-hint { font-size: 11px; color: #a0957a; margin: 0 0 10px; }

/* ===== 数字输入 ===== */
.num-wrap {
  display: flex; align-items: center; gap: 10px; background: #faf7f0;
  border: 1px solid #e5e2d8; border-radius: 10px; padding: 10px 14px;
}
.num-wrap input {
  flex: 1; border: none; background: transparent; font-size: 18px; font-weight: 700;
  color: #7b5332; outline: none; font-family: inherit; min-width: 0;
}
.num-wrap span { color: #a0957a; font-size: 13px; }
.num-note { font-size: 12px; color: #a0957a; margin-top: 6px; line-height: 1.6; }

/* ===== 反馈条 ===== */
.feedback {
  border-radius: 10px; padding: 14px 16px; margin-top: 14px;
  font-size: 13px; line-height: 1.85; animation: fadeUp .25s ease;
}
.feedback.warn { background: #f5f0e6; border: 1px solid #e5e0cc; color: #8a7b5a; }
.feedback.good { background: #f0f1ec; border: 1px solid #d8ddd0; color: #5a6348; }
.feedback.medical { background: #f5ecec; border: 1px solid #e5d0d0; color: #8a4a4a; }
.feedback h4 { font-size: 14px; margin-bottom: 5px; font-weight: 700; }
.feedback ul { margin: 6px 0 0 16px; }

/* ===== 按钮 ===== */
.btn-row { display: flex; gap: 10px; margin-top: 22px; }
.btn {
  flex: 1; padding: 12px 14px; border: none; border-radius: 10px;
  font-size: 15px; font-weight: 600; cursor: pointer; transition: all .12s ease;
  font-family: inherit; text-decoration: none; text-align: center; display: inline-block;
}
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: #d29426; color: #fff; }
.btn-primary:hover:not(:disabled) { background: #b87d1a; }
.btn-ghost { background: #f0ede6; color: #a0957a; }
.btn-ghost:hover:not(:disabled) { background: #e5e0d8; }
.btn-green { background: #717a5c; color: #fff; }
.btn-green:hover { background: #5e664d; }
.btn-red { background: #9e5154; color: #fff; }
.btn-red:hover { background: #7f4143; }

/* ===== 结果页 ===== */
.result-badge {
  width: 52px; height: 52px; border-radius: 50%; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.result-badge.green { background: #f0f1ec; }
.result-badge.yellow { background: #f5f0e6; }
.result-badge.red { background: #f5ecec; }
.result-badge.blue { background: #f0f1ec; }
.result-title { font-size: 19px; text-align: center; line-height: 1.5; margin-bottom: 10px; font-weight: 700; }
.result-sub { text-align: center; color: #a0957a; font-size: 12px; margin-bottom: 18px; }
.result-body { font-size: 14px; line-height: 1.85; color: #7b5332; }
.result-body h4 { margin: 16px 0 6px; font-size: 14px; color: #7b5332; font-weight: 700; }
.result-body h4:first-child { margin-top: 0; }
.result-body ul, .result-body ol { padding-left: 18px; }
.result-body li { margin-bottom: 5px; }
.todo-list { list-style: none; padding-left: 0 !important; }
.todo-list li {
  background: #faf7f0; border: 1px solid #e5e2d8; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px; position: relative; padding-left: 36px;
}
.todo-list li::before {
  content: "☐"; position: absolute; left: 12px; top: 10px; font-size: 14px; color: #d29426;
}
.highlight-box {
  background: #f5f0e6; border: 1px solid #e5e0cc; border-radius: 10px;
  padding: 14px 16px; margin: 14px 0; font-size: 13px; line-height: 1.8; color: #8a7b5a;
}
.cta-box {
  background: #faf7f0; border: 1px solid #e5e2d8;
  border-radius: 12px; padding: 18px; margin-top: 18px;
}
.cta-box h4 { color: #7b5332; margin-bottom: 5px; font-size: 14px; }
.cta-box p { font-size: 12px; color: #a0957a; line-height: 1.7; margin-bottom: 12px; }
.qrcode-wrap { text-align: center; margin-top: 10px; }
.qrcode-wrap img { max-width: 180px; border-radius: 8px; box-shadow: 0 2px 10px rgba(123,83,50,0.08); }
.qrcode-caption { font-size: 12px; color: #a0957a; margin-top: 8px; }
.record-grid { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 8px 0; }
.record-item {
  background: #faf7f0; border: 1px dashed #ddd8cc; border-radius: 8px;
  padding: 8px 10px; font-size: 12px; color: #8a7b5a; line-height: 1.6;
}
.record-item b { color: #7b5332; }

/* ===== 开场 ===== */
.intro-lead { font-size: 14px; line-height: 1.9; color: #7b5332; margin-bottom: 16px; }
.intro-box {
  background: #faf7f0; border: 1px solid #e5e2d8; border-radius: 10px;
  padding: 14px 16px; margin-bottom: 12px;
}
.intro-box h4 { font-size: 13px; color: #7b5332; margin-bottom: 5px; font-weight: 700; }
.intro-box p { font-size: 13px; color: #8a7b5a; line-height: 1.75; }
.quote {
  border-left: 3px solid #c6c49d; background: #faf7f0; border-radius: 0 10px 10px 0;
  padding: 12px 14px; margin: 14px 0; font-size: 13px; color: #8a7b5a; line-height: 1.8;
}
.time-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #f0ede6; color: #7b5332; font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 99px; margin-bottom: 14px;
}

.footnote { text-align: center; color: #c6c49d; font-size: 11px; margin-top: 18px; line-height: 1.7; }

/* ===== 隐私声明 ===== */
.privacy-notice {
  background: #f5ecec; border: 1px dashed #e5d0d0; border-radius: 10px;
  padding: 12px 14px; margin-top: 18px; font-size: 12px; line-height: 1.8;
  color: #9e5154;
}
.privacy-notice b { color: #7b5332; }

@media (max-width: 560px) {
  .card { padding: 20px 16px; }
  h1.hero-title { font-size: 19px; }
  h2.question-title { font-size: 16px; }
  .btn-row { flex-direction: column-reverse; }
  .watermark { width: 80px; }
}