/* ========== 今日食养台 · 浅国风 ========== */
:root{
  --paper:#F6F1E3;
  --card:#FDFBF4;
  --ink:#2A2723;
  --ink-2:#5C564B;
  --ink-3:#8A8172;
  --line:#D8CFB8;
  --gold:#A8742A;
  --gold-soft:#EFE3C8;
  --green:#4A7A5C;
  --red:#A33B2E;
  --blue:#3E5C76;
  --radius:14px;
  --serif:"Noto Serif SC","Songti SC","STSong","SimSun",serif;
  --sans:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.7;
  min-height:100vh;
}

/* ---- 顶栏 ---- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:calc(14px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) 14px max(20px,env(safe-area-inset-left,0px));
  border-bottom:1px solid var(--line);
  background:var(--card);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{
  width:34px;height:34px;border-radius:9px;
  background:var(--ink);color:var(--paper);
  font-family:var(--serif);font-size:19px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}
.brand-name{font-family:var(--serif);font-size:16px;font-weight:600;letter-spacing:.5px}
.elder-btn{
  border:1px solid var(--line);background:var(--paper);color:var(--ink-2);
  border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer;
  display:flex;align-items:center;gap:6px;
}
.elder-btn[aria-pressed="true"]{background:var(--gold-soft);border-color:var(--gold);color:var(--ink)}
.elder-icon{
  width:20px;height:20px;border-radius:50%;border:1.5px solid currentColor;
  font-size:12px;display:inline-flex;align-items:center;justify-content:center;
}

/* ---- 布局 ---- */
#app{max-width:640px;margin:0 auto;padding:22px max(18px,env(safe-area-inset-left,0px)) calc(40px + env(safe-area-inset-bottom,0px)) max(18px,env(safe-area-inset-right,0px))}
.view{animation:fadein .35s ease}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
[hidden]{display:none !important}

/* ---- 节气主卡 ---- */
.term-hero{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 26px 26px;text-align:center;position:relative;overflow:hidden;
}
.term-hero::before{
  content:"";position:absolute;inset:10px;border:1px solid var(--gold-soft);border-radius:8px;pointer-events:none;
}
.term-season{
  display:inline-block;font-family:var(--serif);font-size:13px;color:var(--gold);
  border:1px solid var(--gold);border-radius:999px;padding:2px 14px;margin-bottom:14px;letter-spacing:2px;
}
.term-name{
  font-family:var(--serif);font-size:52px;font-weight:600;letter-spacing:10px;
  text-indent:10px;line-height:1.2;
}
.term-principle{
  font-family:var(--serif);font-size:17px;color:var(--ink-2);margin-top:10px;letter-spacing:2px;
}
.term-detail{font-size:14px;color:var(--ink-3);margin-top:12px;max-width:420px;margin-left:auto;margin-right:auto}
.term-count{
  margin-top:18px;display:inline-block;font-size:13px;color:var(--gold);
  background:var(--gold-soft);border-radius:999px;padding:5px 16px;
}

/* ---- 内容块 ---- */
.block{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin-top:18px;
}
.block-title{
  font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:2px;
  display:flex;align-items:center;gap:10px;
}
.block-title::before{content:"";width:4px;height:18px;background:var(--gold);border-radius:2px}
.block-sub{font-size:13px;color:var(--ink-3);margin-top:6px}
.living-line{
  font-family:var(--serif);font-size:17px;color:var(--ink);margin-top:8px;letter-spacing:1px;
}

