:root {
  --bg: #f6f8f3;
  --surface: #ffffff;
  --text: #172019;
  --muted: #59645c;
  --line: #d7ded8;
  --primary: #2e7d32;
  --primary-dark: #1b5e20;
  --ok: #2e7d32;
  --low: #f9a825;
  --high: #c62828;
  --soft-green: #e8f5e9;
  --soft-yellow: #fff8e1;
  --soft-red: #ffebee;
  --nav-height: 76px;
}
* { box-sizing: border-box; }
/* 项目里弹层/步进器大量用 hidden 属性控制显隐；display:flex/grid 的容器
   会盖掉浏览器默认的 [hidden]{display:none}（.modal-layer 就踩过这个坑）。
   一条全局规则兜住所有元素，避免「藏着的数量步进器其实一直显示」这类假 UI。 */
[hidden] { display: none !important; }
html { background: var(--bg); color: var(--text); font-size: 16px; overflow-x: hidden; -webkit-tap-highlight-color: rgba(46, 125, 50, .18); }
body { margin: 0; min-width: 0; font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; line-height: 1.55; overflow-x: hidden; }
button, input, select, textarea { color: inherit; font: inherit; }
button, input, select { min-height: 48px; }
button { cursor: pointer; }
a { color: inherit; }
.skip-link { position: fixed; left: 8px; top: -100px; z-index: 100; background: white; padding: 12px; }
.skip-link:focus { top: 8px; }
.app-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.header-inner { width: min(100%, 900px); margin: auto; padding: 16px; }
.app-kicker { color: var(--primary-dark); font-size: 16px; font-weight: 700; margin: 0 0 2px; }
h1 { font-size: clamp(26px, 6vw, 34px); line-height: 1.2; margin: 0; }
h2 { font-size: 22px; line-height: 1.3; margin: 0 0 14px; }
h3 { font-size: 19px; line-height: 1.35; margin: 0; }
p { margin: 8px 0; }
.page-shell { width: min(100%, 900px); margin: auto; padding: 16px 14px calc(var(--nav-height) + 24px); }
.panel, .meal-card, .day-card, .profile-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; background: var(--surface); border: 1px solid var(--line); padding: 12px; margin-bottom: 14px; border-radius: 10px; }
.toolbar label, label { color: var(--muted); font-weight: 700; }
input, select, textarea { width: 100%; margin-top: 5px; border: 2px solid #aeb9b0; border-radius: 7px; background: white; padding: 9px 11px; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 3px solid #81c784; outline-offset: 2px; }
.date-toolbar label { min-width: 170px; flex: 1; }
.date-toolbar input { font-size: 22px; font-weight: 900; }
.date-weekday { color: var(--primary-dark); font-size: 20px; min-height: 48px; display: inline-flex; align-items: center; }
.button { border: 2px solid transparent; border-radius: 8px; min-height: 48px; padding: 10px 16px; font-weight: 800; }
.button.primary { background: var(--primary); color: white; }
.button.primary:hover { background: var(--primary-dark); }
.button.secondary { background: white; border-color: var(--primary); color: var(--primary-dark); }
a.button { display: block; text-decoration: none; text-align: center; }
.button.danger { background: var(--soft-red); border-color: var(--high); color: var(--high); }
.button.small { min-height: 48px; padding: 8px 12px; }
/* 按下反馈：手机上没有 hover，手指按下的那一刻必须有看得见的变化。
   没有反馈老人就会以为没点上、反复连点 —— 打卡按钮连点两次会把状态来回切换。 */
.button:active, .done-button:active, .nav-item:active, .segmented button:active,
.plan-item button:active, .food-row button:active {
  transform: translateY(1px);
  filter: brightness(.92);
}
/* 禁用态：还没点「✓ 完成」时，「微调实际克数」的输入框和「保存实际克数」按钮
   都是 disabled，点了不触发任何事件、也不弹键盘。不写这套样式的话禁用态
   跟可用态长得一模一样，老人分不清「还没到这一步」和「这个坏了」，
   只会说「点了没反应」。灰底 + 深灰字，对比度约 5:1，眼神不好也看得清。 */
button:disabled,
button:disabled:hover,
.button:disabled,
.button:disabled:hover,
.button.primary:disabled,
.button.primary:disabled:hover,
.button.secondary:disabled,
.button.secondary:disabled:hover,
.done-button:disabled,
.done-button:disabled:hover,
.plan-item button:disabled,
.food-row button:disabled {
  background: #e3e7e3;
  border-color: #aab4ac;
  color: #56605a;
  cursor: not-allowed;
  transform: none;
  filter: none;
  opacity: 1;
}
input:disabled, select:disabled {
  background: #eceeeb;
  border-color: #c2cbc4;
  color: #56605a;
}
/* 「微调实际克数」未解锁时挂在按钮正上方的提示条：
   必须比普通灰字显眼，否则老人只看见一个灰按钮，还是不知道为什么点不动。 */
.adjust-help {
  margin: 0 0 9px;
  padding: 10px 12px;
  border-left: 5px solid var(--low);
  border-radius: 4px;
  background: var(--soft-yellow);
  color: #5d4600;
  font-weight: 800;
  line-height: 1.4;
}
.full-width { width: 100%; }
.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 0 0 14px; background: #e5ebe5; border-radius: 9px; padding: 4px; }
.segmented button { border: 0; background: transparent; border-radius: 7px; min-width: 0; font-weight: 800; padding: 8px; }
.segmented button.active { color: white; background: var(--primary); }
.segmented.compact { width: min(100%, 340px); margin: 0; }
.loading, .empty { color: var(--muted); text-align: center; padding: 32px 12px; font-weight: 700; }
.error-box { border: 2px solid var(--high); color: var(--high); background: var(--soft-red); padding: 16px; border-radius: 8px; }
.nutrition-rings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.ring-card { text-align: center; min-width: 0; }
.ring-card svg { display: block; width: 100%; max-width: 130px; margin: auto; }
.ring-bg { fill: none; stroke: #e2e8e2; stroke-width: 10; }
.ring-value { fill: none; stroke: var(--primary); stroke-width: 10; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 60px 60px; }
.ring-card.low .ring-value { stroke: var(--low); }
.ring-card.high .ring-value { stroke: var(--high); }
.ring-number { font-size: 17px; font-weight: 800; }
.ring-label { color: var(--muted); font-weight: 700; margin-top: -6px; }
.person-title { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-bottom: 12px; }
.person-title strong { color: var(--primary-dark); font-size: 21px; }
.meal-header, .section-heading, .item-row, .quality-row, .smoothie-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.meal-header { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 8px; }
.meal-header h3 { font-size: 21px; }
.protein-badge, .status-badge, .tag-badge { display: inline-block; border-radius: 999px; padding: 4px 9px; font-weight: 800; font-size: 15px; }
.status-ok, .protein-badge.ok { color: var(--ok); background: var(--soft-green); }
.status-low, .protein-badge.low { color: #745500; background: var(--soft-yellow); }
.status-high, .protein-badge.high { color: var(--high); background: var(--soft-red); }
.item-list { list-style: none; margin: 0; padding: 0; }
.item-row { min-height: 45px; border-bottom: 1px dashed #e1e5e1; }
.item-row:last-child { border-bottom: 0; }
.item-name { min-width: 0; overflow-wrap: anywhere; }
.grams { flex: 0 0 auto; font-size: 20px; font-weight: 900; color: var(--primary-dark); }
.smoothie-notice { border: 2px solid var(--primary); background: var(--soft-green); border-radius: 8px; padding: 12px; margin: 8px 0; }
.smoothie-notice strong { display: block; font-size: 19px; }
.sensitive-tip { border-left: 5px solid var(--low); background: var(--soft-yellow); padding: 9px; margin-top: 8px; font-weight: 800; }
.meal-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
.done-button { width: 100%; background: var(--primary); color: white; border: 0; border-radius: 8px; font-size: 20px; font-weight: 900; }
.done-button.completed { background: #e1ece2; border: 2px solid var(--primary); color: var(--primary-dark); }
details.adjust-details { margin-top: 8px; }
details.adjust-details summary { min-height: 48px; display: flex; align-items: center; color: var(--primary-dark); font-weight: 800; cursor: pointer; }
.actual-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 58px; gap: 8px; align-items: center; margin: 7px 0; }
.actual-row input { margin: 0; min-width: 0; }
.quality-panel { background: var(--surface); border: 2px solid var(--primary); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
.quality-score { font-size: 30px; font-weight: 900; color: var(--primary-dark); }
.four-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 12px; }
.four-item { text-align: center; padding: 10px 4px; border-radius: 8px; font-weight: 900; }
.four-item.ok { color: var(--ok); background: var(--soft-green); }
.four-item.bad { color: var(--high); background: var(--soft-red); }
/* 用 clip 而不是 hidden：hidden 会把卡片内按钮的焦点描边一起裁掉（描边有 outline-offset），
   键盘/无障碍用户点了没反馈。clip 只裁视觉溢出，行为一致；
   老内核不认 clip 时整条声明被丢掉，退化成 visible，最坏只是圆角处露一点底色。 */
.day-card { padding: 0; overflow: clip; }
.day-card > summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 64px; padding: 12px 16px; font-size: 20px; font-weight: 900; background: #fbfcfa; }
.day-content { padding: 14px; border-top: 1px solid var(--line); }
.plan-meal { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 12px; }
.plan-item { display: grid; grid-template-columns: minmax(90px, 1.4fr) 92px 92px 52px; gap: 7px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.plan-item input { min-width: 0; margin: 0; }
.plan-item button { min-width: 48px; min-height: 48px; border: 0; color: var(--high); background: var(--soft-red); border-radius: 7px; font-weight: 900; }
.plan-columns { display: grid; grid-template-columns: minmax(90px, 1.4fr) 92px 92px 52px; gap: 7px; color: var(--muted); font-size: 14px; font-weight: 800; }
.day-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin: 12px 0; }
.summary-person { border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.summary-values { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; font-size: 14px; }
.summary-values span { border-left: 4px solid var(--line); padding-left: 5px; }
.summary-values span.ok { border-color: var(--ok); }
.summary-values span.low { border-color: var(--low); }
.summary-values span.high { border-color: var(--high); }
.copy-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modal { width: min(calc(100% - 24px), 520px); border: 0; border-radius: 10px; padding: 20px; }
.modal::backdrop { background: rgba(0, 0, 0, .45); }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.two-column, .weight-input-grid, .profile-grid, .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.weight-input-grid input { min-height: 62px; font-size: 27px; font-weight: 900; }
.notice { background: #eef3ee; border-left: 5px solid var(--primary); padding: 12px; margin-top: 12px; font-weight: 800; }
.chart-wrap { width: 100%; min-height: 240px; overflow: hidden; }
.chart-wrap svg { display: block; width: 100%; height: auto; }
.chart-grid { stroke: #d9dfd9; stroke-width: 1; }
.chart-label { fill: #59645c; font-size: 12px; }
.chart-line-morning { fill: none; stroke: var(--primary); stroke-width: 3; }
.chart-line-evening { fill: none; stroke: var(--low); stroke-width: 3; }
.chart-dot { fill: white; stroke: var(--primary); stroke-width: 2; }
.stats-grid, .dimension-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.stat-card, .dimension-card { border: 1px solid var(--line); padding: 12px; border-radius: 8px; background: #fbfcfb; }
.stat-card strong, .dimension-card strong { display: block; font-size: 23px; color: var(--primary-dark); }
.dimension-card { border-top: 5px solid var(--primary); }
/* 目标算不出来的那一格（例如体重没填 => 蛋白质达标天数算不出来）：
   用黄色区分于"真的没达标"，并把原因写在数字正下方，别让人误读成 0 分。 */
.dimension-card.unknown { border-top-color: var(--low); background: var(--soft-yellow); }
.dimension-card.unknown strong { font-size: 19px; color: #745500; }
.dimension-note { display: block; margin-top: 4px; color: #745500; font-size: 14px; font-weight: 700; line-height: 1.35; }
.tip-panel { color: #5d4600; background: var(--soft-yellow); border-left: 6px solid var(--low); border-radius: 8px; padding: 16px; font-size: 18px; font-weight: 800; }
.legend-line::before { content: ""; display: inline-block; width: 24px; border-top: 3px solid var(--primary); margin-right: 6px; vertical-align: middle; }
.profile-card .targets { background: #f0f5f0; padding: 10px; margin-top: 10px; border-radius: 7px; }
.switch-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 16px; }
.switch-row span { color: var(--text); }
.switch-row small { display: block; color: var(--muted); }
.switch-row input { width: 44px; height: 44px; flex: 0 0 auto; }
.list-stack > * { border-bottom: 1px solid var(--line); padding: 11px 0; }
/* 奶昔配方行：外格是「选择区 + 编辑按钮」两列；
   选择区本身是一个 <label>，点配方名字/说明整块都能勾选 —— 老人的本能就是点名字。 */
.smoothie-setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.smoothie-pick { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; cursor: pointer; }
.smoothie-setting input { width: 44px; height: 44px; }
/* 「食材不在食物库」这条提示要横跨整行，否则会被塞进第一列挤成一团 */
.smoothie-setting .sensitive-tip { grid-column: 1 / -1; }
.help-text { color: var(--muted); }
/* 盐当量说明：这是唯一一条「读错会直接伤身」的说明，不能跟普通 help-text
   一样灰得看不见。用浅底色 + 左边线把它在质量面板里单独框出来。 */
.salt-notice { margin: 10px 0 0; padding: 8px 10px; border-left: 3px solid var(--low);
  background: var(--soft-yellow); border-radius: 0 6px 6px 0; line-height: 1.6;
  color: var(--text); font-size: .92rem; }
.food-library { max-height: 520px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; margin-top: 10px; }
.food-row { display: grid; grid-template-columns: minmax(0, 1fr) 75px 90px; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); }
.food-row button { min-width: 48px; }
.tag-green { color: var(--ok); background: var(--soft-green); }
.tag-yellow { color: #745500; background: var(--soft-yellow); }
.tag-red { color: var(--high); background: var(--soft-red); }
.bottom-nav { position: fixed; z-index: 30; bottom: 0; left: 0; right: 0; height: calc(var(--nav-height) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(5, 1fr); background: white; border-top: 1px solid #bac4bb; }
.nav-item { text-decoration: none; display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; min-height: 64px; color: #465048; font-size: 15px; font-weight: 800; }
.nav-item span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #edf1ed; margin-bottom: 2px; }
.nav-item.active { color: var(--primary-dark); background: var(--soft-green); }
.nav-item.active span { color: white; background: var(--primary); }
.toast { position: fixed; z-index: 80; left: 50%; bottom: calc(var(--nav-height) + 16px); transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 8px; background: #1c271e; color: white; font-weight: 800; opacity: 0; pointer-events: none; }
.toast.show { opacity: 1; }
.toast.error { background: var(--high); }
@media (max-width: 620px) {
  .page-shell { padding-left: 10px; padding-right: 10px; }
  .stats-grid, .dimension-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 计划页工具栏：日期独占一行；打印/导出这两个低频操作并成一行；
     买菜清单和整周操作整行。比五个按钮各占一行省出近一屏。 */
  .plan-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .plan-actions > label { grid-column: 1 / -1; width: 100%; }
  .plan-actions > #shopping-list-btn,
  .plan-actions > #copy-week,
  .plan-actions > #fill-smoothies { grid-column: 1 / -1; width: 100%; }
  .plan-item { grid-template-columns: minmax(72px, 1fr) 72px 72px 48px; gap: 4px; }
  .plan-columns { grid-template-columns: minmax(72px, 1fr) 72px 72px 48px; gap: 4px; }
  .plan-item input { padding: 6px; }
  .day-summary, .two-column, .weight-input-grid, .profile-grid, .form-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: flex-start; flex-wrap: wrap; }
  .four-grid { grid-template-columns: repeat(2, 1fr); }
  /* 食物库在手机上不能做成「页面里再套一个滚动区」：手指一划常常滚的是外层，
     滚到底又会连锁到外层，行内的绿/黄/红下拉和「编辑」按钮极难对准。
     窄屏直接摊开，跟页面一起滚，指哪点哪。 */
  .food-library { max-height: none; overflow: visible; }
}
/* 320～360px 的老手机：620px 断点下的栅格最小要 276px，
   可用宽度只剩约 244px，多出来的部分被 html/body 的 overflow-x:hidden 直接裁掉，
   最右边那个「删」按钮会被顶到屏幕外 —— 表现就是「删不掉，点了没反应」。
   这里再收紧一档，保证四列都能完整显示且「删」够得着。 */
@media (max-width: 360px) {
  .plan-item, .plan-columns { grid-template-columns: minmax(56px, 1fr) 56px 56px 48px; }
  .plan-item input { padding: 5px; }
  .food-row { grid-template-columns: minmax(0, 1fr) 68px 84px; }
}
@media (min-width: 760px) {
  .bottom-nav { left: 50%; width: 900px; transform: translateX(-50%); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
  .meal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .meal-card { margin-bottom: 0; }
}
.connect-panel .qr-frame { display: flex; justify-content: center; padding: 12px; margin: 12px 0; }
.connect-panel .qr-frame svg { width: min(260px, 72vw); height: auto; border-radius: 8px; }
.connect-panel .connect-url { text-align: center; margin: 4px 0 10px; }
.connect-panel .connect-url strong { display: inline-block; padding: 8px 12px; background: var(--soft-green); border: 1px solid var(--line); border-radius: 8px; font-size: 18px; letter-spacing: 0.02em; word-break: break-all; }
.connect-panel code { background: var(--soft-green); padding: 1px 5px; border-radius: 4px; font-size: 15px; }

/* 今日页计划值/打卡状态提示条：之前只有 class 没有样式，开头的「!」「✓」
   是个没样式的裸字符。用浅黄（注意）/浅绿（全部完成）底色 + 圆形图标明确区分。*/
.plan-value-banner {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 2px 0 12px; padding: 10px 12px;
  border-radius: 8px; border: 1px solid #e6d8a0;
  background: var(--soft-yellow); color: var(--text);
  font-size: 15px; line-height: 1.55;
}
.plan-value-banner .banner-icon {
  flex: 0 0 auto; width: 24px; height: 24px; margin-top: 1px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--low); color: #fff; font-weight: 800; font-size: 15px;
}
.plan-value-banner.all-done { background: var(--soft-green); border-color: #b3dcb6; }
.plan-value-banner.all-done .banner-icon { background: var(--ok); }
.plan-value-banner span:not(.banner-icon) { flex: 1 1 auto; }

/* 适老化：老人会读的状态/说明文字不小于 14px（SVG 坐标轴等纯装饰不在此列）。*/
.day-alcohol-note, .alc-tag, .metric-tag, .salt-extra,
.sensitive-tip, .auto-weight-note, .adjust-help { font-size: 14px; }

/* 未打卡时「微调实际克数」区是灰的，.adjust-help 黄条已经说明"先点完成"，
   这里保证它在 details 展开后仍醒目、不被父级小字带小。*/
.adjust-help { font-size: 15px; }

@media print {
  .bottom-nav, .skip-link, .plan-actions, .button, .help-text, .toast { display: none !important; }
  body, html { background: white; }
  .page-shell { max-width: none; padding: 0; }

  /* 页头不能整个藏掉：印出来一张纸，得让人一眼看出印的是「一周饮食计划」、
     是哪一周，否则贴在冰箱上过两天就分不清了。 */
  .app-header { background: none; border-bottom: 2px solid #333; }
  .header-inner { padding: 0 0 8px; }
  .app-header h1 { font-size: 20pt; }
  .app-kicker { font-size: 10pt; }

  .day-card, .meal-card, .panel, .profile-card { border-color: #999; }
  .day-card { break-inside: avoid; }
  .day-card > summary { min-height: 0; font-size: 13pt; font-weight: 700; }
  .day-card:not([open]) .day-content { display: block; }
  .plan-columns, .plan-item { font-size: 11pt; }
}

/* ======================================================================
   断档横幅 / 今日待办条（S1、S6）
   ====================================================================== */

/* 断档横幅比计划值黄条更重：这是「全家今天没饭单」的事故级提示，用红底白图标。 */
.gap-banner {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 2px 0 12px; padding: 12px 14px;
  border-radius: 8px; border: 1px solid #e2b4b0;
  background: var(--soft-red); color: var(--text);
  font-size: 16px; line-height: 1.55;
}
.gap-banner .banner-icon {
  flex: 0 0 auto; width: 26px; height: 26px; margin-top: 1px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--high); color: #fff; font-weight: 900; font-size: 17px;
}
.gap-banner > div { flex: 1 1 auto; min-width: 0; }
.gap-banner strong { font-size: 17px; }
.gap-banner .button { margin-top: 10px; width: 100%; }
.gap-banner.future, .gap-banner.past {
  background: #eef1ee; border-color: var(--line); color: var(--muted);
}
.gap-banner.future .banner-icon, .gap-banner.past .banner-icon {
  background: #8a968d; font-weight: 700;
}

/* 今日待办条：浅绿底，未完成事项做成圆角小标签。 */
.todo-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 12px; padding: 10px 12px;
  border-radius: 8px; background: var(--soft-green);
  border: 1px solid #b3dcb6; font-size: 15px;
}
.todo-bar.done { background: var(--soft-green); color: var(--primary-dark); font-weight: 800; }
.todo-chip {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: #fff; border: 1px solid #9ec7a2; color: var(--primary-dark);
  font-weight: 800; font-size: 15px;
}

/* 空餐次卡片整体降调，避免灰按钮在白卡片里显得像坏了。 */
.meal-card.is-empty { opacity: .92; }
.done-button.empty { width: 100%; font-size: 17px; }

/* 备份恢复区：用边框和上方间距与下载按钮分开，危险操作按钮本身已是红色描边样式。 */
.restore-box { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.restore-box h3 { margin-bottom: 4px; }
.restore-file-label { display: block; margin-bottom: 10px; }

/* ======================================================================
   计划外吃喝（S5）
   ====================================================================== */
.extra-panel h3 { margin-bottom: 6px; }
.extra-summary { font-size: 15px; }
.extra-alcohol { color: var(--high); font-weight: 800; }
.extra-form {
  display: grid; grid-template-columns: 1fr 1.4fr 1fr auto;
  gap: 8px; align-items: end; margin: 10px 0 6px;
}
.extra-form label { display: flex; flex-direction: column; font-size: 14px; }
.extra-form button { min-width: 88px; }
.extra-meal h4 { margin: 10px 0 4px; font-size: 15px; color: var(--primary-dark); }
.extra-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 4px; border-bottom: 1px solid var(--line); font-size: 16px;
}
.extra-row .extra-name { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; min-width: 0; }
.extra-row strong { color: var(--primary-dark); white-space: nowrap; }
.extra-row .extra-alcohol { font-size: 14px; white-space: nowrap; }
.extra-delete {
  min-height: 38px; padding: 4px 14px; border-radius: 6px;
  background: white; border: 1.5px solid var(--high); color: var(--high); font-weight: 800;
}
@media (max-width: 560px) {
  .extra-form { grid-template-columns: 1fr 1fr; }
  .extra-form .extra-food-select { grid-column: 1 / -1; }
  .extra-form button { grid-column: 1 / -1; }
}

/* ======================================================================
   体重历史记录列表（S4）
   ====================================================================== */
.weight-history { margin-top: 14px; }
.weight-history > summary { font-size: 17px; font-weight: 800; padding: 6px 0; cursor: pointer; }
.weight-history-list { margin-top: 8px; }
.weight-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 16px;
}
.weight-row-date { min-width: 92px; font-weight: 700; }
.weight-row-type { color: var(--muted); min-width: 40px; }
.weight-row strong { flex: 1 1 auto; color: var(--primary-dark); }
.weight-row .button.small { min-height: 40px; padding: 4px 18px; }

/* ======================================================================
   顶部操作人切换 + 退出（S0 鉴权）
   ====================================================================== */
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.header-title { min-width: 0; }
.header-account { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.person-switch {
  display: inline-flex; border: 1.5px solid var(--primary);
  border-radius: 999px; overflow: hidden; background: #fff;
}
.person-btn {
  min-height: 44px; padding: 0 16px; border: 0; background: #fff;
  color: var(--primary-dark); font-weight: 800; font-size: 16px;
}
.person-btn + .person-btn { border-left: 1.5px solid var(--primary); }
.person-btn.active { background: var(--primary); color: #fff; }
.logout-btn {
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  background: #fff; border: 1.5px solid var(--line); color: var(--muted);
  font-size: 14px; font-weight: 700;
}
/* 顶栏是全站唯一的「我在记谁的账」开关（S2 UI 审计后页内重复切换全部删除），
   所以它要永远够大、够明显，不允许被标题挤成两行。 */
@media (max-width: 480px) {
  .header-inner { padding: 10px 12px; gap: 8px; }
  /* 口号行在手机上是重复信息（标题本身已说明应用），隐藏后顶栏省出一整行高度，
     也避免「抗炎饮食·家庭健康管家」孤字折行。 */
  .app-kicker { display: none; }
  .app-header h1 { font-size: 21px; line-height: 1.25; white-space: nowrap; }
  .person-btn { padding: 0 13px; font-size: 15.5px; }
  .logout-btn { padding: 0 10px; font-size: 13px; }
}

/* ===== 今日页父母版（S1 Task9）：大按钮、少术语、克数与圆环全部下沉 ===== */
.parent-head { margin-bottom: 12px; }
.parent-date { margin: 0 0 10px; color: var(--muted); font-size: 15px; font-weight: 600; }
.weight-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.weight-big {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 86px; padding: 12px 10px; border-radius: 16px;
  border: 2px solid var(--line); background: #fff; cursor: pointer;
  transition: transform .08s ease, border-color .15s ease;
}
.weight-big:active { transform: scale(.97); }
.weight-big.has-value { border-color: #2e7d32; background: #f1f8f2; }
.weight-big .wb-label { font-size: 17px; font-weight: 700; color: var(--muted); }
.weight-big .wb-value { font-size: 30px; font-weight: 800; color: #1b5e20; line-height: 1.2; }
.weight-big .wb-value.placeholder { font-size: 23px; color: #2e5a33; }
.weight-big .wb-value small { font-size: 15px; font-weight: 700; }
.weight-big .wb-hint { font-size: 13px; color: var(--muted); }
.coach-card {
  margin: 12px 0 0; padding: 12px 14px; border-radius: 14px;
  background: #fff8e6; border: 1px solid #f2df9b; color: #5d4a12;
  font-size: 16.5px; line-height: 1.55; font-weight: 600;
}
.coach-head { margin: 0 0 4px; font-size: 17px; font-weight: 800; color: #4a3a08; }
.coach-action { margin: 0; }
/* 中断不显示红色失败态：只有「在记录中」一种暖色，归零就是不渲染。 */
.streak-chip {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 9px;
  font-size: 14px; font-weight: 800; color: #b06a00;
  background: var(--soft-yellow); border: 1px solid #ecd9a0;
  border-radius: 999px; padding: 3px 12px;
}

.gentle-empty {
  margin: 4px 0 14px; padding: 16px; border-radius: 16px;
  background: #f4f8f4; border: 1px solid #cfe0cf;
}
.gentle-empty strong { font-size: 18px; color: #2e5a33; }
.gentle-empty p { margin: 6px 0 10px; color: #445; font-size: 15.5px; line-height: 1.5; }

.pmeal-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 14px 14px 12px; margin-bottom: 14px;
}
.pmeal-card.is-empty { border-style: dashed; background: #fafbfa; }
.pmeal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pmeal-head h3 { margin: 0; font-size: 20px; }
.scenario-now {
  font-size: 13.5px; font-weight: 700; color: #6d5600;
  background: #fff3cd; border-radius: 999px; padding: 4px 10px;
}
.dish-list { list-style: none; margin: 10px 0 6px; padding: 0; }
.dish-row {
  display: flex; align-items: center; min-height: 40px;
  border-bottom: 1px dashed #eef0ec; font-size: 17px;
}
.dish-row:last-child { border-bottom: none; }
.dish-name { font-weight: 600; }
.grams-fold { margin: 4px 0 8px; }
.grams-fold > summary {
  cursor: pointer; min-height: 44px; display: inline-flex; align-items: center;
  color: var(--muted); font-size: 14.5px; font-weight: 600;
}
.dish-grams { list-style: none; margin: 6px 0; padding: 8px 10px; background: #f8f9f7; border-radius: 10px; }
.dish-grams li { display: flex; justify-content: space-between; padding: 4px 0; font-size: 15px; }
.actual-edit { display: grid; gap: 6px; margin-top: 6px; }
.actual-row { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.actual-row input {
  min-height: 44px; width: 110px; font-size: 18px; text-align: center;
  border: 1.5px solid var(--line); border-radius: 8px;
}

.mine-block { margin: 8px 0; }
.mine-title { margin: 0 0 4px; font-size: 14px; color: var(--muted); font-weight: 700; }
.mine-block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mine-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px;
  background: #f2f7ff; border-radius: 10px; padding: 8px 10px; font-size: 15.5px;
}
.mine-name { font-weight: 700; }
.mine-qty { color: #234; font-weight: 700; }
.mine-row em { color: var(--muted); font-style: normal; font-size: 13.5px; }
.chip-op {
  margin-left: auto; min-width: 44px; min-height: 36px; padding: 0 12px;
  border-radius: 8px; border: 1.5px solid var(--line); background: #fff;
  font-size: 14px; font-weight: 700; cursor: pointer;
}
.chip-op + .chip-op { margin-left: 0; }
.extra-delete { color: #b3261e; }
.empty-hint { margin: 6px 0 8px; }

/* 五状态大按钮：吃完了是主角，其余平级，换吃的是另一条路 */
.status-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 10px 0; }
.status-btn {
  min-height: 52px; border-radius: 14px; border: 2px solid var(--line);
  background: #fff; font-size: 15.5px; font-weight: 700; cursor: pointer;
  padding: 4px 2px; line-height: 1.2; color: #2f3a2f;
}
.status-btn:active { transform: scale(.96); }
.status-btn:disabled { opacity: .45; cursor: not-allowed; }
.status-btn.on { border-color: #2e7d32; background: #e8f4ea; color: #1b5e20; }
.status-btn.primary { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.status-btn.primary.on { background: #1b5e20; border-color: #1b5e20; }
.status-btn.plain.on { border-color: #1565c0; background: #e7f0fd; color: #0d47a1; }

.meal-op-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 10px; }
.meal-op-row.single { grid-template-columns: 1fr; }
.op-btn {
  min-height: 50px; border-radius: 14px; border: 2px solid #cfd8d0;
  background: #fff; font-size: 16.5px; font-weight: 700; cursor: pointer; color: #263238;
}
.op-btn.drink { border-color: #e3c9a0; background: #fff9ef; }
.op-btn.dish-replace { border-color: #b9cbe0; background: #f4f8fd; }
.op-btn:active { transform: scale(.97); }

.scenario-row { display: flex; flex-wrap: wrap; gap: 8px; }
.scenario-chip {
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff;
  font-size: 15px; font-weight: 600; cursor: pointer; color: #455;
}
.scenario-chip.on { background: #fff3cd; border-color: #d9b64b; color: #6d5600; font-weight: 800; }
.text-btn {
  margin-top: 8px; border: none; background: none; color: var(--muted);
  font-size: 14px; text-decoration: underline; min-height: 36px; cursor: pointer;
}

.deep-details {
  margin: 6px 0 24px; border: 1px solid var(--line); border-radius: 16px;
  background: #fbfbfa; padding: 4px 12px 12px;
}
.deep-details > summary {
  cursor: pointer; min-height: 48px; display: flex; align-items: center;
  font-size: 15.5px; font-weight: 700; color: var(--muted);
}
.deep-details .nutrition-rings,
.deep-details .quality-panel { background: transparent; }

/* ===== 弹层（体重键盘 / 加换吃的 / 酒局）===== */
/* 注意：.modal-layer 自己设了 display:flex，会盖掉浏览器对 [hidden] 的默认
   display:none，不单独写这条三个弹层在页面加载时就会叠在屏幕上。 */
.modal-layer[hidden], .modal-mask[hidden] { display: none; }
.streak-chip[hidden] { display: none; }
body.modal-open { overflow: hidden; }
.modal-mask {
  position: fixed; inset: 0; background: rgba(20, 24, 20, .45);
  z-index: 80;
}
.modal-layer {
  position: fixed; left: 0; right: 0; bottom: 0; max-height: 88vh;
  background: #fff; border-radius: 20px 20px 0 0; z-index: 90;
  display: flex; flex-direction: column; overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 30px rgba(0,0,0,.18);
}
.modal-layer.wide { }
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px 16px 8px; border-bottom: 1px solid #eef0ec;
}
.modal-head h3 { margin: 0; font-size: 19px; }
.modal-head p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.modal-close {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  background: #f1f2f0; font-size: 17px; cursor: pointer; flex: none;
}
.modal-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #eef0ec; }
.button.big { width: 100%; min-height: 54px; font-size: 18px; border-radius: 14px; }

/* 体重键盘 */
.weight-display {
  text-align: center; font-size: 52px; font-weight: 800; color: #1b5e20;
  padding: 14px 0 6px; min-height: 86px;
}
.weight-display small { font-size: 20px; }
.keypad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  padding: 8px 16px 12px;
}
.key {
  min-height: 60px; border-radius: 14px; border: 1.5px solid var(--line);
  background: #f8f9f7; font-size: 26px; font-weight: 700; cursor: pointer;
}
.key:active { background: #e9ede8; }
.key-back { font-size: 17px; background: #fdecea; color: #b3261e; }

/* 加换吃的弹层 */
.quick-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 16px 4px; }
.qt {
  min-height: 46px; border-radius: 12px; border: 1.5px solid var(--line);
  background: #fff; font-size: 15.5px; font-weight: 700; cursor: pointer;
}
.qt.on { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.quick-search { padding: 8px 16px 4px; }
.quick-search input {
  width: 100%; min-height: 50px; border-radius: 12px; border: 2px solid var(--line);
  padding: 0 14px; font-size: 17px;
}
.food-list {
  list-style: none; margin: 0; padding: 6px 16px; overflow-y: auto;
  flex: 1; -webkit-overflow-scrolling: touch;
}
.food-row { padding: 10px 0; border-bottom: 1px solid #f0f1ee; }
.food-row-head { display: flex; align-items: center; gap: 8px; }
.fav-btn {
  width: 40px; height: 40px; border: none; background: none;
  font-size: 22px; color: #d9b64b; cursor: pointer; flex: none;
}
.food-name { font-size: 17px; font-weight: 700; }
.food-cat { margin-left: auto; font-size: 13px; color: var(--muted); }
.portion-line { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0 48px; }
.portion-chip {
  min-height: 44px; padding: 4px 14px; border-radius: 999px;
  border: 1.5px solid #b9d4bb; background: #f3f9f3; cursor: pointer;
  font-size: 15.5px; font-weight: 700; color: #245028;
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15;
}
.portion-chip small { font-size: 11.5px; font-weight: 600; color: #5a7a5e; }
.portion-chip.gram { border-color: #c7ccd2; background: #f6f7f9; color: #445; }
.portion-chip.gram small { display: none; }
.modal-empty { padding: 24px 8px; text-align: center; }

.quick-compose { border-top: 1px solid #eef0ec; background: #fbfcfa; }
.compose-card { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
.compose-line { display: flex; flex-direction: column; gap: 8px; }
.compose-name { font-size: 18px; font-weight: 800; }
.unit-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mini-chip {
  min-height: 42px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff;
  font-size: 15px; font-weight: 700; cursor: pointer;
}
.mini-chip.on { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.qty-line { display: flex; align-items: center; gap: 12px; }
.step-btn {
  width: 48px; height: 48px; border-radius: 12px; border: 1.5px solid var(--line);
  background: #fff; font-size: 22px; font-weight: 800; cursor: pointer;
}
.step-btn.sm { width: 42px; height: 42px; font-size: 18px; }
.qty-line input {
  width: 86px; min-height: 48px; text-align: center; font-size: 20px; font-weight: 800;
  border: 1.5px solid var(--line); border-radius: 10px;
}
.qty-unit { font-size: 16px; font-weight: 700; color: var(--muted); }
.gram-line, .note-line { display: flex; flex-direction: column; gap: 4px; font-size: 14.5px; color: var(--muted); font-weight: 600; }
.gram-line input, .note-line input {
  min-height: 48px; border-radius: 10px; border: 1.5px solid var(--line);
  padding: 0 12px; font-size: 17px;
}
.compose-actions { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }

/* 酒局弹层 */
.drink-list { list-style: none; margin: 0; padding: 8px 16px; overflow-y: auto; flex: 1; }
.drink-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid #f0f1ee;
}
.drink-name { font-size: 16.5px; font-weight: 700; flex: 1 1 100%; }
.drink-units { display: flex; gap: 8px; flex-wrap: wrap; }
.drink-qty { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.drink-qty strong { min-width: 24px; text-align: center; font-size: 18px; }
.drink-qty.hidden { display: none; }
.drink-foot { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid #eef0ec; background: #fffdf6; }
.scenario-pick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.scenario-pick > span { font-size: 14.5px; color: var(--muted); font-weight: 700; }
.drink-receipt {
  margin: 8px 16px 4px; padding: 14px; border-radius: 14px;
  background: #fff3e0; border: 1.5px solid #f0c98f;
}
.drink-receipt strong { font-size: 18px; color: #8a4b00; }
.drink-receipt p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.55; color: #5d4017; }
.drink-receipt.danger { background: #fdecea; border-color: #e6a29b; }
.drink-receipt.danger strong { color: #b3261e; }
.drink-receipt.danger p { color: #7a241d; }

/* 小屏：五状态按钮换成两行排布，避免字被挤糊 */
@media (max-width: 360px) {
  .status-row { grid-template-columns: repeat(3, 1fr); }
  .status-btn.primary { grid-column: span 3; order: -1; }
  .weight-big .wb-value { font-size: 26px; }
  .weight-big .wb-value.placeholder { font-size: 21px; }
}

/* 今日页餐卡内的奶昔一句话提示（详情仍在折叠的克数区/做饭弹层里） */
.smoothie-inline {
  margin: 6px 0; padding: 8px 10px; border-radius: 10px;
  background: #f0f7f2; font-size: 14.5px; color: #2e5a33;
}
/* 同一食物在一餐里出现两行时（奶昔配料+普通菜），用小标区分，避免父母以为排重了。 */
.smoothie-badge {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: #dcebdf; color: #2e5a33; font-size: 12px; font-weight: 800;
}

/* ===== 做饭模式弹层（S2 Task11）：大字号、可勾选、两人份一眼看清 ===== */
.cook-modal { max-height: 92vh; }
.cook-body { overflow-y: auto; flex: 1; padding: 12px 16px 8px; -webkit-overflow-scrolling: touch; }
.cook-total {
  margin-bottom: 12px; padding: 12px 14px; border-radius: 14px;
  background: #eef5ee; border: 1px solid #cfe0cf;
  font-size: 17px; color: #2e5a33;
}
.cook-total strong { font-size: 24px; color: #1b5e20; }
.cook-total small { display: block; margin-top: 4px; font-size: 13px; color: #5a7a5e; font-weight: 600; }
.cook-block { margin: 0 0 16px; }
.cook-block > h4 {
  margin: 0 0 8px; font-size: 18px; color: #263238;
}
.cook-rows { display: flex; flex-direction: column; gap: 8px; }
.cook-row {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 8px 12px; border-radius: 12px;
  border: 1.5px solid #e4e8e3; background: #fff; cursor: pointer;
}
.cook-row input[type="checkbox"] {
  width: 26px; height: 26px; flex: none; accent-color: #2e7d32;
}
.cook-row .cook-name { font-size: 18px; font-weight: 700; flex: 1; }
.cook-row .cook-grams {
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: 16px; color: #263238; white-space: nowrap;
}
.cook-row .cook-grams b { font-size: 20px; }
.cook-row .cook-grams small { font-size: 12.5px; color: #6a7a6c; font-weight: 600; }
.cook-row.done { background: #f1f8f2; border-color: #b9d4bb; }
.cook-row.done .cook-name { text-decoration: line-through; color: #6a8a6e; }
.cook-steps {
  margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  background: #f8f9f7; border: 1px solid #ecefea;
}
.cook-steps h4 { margin: 0 0 8px; font-size: 16px; }
.cook-steps ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cook-steps li label {
  display: flex; align-items: flex-start; gap: 10px;
  min-height: 44px; font-size: 16px; line-height: 1.5; cursor: pointer;
}
.cook-steps li input[type="checkbox"] { width: 24px; height: 24px; margin-top: 2px; flex: none; accent-color: #2e7d32; }
.cook-steps li.done span { text-decoration: line-through; color: #7a8a7c; }
.cook-tip {
  margin: 8px 0 0; padding: 8px 10px; border-radius: 10px;
  background: #fff3cd; color: #6d5600; font-size: 14.5px; font-weight: 600;
}
.drink-receipt-holder { overflow-y: auto; flex: 1; padding: 12px 16px 0; }

/* ===== 买菜清单弹层（S2 Task12）===== */
.shop-body { overflow-y: auto; flex: 1; padding: 12px 16px 8px; -webkit-overflow-scrolling: touch; }
.shop-head-note {
  margin-bottom: 12px; padding: 12px 14px; border-radius: 14px;
  background: #eef5ee; border: 1px solid #cfe0cf;
  font-size: 15.5px; color: #2e5a33; line-height: 1.5;
}
.shop-head-note strong { font-size: 20px; color: #1b5e20; }
.shop-group { margin-bottom: 14px; }
.shop-group h4 {
  margin: 0 0 6px; font-size: 17px; color: #263238;
  border-left: 4px solid #2e7d32; padding-left: 8px;
}
.shop-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.shop-row {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  align-items: center; padding: 10px 12px; min-height: 48px;
  border: 1.5px solid #e4e8e3; border-radius: 12px; background: #fff;
}
.shop-name { font-size: 17px; font-weight: 700; }
.shop-total { font-size: 15px; color: #263238; text-align: right; white-space: nowrap; }
.shop-total b { font-size: 19px; color: #1b5e20; }
.shop-total small { display: block; font-size: 12.5px; color: #6a7a6c; font-weight: 700; }
.shop-split { grid-column: 1; font-size: 13.5px; color: #6a7a6c; font-weight: 600; }
.shop-days { grid-column: 2; grid-row: 2; font-size: 12.5px; color: #8a978c; text-align: right; }
.shop-row.pantry { background: #faf8f1; border-color: #e6dfc8; }
.shop-pantry { margin-top: 6px; border-top: 1px dashed #d8ddd6; padding-top: 8px; }
.shop-pantry > summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
  font-size: 15.5px; font-weight: 700; color: #8a6d1d;
}
.shop-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* 打印区：屏幕上永远不可见，只在 body.shopping-printing 时出现在纸面 */
#shopping-print-root { display: none; }
#shopping-print-root h2 { font-size: 20px; margin: 0 0 6px; }
.shop-print-note { font-size: 13px; color: #445; margin: 0 0 12px; }
#shopping-print-root .shop-group { break-inside: avoid; margin-bottom: 12px; }
#shopping-print-root .shop-row { border-color: #999; }
#shopping-print-root .shop-pantry { break-inside: avoid; }
@media print {
  body.shopping-printing > *:not(#shopping-print-root) { display: none !important; }
  body.shopping-printing #shopping-print-root { display: block !important; padding: 0; }
}
@media print {
  .cook-body { overflow: visible; }
  .modal-foot, .modal-close { display: none !important; }
}

/* 分析页整周无打卡时的合并空态（替代 17 张重复空卡） */
.analysis-empty-week { display: block; margin: 0; }
.analysis-empty-week .button { margin-top: 10px; }
.dimension-empty-note {
  grid-column: 1 / -1; padding: 14px; border-radius: 10px;
  background: #f4f8f4; border: 1px solid #cfe0cf;
  color: #3d5a42; font-weight: 700; font-size: 15.5px; line-height: 1.6;
}
#analysis-person-hint { margin: -4px 2px 12px; font-size: 14px; }

/* 设置页家庭管理区：锚点目录 + 回顶部（区块展开近 20 屏，没目录会迷路） */
.settings-toc {
  position: sticky; top: 8px; z-index: 20;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: #fff; border: 1.5px solid #c9dccf; border-radius: 12px;
  padding: 10px 12px; margin-bottom: 14px; box-shadow: 0 2px 8px rgba(27, 94, 32, .08);
}
.settings-toc strong { font-size: 14px; color: var(--primary-dark); }
.settings-toc a {
  min-height: 40px; display: inline-flex; align-items: center;
  padding: 4px 12px; border-radius: 999px; background: #eef5ee;
  color: var(--primary-dark); font-size: 14px; font-weight: 800; text-decoration: none;
}
#sec-profiles, #sec-smoothies, #sec-powder, #sec-foods, #sec-backup {
  scroll-margin-top: 70px;
}
.settings-back-top {
  position: fixed; right: 14px; bottom: calc(var(--nav-height) + 14px); z-index: 25;
  min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--primary); color: #fff; font-weight: 800; font-size: 14px;
  text-decoration: none; display: inline-flex; align-items: center;
  box-shadow: 0 3px 10px rgba(27, 94, 32, .35);
}

/* ===== 周计划滚动提示卡（S2 Task15）===== */
.week-roll-card { margin-bottom: 14px; border-color: #c9dccf; }
.week-roll-card h3 { margin: 0 0 10px; font-size: 17px; }
.roll-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 10px 0;
}
.roll-row.ok strong { color: #2e7d32; }
.roll-text { flex: 1 1 220px; }
.roll-text .help-text { margin: 4px 0 0; }
.roll-sub { margin: 8px 0 6px; font-size: 14.5px; color: var(--muted); font-weight: 700; }
.roll-days ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.roll-day-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; background: #f6f8f5; border-radius: 10px; font-size: 15px;
}
.roll-day-row .button { min-height: 40px; }

/* ===== 快手餐库（S2 Task13）===== */
.meal-head-btns { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.dish-body { overflow-y: auto; flex: 1; padding: 12px 16px 8px; -webkit-overflow-scrolling: touch; }
.dish-list { display: flex; flex-direction: column; gap: 12px; }
.dish-card {
  border: 1.5px solid #dfe5df; border-radius: 16px; background: #fff;
  padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
.dish-card.builtin { border-color: #cfe0cf; background: #f8fcf8; }
.dish-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.dish-card-head h4 { margin: 0; font-size: 18px; }
.dish-kcal { font-size: 13.5px; color: #2e7d32; font-weight: 700; white-space: nowrap; }
.dish-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.dish-tag {
  font-size: 12px; font-weight: 700; color: #5a6b5c; background: #eef3ee;
  border-radius: 999px; padding: 2px 10px;
}
.dish-tag.builtin { background: #dcebdf; color: #2e5a33; }
.dish-ingredients { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.dish-ing {
  font-size: 15px; font-weight: 600; background: #f3f6f3; border-radius: 8px;
  padding: 4px 10px;
}
.dish-ing small { color: #6a7a6c; font-weight: 600; }
.dish-steps summary {
  cursor: pointer; min-height: 40px; display: inline-flex; align-items: center;
  font-size: 14.5px; color: var(--muted); font-weight: 700;
}
.dish-steps p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: #3a463c; }

/* ===== 今日页能量账 / 供能比 / 油盐糖 / 微量营养（2026-10-10）===== */
.energy-card, .macro-card {
  border: 1.5px solid #d9e4da; border-radius: 14px; background: #fbfdfb;
  padding: 12px 14px; margin: 12px 0;
}
.energy-card.unknown { border-style: dashed; background: #f7f9f6; }
.energy-title { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--primary-dark); }
.energy-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; padding: 7px 0; border-top: 1px dashed #e2e8e2;
}
.energy-row:first-of-type { border-top: none; }
.energy-row.muted { color: var(--muted); }
.energy-row.muted b { color: var(--text); }
.energy-row.prescribed { background: var(--soft-green); border-radius: 10px; padding: 8px 10px; border-top: none; margin-top: 4px; }
.energy-row.deficit .energy-deficit b { color: var(--ok); }
.energy-row.surplus .energy-deficit b { color: var(--high); }
.energy-row.balanced .energy-deficit b { color: var(--low); }
.energy-deficit { white-space: nowrap; font-size: 14.5px; color: var(--muted); }
.energy-row em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.energy-card .help-text { margin: 4px 0 0; }

.plan-tag {
  display: inline-block; font-size: 11.5px; font-weight: 700; color: #6a7a6c;
  background: #eef3ee; border-radius: 999px; padding: 1px 8px; margin-left: 4px;
}
.macro-row {
  display: grid; grid-template-columns: 7.5em 1fr 3.4em 6.4em; gap: 8px;
  align-items: center; padding: 5px 0; font-size: 14.5px;
}
.macro-label { font-weight: 700; color: #33403a; }
.macro-track { height: 14px; border-radius: 999px; background: #edf1ed; overflow: hidden; }
.macro-fill { display: block; height: 100%; border-radius: 999px; background: var(--ok); }
.macro-fill.low { background: var(--low); }
.macro-fill.high { background: #ef6c00; }
.macro-fill.unknown { background: #b6bfb7; }
.macro-pct { font-weight: 800; text-align: right; }
.macro-pct.ok { color: var(--ok); }
.macro-pct.low { color: #b07d00; }
.macro-pct.high { color: #bf5a00; }
.macro-range { font-size: 12px; color: var(--muted); text-align: right; }
@media (max-width: 380px) {
  .macro-row { grid-template-columns: 6.2em 1fr 3em; }
  .macro-range { display: none; }
}

.oss-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.oss-cell {
  border-radius: 12px; padding: 8px 6px; text-align: center;
  background: #f2f6f2; border: 1.5px solid transparent; display: flex;
  flex-direction: column; gap: 2px; font-size: 13px;
}
.oss-cell strong { font-size: 16.5px; }
.oss-cell small { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
.oss-cell.ok { background: var(--soft-green); border-color: #b9dcbd; }
.oss-cell.high { background: var(--soft-red); border-color: #f0c1c1; }
.oss-cell.low { background: var(--soft-yellow); border-color: #ecd9a0; }
.oss-cell.unknown { color: var(--muted); }

.micros-fold { margin-top: 10px; }
.micros-fold summary {
  cursor: pointer; min-height: 40px; display: inline-flex; align-items: center;
  font-size: 14.5px; color: var(--muted); font-weight: 700;
}
.micro-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.micro-cell {
  font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px;
  background: #eef1ee; color: #5d6a60; border: 1px solid #dde3dd;
}
.micro-cell.ok { background: var(--soft-green); color: var(--ok); border-color: #b9dcbd; }
.micro-cell.low { background: var(--soft-yellow); color: #9a6d00; border-color: #ecd9a0; }
.micro-cell.high { background: #fff3e0; color: #bf5a00; border-color: #f3cfa4; }
.micro-cell.unknown { opacity: .65; }

/* ===== 分析页：周能量平衡卡（回测两线对照）===== */
.energy-week-card {
  border: 1.5px solid #cfe0cf; border-radius: 14px; background: #f8fcf8;
  padding: 12px 14px; margin: 12px 0;
}
.energy-week-card.unknown, .energy-week-card.no-weight { background: #f7f9f6; border-color: #d9e0d8; }
.energy-week-card.match { border-color: #b9dcbd; background: var(--soft-green); }
.energy-week-card.slower_than_expected, .energy-week-card.faster_than_expected {
  border-color: #ecd9a0; background: var(--soft-yellow);
}
.ew-title { margin: 0 0 6px; font-weight: 800; font-size: 16px; color: var(--primary-dark); }
.ew-grid { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0; }
.ew-grid span { font-size: 14.5px; color: #33403a; }
.ew-grid b { font-size: 16px; }
.ew-text { margin: 6px 0 0; font-size: 14.5px; line-height: 1.65; }

/* ===== 记录页：7 天窗均值平滑线 + 趋势卡（Task18）===== */
.chart-line-smooth {
  fill: none; stroke: #6a8fff; stroke-width: 2.5; stroke-dasharray: 6 4;
  stroke-linecap: round; opacity: .9;
}
.trend-card {
  margin-top: 12px; border-radius: 14px; padding: 12px 14px;
  border: 1.5px solid #c9d6cf; background: #f7faf7;
}
.trend-card.down { border-color: #b9dcbd; background: var(--soft-green); }
.trend-card.up { border-color: #ecd9a0; background: var(--soft-yellow); }
.trend-card.flat { border-color: #d3dbd4; }
.trend-card.reached { border-color: var(--ok); background: var(--soft-green); }
.trend-card.insufficient { border-style: dashed; background: #f7f9f6; }
.trend-title { font-weight: 800; font-size: 16px; margin-bottom: 8px; }
.trend-card.down .trend-title, .trend-card.reached .trend-title { color: var(--ok); }
.trend-card.up .trend-title { color: #9a6d00; }
.trend-rows { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-bottom: 8px; }
.trend-row { display: flex; flex-direction: column; gap: 2px; min-width: 8.5em; }
.trend-row span { font-size: 12.5px; color: var(--muted); }
.trend-row strong { font-size: 16.5px; }
.trend-rate.down { color: var(--ok); }
.trend-rate.up { color: #b07d00; }
.trend-rate.flat { color: var(--text); }
.trend-text { margin: 4px 0 0; font-size: 14.5px; line-height: 1.6; }
.trend-sub { margin: 6px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.trend-progress { height: 8px; border-radius: 999px; background: #e6ece7; overflow: hidden; margin: 8px 0 4px; }
.trend-progress span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }

/* ===== 分析页：正向家庭周报（Task20）===== */
.wr-card {
  border: 1.5px solid #cfe0cf; border-radius: 14px; background: #f8fcf8;
  padding: 12px 14px;
}
.wr-card.blocked { border-color: #f0c1c1; background: var(--soft-red); }
.wr-message { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--primary-dark); }
.wr-card.blocked .wr-message { color: var(--high); }
.wr-highlights { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.wr-highlight {
  font-size: 15px; font-weight: 700; color: #234d27;
  background: var(--soft-green); border: 1px solid #b9dcbd;
  border-radius: 10px; padding: 7px 10px;
}
.wr-weight { margin: 6px 0; font-size: 15px; }
.wr-weight b { color: var(--ok); }
.wr-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0; }
.wr-stats span { font-size: 13.5px; color: var(--muted); font-weight: 700; }
.wr-action {
  margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed #c3d3c4;
  font-size: 15px; font-weight: 700; color: #33403a;
}
.wr-medical { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--high); }

/* ===== 设置页：每日提醒卡片（Task22，仅 APK 内可用）===== */
.reminder-settings { margin-top: 10px; }
.reminder-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line);
  min-height: 44px;
}
.reminder-row:last-child { border-bottom: none; }
.reminder-row label { font-size: 15px; }
.reminder-controls { display: flex; align-items: center; gap: 12px; }
.reminder-controls input[type="checkbox"] {
  width: 22px; height: 22px; min-height: 22px; flex: none;
}
.reminder-row input[type="time"] {
  min-height: 40px; font-size: 16px; border: 1.5px solid var(--line);
  border-radius: 10px; padding: 4px 8px; background: #fff;
}
.reminder-row input[type="time"]:disabled { color: var(--muted); background: #f2f2f2; }
.reminder-actions {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px;
}
.reminder-status { margin-top: 10px; min-height: 20px; }
.reminder-ok { color: var(--ok); }
.reminder-err { color: var(--high); }