/* 纽崔莱营养顾问 · 样式 (styles.css) */
:root {
  --green: #2e7d5b;
  --green-light: #e8f3ec;
  --teal: #1f8a8a;
  --gold: #c79a3a;
  --bg: #f6f8f6;
  --card: #ffffff;
  --text: #233029;
  --muted: #6b7a72;
  --danger: #c0392b;
  --line: #dfe7e1;
  --shadow: 0 6px 22px rgba(46,125,91,.10);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 18px 16px 60px; }

/* Header */
.header {
  background: linear-gradient(135deg, var(--green), var(--teal));
  color: #fff; border-radius: 18px; padding: 26px 22px; box-shadow: var(--shadow);
}
.header h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: .5px; }
.header p { margin: 0; opacity: .92; font-size: 15px; }
.header .badge {
  display: inline-block; margin-top: 12px; background: rgba(255,255,255,.18);
  padding: 5px 12px; border-radius: 999px; font-size: 13px;
}

.disclaimer-bar {
  margin-top: 14px; background: #fff7e6; border: 1px solid #ffe1a8;
  color: #8a6100; border-radius: 12px; padding: 10px 14px; font-size: 13.5px;
}

/* Sections */
.section {
  background: var(--card); border-radius: 16px; padding: 18px 18px 20px;
  margin-top: 16px; box-shadow: var(--shadow);
}
.section h2 {
  margin: 0 0 14px; font-size: 19px; color: var(--green);
  display: flex; align-items: center; gap: 8px;
}
.section h2 .num {
  width: 26px; height: 26px; background: var(--green-light); color: var(--green);
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; flex: none;
}

.q-title { font-weight: 600; margin: 14px 0 8px; color: var(--text); }
.q-title:first-of-type { margin-top: 0; }

/* Radio / checkbox groups */
.opt-group { display: flex; flex-wrap: wrap; gap: 9px; }
.opt {
  border: 1.5px solid var(--line); border-radius: 12px; padding: 9px 14px;
  cursor: pointer; user-select: none; transition: .15s; background: #fcfdfc; font-size: 15.5px;
}
.opt:hover { border-color: var(--green); }
.opt input { display: none; }
.opt.checked {
  border-color: var(--green); background: var(--green-light); color: var(--green); font-weight: 600;
}