/* ---- 当令食材 ---- */
.food-list{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.food-list li{
  border:1px solid var(--line);border-radius:10px;padding:8px 14px;
  font-family:var(--serif);font-size:16px;background:var(--paper);
}
.food-list li small{display:block;font-size:11px;color:var(--ink-3);font-family:var(--sans);text-align:center;margin-top:2px}

/* ---- 按钮 ---- */
.cta-wrap{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.btn-primary{
  background:var(--ink);color:var(--paper);border:none;border-radius:12px;
  padding:16px 20px;font-size:17px;font-family:var(--serif);letter-spacing:2px;cursor:pointer;
}
.btn-primary:active{transform:scale(.98)}
.btn-ghost{
  background:transparent;color:var(--ink-2);border:1px solid var(--line);border-radius:12px;
  padding:13px 20px;font-size:14px;cursor:pointer;
}
.btn-share{
  background:var(--gold);color:#FFFDF6;border:none;border-radius:12px;
  padding:14px 20px;font-size:15px;font-family:var(--serif);letter-spacing:1px;cursor:pointer;
}
.btn-share:active{transform:scale(.98)}
body.elder .btn-share{font-size:19px;padding:17px}
.home-note{margin-top:18px;font-size:12px;color:var(--ink-3);text-align:center}

/* ---- 测试 ---- */
.quiz-progress{margin-bottom:22px}
.quiz-progress span{font-size:13px;color:var(--ink-3)}
.progress-bar{height:4px;background:var(--line);border-radius:2px;margin-top:8px;overflow:hidden}
.progress-fill{height:100%;background:var(--gold);width:0;transition:width .3s ease}
.quiz-question{
  font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.5;margin-bottom:20px;
}
.quiz-options{list-style:none;display:flex;flex-direction:column;gap:12px}
.quiz-options button{
  width:100%;text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:15px 18px;font-size:15px;color:var(--ink);cursor:pointer;
  transition:border-color .15s;
}
.quiz-options button:active{border-color:var(--gold);background:var(--gold-soft)}
#btnQuizBack{margin-top:18px}

/* ---- 食单结果 ---- */
.result-head{text-align:center;padding:10px 0 4px}
.result-term{font-family:var(--serif);font-size:15px;color:var(--gold);letter-spacing:2px}
.result-cons{
  font-family:var(--serif);font-size:34px;font-weight:600;letter-spacing:4px;margin-top:6px;
}
.meal-list{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:12px}
.meal-list li{
  border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--paper);
}
.meal-tag{
  display:inline-block;font-size:12px;color:var(--gold);border:1px solid var(--gold);
  border-radius:999px;padding:1px 10px;margin-bottom:6px;letter-spacing:1px;
}
.meal-title{font-family:var(--serif);font-size:17px;font-weight:600}
.meal-why{font-size:13px;color:var(--ink-2);margin-top:4px}
.meal-detail{margin-top:10px}
.meal-detail summary{
  font-size:13px;color:var(--gold);cursor:pointer;list-style:none;
  display:inline-block;border:1px solid var(--gold);border-radius:999px;padding:3px 14px;
}
.meal-detail summary::-webkit-details-marker{display:none}
.meal-detail summary::before{content:"▸ ";font-size:11px}
.meal-detail[open] summary::before{content:"▾ "}
.steps{margin:10px 0 0 0;padding-left:20px;font-size:13.5px;color:var(--ink-2);line-height:1.9}
.elder-tip,.suit-tip{font-size:12.5px;color:var(--ink-3);margin-top:8px;line-height:1.8}
.suit-tip{color:var(--red)}
.warn-block{border-color:#E4C9A8;background:#FBF6EA}
.avoid-list{list-style:none;margin-top:12px;display:flex;flex-direction:column;gap:8px}
.avoid-list li{font-size:14px;color:var(--ink-2);padding-left:18px;position:relative}
.avoid-list li::before{content:"·";position:absolute;left:4px;color:var(--gold);font-weight:700}
.ing-list{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:10px}
.ing-list li{border-bottom:1px dashed var(--line);padding-bottom:10px}
.ing-name{font-family:var(--serif);font-size:16px;font-weight:600}
.ing-nature{
  display:inline-block;font-size:12px;border-radius:4px;padding:0 8px;margin-left:8px;
  background:var(--gold-soft);color:var(--gold);
}
.ing-tip{font-size:13px;color:var(--ink-2);margin-top:3px}
.result-disclaimer{margin-top:16px;font-size:12px;color:var(--ink-3);line-height:1.8}

/* ---- 页脚 ---- */
.footer{
  border-top:1px solid var(--line);padding:22px 20px calc(30px + env(safe-area-inset-bottom,0px));text-align:center;
  font-size:12px;color:var(--ink-3);line-height:2;background:var(--card);
}

/* ========== 适老模式 ========== */
body.elder{font-size:17px}
body.elder .topbar{padding:16px 22px}
body.elder .brand-name{font-size:19px}
body.elder .elder-btn{font-size:15px;padding:9px 18px}
body.elder .term-name{font-size:64px}
body.elder .term-principle{font-size:20px}
body.elder .term-detail{font-size:16px}
body.elder .term-count{font-size:15px}
body.elder .block{padding:24px}
body.elder .block-title{font-size:21px}
body.elder .block-sub,body.elder .living-line{font-size:16px}
body.elder .living-line{font-size:20px}
body.elder .food-list li{font-size:19px;padding:10px 18px}
body.elder .food-list li small{font-size:13px}
body.elder .btn-primary{font-size:20px;padding:19px}
body.elder .btn-ghost{font-size:17px;padding:16px}
body.elder .quiz-question{font-size:24px}
body.elder .quiz-options button{font-size:18px;padding:18px 20px}
body.elder .result-cons{font-size:40px}
body.elder .meal-title{font-size:20px}
body.elder .meal-why,body.elder .avoid-list li,body.elder .ing-tip{font-size:16px}
body.elder .ing-name{font-size:19px}
body.elder .footer{font-size:14px}
body.elder .food-list li,body.elder .meal-list li,body.elder .ing-list li{border-width:2px}

@media (max-width:480px){
  .term-name{font-size:44px}
  body.elder .term-name{font-size:54px}
  #app{padding:16px 14px 32px}
  .date-bar .d-date{font-size:21px}
  .tizhi-title{font-size:20px}
}

/* ========== 顶部日期条 ========== */
.date-bar{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--gold-soft),#F7EFD9);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:12px 16px;margin-bottom:16px;position:relative;overflow:hidden;
}
.date-bar::after{
  content:"";position:absolute;inset:5px;border:1px solid rgba(168,116,42,.35);border-radius:10px;pointer-events:none;
}
.date-bar .d-date{
  font-family:var(--serif);font-size:25px;font-weight:600;color:var(--ink);letter-spacing:3px;
}
.date-bar .d-week{
  font-size:12px;color:var(--gold);margin-top:3px;letter-spacing:4px;
}

/* ========== 体质说明入口 ========== */
.tizhi-entry{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--gold);border-radius:var(--radius);
  padding:14px 16px;margin-top:18px;cursor:pointer;
  box-shadow:0 2px 12px rgba(168,116,42,.10);
  transition:transform .12s,background .12s;
}
.tizhi-entry:active{transform:scale(.99);background:var(--gold-soft)}
.tizhi-entry-ico{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  background:var(--gold);color:#FFFDF6;font-size:20px;
  display:flex;align-items:center;justify-content:center;
}
.tizhi-entry-txt{flex:1 1 auto;display:flex;flex-direction:column;gap:3px;min-width:0}
.tizhi-entry-txt strong{font-family:var(--serif);font-size:16px;color:var(--ink);font-weight:600}
.tizhi-entry-txt small{font-size:12px;color:var(--ink-3)}
.tizhi-entry-arrow{flex:0 0 auto;color:var(--gold);font-size:28px;line-height:1}

/* ========== 体质说明页 ========== */
.tizhi-head{padding:6px 2px 4px}
.back-btn{
  background:transparent;border:1px solid var(--line);border-radius:999px;
  padding:7px 16px;font-size:13px;color:var(--ink-2);cursor:pointer;margin-bottom:16px;
  display:inline-flex;align-items:center;gap:4px;
}
.back-btn:active{background:var(--gold-soft);border-color:var(--gold)}
.tizhi-title{
  font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:1px;line-height:1.4;
}
.tizhi-intro{
  font-size:14px;color:var(--ink-2);line-height:1.9;margin-top:10px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;
}
.tizhi-list{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.tz-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
}
.tz-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tz-name{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink)}
.tz-tag{font-size:11px;padding:2px 10px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.tz-good{color:var(--green)} .tz-qi{color:var(--blue)} .tz-yang{color:#C0392B}
.tz-yin{color:#B5651D} .tz-tan{color:#7D5B3A} .tz-re{color:#1F7A6D}
.tz-xue{color:#8E44AD} .tz-qi2{color:#2E7D5B} .tz-te{color:var(--gold)}
.tz-mean{font-size:14px;color:var(--ink);margin-top:8px;line-height:1.7}
.tz-rows{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.tz-row{display:flex;gap:10px;align-items:flex-start}
.tz-k{
  flex:0 0 62px;font-size:12px;color:#FFFDF6;background:var(--ink-3);
  border-radius:6px;padding:4px 0;text-align:center;line-height:1.3;
}
.tz-tip .tz-k{background:var(--gold)}
.tz-v{font-size:13.5px;color:var(--ink-2);line-height:1.7;flex:1 1 auto;min-width:0}
.tizhi-foot{margin-top:24px;text-align:center}
.tizhi-foot>p{font-size:14px;color:var(--ink-2);margin-bottom:14px;line-height:1.8}
.tizhi-disclaimer{font-size:12px;color:var(--ink-3);margin-top:16px;line-height:1.8}

/* ========== 移动端触摸优化 ========== */
button{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
.btn-primary,.btn-ghost,.btn-share,.elder-btn,.tizhi-entry,.back-btn,.quiz-options button,.tizhi-entry *{user-select:none;-webkit-user-select:none}

/* 适老模式下放大体质说明页 */
body.elder .tizhi-title{font-size:27px}
body.elder .tizhi-intro{font-size:16px}
body.elder .tz-name{font-size:22px}
body.elder .tz-mean{font-size:16px}
body.elder .tz-v{font-size:16px}
body.elder .tizhi-entry-txt strong{font-size:19px}
body.elder .tizhi-entry-txt small{font-size:14px}