/* Symptom chips (multi-select) */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 14px;
  cursor: pointer; user-select: none; transition: .15s; background: #fcfdfc; font-size: 15px;
}
.chip:hover { border-color: var(--teal); }
.chip.checked { border-color: var(--teal); background: #e6f4f4; color: var(--teal); font-weight: 600; }

/* Free-text AI recognition */
.free-text-block { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.free-text {
  width: 100%; min-height: 80px; resize: vertical; font-family: inherit; font-size: 15.5px;
  border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--text);
  background: #fcfdfc; line-height: 1.6;
}
.free-text:focus { outline: none; border-color: var(--teal); }
.free-text-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.recognize-msg { font-size: 13px; color: var(--green); }
.recognize-msg.warn { color: var(--muted); }
.product-row .pdose {
  display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 8px;
  background: var(--green-light); color: var(--green); font-size: 13.5px; font-weight: 600;
}

/* 慢病 / 特定人群 · 培训方案参考 */
.cond-logic {
  background: var(--green-light); border-left: 3px solid var(--green);
  padding: 8px 12px; border-radius: 8px; font-size: 13px; color: #2f5d45; margin-bottom: 12px; line-height: 1.6;
}
.cond-item {
  border: 1px solid #e3efe7; border-radius: 12px; padding: 12px 14px; margin: 10px 0;
  background: #fcfefc;
}
.cond-item .pname { font-size: 15.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cond-tag {
  display: inline-block; font-size: 11.5px; font-weight: 600; color: #fff; background: var(--teal);
  border-radius: 999px; padding: 1px 9px;
}
.cond-item .pnote { font-size: 13.5px; margin-top: 4px; }
.cond-red { color: #b23b3b; }
.cond-red b { color: #b23b3b; }

/* Button */
.btn {
  display: block; width: 100%; margin-top: 20px; padding: 15px;
  background: var(--green); color: #fff; border: none; border-radius: 14px;
  font-size: 18px; font-weight: 700; cursor: pointer; transition: .15s; letter-spacing: 1px;
}
.btn:hover { background: #256a4d; }
.btn.gold { background: var(--gold); }
.btn.gold:hover { background: #b0862f; }
.btn.ghost { background: #fff; color: var(--green); border: 1.5px solid var(--green); }

/* Result */
#result { display: none; }
.card-block {
  background: var(--card); border-radius: 16px; padding: 20px 18px; margin-top: 16px;
  box-shadow: var(--shadow);
}
.card-block h3 {
  margin: 0 0 12px; font-size: 19px; color: var(--green);
  border-left: 5px solid var(--gold); padding-left: 10px;
}
.summary-line { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.summary-line:last-child { border-bottom: none; }
.tag {
  display: inline-block; background: var(--green-light); color: var(--green);
  border-radius: 8px; padding: 3px 9px; margin: 3px 4px 3px 0; font-size: 14px; font-weight: 600;
}
.tag.teal { background: #e6f4f4; color: var(--teal); }
.tag.gold { background: #fbf1da; color: var(--gold); }

.product-row {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 10px 0;
  background: #fcfdfc;
}
.product-row .pname { font-weight: 700; color: var(--green); font-size: 16.5px; }
.product-row .prole { color: var(--teal); font-size: 14px; margin: 2px 0; }
.product-row .pnote { color: var(--muted); font-size: 14px; }

.principle-item { padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.principle-item:last-child { border-bottom: none; }

.safety-box {
  background: #fdecea; border: 1px solid #f5c6c0; border-radius: 12px;
  padding: 14px 16px; margin-top: 16px; color: #8a2c20; font-size: 14.5px;
}
.safety-box ul { margin: 8px 0 0; padding-left: 20px; }
.safety-box li { margin: 4px 0; }

/* Paywall */
.paywall {
  background: linear-gradient(135deg, #fff8ec, #fdf0d8);
  border: 1.5px solid var(--gold); border-radius: 16px; padding: 20px 18px; margin-top: 16px;
  text-align: center;
}
.paywall h3 { color: var(--gold); margin: 0 0 6px; }
.paywall .price { font-size: 30px; font-weight: 800; color: var(--gold); margin: 6px 0; }
.paywall .price small { font-size: 15px; font-weight: 600; color: var(--muted); }
.paywall ul { text-align: left; display: inline-block; margin: 8px auto; padding-left: 20px; font-size: 14.5px; color: var(--text); }
.code-input {
  width: 100%; padding: 13px; border: 1.5px solid var(--line); border-radius: 12px;
  font-size: 17px; text-align: center; letter-spacing: 2px; margin-top: 12px; text-transform: uppercase;
}
.code-msg { font-size: 14px; margin-top: 8px; min-height: 20px; }
.code-msg.ok { color: var(--green); }
.code-msg.err { color: var(--danger); }
.note-small { font-size: 12.5px; color: var(--muted); margin-top: 10px; }

/* Paid content (hidden until unlocked) */
.paid-content { display: none; }
.paid-content.show { display: block; }

.plan-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14.5px; }
.plan-table th, .plan-table td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.plan-table th { background: var(--green-light); color: var(--green); }

.footer { text-align: center; color: var(--muted); font-size: 13px; margin-top: 26px; line-height: 1.9; }

/* Print / PDF */
@media print {
  body { background: #fff; font-size: 13px; }
  .header, .section, .paywall, .btn, .footer, .safety-box { box-shadow: none; }
  .paywall, .no-print { display: none !important; }
  .card-block, .paid-content { box-shadow: none; border: 1px solid #ccc; }
  .wrap { max-width: 100%; }
}

/* Responsive */
@media (max-width: 480px) {
  body { font-size: 16px; }
  .header h1 { font-size: 22px; }
  .opt, .chip { font-size: 14.5px; }
}

/* User bar / cloud banner */
.user-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 10px 2px 0; flex-wrap: wrap; }
.user-info { font-size: 13.5px; color: var(--green); font-weight: 600; }
.cloud-banner { background: #fff4e5; color: #8a5a00; border: 1px solid #f0d4a0; border-radius: 10px; padding: 8px 12px; font-size: 13px; margin: 10px 2px 0; }

.btn-mini { border: none; border-radius: 999px; padding: 7px 16px; font-size: 13.5px; cursor: pointer; background: var(--green); color: #fff; font-family: inherit; }
.btn-mini:hover { filter: brightness(1.05); }
.btn-mini:disabled { opacity: .6; cursor: default; }
.btn-mini.ghost { background: #fff; color: var(--green); border: 1px solid var(--green); }
.btn-mini.gold { background: var(--gold); color: #fff; }

/* Login modal */
.login-mask { position: fixed; inset: 0; background: rgba(20,40,30,.45); display: flex; align-items: center; justify-content: center; z-index: 999; padding: 16px; }
.login-card { background: #fff; border-radius: 16px; padding: 24px 22px; width: 100%; max-width: 360px; position: relative; box-shadow: var(--shadow); }
.login-card h3 { margin: 0 0 6px; color: var(--green); }
.login-close { position: absolute; top: 10px; right: 14px; border: none; background: transparent; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; }
.login-row { display: flex; gap: 8px; margin-top: 12px; }
.login-input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 15px; font-family: inherit; }
.login-input:focus { outline: none; border-color: var(--green); }
.login-err { font-size: 12.5px; color: var(--danger); margin-top: 6px; min-height: 1px; }
.login-err.show { min-height: 16px; }
.login-divider { text-align: center; color: var(--muted); font-size: 12.5px; margin: 16px 0 4px; position: relative; }
.login-divider::before, .login-divider::after { content: ""; position: absolute; top: 50%; width: 38%; height: 1px; background: var(--line); }
.login-divider::before { left: 0; } .login-divider::after { right: 0; }
.login-divider span { background: var(--bg); padding: 0 8px; }
.btn.wechat { width: 100%; background: #07c160; color: #fff; font-size: 15px; }
.btn.wechat:hover { background: #06ad56; }

/* Cloud actions */
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.saved-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; margin-top: 10px; font-size: 14px; flex-wrap: wrap; }
.saved-title { color: var(--text); }
.saved-ops { display: flex; gap: 6px; }

/* WeChat Pay button + code fold */
.btn.wxpay { width: 100%; background: #07c160; color: #fff; font-size: 16px; padding: 13px; margin-top: 4px; }
.btn.wxpay:hover { background: #06ad56; }
.code-fold { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.code-fold summary { cursor: pointer; user-select: none; }
.code-fold .code-input { margin-top: 10px; }
.code-fold .code-msg { margin-top: 6px; }
.code-fold .btn.gold { margin-top: 8px; }

/* My Plans history cards */
.saved-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 10px; background: #fff; }
.saved-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.saved-title { font-weight: 600; color: var(--green); }
.saved-date { font-size: 12px; color: var(--muted); white-space: nowrap; }
.saved-card-body { margin-top: 6px; }
.saved-line { font-size: 13.5px; color: var(--text); margin-top: 3px; }
.saved-ops { display: flex; gap: 6px; margin-top: 10px; justify-content: flex-end; }

/* 头像行可点击（个人中心入口） */
.user-info { cursor: pointer; }

/* 个人中心弹窗 */
.profile-mask { position: fixed; inset: 0; background: rgba(20,40,30,.45); display: flex; align-items: center; justify-content: center; z-index: 999; padding: 16px; }
.profile-card { background: #fff; border-radius: 16px; padding: 24px 22px; width: 100%; max-width: 360px; position: relative; box-shadow: var(--shadow); max-height: 86vh; overflow-y: auto; }
.profile-card h3 { margin: 0 0 14px; color: var(--green); }
.profile-head { display: flex; align-items: center; gap: 12px; }
.profile-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: #eef3ef; display: block; }
.profile-id { min-width: 0; }
.profile-name { font-size: 17px; font-weight: 600; color: var(--text); }
.profile-openid { font-size: 12px; color: var(--muted); margin-top: 3px; word-break: break-all; }
.profile-meta { font-size: 12px; color: var(--muted); margin-top: 10px; }
.profile-section { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.profile-section h4 { margin: 0 0 2px; color: var(--green); font-size: 14px; }
.profile-qline { font-size: 13.5px; color: var(--text); margin-top: 5px; line-height: 1.6; }
.profile-qline b { color: var(--green); }