/* Chart & UI semantic colours — adapt to light/dark via CSS variables */
  .pf-wrap {
    --pet-chart-target: #5d8a6b;       /* 目标线/达标绿（精修沉绿，全站唯一一支绿）*/
    --pet-chart-target-bg: rgba(93,138,107,0.12);
    --pet-chart-bar: #c9a96e;          /* 普通日柱色 */
    --pet-chart-incomplete: #b9975f;   /* 不完整日标签 */
    --pet-danger: #b07c75;             /* 暖红：警告/超标 */
    --pet-danger-bg: rgba(176,124,117,0.10);
    --pet-error: #d9534f;              /* 纯红：校验错误/必删 */
    --pet-gold: #a87a2a;               /* 暖金：待定/管理员 */
    --pet-gold-bg: rgba(168,122,42,0.10);
    --pet-brown: #8b5a3c;             /* 深棕：添粮/已生效 */
    --pet-brown-bg: rgba(139,90,60,0.10);
    --pet-chart-label: #6b7280;        /* 图表标签/次要正文灰（对比达标） */
    /* Shape & elevation scale — one set of values so cards/menus/modals feel like a system */
    --pet-r-card: 14px;               /* top-level content cards */
    --pet-r-ctrl: 10px;               /* controls inside a card */
    --pet-shadow-1: 0 1px 2px rgba(0,0,0,0.06);    /* buttons / chips */
    --pet-shadow-2: 0 6px 18px rgba(0,0,0,0.12);   /* menus / drag / tooltip */
    --pet-shadow-3: 0 16px 44px rgba(0,0,0,0.18);  /* modals */
    --pf-pad: 1rem;
    max-width: 880px; margin: 0 auto; padding: var(--pf-pad);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pf-wrap {
      --pet-shadow-1: 0 1px 2px rgba(0,0,0,0.3);
      --pet-shadow-2: 0 6px 18px rgba(0,0,0,0.45);
      --pet-shadow-3: 0 16px 44px rgba(0,0,0,0.6);
    }
  }
  :root[data-theme="dark"] .pf-wrap {
    --pet-shadow-1: 0 1px 2px rgba(0,0,0,0.3);
    --pet-shadow-2: 0 6px 18px rgba(0,0,0,0.45);
    --pet-shadow-3: 0 16px 44px rgba(0,0,0,0.6);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .pf-wrap {
      --pet-chart-target: #7fb98f;
      --pet-chart-target-bg: rgba(127,185,143,0.12);
      --pet-chart-bar: #8b7a5e;
      --pet-chart-incomplete: #9c8a62;
      --pet-danger: #c07c76;
      --pet-danger-bg: rgba(192,124,118,0.12);
      --pet-error: #e06660;
      --pet-gold: #c9a96e;
      --pet-gold-bg: rgba(201,169,110,0.12);
      --pet-brown: #a08055;
      --pet-brown-bg: rgba(160,128,85,0.12);
      --pet-chart-label: #a8a29a;
    }
  }
  :root[data-theme="dark"] .pf-wrap {
    --pet-chart-target: #7fb98f;
    --pet-chart-target-bg: rgba(127,185,143,0.12);
    --pet-chart-bar: #8b7a5e;
    --pet-chart-incomplete: #9c8a62;
    --pet-danger: #c07c76;
    --pet-danger-bg: rgba(192,124,118,0.12);
    --pet-error: #e06660;
    --pet-gold: #c9a96e;
    --pet-gold-bg: rgba(201,169,110,0.12);
    --pet-brown: #a08055;
    --pet-brown-bg: rgba(160,128,85,0.12);
    --pet-chart-label: #a8a29a;
  }
  .pf-wrap header { text-align: center; margin-bottom: 1.4rem; }
  .pf-wrap header h1 { font-size: 2.15rem; color: var(--color-ink); margin-bottom: 0.4rem; letter-spacing: 0.01em; }
  .pf-brand-mark {
    display: inline-grid; place-items: center;
    width: 1.62em; height: 1.62em; box-sizing: border-box;
    margin-right: 0.38em; border: 1px solid var(--color-highlight);
    border-radius: 0.42em; color: var(--color-highlight);
    font-family: var(--font-display);
    font-size: 0.58em;
    font-weight: 700;
    line-height: 1;
    vertical-align: 0.16em;
  }
  .pf-wrap header .sub { color: var(--color-muted); font-style: normal; }
  /* 暖金细线：让朴素的页头多一点品牌精致度（vis-3）*/
  .pf-wrap header::after {
    content: ""; display: block; width: 34px; height: 2px;
    background: var(--color-highlight); border-radius: 2px; margin: 0.75rem auto 0;
  }
  /* Hidden build beacon: faint grey footer text, used to confirm the live deploy */
  .pf-wrap > .build-tag {
    text-align: center;
    margin: 2.5rem 0 0.5rem;
    font-size: 0.68rem; letter-spacing: 0.04em;
    color: var(--color-light); opacity: 0.55;
    user-select: all;
  }

  .pet-bar {
    display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
    margin-bottom: 1.2rem;
  }
  .pet-bar .pet-tabs {
    display: flex; gap: 0.4rem; flex-wrap: wrap; flex-grow: 1;
  }
  .pet-bar .pet-tab {
    font: inherit; font-size: 0.9rem;
    padding: 0.4rem 0.9rem 0.4rem 0.45rem;
    border: 1px solid var(--color-border); border-radius: 999px;
    background: var(--color-bg); color: var(--color-muted);
    cursor: pointer; transition: all 0.18s;
    display: inline-flex; align-items: center; gap: 0.45rem;
  }
  .pet-bar .pet-tab .pet-icon {
    width: 1.55em; height: 1.55em;
    border-radius: 50%;
    background: var(--color-bg-warm);
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
    font-size: 0.95em;
  }
  .pet-bar .pet-tab .pet-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pet-bar .pet-tab.active {
    background: var(--color-accent); border-color: var(--color-accent); color: #fff;
  }
  .pet-bar .pet-tab.active .pet-icon { background: rgba(255, 255, 255, 0.15); }
  @media (hover: hover) {
    .pet-bar .pet-tab:hover:not(.active) { border-color: var(--color-accent); color: var(--color-accent); }
  }
  .pet-add-wrap { position: relative; display: inline-block; }
  .pet-add-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    display: none;
    flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: var(--pet-shadow-2);
    min-width: 160px;
    padding: 0.25rem;
  }
  .pet-add-menu.open { display: flex; }
  .pet-add-menu button {
    font: inherit; font-size: 0.88rem;
    padding: 0.5rem 0.85rem;
    border: none; border-radius: 6px;
    background: transparent; color: var(--color-ink);
    cursor: pointer; text-align: left;
    white-space: nowrap;
  }
  @media (hover: hover) {
    .pet-add-menu button:hover { background: var(--color-bg-warm); color: var(--color-accent); }
  }
  .pet-bar .icon-btn {
    font: inherit; font-size: 0.85rem;
    padding: 0.45rem 0.9rem; min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-border); border-radius: 999px;
    background: var(--color-bg); color: var(--color-muted);
    cursor: pointer; transition: all 0.18s;
  }
  @media (hover: hover) {
    .pet-bar .icon-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
  }

  .empty-zone { text-align: center; padding: 3.5rem 2rem; color: var(--color-muted); }
  /* 首屏欢迎卡（方案 A）：价值主张 + 三大能力 + 安全承诺 + 双 CTA */
  .empty-zone.welcome { padding: 1.4rem 1rem 2.4rem; color: var(--color-muted); }
  /* 档案里「选填」小标 */
  .modal .field label .opt-tag { font-size: 0.68rem; font-weight: normal; color: var(--color-muted); margin-left: 0.15rem; }
  .empty-zone.welcome .wc-lead {
    font-family: var(--font-display); font-size: 1.18rem; line-height: 1.45;
    color: var(--color-ink); margin: 0.2rem auto 1.1rem; max-width: 22em;
  }
  .empty-zone .wc-caps {
    max-width: 340px; margin: 0 auto 0.95rem; text-align: left;
    background: var(--color-bg-warm); border: 1px solid var(--color-border);
    border-radius: var(--pet-r-card); padding: 0.25rem 0.95rem;
  }
  .empty-zone .wc-cap { display: flex; gap: 0.65rem; align-items: flex-start; padding: 0.62rem 0; }
  .empty-zone .wc-cap + .wc-cap { border-top: 1px solid var(--color-border); }
  .empty-zone .wc-emo { font-size: 1.2rem; line-height: 1.35; flex-shrink: 0; }
  .empty-zone .wc-txt { display: flex; flex-direction: column; gap: 0.1rem; }
  .empty-zone .wc-txt b { color: var(--color-ink); font-weight: 600; font-size: 0.9rem; }
  .empty-zone .wc-txt span { color: var(--color-muted); font-size: 0.8rem; line-height: 1.45; }
  .empty-zone .wc-privacy { font-size: 0.76rem; color: var(--color-muted); margin: 0 0 1.35rem; }
  .empty-zone .wc-privacy-link { font: inherit; font-size: 0.76rem; background: none; border: none; padding: 0; color: var(--color-accent); text-decoration: underline; cursor: pointer; }
  /* 隐私说明弹窗正文 */
  .modal .privacy-body { font-size: 0.86rem; line-height: 1.7; color: var(--color-text); text-align: left; max-height: 60vh; overflow-y: auto; }
  .modal .privacy-body p { margin: 0 0 0.6rem; }
  .modal .privacy-body b { color: var(--color-ink); font-weight: 600; }
  .modal .privacy-body ul { margin: 0 0 0.7rem; padding-left: 1.1rem; }
  .modal .privacy-body li { margin: 0.25rem 0; }
  .empty-zone .empty-emoji { font-size: 3rem; margin-bottom: 1rem; opacity: 0.55; }
  .empty-zone .empty-actions {
    margin-top: 1.4rem;
    display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  }
  .empty-zone .add-btn {
    font: inherit; font-size: 0.95rem; font-weight: 600;
    padding: 0.6rem 1.4rem; border: none; border-radius: 999px;
    background: var(--color-accent); color: #fff; cursor: pointer;
    transition: opacity 0.18s;
  }
  .empty-zone .join-btn {
    font: inherit; font-size: 0.86rem;
    padding: 0.4rem 1rem; border: none; border-radius: 999px;
    background: transparent; color: var(--color-muted); cursor: pointer;
    transition: color 0.18s;
  }
  @media (hover: hover) {
    .empty-zone .add-btn:hover { opacity: 0.88; }
    .empty-zone .join-btn:hover { color: var(--color-accent); }
  }

  /* 新宠物首笔引导条（onb-3）*/
  .first-hint {
    background: var(--pet-gold-bg); border: 1px solid var(--color-highlight);
    border-radius: var(--pet-r-card); padding: 0.6rem 0.9rem; margin-bottom: 0.9rem;
    font-size: 0.85rem; color: var(--color-ink); line-height: 1.55;
  }
  .summary-row {
    /* auto-fit: 4-across on desktop, naturally reflows to 2×2 on phones — one rule,
       no breakpoint fight with the form/weight folds. */
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem;
    margin-bottom: 1rem;
  }
  .sum-card {
    text-align: center;
    padding: 1rem 0.6rem;
    background: var(--color-bg-warm);
    border: 1px solid var(--color-border);
    border-radius: var(--pet-r-card);
  }
  /* The headline metric (今日已吃) leads the row with an accent cap. */
  .sum-card.sc-lead { border-top: 2px solid var(--color-accent); }
  .sum-card .sc-num {
    font-family: var(--font-display); font-weight: 600;
    font-size: 1.55rem; color: var(--color-ink); line-height: 1.1;
    font-variant-numeric: tabular-nums;
  }
  .sum-card .sc-lbl { font-size: 0.76rem; color: var(--color-muted); margin-top: 0.35rem; }
  @media (max-width: 480px) {
    .sum-card { padding: 0.8rem 0.45rem; }
    .sum-card .sc-num { font-size: 1.4rem; }
    .sum-card .sc-lbl { font-size: 0.72rem; }
  }

  /* Recommendation strip */
  .rec-strip {
    background: var(--color-bg);
    border: 1px solid var(--color-border); border-radius: var(--pet-r-card);
    padding: 0.85rem 1rem;
    margin-bottom: 1.1rem;
    font-size: 0.85rem;
  }
  /* 可点击改目标时给个手势 + hover 提示 */
  .rec-strip.editable { cursor: pointer; transition: border-color 0.18s, background 0.18s; }
  @media (hover: hover) { .rec-strip.editable:hover { border-color: var(--color-accent); background: var(--color-bg-warm); } }
  .rec-strip .rec-edit { font-size: 0.76rem; color: var(--color-muted); margin-left: 0.4rem; font-weight: normal; }
  .rec-strip.no-target .rec-bar { display: none; }
  .rec-strip.no-target .rec-title { color: var(--color-accent); }
  .rec-strip-head {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 0.45rem; gap: 0.5rem; flex-wrap: wrap;
  }
  .rec-strip-head .rec-title { color: var(--color-ink); font-weight: 500; }
  .rec-strip-head .rec-now { color: var(--color-muted); font-variant-numeric: tabular-nums; }
  .rec-strip-head .rec-now strong { color: var(--color-ink); }
  .rec-bar {
    position: relative;
    height: 8px;
    background: var(--color-bg-warm);
    border-radius: 999px;
    overflow: visible;
  }
  .rec-bar .rec-band {
    position: absolute; top: 0; bottom: 0;
    background: rgba(74, 124, 89, 0.18);
    border-left: 1px dashed rgba(74, 124, 89, 0.5);
    border-right: 1px dashed rgba(74, 124, 89, 0.5);
    border-radius: 0;
  }
  .rec-bar .rec-fill {
    position: absolute; top: 0; bottom: 0; left: 0;
    background: var(--color-accent);
    border-radius: 999px;
  }
  .rec-bar .rec-fill.over { background: var(--pet-danger); }
  .rec-bar .rec-fill.under { background: var(--color-accent); opacity: 0.55; }
  .rec-bar .rec-marker {
    position: absolute; top: -3px; bottom: -3px;
    width: 2px;
    background: var(--color-ink);
    border-radius: 1px;
  }

  /* 一体式三段卡（和体重卡同款）：左列食物种类 · 中间填写区 · 右列记一笔/记录时间，
     左右两列满高贴合卡片边缘、无缝。 */
  .entry-form {
    background: var(--color-bg);
    border: 1px solid var(--color-border); border-radius: var(--pet-r-card);
    padding: 0; overflow: hidden; margin-bottom: 1rem;
  }
  .entry-form .entry-cols {
    display: flex; align-items: stretch; gap: 0; flex-wrap: nowrap;
  }
  .entry-form .entry-main-row {
    display: flex; align-items: center; gap: 0.5rem;
  }
  .entry-form .entry-main-row .reading-group { flex: 1 1 auto; min-width: 0; }
  /* 含碗/不含碗 开关 + 空碗重量，组成一条集成控件。选「含碗」时碗重设置出现在
     开关右侧，选「不含碗」时收起 —— 由 JS 切换 #bowl-row 的显示。 */
  .entry-form .mode-bowl {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap;
  }
  .entry-form .mode-bowl .mode-toggle { flex: 0 0 auto; }
  .entry-form .mode-bowl .bowl-row {
    flex: 0 1 auto; min-width: 0; gap: 0.4rem; padding: 0.42rem 0.65rem;
  }
  .entry-form .mode-bowl .bowl-row input { width: 56px; padding: 0.4rem 0.45rem; }
  .entry-form .mode-bowl .bowl-row select { padding: 0.4rem 1.5rem 0.4rem 0.5rem; }
  /* MIDDLE — 填写区撑满中间、内容居中；内层各行定宽不随食物模式变 */
  .entry-form .fill-area {
    flex: 1 1 auto; min-width: 0; padding: 0.9rem 1.2rem;
    display: flex; flex-direction: column; gap: 0.55rem; justify-content: center;
  }
  .entry-form .fill-area > * { width: 100%; max-width: 420px; margin-inline: auto; }
  .entry-form .fill-area .extra-eq-row,
  .entry-form .fill-area .bowl-row { margin-top: 0; }
  /* RIGHT — 记一笔满高贴右边、直角和整卡贴合；记录时间作底部一条贴合的小行 */
  .entry-form .action-col {
    flex: 0 0 150px; align-self: stretch; display: flex; flex-direction: column;
    border-left: 1px solid var(--color-border);
  }
  .entry-form .action-col .save-btn {
    flex: 1 1 auto; align-self: stretch; min-height: 56px; border: none;
    border-radius: 0 var(--pet-r-card) 0 0;   /* follow the card's top-right corner */
    padding: 0.7rem 1rem; display: flex; align-items: center; justify-content: center; gap: 0.3rem;
  }
  .entry-form .action-col .time-pill {
    width: 100%; border: none; border-top: 1px solid var(--color-border);
    border-radius: 0 0 var(--pet-r-card) 0;    /* follow the card's bottom-right corner */
    justify-content: center; background: var(--color-bg-warm); min-height: 40px;
  }
  .entry-form .action-col .link-btn { display: none; }
  /* Shared by the food input AND the weight input. */
  .reading-group {
    display: flex; align-items: stretch;
    border: 1px solid var(--color-border); border-radius: 10px;
    background: var(--color-bg); overflow: hidden;
  }
  .reading-group:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft, rgba(139,111,71,0.12)); }
  .reading-group input.reading {
    flex: 1; min-width: 0;
    padding: 0.8rem 0.95rem;
    font: inherit; font-size: 1.1rem; color: var(--color-ink);
    border: none; background: transparent; text-align: center;
    font-variant-numeric: tabular-nums; outline: none;
  }
  .reading-group select.unit-pick {
    border: none; border-left: 1px solid var(--color-border);
    background: var(--color-bg-warm); color: var(--color-ink);
    padding: 0 1.9rem 0 0.75rem; font: inherit; font-size: 0.9rem; font-weight: 500;
    cursor: pointer; outline: none;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.7rem center;
  }
  .reading-group .unit-suffix {
    display: inline-flex; align-items: center; padding: 0 0.95rem;
    border-left: 1px solid var(--color-border); background: var(--color-bg-warm);
    font-size: 0.92rem; color: var(--color-muted); white-space: nowrap; font-weight: 500;
  }
  /* App-grade segmented control (iOS-style: track + inset thumb), centered text.
     Used in the entry form AND inside modals. */
  .mode-toggle {
    display: inline-flex; gap: 3px; padding: 3px;
    border: 1px solid var(--color-border); border-radius: 999px;
    background: var(--color-bg-warm);
  }
  .mode-toggle label {
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.86rem; padding: 0.42rem 1rem; border-radius: 999px;
    cursor: pointer; color: var(--color-muted);
    transition: all 0.18s; white-space: nowrap;
  }
  .mode-toggle input { display: none; }
  .mode-toggle label.active {
    background: var(--color-accent); color: #fff; font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  }
  @media (hover: hover) { .mode-toggle label:not(.active):hover { color: var(--color-ink); } }
  .entry-form .reset-row {
    display: flex; align-items: center; gap: 0.45rem; margin-top: 0.6rem;
    font-size: 0.84rem; color: var(--color-muted); cursor: pointer;
  }
  .entry-form .reset-row input { width: 16px; height: 16px; flex: 0 0 auto; cursor: pointer; }
  .entry-form .method-toggle { display: flex; margin-bottom: 0.6rem; }
  .entry-form .method-toggle label { flex: 1 1 0; }
  /* 加结束时间 link + 结束时间 pill */
  .entry-form .action-col .time-add-end {
    font: inherit; font-size: 0.8rem; cursor: pointer; color: var(--color-accent);
    background: var(--color-bg-warm); border: 1px dashed var(--color-accent); border-radius: 999px;
    padding: 0.4rem 0.7rem; white-space: nowrap;
  }
  .entry-form .action-col .time-pill-end .tp-clear {
    margin-left: 0.3rem; color: var(--color-muted); font-size: 0.85rem; padding: 0 0.15rem;
  }
  @media (hover: hover) { .entry-form .action-col .time-add-end:hover { background: var(--color-bg); } }
  .entry-form .save-btn {
    font: inherit; font-size: 0.98rem; font-weight: 600;
    padding: 0.7rem 1.6rem; border: none; border-radius: 999px;
    background: var(--color-accent); color: #fff; cursor: pointer;
    white-space: nowrap; min-height: 44px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08); transition: background 0.18s, transform 0.08s;
  }
  .entry-form .save-btn:active { transform: scale(0.97); }
  @media (hover: hover) {
    .entry-form .save-btn:hover { background: var(--color-accent-light); }
  }
  .entry-form .form-hint {
    margin-top: 0.6rem; font-size: 0.78rem; color: var(--color-muted);
  }
  .entry-form .bowl-row {
    display: inline-flex; align-items: center; gap: 0.55rem;
    width: fit-content; max-width: 100%;
    padding: 0.5rem 0.7rem;
    background: var(--color-bg-warm); border-radius: 999px;
    font-size: 0.86rem; color: var(--color-ink);
    transition: opacity 0.18s;
  }
  .entry-form .bowl-row > span:first-child { color: var(--color-muted); }
  .entry-form .bowl-row input {
    width: 84px; padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-bg); color: var(--color-ink);
    font: inherit; font-size: 0.95rem; text-align: center;
    outline: none; font-variant-numeric: tabular-nums;
    transition: all 0.18s;
  }
  .entry-form .bowl-row input:focus { border-color: var(--color-accent); }
  .entry-form .bowl-row.needs-bowl input {
    border-color: var(--color-highlight);
    background: var(--pet-gold-bg);
  }
  .entry-form .bowl-row select {
    font: inherit; font-size: 0.88rem;
    padding: 0.45rem 1.7rem 0.45rem 0.6rem;
    border: 1px solid var(--color-border); border-radius: 8px;
    background-color: var(--color-bg-warm); color: var(--color-ink);
    cursor: pointer; outline: none;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.6rem center;
  }
  .entry-form .bowl-row select:focus { border-color: var(--color-accent); }
  .entry-form .bowl-row > span:first-child { font-weight: 500; }
  @keyframes bowl-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
    75% { transform: translateX(-2px); }
  }
  .entry-form .bowl-row.shake input { animation: bowl-shake 0.32s; }

  /* Food-type column (kibble + saved treats/cans + new). Vertical list that
     scrolls when there are too many foods, so the fill area stays put. */
  .entry-form .food-selector {
    flex: 0 0 146px; align-self: stretch;
    display: flex; flex-direction: column; gap: 0.4rem;
    max-height: 220px; overflow-y: auto; overflow-x: hidden;
    margin: 0; padding: 0.55rem; border-right: 1px solid var(--color-border);
    background: var(--color-bg-warm);
  }
  .entry-form .food-selector .extra-chip {
    width: 100%; justify-content: flex-start; align-items: center;
    text-align: left; gap: 0.4rem;
    border-radius: 12px; padding: 0.4rem 0.55rem; min-height: 40px;
  }
  .entry-form .food-selector .fc-emoji { flex: 0 0 auto; display: inline-flex; }
  .entry-form .food-selector .fc-emoji .fc-photo {
    width: 1.5em; height: 1.5em; object-fit: cover; border-radius: 5px; display: block;
  }
  .entry-form .food-selector .fc-name {
    flex: 1 1 auto; white-space: normal; line-height: 1.2;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
  }
  .entry-form .food-selector .edit-food { flex: 0 0 auto; margin-left: 0.1rem; }
  /* 折叠组：组头（可点开/收起，不可记账）+ 缩进的成员 */
  .entry-form .food-selector .fc-folder {
    background: var(--color-bg-warm); border-color: var(--color-border); color: var(--color-muted);
    font-weight: 600;
  }
  .entry-form .food-selector .fc-folder.active { background: var(--color-bg-warm); color: var(--color-muted); }
  .entry-form .food-selector .fc-caret {
    flex: 0 0 auto; font-size: 0.7rem; width: 0.9em; text-align: center; color: var(--color-muted);
  }
  .entry-form .food-selector .fc-count {
    flex: 0 0 auto; font-size: 0.72rem; font-weight: 500; color: var(--color-muted);
    background: var(--color-bg); border-radius: 999px; padding: 0.02rem 0.4rem; margin-left: auto;
  }
  .entry-form .food-selector .extra-chip.fc-child {
    margin-left: 14px; position: relative;
  }
  /* 子项左侧的一根淡引导线，暗示层级归属 */
  .entry-form .food-selector .extra-chip.fc-child::before {
    content: ''; position: absolute; left: -8px; top: -0.24rem; bottom: -0.24rem;
    width: 2px; background: var(--color-border); border-radius: 2px;
  }
  /* 长按拖拽排序：抓手光标、拖起的悬浮态、排序中禁选中 */
  .entry-form .food-selector .fc-draggable { cursor: grab; }
  .entry-form .food-selector.fc-reordering { user-select: none; }
  .entry-form .food-selector .extra-chip.fc-dragging {
    position: relative; z-index: 5; cursor: grabbing;
    box-shadow: var(--pet-shadow-2); opacity: 0.97; transition: none;
  }
  /* 桌面端隐藏「当前食物」触发条（只手机端用） */
  .entry-form .food-picker-trigger { display: none; }

  /* Narrow screens（方案 B）：整块竖向堆叠。食物列表默认收起，顶部只留一条「当前食物 · 换▾」；
     点它整宽铺开列表（组/品牌都看得清），选一个就自动收回、接着填写。 */
  @media (max-width: 800px) {
    .entry-form { padding: 1rem; }
    .entry-form .entry-cols { flex-direction: column; align-items: stretch; gap: 0; position: relative; }
    /* 触发条：显示当前所选食物 + 换▾（定高，方便悬浮列表对齐到它正下方） */
    .entry-form .food-picker-trigger {
      display: flex; align-items: center; gap: 0.55rem; width: 100%;
      padding: 0.6rem 0.85rem; margin-bottom: 0.7rem; height: 48px; box-sizing: border-box;
      border: 1px solid var(--color-border); border-radius: 12px;
      background: var(--color-bg-warm); color: var(--color-ink);
      font: inherit; font-size: 0.95rem; cursor: pointer; text-align: left;
    }
    .entry-form .food-picker-trigger .fpt-emoji { flex: 0 0 auto; display: inline-flex; font-size: 1.15rem; }
    .entry-form .food-picker-trigger .fpt-emoji .fc-photo { width: 1.4em; height: 1.4em; object-fit: cover; border-radius: 5px; display: block; }
    .entry-form .food-picker-trigger .fpt-name { flex: 1 1 auto; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .entry-form .food-picker-trigger .fpt-caret { flex: 0 0 auto; color: var(--color-muted); font-size: 0.85rem; }
    .entry-form .food-picker-trigger .fpt-caret::after { content: ' +'; }
    .entry-form .entry-cols.fs-open .food-picker-trigger { border-color: var(--color-accent); }
    .entry-form .entry-cols.fs-open .food-picker-trigger .fpt-caret::after { content: ' −'; }
    /* 列表：默认收起；.fs-open 时【绝对定位悬浮】在触发条正下方，盖住下面的填写区、不把
       页面撑长——逼用户先选好再往下填，也不显臃肿。复用桌面竖列的 chip 与折叠样式。 */
    .entry-form .food-selector { display: none; }
    .entry-form .entry-cols.fs-open .food-selector {
      display: flex; flex-direction: column;
      position: absolute; top: 52px; left: 0; right: 0; z-index: 20;
      max-height: min(46vh, 360px); overflow-y: auto;
      margin: 0; padding: 0.5rem;
      border: 1px solid var(--color-border); border-radius: 12px;
      background: var(--color-bg); box-shadow: var(--pet-shadow-2);
    }
    .entry-form .fill-area { flex: 1 1 auto; width: auto; padding: 0; }
    .entry-form .fill-area > * { max-width: none; }
    /* 记录时间 on top, 记一笔 as the big action at the bottom（整行贴底）。 */
    .entry-form .action-col { width: 100%; border-left: none; margin-top: 0.7rem; }
    .entry-form .action-col .save-btn { order: 3; width: 100%; border-radius: 14px; min-height: 48px; }
    .entry-form .action-col .time-pill { border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-bg-warm); justify-content: flex-start; }
  }
  .extra-chip {
    font: inherit; font-size: 0.88rem; cursor: pointer;
    padding: 0.5rem 0.95rem; border-radius: 999px; min-height: 40px;
    border: 1px solid var(--color-border); background: var(--color-bg);
    color: var(--color-ink); white-space: nowrap;
    display: inline-flex; align-items: center; gap: 0.3rem;
    transition: all 0.15s;
    /* chip 现在是 div(role=button) —— 补回 <button> 天然就有的「长按不选中文字/不弹 iOS 长按菜单」，
       否则长按拖拽排序时会误选文字。列表滚动仍靠不设 touch-action 保留。 */
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  }
  .extra-chip.active {
    background: var(--color-accent); color: #fff; border-color: var(--color-accent);
    font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  }
  .extra-chip.add-chip { border-style: dashed; color: var(--color-muted); }
  @media (hover: hover) { .extra-chip:not(.active):hover { border-color: var(--color-accent); } }
  .extra-chip .edit-food {
    margin-left: 0.15rem; opacity: 0.75; font-size: 0.82rem;
    padding: 0 0.15rem; border-radius: 4px;
    border: none; background: none; color: inherit; font-family: inherit; line-height: 1; cursor: pointer;
  }
  .extra-chip.active .edit-food { opacity: 0.9; }
  .extra-chip:focus-visible, .extra-chip .edit-food:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

  .entry-form .extra-eq-row {
    margin-top: 0.8rem; padding: 0.6rem 0.85rem;
    background: var(--color-bg-warm); border-radius: 8px;
    border: 1px dashed var(--color-border);
  }
  .extra-eq { font-size: 0.95rem; color: var(--color-accent); font-variant-numeric: tabular-nums; font-weight: 500; }

  .entry-form .form-aux-row {
    display: flex; gap: 0.8rem; margin-top: 0.9rem; flex-wrap: wrap; align-items: center;
  }
  .entry-form .link-btn {
    border: none; background: none; padding: 0; cursor: pointer;
    font: inherit; font-size: 0.83rem; color: var(--color-accent);
  }
  @media (hover: hover) { .entry-form .link-btn:hover { text-decoration: underline; } }
  /* "记录时间" pill — clearly a tappable control set to 现在 by default. */
  .entry-form .time-pill {
    display: inline-flex; align-items: center; gap: 0.5rem; min-height: 38px;
    padding: 0.45rem 0.5rem 0.45rem 0.7rem; border: 1px solid var(--color-border); border-radius: 999px;
    background: var(--color-bg-warm); cursor: pointer; font: inherit; font-size: 0.86rem;
    color: var(--color-muted); transition: border-color 0.18s, background 0.18s;
  }
  .entry-form .time-pill .tp-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%; background: var(--color-bg); font-size: 0.9rem;
  }
  .entry-form .time-pill .tp-lbl { color: var(--color-muted); }
  .entry-form .time-pill .tp-val {
    color: var(--color-ink); font-weight: 600; font-variant-numeric: tabular-nums;
    padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--color-bg);
  }
  .entry-form .time-pill .tp-edit { color: var(--color-light); font-size: 0.82rem; padding-right: 0.25rem; }
  .entry-form .time-pill.custom { border-color: var(--color-accent); }
  .entry-form .time-pill.custom .tp-val { color: var(--color-accent); }
  @media (hover: hover) { .entry-form .time-pill:hover { border-color: var(--color-accent); } }

  /* Keyboard focus ring for the tool's custom controls (accessibility).
     Use :has(input:focus-visible) for the segmented toggles so the ring only shows
     on keyboard focus and doesn't linger after a click/tap. */
  .pf-wrap button:focus-visible, .pf-wrap select:focus-visible,
  .extra-chip:focus-visible, .mode-toggle label:has(input:focus-visible),
  .avatar-cell:focus-visible, .cs-trigger:focus-visible,
  .time-pill:focus-visible, .modal button:focus-visible, .modal input:focus-visible {
    outline: 2px solid var(--color-accent); outline-offset: 2px;
  }

  /* Time-picker modal + food modal fields */
  .tp-fields { display: flex; gap: 0.8rem; flex-wrap: wrap; }
  .tp-fields .field { flex: 1 1 140px; }
  #time-picker-modal input[type="date"], #time-picker-modal input[type="time"] {
    width: 100%; font: inherit; font-size: 1rem; padding: 0.55rem 0.6rem;
    border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-bg); color: var(--color-ink); outline: none; box-sizing: border-box;
  }
  #time-picker-modal input:focus { border-color: var(--color-accent); }
  /* Both food modals: fixed width so the wizard frame never jumps between
     steps or option choices (and the edit modal matches it). */
  #food-modal .modal, #food-wizard .modal { width: 440px; max-width: calc(100vw - 2rem); }

  /* 获批的“照片 + 名字首字”：只显示照片入口和自动首字预览。 */
  #food-modal .emoji-pick, #food-wizard .emoji-pick {
    display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 0.55rem;
  }
  #food-modal .emoji-pick button, #food-wizard .emoji-pick button {
    font-size: 1.25rem; line-height: 1; padding: 0.45rem 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg);
  }
  #food-modal .emoji-pick button.active, #food-wizard .emoji-pick button.active {
    border-color: var(--color-accent); background: var(--color-bg-warm);
  }
  /* 图标网格里的「拍照 / 选图」格：未选显示 📷，选了显示缩略图铺满。 */
  #food-modal .emoji-pick .photo-cell, #food-wizard .emoji-pick .photo-cell {
    min-height: 3rem; padding: 0; overflow: hidden; color: var(--color-muted); position: relative;
  }
  #food-modal .emoji-pick .photo-cell img, #food-wizard .emoji-pick .photo-cell img {
    width: 100%; height: 100%; object-fit: cover; display: block;
  }
  #food-modal .food-initial-preview, #food-wizard .food-initial-preview {
    min-height: 3rem; display: flex; align-items: center; gap: 0.7rem;
    padding: 0.35rem 0.8rem; border: 1px solid var(--color-border); border-radius: 8px;
    color: var(--color-muted); background: var(--color-bg);
  }
  #food-modal .food-initial-preview.active, #food-wizard .food-initial-preview.active {
    border-color: var(--color-accent); background: var(--color-bg-warm);
  }
  .food-initial-preview b, .fc-initial {
    display: inline-grid; place-items: center;
    width: 1.8em; height: 1.8em; border-radius: 50%;
    color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    font-family: var(--font-display); font-weight: 700;
  }
  .food-initial-preview small { font-size: 0.78rem; }

  /* A layout (edit modal): tappable option cards replace the old pill toggles. */
  #food-modal .opt-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  /* The 热量来源 row now has 3 options (含「折成干粮」)—stack full-width so none squish. */
  #food-modal .fm-source { grid-template-columns: 1fr; }
  #food-modal .opt-card {
    position: relative; display: flex; align-items: center; gap: 0.6rem; text-align: left;
    font: inherit; padding: 0.7rem 0.8rem; border: 1.5px solid var(--color-border);
    border-radius: 12px; background: var(--color-bg); color: var(--color-text); cursor: pointer;
  }
  #food-modal .opt-card input { display: none; }
  #food-modal .opt-card .oc-ico {
    display: inline-grid; place-items: center; min-width: 2.6em; height: 2em; padding: 0 0.35em;
    border: 1px solid currentColor; border-radius: 0.5em; color: var(--color-accent);
    font-size: 0.72rem; line-height: 1; font-weight: 700; letter-spacing: 0.02em;
    box-sizing: border-box;
  }
  #food-modal .opt-card .oc-txt { display: flex; flex-direction: column; gap: 0.15rem; }
  #food-modal .opt-card .oc-txt b { font-size: 0.95rem; color: var(--color-ink); font-weight: 600; }
  #food-modal .opt-card .oc-txt small { font-size: 0.74rem; color: var(--color-light); }
  #food-modal .opt-card .oc-check { display: none; }
  #food-modal .opt-card.active { border-color: var(--color-accent); background: var(--color-bg-warm); }
  #food-modal .opt-card.active .oc-txt b { color: var(--color-accent); }
  #food-modal .opt-card.active .oc-check {
    display: block; position: absolute; top: 0.62rem; right: 0.62rem; width: 10px; height: 5px;
    border-left: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
    transform: rotate(-45deg);
  }

  /* Shared: inline "unit name / grams" rows and the kcal input with a unit suffix. */
  #food-modal .inline-unit, #food-wizard .inline-unit {
    margin-top: 0.6rem; font-size: 0.9rem; color: var(--color-muted);
    display: flex; align-items: center; gap: 0.5rem; white-space: nowrap;
  }
  #food-modal .inline-unit input, #food-wizard .inline-unit input { width: 90px; padding: 0.45rem 0.6rem; }
  #food-modal .kcal-input, #food-wizard .kcal-input {
    margin-top: 0.7rem; display: flex; align-items: stretch;
    border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden;
  }
  #food-modal .kcal-input input, #food-wizard .kcal-input input { border: none; border-radius: 0; flex: 1; }
  /* [hidden] must win over the flex display above (UA's display:none is too weak). */
  #food-modal .kcal-input[hidden], #food-wizard .kcal-input[hidden] { display: none; }
  #food-modal .kcal-input .suffix, #food-wizard .kcal-input .suffix {
    padding: 0 0.9rem; color: var(--color-muted); font-size: 0.9rem; white-space: nowrap;
    background: var(--color-bg-warm); display: flex; align-items: center;
  }

  /* Shared: guaranteed-analysis grid + optional tag + live estimate readout. */
  #food-modal .fm-analysis-grid, #food-wizard .fm-analysis-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem 0.7rem;
  }
  @media (max-width: 420px) {
    #food-modal .fm-analysis-grid, #food-wizard .fm-analysis-grid { grid-template-columns: 1fr 1fr; }
  }
  #food-modal .fm-analysis-grid input, #food-wizard .fm-analysis-grid input {
    width: 100%; box-sizing: border-box; font: inherit; font-size: 0.95rem;
    padding: 0.45rem 0.55rem; border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-bg); color: var(--color-ink); outline: none;
  }
  #food-modal .fm-analysis-grid input:focus, #food-wizard .fm-analysis-grid input:focus { border-color: var(--color-accent); }
  #food-modal .opt, #food-wizard .opt { font-size: 0.72rem; color: var(--color-muted); margin-left: 0.3rem; }
  #food-modal .fm-est-result, #food-wizard .fm-est-result {
    margin-top: 0.7rem; font-size: 0.95rem; color: var(--color-accent);
    font-variant-numeric: tabular-nums; font-weight: 600;
  }

  /* C layout (new-food wizard): step dots + big stacked choice cards. */
  #food-wizard .fw-steps { display: flex; gap: 0.4rem; justify-content: center; align-items: center; margin-bottom: 1.3rem; }
  #food-wizard .fw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); transition: all 0.2s; }
  #food-wizard .fw-dot.active { background: var(--color-accent); width: 24px; border-radius: 4px; }
  #food-wizard .fw-dot.done { background: var(--color-accent-light); }
  #food-wizard h2 { text-align: center; font-size: 1.45rem; margin-bottom: 0.3rem; }
  #food-wizard .fw-hint { text-align: center; color: var(--color-muted); font-size: 0.9rem; margin: 0 0 1.4rem; }
  #food-wizard .fw-step[hidden] { display: none; }
  #food-wizard .fw-unit { justify-content: center; }
  #food-wizard .big-choices { display: flex; flex-direction: column; gap: 0.7rem; }
  #food-wizard .big-choice {
    display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center;
    font: inherit; width: 100%; padding: 1.2rem; border: 1.5px solid var(--color-border);
    border-radius: 14px; background: var(--color-bg); color: var(--color-text); cursor: pointer;
  }
  #food-wizard .big-choice .bc-ico {
    display: inline-grid; place-items: center; min-width: 3em; height: 2.2em; padding: 0 0.4em;
    border: 1px solid currentColor; border-radius: 0.55em; color: var(--color-accent);
    font-size: 0.78rem; line-height: 1; font-weight: 700; letter-spacing: 0.02em;
    box-sizing: border-box;
  }
  #food-wizard .big-choice .bc-title { font-size: 1.05rem; font-weight: 600; color: var(--color-ink); }
  #food-wizard .big-choice .bc-sub { font-size: 0.8rem; color: var(--color-light); }
  #food-wizard .big-choice.active { border-color: var(--color-accent); background: var(--color-bg-warm); }
  #food-wizard .big-choice.active .bc-title { color: var(--color-accent); }

  .section-title {
    font-family: var(--font-display); font-size: 1.12rem; font-weight: 500;
    color: var(--color-ink); margin: 1.8rem 0 0.6rem;
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 0.6rem; flex-wrap: wrap;
  }
  .section-title::before {
    content: ''; position: absolute; margin-left: -0.7rem; margin-top: 0.15em;
    width: 3px; height: 0.95em; border-radius: 2px; background: var(--color-accent);
  }
  .section-title { position: relative; }
  .section-title .right {
    font-size: 0.78rem; color: var(--color-muted); font-family: inherit;
  }

  /* ===== Board tabs (粮食 / 体重 / 猫语) ===== */
  .board-tabs {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.2rem; margin-bottom: 1.3rem;
    border-bottom: 1px solid var(--color-border);
  }
  .board-tabs button {
    font: inherit; font-family: var(--font-display); font-size: 1rem;
    padding: 0.6rem 1.05rem; border: none; background: none;
    color: var(--color-muted); cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color 0.18s, border-color 0.18s;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; white-space: nowrap;
  }
  .board-tabs button .bt-ico { display: inline-flex; }
  .board-tabs button .bt-ico svg { width: 1.15rem; height: 1.15rem; display: block; }
  /* 统一的细线图标（顶栏铃铛/档案、记一笔/记体重、时间药丸）——都用 currentColor 继承按钮色 */
  .btn-ico { width: 1.15rem; height: 1.15rem; display: block; flex-shrink: 0; }
  .pet-bar .icon-btn .btn-ico { width: 1.2rem; height: 1.2rem; }
  .time-pill .tp-ico svg { width: 15px; height: 15px; display: block; }
  .board-tabs button.active {
    color: var(--color-accent); border-bottom-color: var(--color-accent); font-weight: 600;
  }
  @media (hover: hover) { .board-tabs button:hover:not(.active) { color: var(--color-ink); } }
  .board-panel { display: none; }
  .board-panel.active { display: block; animation: boardIn 0.2s ease; }
  @keyframes boardIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

  /* Linkage toast (weight change → target food auto-updated) */
  .link-toast {
    position: sticky; top: 0.5rem; z-index: 30;
    margin: 0 0 1rem; padding: 0.7rem 0.95rem;
    background: var(--pet-chart-target-bg); border: 1px solid var(--pet-chart-target); border-radius: 10px;
    color: var(--color-ink); font-size: 0.88rem; line-height: 1.45;
    display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
    animation: boardIn 0.25s ease;
  }
  .link-toast .lt-msg { flex: 1 1 180px; }
  .link-toast .lt-msg strong { font-variant-numeric: tabular-nums; }
  .link-toast .lt-undo {
    font: inherit; font-size: 0.82rem; padding: 0.28rem 0.75rem;
    border: 1px solid var(--pet-chart-target); border-radius: 999px; background: var(--color-bg);
    color: var(--pet-chart-target); cursor: pointer; white-space: nowrap;
  }
  @media (hover: hover) { .link-toast .lt-undo:hover { background: var(--pet-chart-target); color: #fff; } }
  .link-toast .lt-close {
    border: none; background: none; color: var(--color-muted);
    cursor: pointer; font-size: 1.15rem; line-height: 1; padding: 0 0.2rem;
  }
  @media (hover: hover) { [data-theme="dark"] .link-toast .lt-undo:hover { background: var(--pet-chart-target); color: #1a1a1a; } }

  .entries-list {
    border: 1px solid var(--color-border); border-radius: var(--pet-r-card);
    background: var(--color-bg); overflow: hidden;
  }
  .entries-list.scroll { max-height: 360px; overflow-y: auto; }
  .entries-list .day-divider {
    padding: 0.4rem 0.9rem;
    font-size: 0.78rem; color: var(--color-muted);
    background: var(--color-bg-warm);
    border-top: 1px solid var(--color-border);
    display: flex; justify-content: space-between; align-items: center;
  }
  .entries-list .day-divider:first-child { border-top: none; }
  .entries-list .day-divider strong { color: var(--color-ink); font-variant-numeric: tabular-nums; }
  .entry-row {
    display: grid; grid-template-columns: auto 1fr auto;
    gap: 0.7rem; align-items: center;
    padding: 0.6rem 0.9rem;
    font-size: 0.92rem;
    border-top: 1px solid var(--color-border);
  }
  .entry-row:first-of-type { border-top: none; }
  @media (hover: hover) { .entry-row:hover { background: var(--color-bg-warm); } }
  .entry-row .er-time {
    color: var(--color-muted); font-size: 0.8rem; min-width: 42px;
    font-variant-numeric: tabular-nums; align-self: start; padding-top: 0.15rem;
  }
  .entry-row .er-main {
    display: flex; flex-wrap: wrap; gap: 0.4rem 0.55rem; align-items: baseline;
  }
  .entry-row .er-reading { color: var(--color-ink); font-variant-numeric: tabular-nums; font-size: 0.86rem; }
  .entry-row .er-reading .er-raw { color: var(--color-light); font-size: 0.76rem; }
  .entry-row .er-delta {
    font-size: 0.84rem; font-variant-numeric: tabular-nums;
    padding: 0.1rem 0.55rem; border-radius: 4px;
  }
  .entry-row .er-delta.eat { color: var(--pet-chart-target); background: var(--pet-chart-target-bg); }
  .entry-row .er-delta.refill { color: var(--pet-brown); background: var(--pet-brown-bg); }
  .entry-row .er-delta.first { color: var(--color-muted); background: var(--color-bg-warm); }
  .entry-row .er-delta.unknown { color: var(--pet-gold); background: var(--pet-gold-bg); }
  .entry-row .er-delta.extra { color: var(--pet-chart-bar); background: rgba(201, 169, 110, 0.10); }
  .entry-row-extra .er-reading { color: var(--color-muted); }
  .entry-row .er-actions { display: inline-flex; gap: 0.35rem; align-self: start; }
  .entry-row .er-del, .entry-row .er-edit {
    border: none; background: transparent; color: var(--color-muted);
    cursor: pointer; font-size: 1rem; border-radius: 6px; line-height: 1;
    min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
  .entry-row .er-edit { font-size: 0.92rem; }
  @media (hover: hover) {
    .entry-row .er-del:hover { color: var(--pet-danger); background: var(--color-bg-warm); }
    .entry-row .er-edit:hover { color: var(--color-accent, #8b6f47); background: var(--color-bg-warm); }
  }
  .entries-list .empty-row { padding: 1.5rem; text-align: center; color: var(--color-muted); font-size: 0.88rem; }

  /* ===== Chart ===== */
  .target-toggle {
    font: inherit; font-size: 0.78rem;
    padding: 0.28rem 0.8rem;
    border: 1px solid var(--color-border); border-radius: 999px;
    background: var(--color-bg); color: var(--color-muted);
    cursor: pointer; transition: all 0.18s;
    display: inline-flex; align-items: center; gap: 0.3rem;
    white-space: nowrap;
  }
  .target-toggle.active {
    background: var(--pet-chart-target-bg);
    border-color: var(--pet-chart-target);
    color: var(--pet-chart-target);
  }
  @media (hover: hover) {
    .target-toggle:hover:not(.active) { border-color: var(--color-accent); color: var(--color-accent); }
    .target-toggle.active:hover { opacity: 0.85; }
  }
  .trend-tabs {
    display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.6rem;
  }
  .trend-tabs button {
    font: inherit; font-size: 0.82rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid var(--color-border); border-radius: 999px;
    background: var(--color-bg); color: var(--color-muted);
    cursor: pointer; transition: all 0.18s;
    min-height: 36px; min-width: 44px;  /* touch target ≥44px height when stacked */
  }
  .trend-tabs button.active {
    background: var(--color-accent); border-color: var(--color-accent); color: #fff;
  }
  @media (hover: hover) {
    .trend-tabs button:hover:not(.active) { border-color: var(--color-accent); color: var(--color-accent); }
  }
  .trend-custom {
    display: flex; gap: 0.5rem; align-items: center;
    margin-bottom: 0.6rem;
    padding: 0.55rem 0.7rem;
    background: var(--color-bg-warm); border-radius: 8px;
    font-size: 0.85rem; color: var(--color-muted);
    flex-wrap: wrap;
  }
  .trend-custom input[type="date"] {
    font: inherit; font-size: 0.85rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--color-border); border-radius: 6px;
    background: var(--color-bg); color: var(--color-ink);
  }
  /* 今日时段 · 逐日翻看条 */
  .trend-daynav {
    display: flex; gap: 0.4rem; align-items: center;
    margin-bottom: 0.6rem;
    padding: 0.4rem 0.55rem;
    background: var(--color-bg-warm); border-radius: 8px;
    flex-wrap: wrap;
  }
  .trend-daynav .dn-arrow {
    font: inherit; font-size: 1.1rem; line-height: 1;
    width: 36px; min-height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-bg); color: var(--color-muted);
    cursor: pointer; transition: all 0.18s;
  }
  .trend-daynav .dn-arrow:disabled { opacity: 0.35; cursor: default; }
  @media (hover: hover) {
    .trend-daynav .dn-arrow:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-accent); }
  }
  .trend-daynav .dn-date {
    font: inherit; font-size: 0.85rem;
    padding: 0.3rem 0.5rem; min-height: 36px;
    border: 1px solid var(--color-border); border-radius: 6px;
    background: var(--color-bg); color: var(--color-ink);
  }
  .trend-daynav .dn-today {
    font: inherit; font-size: 0.8rem;
    padding: 0.3rem 0.7rem; min-height: 36px;
    border: 1px solid var(--color-border); border-radius: 999px;
    background: var(--color-bg); color: var(--color-muted);
    cursor: pointer; transition: all 0.18s;
  }
  @media (hover: hover) {
    .trend-daynav .dn-today:hover { border-color: var(--color-accent); color: var(--color-accent); }
  }

  /* ===== 全屏横向看图 ===== */
  body.trend-fs-open { overflow: hidden; }
  .trend-fs { position: fixed; inset: 0; z-index: 4000; background: var(--color-bg); }
  .trend-fs[hidden] { display: none; }
  .trend-fs-inner {
    position: fixed; top: 50%; left: 50%;
    width: 100vw; height: 100vh; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; gap: 8px;
    padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); box-sizing: border-box; background: var(--color-bg);
  }
  /* 手机竖屏：宽高互换 + 旋转 90°，把竖屏变成一块横屏画布 */
  @media (orientation: portrait) and (max-width: 900px) {
    .trend-fs-inner { width: 100vh; height: 100vw; transform: translate(-50%, -50%) rotate(90deg); }
  }
  .tfs-top { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
  .tfs-title { font-weight: 600; color: var(--color-ink); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; max-width: 40%; }
  .tfs-tabs { display: flex; gap: 4px; flex: 1 1 auto; justify-content: center; overflow-x: auto; scrollbar-width: none; }
  .tfs-tabs::-webkit-scrollbar { display: none; }
  .tfs-tabs button {
    font: inherit; font-size: 0.78rem; padding: 0.28rem 0.75rem; min-height: 32px;
    border: 1px solid var(--color-border); border-radius: 999px;
    background: var(--color-bg); color: var(--color-muted); cursor: pointer; white-space: nowrap;
  }
  .tfs-tabs button.active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
  .tfs-icon {
    font: inherit; font-size: 1rem; width: 36px; height: 36px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg);
    color: var(--color-muted); cursor: pointer;
  }
  @media (hover: hover) { .tfs-icon:hover, .tfs-tabs button:hover:not(.active) { border-color: var(--color-accent); color: var(--color-accent); } }
  .tfs-chart { flex: 1 1 auto; min-height: 0; display: flex; }
  .tfs-chart svg { width: 100%; height: 100%; display: block; }
  .tfs-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .tfs-stats { font-size: 0.82rem; color: var(--color-muted); }
  .tfs-daynav, .tfs-custom { display: inline-flex; align-items: center; gap: 6px; color: var(--color-muted); font-size: 0.82rem; }
  .tfs-custom input[type="date"], .tfs-daynav .dn-date {
    font: inherit; font-size: 0.8rem; padding: 0.2rem 0.45rem; min-height: 32px;
    border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-bg); color: var(--color-ink);
  }
  /* ===== Weight section ===== */
  /* 一体式三段卡：左列「直接称/做差」整列一分为二 · 中间填写区 · 右列「记体重」，
     三段都满高贴合卡片、无缝；切两种模式整卡大小写死不变（高度固定）。 */
  .weight-box {
    border: 1px solid var(--color-border); border-radius: var(--pet-r-card);
    background: var(--color-bg); margin-bottom: 1rem;
    padding: 0; overflow: hidden;
  }
  .weight-box .weight-cols {
    display: flex; align-items: stretch; flex-wrap: nowrap; gap: 0;
    height: 196px;                       /* 写死高度：两种模式同高，不再切换变大小 */
  }
  /* LEFT: 一整列一分为二的 直接称 / 做差（满高、贴左边、无缝分隔） */
  .weight-box .weight-method {
    flex: 0 0 104px; display: flex; flex-direction: column; gap: 0;
    border-right: 1px solid var(--color-border);
  }
  .weight-box .weight-method label {
    flex: 1; display: flex; align-items: center; justify-content: center;
    background: var(--color-bg-warm); color: var(--color-ink);
    font-size: 0.92rem; cursor: pointer; transition: all 0.15s;
  }
  .weight-box .weight-method label:first-child { border-bottom: 1px solid var(--color-border); }
  .weight-box .weight-method label.active { background: var(--color-accent); color: #fff; font-weight: 600; }
  @media (hover: hover) { .weight-box .weight-method label:not(.active):hover { background: var(--color-bg); } }
  .weight-box .weight-method input { display: none; }
  /* MIDDLE: 填写区，撑满中间、内容垂直居中（直接称单行上下留白，做差填满同一框） */
  .weight-box .weight-fill {
    flex: 1 1 auto; min-width: 0; padding: 0 1.3rem;
    display: flex; flex-direction: column; gap: 0.55rem; justify-content: center;
  }
  .weight-box .reading-group.weight-reading { width: 100%; max-width: 380px; align-self: center; margin-inline: auto; }
  .weight-box .weight-diff .diff-result { max-width: 380px; align-self: center; width: 100%; box-sizing: border-box; }
  /* Weight-action-row: save button + time-pill stacked (same style as food's action-col) */
  .weight-box .weight-action-row {
    flex: 0 0 134px; display: flex; flex-direction: column;
  }
  .weight-box .weight-action-row .save-btn {
    flex: 1 1 auto; border: none; border-radius: 0;
    font: inherit; font-size: 1rem; font-weight: 600;
    background: var(--color-accent); color: #fff; cursor: pointer; white-space: nowrap;
    display: flex; align-items: center; justify-content: center; gap: 0.3rem;
    transition: background 0.18s; min-height: 56px;
  }
  .weight-box .weight-action-row .save-btn:active { background: var(--color-accent-light); }
  @media (hover: hover) { .weight-box .weight-action-row .save-btn:hover { background: var(--color-accent-light); } }
  .weight-box .weight-action-row .time-pill {
    width: 100%; border: none; border-top: 1px solid var(--color-border); border-radius: 0;
    justify-content: center; background: var(--color-bg-warm); min-height: 40px;
    font: inherit; font-size: 0.78rem; color: var(--color-muted); cursor: pointer;
    display: flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.5rem;
    transition: background 0.18s;
  }
  @media (hover: hover) { .weight-box .weight-action-row .time-pill:hover { color: var(--color-accent); background: var(--color-bg); } }
  .weight-box .weight-action-row .time-pill .tp-ico { font-size: 1rem; }
  .weight-box .weight-action-row .time-pill .tp-val { color: var(--color-accent); font-weight: 600; }
  .weight-box .weight-action-row .time-pill .tp-edit { font-size: 0.7rem; opacity: 0.5; }
  .weight-box .weight-action-row .time-pill.custom { background: var(--color-accent-soft); }

  /* old save-btn (direct child, kept for compatibility during transition — will be removed) */
  /* 窄屏：拆成竖排，三段各自满宽、恢复内边距与圆角、高度自适应 */
  @media (max-width: 800px) {
    .weight-box { padding: 1.1rem; }
    .weight-box .weight-cols { flex-direction: column; align-items: stretch; height: auto; gap: 0.7rem; }
    .weight-box .weight-method {
      flex: 0 0 auto; flex-direction: row; border-right: none;
      border: 1px solid var(--color-border); border-radius: 999px; overflow: hidden;
    }
    .weight-box .weight-method label { padding: 0.5rem 1rem; min-height: 42px; }
    .weight-box .weight-method label:first-child { border-bottom: none; border-right: 1px solid var(--color-border); }
    .weight-box .weight-fill { padding: 0; }
    .weight-box .reading-group.weight-reading { max-width: none; }
    .weight-box .weight-diff .diff-result { max-width: none; }
    .weight-box .save-btn { flex: 0 0 auto; width: 100%; min-height: 48px; border-radius: 14px; padding: 0.7rem 1.4rem; }
  }
  /* Featured current-weight card (mirrors the food board's stat cards). */
  .weight-hero {
    text-align: center; margin-bottom: 0.9rem;
    padding: 1.05rem 1rem 1.1rem; border-radius: var(--pet-r-card);
    background: var(--color-bg-warm); border: 1px solid var(--color-border);
  }
  .weight-hero .wh-num {
    font-family: var(--font-display); font-weight: 600;
    font-size: 2.3rem; color: var(--color-ink); line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .weight-hero .wh-unit {
    font-family: var(--font-display); font-size: 1.2rem;
    color: var(--color-muted); margin-left: 0.25rem;
  }
  .weight-hero .wh-sub { margin-top: 0.55rem; font-size: 0.82rem; color: var(--color-muted); }
  /* Direction only — no good/bad color (gain isn't "bad" for a growing pet). */
  .weight-hero .wh-sub .wh-delta { color: var(--color-ink); font-variant-numeric: tabular-nums; }
  .weight-chart-wrap { position: relative; margin-top: 0.9rem; }
  .weight-chart-wrap svg { width: 100%; height: auto; display: block; overflow: visible; }
  .weight-empty {
    text-align: center; color: var(--color-muted); font-size: 0.84rem; padding: 0.9rem 1rem 0.3rem;
  }
  .weight-list { margin-top: 0.6rem; }
  .weight-list:empty { display: none; }

  /* 做差：两行整宽读数（无侧标签，靠占位文案区分） */
  .weight-diff { display: none; }
  .weight-diff.active { display: flex; flex-direction: column; gap: 0.55rem; }
  .weight-single.hidden { display: none; }
  /* echoed unit on the 2nd reading (mirrors the 1st input's unit) */
  .weight-diff .unit-echo {
    display: inline-flex; align-items: center; padding: 0 0.95rem;
    border-left: 1px solid var(--color-border); background: var(--color-bg-warm);
    font-size: 0.9rem; color: var(--color-muted); white-space: nowrap; font-weight: 500;
  }
  /* live computed result — same accent-chip look as the food 等效干粮 row */
  .weight-diff .diff-result {
    margin: 0.1rem 0 0; padding: 0.6rem 0.9rem; text-align: center; max-width: 380px;
    background: var(--color-bg-warm); border: 1px dashed var(--color-border);
    border-radius: 10px; font-size: 0.92rem; color: var(--color-ink);
    font-variant-numeric: tabular-nums;
  }
  .weight-diff .diff-result strong { color: var(--color-accent); font-size: 1.15rem; font-weight: 600; }
  .weight-diff .diff-result.empty { color: var(--color-light); }

  .chart-wrap {
    position: relative;
    border: 1px solid var(--color-border); border-radius: var(--pet-r-card);
    background: var(--color-bg); padding: 1rem 1rem 0.6rem;
    margin-bottom: 1.2rem;
  }
  .chart-wrap svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; }
  /* 趋势图悬停/框选浮窗：跟随光标，浮在 SVG 上方，自身不吃指针事件 */
  .chart-tip {
    position: absolute; z-index: 6; pointer-events: none;
    transform: translate(-50%, -100%); margin-top: -6px;
    background: var(--color-ink); color: var(--color-bg);
    font-size: 0.72rem; line-height: 1.4; font-weight: 500;
    padding: 0.34rem 0.5rem; border-radius: 7px; white-space: nowrap;
    box-shadow: var(--pet-shadow-2);
    opacity: 0; transition: opacity 0.08s ease;
    font-variant-numeric: tabular-nums;
  }
  .chart-tip[hidden] { display: none; }
  .chart-tip.show { opacity: 1; }
  .chart-tip strong { color: #fff; font-weight: 700; }
  .chart-tip .tip-sub { opacity: 0.72; }
  .chart-meta {
    margin-top: 0.4rem; font-size: 0.78rem; color: var(--color-muted);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
  }
  .chart-meta .legend-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 2px;
    vertical-align: middle; margin-right: 0.3rem;
  }

  /* Modal */
  .modal-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
    z-index: 1500;
    display: none; align-items: center; justify-content: center;
    /* Keep the modal clear of the notch / home indicator in PWA full-screen */
    padding: calc(1rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) calc(1rem + env(safe-area-inset-bottom, 0px)) calc(1rem + env(safe-area-inset-left, 0px));
  }
  .modal-backdrop.open { display: flex; }
  .inbox-btn { position: relative; }
  .inbox-dot {
    position: absolute; top: 2px; right: 2px;
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--pet-danger); border: 1.5px solid var(--color-bg);
  }
  .inbox-list { max-height: 60dvh; overflow-y: auto; margin: 0.4rem 0; }
  .inbox-list .empty-row { padding: 1.4rem; text-align: center; color: var(--color-light); font-size: 0.88rem; }
  .tc-item {
    border: 1px solid var(--color-border); border-radius: 10px;
    padding: 0.7rem 0.85rem; margin-bottom: 0.6rem;
    font-size: 0.88rem; background: var(--color-bg);
  }
  .tc-item .tc-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
  .tc-item .tc-who { font-weight: 600; color: var(--color-ink); }
  .tc-item .tc-who.tc-me { color: var(--color-accent); }
  .tc-item .tc-times { color: var(--color-muted); font-variant-numeric: tabular-nums; font-size: 0.85rem; }
  .tc-item .tc-arrow { color: var(--color-light); }
  .tc-badge {
    font-size: 0.74rem; padding: 0.1rem 0.5rem; border-radius: 999px; margin-left: auto;
  }
  .tc-badge.pending  { color: var(--pet-gold); background: rgba(168,122,42,0.12); }
  .tc-badge.active   { color: var(--pet-brown); background: rgba(139,90,60,0.12); }
  .tc-badge.approved { color: var(--pet-chart-target); background: var(--pet-chart-target-bg); }
  .tc-badge.rejected { color: var(--pet-danger); background: rgba(176,124,117,0.14); }
  .tc-badge.act-badge { color: var(--color-muted); background: var(--color-bg-warm); }
  .tc-badge.act-new { color: #fff; background: var(--color-accent); margin-left: 0; }
  /* Inline 「起备注」chip in the activity feed for still-anonymous members */
  .tc-item .act-alias {
    font: inherit; font-weight: 600; color: var(--color-muted);
    background: none; border: 1px dashed var(--color-border); border-radius: 999px;
    padding: 0.08rem 0.55rem; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem;
  }
  .tc-item .act-alias .aa-add { font-weight: 400; font-size: 0.72rem; color: var(--color-accent); }
  @media (hover: hover) { .tc-item .act-alias:hover { border-color: var(--color-accent); color: var(--color-accent); } }
  .inbox-sec-title {
    font-size: 0.8rem; font-weight: 600; color: var(--color-muted);
    margin: 0.5rem 0 0.5rem; padding-top: 0.3rem;
  }
  .inbox-sec-title:first-child { margin-top: 0; padding-top: 0; }
  .tc-item.act-item { background: var(--color-bg-warm); }
  .tc-actions { display: flex; gap: 0.5rem; margin-top: 0.55rem; }
  .tc-actions button {
    font: inherit; font-size: 0.82rem; padding: 0.35rem 0.85rem;
    border-radius: 999px; border: 1px solid var(--color-border);
    cursor: pointer; background: var(--color-bg);
  }
  .tc-actions .tc-approve { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
  .tc-actions .tc-reject { color: var(--pet-danger); }
  .tc-note { color: var(--color-light); font-size: 0.78rem; margin-top: 0.3rem; }
  .modal {
    background: var(--color-bg); border: 1px solid var(--color-border);
    border-radius: var(--pet-r-card); padding: 1.6rem;
    max-width: 480px; width: 100%;
    /* Backdrop already pads the safe areas; cap height to what's left so the title
       and the bottom action buttons stay on-screen even with keyboard / notch. */
    max-height: calc(100dvh - 2rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    box-shadow: var(--pet-shadow-3);
  }
  .modal h2 {
    font-family: var(--font-display);
    font-size: 1.3rem; color: var(--color-ink); margin-bottom: 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  }
  .modal h2 .modal-close {
    flex: 0 0 auto; min-width: 44px; min-height: 44px; margin: -0.6rem -0.5rem -0.6rem 0;
    border: none; background: none; cursor: pointer;
    color: var(--color-muted); font-size: 1.1rem; border-radius: var(--pet-r-ctrl);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
  }
  @media (hover: hover) { .modal h2 .modal-close:hover { background: var(--color-bg-warm); color: var(--color-ink); } }
  .modal h2 .modal-close:active { background: var(--color-bg-warm); }
  .modal .field { margin-bottom: 0.9rem; }
  /* 表单红框校验：必填项没填 / 不合理时标红 */
  .modal .field.invalid > input,
  .modal .field.invalid select,
  .modal .field.invalid .cs-trigger,
  .modal .field.invalid .age-inputs input,
  .modal .field.invalid .input-unit-group input,
  .modal .field.invalid .input-unit-group select { border-color: var(--pet-error); }
  .modal .field.invalid > label { color: var(--pet-error); }
  .modal .field-err { color: var(--pet-error); font-size: 0.76rem; margin-top: 0.3rem; }
  .modal .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  @media (max-width: 420px) { .modal .field-grid { grid-template-columns: 1fr; } }
  .backup-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
  .backup-row .backup-btn {
    flex: 1 1 0; min-width: 130px;
    font: inherit; font-size: 0.86rem; padding: 0.55rem 0.8rem;
    border: 1px solid var(--color-border); border-radius: 10px;
    background: var(--color-bg); color: var(--color-ink); cursor: pointer;
    transition: border-color 0.18s, color 0.18s;
  }
  @media (hover: hover) { .backup-row .backup-btn:hover { border-color: var(--color-accent); color: var(--color-accent); } }
  .modal label {
    display: block; font-size: 0.85rem; color: var(--color-muted);
    margin-bottom: 0.3rem;
  }
  .modal input[type="text"], .modal input[type="number"], .modal select {
    width: 100%; padding: 0.6rem 0.85rem;
    font: inherit; font-size: 1rem; color: var(--color-ink);
    border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-bg);
    box-sizing: border-box;
  }
  .modal input:focus, .modal select:focus { outline: none; border-color: var(--color-accent); }
  .modal .hint { font-size: 0.78rem; color: var(--color-muted); margin-top: 0.3rem; line-height: 1.5; }
  .modal .sub-section {
    font-family: var(--font-display); font-size: 0.95rem; color: var(--color-ink);
    margin: 1.2rem 0 0.6rem;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--color-border);
  }
  .modal .estimator {
    background: var(--color-bg-warm);
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.7rem;
  }
  .modal .estimator > summary {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--color-ink);
    font-weight: 500;
    user-select: none;
    list-style: none;
    display: flex; align-items: center; gap: 0.4rem;
  }
  .modal .estimator > summary::-webkit-details-marker { display: none; }
  .modal .estimator > summary::after {
    content: '+';
    margin-left: auto;
    color: var(--color-muted);
    transition: transform 0.18s;
    font-size: 0.78rem;
  }
  .modal .estimator[open] > summary::after { content: '−'; }
  .modal .estimator-body { padding-top: 0.7rem; }
  .modal .rec-preview {
    font-size: 0.85rem; color: var(--color-muted);
    padding: 0.45rem 0.7rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    margin: 0.4rem 0 0.55rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .modal .rec-preview.has-value { color: var(--color-accent); font-weight: 500; }
  .modal .estimator-apply {
    font: inherit; font-size: 0.85rem;
    padding: 0.45rem 1rem;
    border: 1px solid var(--color-accent); border-radius: 999px;
    background: var(--color-accent); color: #fff;
    cursor: pointer;
    width: 100%;
    transition: opacity 0.18s;
  }
  .modal .estimator-apply:disabled {
    opacity: 0.5; cursor: not-allowed;
    background: var(--color-bg); color: var(--color-muted);
    border-color: var(--color-border);
  }
  .modal .rec-preview-inline {
    display: flex; align-items: stretch; gap: 0.5rem;
    margin-top: 0.55rem;
  }
  .modal .rec-preview-inline .rec-preview {
    flex: 1; margin: 0;
  }
  .modal .rec-preview-inline .estimator-apply {
    width: auto;
    padding: 0.4rem 1rem;
    white-space: nowrap;
  }

  /* 食量设置弹窗：只读体型小卡 */
  .im-petcard {
    display: flex; align-items: center; gap: 0.7rem;
    background: var(--color-bg-warm); border: 1px solid var(--color-border);
    border-radius: 12px; padding: 0.7rem 0.85rem; margin: 0.2rem 0 0.4rem;
  }
  .im-petcard .im-av { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; }
  .im-petcard .im-meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
  .im-petcard .im-name { font-weight: 600; font-size: 0.98rem; }
  .im-petcard .im-sub { font-size: 0.8rem; color: var(--color-muted); }
  .im-petcard .im-editprofile {
    flex: 0 0 auto; font: inherit; font-size: 0.82rem; cursor: pointer;
    color: var(--color-accent); background: none; border: none; padding: 0.2rem 0.1rem;
    white-space: nowrap;
  }
  @media (hover: hover) { .im-petcard .im-editprofile:hover { text-decoration: underline; } }

  .modal .checkbox-row {
    display: flex; align-items: center; gap: 0.45rem;
    cursor: pointer; font-size: 0.92rem; color: var(--color-ink);
    margin-bottom: 0;
  }
  .modal .checkbox-row input[type="checkbox"] {
    width: auto; margin: 0;
  }
  .modal .input-unit-group {
    display: flex; align-items: stretch;
    border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-bg); overflow: hidden;
  }
  .modal .input-unit-group:focus-within { border-color: var(--color-accent); }
  .modal .input-unit-group input {
    flex: 1; min-width: 0;
    border: none; border-radius: 0;
    padding: 0.6rem 0.85rem;
    font: inherit; font-size: 1rem; color: var(--color-ink);
    background: transparent; outline: none;
    font-variant-numeric: tabular-nums;
  }
  .modal .input-unit-group select {
    width: auto;
    border: none; border-left: 1px solid var(--color-border);
    background: var(--color-bg-warm); color: var(--color-muted);
    padding: 0 0.5rem;
    font: inherit; font-size: 0.85rem;
    cursor: pointer; outline: none;
  }
  .modal .age-inputs {
    display: flex; gap: 0.5rem;
  }
  .modal .age-inputs > .age-cell {
    display: flex; flex: 1; align-items: stretch;
    border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-bg); overflow: hidden;
  }
  .modal .age-inputs > .age-cell:focus-within { border-color: var(--color-accent); }
  .modal .age-inputs > .age-cell input {
    flex: 1; min-width: 0; width: 100%;
    border: none; background: transparent;
    padding: 0.6rem 0.65rem;
    font: inherit; font-size: 1rem; outline: none;
    font-variant-numeric: tabular-nums;
  }
  .modal .age-inputs > .age-cell .unit-tag {
    background: var(--color-bg-warm); color: var(--color-muted);
    font-size: 0.85rem; padding: 0 0.55rem;
    display: flex; align-items: center;
    border-left: 1px solid var(--color-border);
  }
  .modal .custom-select {
    position: relative; width: 100%;
  }
  .modal .custom-select .cs-trigger {
    width: 100%; box-sizing: border-box;
    padding: 0.6rem 0.85rem;
    font: inherit; font-size: 1rem; color: var(--color-ink);
    border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-bg);
    text-align: left;
    cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
  }
  .modal .custom-select .cs-trigger:focus { outline: none; border-color: var(--color-accent); }
  .modal .custom-select .cs-label {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .modal .custom-select .cs-label.placeholder { color: var(--color-muted); }
  .modal .custom-select .cs-chevron {
    color: var(--color-muted); font-size: 0.7rem;
    display: inline-block;
    transition: transform 0.18s;
  }
  .modal .custom-select.open .cs-chevron { transform: rotate(180deg); }
  .modal .custom-select .cs-menu {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    z-index: 100;
    list-style: none; margin: 0; padding: 0.3rem 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border); border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 260px; overflow-y: auto;
    display: none;
  }
  .modal .custom-select.open .cs-menu { display: block; }
  .modal .custom-select .cs-menu li {
    padding: 0.5rem 0.85rem;
    font-size: 0.95rem;
    cursor: pointer;
    color: var(--color-ink);
  }
  @media (hover: hover) {
    .modal .custom-select .cs-menu li:hover { background: var(--color-bg-warm); }
  }
  .modal .custom-select .cs-menu li.selected {
    color: var(--color-accent); font-weight: 500;
    background: var(--color-bg-warm);
  }

  /* Avatar picker row (photo button + emoji cells) */
  .avatar-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.35rem; }   /* 拍照格+13 emoji=14，正好两行 */
  .avatar-cell {
    width: auto; height: auto; aspect-ratio: 1 / 1;
    border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-bg); color: var(--color-ink);
    font: inherit; font-size: 1.15rem;
    cursor: pointer; padding: 0;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    transition: border-color 0.18s, background 0.18s;
  }
  .avatar-cell.selected { border-color: var(--color-accent); background: var(--color-bg-warm); }
  .avatar-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .avatar-cell.photo-cell { color: var(--color-muted); }
  .avatar-cell.photo-cell .ph-icon { font-size: 1.1rem; }

  /* Crop modal */
  .crop-modal-bk .modal { max-width: 460px; }
  .crop-modal-bk .modal h2 { font-size: 1.15rem; }
  .crop-stage {
    position: relative;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    margin: 0 auto 0.6rem;
  }
  .crop-stage img {
    display: block; pointer-events: none;
    -webkit-user-drag: none;
  }
  .crop-frame {
    position: absolute;
    border: 2px solid #fff;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.55);
    cursor: move;
    box-sizing: border-box;
  }
  .crop-handle {
    position: absolute;
    width: 16px; height: 16px;
    background: #fff;
    border: 1px solid #888;
    border-radius: 50%;
    box-sizing: border-box;
  }
  .crop-handle.h-nw { top: -8px; left: -8px; cursor: nwse-resize; }
  .crop-handle.h-ne { top: -8px; right: -8px; cursor: nesw-resize; }
  .crop-handle.h-sw { bottom: -8px; left: -8px; cursor: nesw-resize; }
  .crop-handle.h-se { bottom: -8px; right: -8px; cursor: nwse-resize; }
  .crop-hint { font-size: 0.78rem; color: var(--color-muted); text-align: center; margin-bottom: 0.7rem; }

  .modal-actions {
    display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1.2rem;
  }
  .modal-actions button {
    font: inherit; font-size: 0.92rem;
    padding: 0.5rem 1.2rem; border-radius: 8px;
    cursor: pointer; transition: all 0.18s;
  }
  .modal-actions .cancel {
    background: var(--color-bg); border: 1px solid var(--color-border);
    color: var(--color-muted);
  }
  .modal-actions .save {
    background: var(--color-accent); border: 1px solid var(--color-accent);
    color: #fff; font-weight: 600;
  }
  .modal-actions .del {
    background: transparent; border: 1px solid var(--color-border);
    color: var(--pet-danger); margin-right: auto;
  }
  @media (hover: hover) {
    .modal-actions .del:hover { background: rgba(192, 57, 43, 0.08); border-color: var(--pet-danger); }
  }

  /* Mode mismatch prompt */
  .mismatch-prompt .modal { max-width: 440px; }
  .mismatch-prompt h2 { font-size: 1.15rem; }
  .mismatch-prompt .mm-body {
    font-size: 0.92rem; color: var(--color-ink); line-height: 1.55;
    margin-bottom: 1rem;
  }
  .mismatch-prompt .mm-body strong { color: var(--color-accent); }
  .mismatch-prompt .mm-body code {
    font-family: inherit; font-variant-numeric: tabular-nums;
    padding: 0.05rem 0.3rem; background: var(--color-bg-warm); border-radius: 4px;
  }

  /* Sharing */
  .modal .share-block {
    background: var(--color-bg-warm);
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.7rem;
  }
  .modal .share-code-row {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    margin-bottom: 0.55rem;
  }
  .modal .pet-code {
    font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
    letter-spacing: 0.18em;
    color: var(--color-accent);
    padding: 0.3rem 0.7rem;
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 6px;
    user-select: all;
  }
  .modal .share-mini-btn {
    font: inherit; font-size: 0.78rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--color-border); border-radius: 999px;
    background: var(--color-bg); color: var(--color-muted);
    cursor: pointer; transition: all 0.18s;
  }
  @media (hover: hover) {
    .modal .share-mini-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
  }
  .modal .members-list {
    list-style: none; margin: 0; padding: 0;
    border: 1px solid var(--color-border); border-radius: 6px;
    background: var(--color-bg);
    max-height: 200px; overflow-y: auto;
  }
  .modal .members-list li {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    border-top: 1px dashed var(--color-border);
    font-size: 0.86rem;
  }
  .modal .members-list li:first-child { border-top: none; }
  .modal .members-list .m-id {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--color-ink);
    font-size: 0.88rem;
  }
  .modal .members-list .m-id.is-shortid {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    color: var(--color-muted);
  }
  .modal .members-list .m-self { color: var(--color-accent); font-weight: 600; }
  .modal .members-list .m-role {
    font-size: 0.74rem;
    padding: 0.08rem 0.5rem;
    border-radius: 999px;
    color: var(--color-muted);
    background: var(--color-bg-warm);
  }
  .modal .members-list .m-role.owner { background: var(--pet-chart-target-bg); color: var(--pet-chart-target); font-weight: 600; }
  .modal .members-list .m-role.admin { background: rgba(201, 169, 110, 0.2); color: var(--pet-gold); }
  .modal .members-list .m-actions { display: flex; gap: 0.3rem; }
  .modal .members-list .m-actions button {
    font: inherit; font-size: 0.72rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--color-border); border-radius: 999px;
    background: var(--color-bg); color: var(--color-muted);
    cursor: pointer;
  }
  .modal .members-list .m-actions button.danger { color: var(--pet-danger); }
  .modal .your-role {
    font-size: 0.82rem; color: var(--color-muted);
    margin-top: 0.4rem;
  }
  .modal .your-role strong { color: var(--color-accent); }
  /* Permission-gated inputs */
  .modal .pm-locked input[type="text"],
  .modal .pm-locked input[type="number"],
  .modal .pm-locked select {
    background: var(--color-bg-warm);
    color: var(--color-light);
    pointer-events: none;
  }
  .modal .pm-locked label { color: var(--color-light); }
  .modal .pm-locked .avatar-cell { opacity: 0.5; pointer-events: none; }
  .modal .pm-locked .estimator { opacity: 0.55; pointer-events: none; }
  .entry-form .bowl-row.locked input,
  .entry-form .bowl-row.locked select {
    background: var(--color-bg-warm);
    color: var(--color-light);
    pointer-events: none;
  }

  /* My-pets list (profile modal) */
  .modal .my-pets-list {
    list-style: none; margin: 0; padding: 0;
    border: 1px solid var(--color-border); border-radius: 6px;
    background: var(--color-bg);
    max-height: 260px; overflow-y: auto;
  }
  .modal .my-pets-list li {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0.55rem 0.75rem;
    border-top: 1px dashed var(--color-border);
    font-size: 0.92rem;
  }
  .modal .my-pets-list li:first-child { border-top: none; }
  .modal .my-pets-list .mp-icon {
    width: 1.8em; height: 1.8em; border-radius: 50%;
    background: var(--color-bg-warm);
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
  }
  .modal .my-pets-list .mp-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .modal .my-pets-list .mp-name { flex: 1; color: var(--color-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .modal .my-pets-list .mp-role-badge {
    font-size: 0.74rem;
    padding: 0.08rem 0.5rem;
    border-radius: 999px;
    color: var(--color-muted);
    background: var(--color-bg-warm);
  }
  .modal .my-pets-list .mp-role-badge.owner { background: var(--pet-chart-target-bg); color: var(--pet-chart-target); font-weight: 600; }
  .modal .my-pets-list .mp-role-badge.admin { background: rgba(201, 169, 110, 0.2); color: var(--pet-gold); }
  .modal .my-pets-list .mp-empty { padding: 1rem; text-align: center; color: var(--color-light); font-size: 0.85rem; }
  .modal .my-pets-list li { cursor: pointer; transition: background 0.15s; }
  @media (hover: hover) {
    .modal .my-pets-list li:hover { background: var(--color-bg-warm); }
  }

  /* Join modal */
  .join-modal .modal { max-width: 380px; }
  .join-modal .code-input {
    width: 100%; box-sizing: border-box;
    padding: 0.7rem 0.85rem;
    font: inherit;
    font-family: var(--font-display);
    font-size: 1.4rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    border: 1px solid var(--color-border); border-radius: 8px;
    background: var(--color-bg); color: var(--color-ink);
  }
  .join-modal .code-input:focus { outline: none; border-color: var(--color-accent); }

  .storage-warn {
    position: fixed;
    top: env(safe-area-inset-top, 0px); left: 0; right: 0;
    background: var(--pet-danger);
    color: #fff;
    padding: 0.55rem 1rem;
    font-size: 0.88rem;
    text-align: center;
    z-index: 9999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  .storage-warn .close-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    margin-left: 0.7rem;
    font-size: 0.78rem;
    cursor: pointer;
  }

  /* PWA standalone: leave room for home indicator bar */
  @media (display-mode: standalone) {
    .pf-wrap {
      padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    }
  }

  /* Phones: tighten the tool's own padding so the content isn't a narrow column
     (main.css already trims main's side padding for toolbox pages at ≤768). */
  @media (max-width: 600px) {
    .pf-wrap { --pf-pad: 0.75rem; padding: var(--pf-pad); }
  }

  /* ===== Installed-PWA app bar ===== */
  /* Visual props defined once; only `display` (+ hiding the decorative header and
     zeroing main's top margin) is gated to the two standalone triggers below. */
  .pf-appbar {
    display: none;
    align-items: center; justify-content: center; gap: 0.5rem;
    position: sticky; top: 0; z-index: 60;
    /* bleed up + out to the screen edges, cancelling .pf-wrap's padding */
    margin: calc(-1 * var(--pf-pad)) calc(-1 * var(--pf-pad)) 1rem;
    padding: calc(env(safe-area-inset-top, 0px) + 0.55rem) var(--pf-pad) 0.55rem;
    background: var(--color-bg); border-bottom: 1px solid var(--color-border);
  }
  .pf-appbar .pf-appbar-title {
    display: inline-flex; align-items: center;
    font-family: var(--font-display); font-size: 1.18rem; font-weight: 600; color: var(--color-ink);
  }
  .pf-appbar .pf-brand-mark { vertical-align: 0; }
  /* 装成 APP 后站点导航被隐藏，这里给 App 顶栏一个明暗切换入口（mob-1）*/
  .pf-appbar .pf-appbar-theme {
    position: absolute; right: var(--pf-pad); bottom: 0.42rem;
    background: none; border: none; color: var(--color-muted);
    font-size: 1.25rem; line-height: 1; cursor: pointer; padding: 0.15rem 0.4rem; border-radius: 8px;
  }
  @media (hover: hover) { .pf-appbar .pf-appbar-theme:hover { color: var(--color-accent); } }
  @media (display-mode: standalone) {
    .pf-appbar { display: flex; }
    .pf-wrap > header { display: none; }
    body.app-shell > main { margin-top: 0 !important; }
  }
  html.ios-standalone .pf-appbar { display: flex; }
  html.ios-standalone .pf-wrap > header { display: none; }
  html.ios-standalone body.app-shell > main { margin-top: 0 !important; }

  /* Prevent iOS auto-zoom on focus for ALL touch devices (phones AND iPad portrait
     768/834px, which a width-only ≤680px rule missed). pointer:coarse = touch input. */
  @media (pointer: coarse) {
    .pf-wrap input, .pf-wrap select, .pf-wrap textarea {
      font-size: max(16px, 0.9rem);
    }
  }

  /* Respect user's prefers-reduced-motion: disable wiggle & EQ bar animations */
  @media (prefers-reduced-motion: reduce) {
    .cl-widget .cl-sound.playing .cl-emoji,
    .cl-widget .cl-eq span,
    .board-panel.active,
    .link-toast,
    .entry-form .bowl-row.shake input {
      animation: none !important;
    }
  }

  /* ================================================================
     食记 redesign（2026-07）—— 一张暖纸手账：衬线秤面数字 + 圆食豆 +
     细线分区，作用域限定 .food-card，干净覆盖旧的「盒子汤」样式。
     ================================================================ */
  .pf-wrap .food-card {
    --fc-paper:#fbf8f2; --fc-raise:#fffefb; --fc-ink:#26313d; --fc-navy:var(--color-accent);
    --fc-gold:#bf9f57; --fc-sage:#5d8a6b; --fc-muted:#867f72; --fc-faint:#a9a293;
    --fc-hair:#e6ddcd; --fc-hair2:#efe8da;
    /* 去掉卡片背景/边框/阴影 —— 整块开放地落在页面暖底上，纯靠细线+留白分区 */
    background:none; border:none; border-radius:0; box-shadow:none;
    padding:0; margin-bottom:0;
  }
  :root[data-theme="dark"] .pf-wrap .food-card,
  html:not([data-theme="light"]) .pf-wrap .food-card {
    /* 暗色下沿用站点暗底，保持一张纸的观感 */
    --fc-paper:var(--color-bg-warm); --fc-raise:var(--color-bg); --fc-ink:var(--color-ink);
    --fc-muted:var(--color-muted); --fc-faint:var(--color-light);
    --fc-hair:var(--color-border); --fc-hair2:var(--color-border);
  }

  .food-card .fc-rule { height:1px; background:var(--fc-hair); margin:1.3rem 0; border:none; }

  /* ---- HERO ---- */
  .food-card .food-hero { text-align:center; }
  .food-card .fh-lbl { font-family:var(--font-body); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fc-faint); }
  .food-card .fh-num {
    font-family:var(--font-display); font-weight:600; line-height:1; color:var(--fc-navy);
    font-size:4rem; font-variant-numeric:tabular-nums; letter-spacing:-.01em; margin:.15rem 0 .1rem;
  }
  @media (max-width:560px){ .food-card .fh-num { font-size:3.3rem; } }
  /* rec-strip 重塑成「目标行 + 一条细达标线」 */
  .food-card .rec-strip { background:none; border:none; padding:0; margin:.5rem 1.4rem .2rem; font-size:.8rem; }
  .food-card .rec-strip.editable { cursor:pointer; }
  .food-card .rec-strip.no-target .rec-bar { display:none; }
  .food-card .rec-strip.no-target .rec-title { color:var(--fc-navy); }
  .food-card .rec-strip-head { display:flex; justify-content:center; gap:.5rem; align-items:baseline; margin-bottom:.55rem; flex-wrap:wrap; }
  .food-card .rec-strip-head .rec-title { color:var(--fc-muted); font-weight:400; font-family:var(--font-body); }
  .food-card .rec-strip-head .rec-now { display:none; }  /* 秤面已显示今日量，这里不重复 */
  .food-card .rec-strip .rec-edit { color:var(--fc-faint); font-size:.72rem; }
  .food-card .rec-bar { position:relative; height:6px; background:var(--fc-hair2); border-radius:999px; overflow:hidden; }
  .food-card .rec-bar .rec-band { position:absolute; top:0; bottom:0; background:rgba(93,138,107,.16); }
  .food-card .rec-bar .rec-fill { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg,#8fb59d,var(--fc-sage)); }
  .food-card .rec-bar .rec-marker { position:absolute; top:-2px; width:2px; height:10px; background:var(--fc-navy); border-radius:2px; }
  .food-card .fh-micro { display:flex; justify-content:center; align-items:baseline; gap:.5rem; flex-wrap:wrap; font-family:var(--font-body); font-size:.82rem; color:var(--fc-muted); margin-top:1rem; }
  .food-card .fh-micro b { font-family:var(--font-display); font-size:1rem; color:var(--fc-ink); font-variant-numeric:tabular-nums; font-weight:600; }
  .food-card .fh-micro .fh-dot { color:var(--fc-faint); }

  /* ---- section label + filter ---- */
  .food-card .log-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; gap:.6rem; }
  .food-card .log-lbl { font-family:var(--font-body); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fc-faint); }
  .food-card .food-filter { display:flex; gap:.65rem; font-family:var(--font-body); font-size:.8rem; }
  .food-card .food-filter .ff { border:none; background:none; padding:0; color:var(--fc-faint); cursor:pointer; font:inherit; }
  .food-card .food-filter .ff.active { color:var(--fc-navy); font-weight:700; }

  /* ---- 圆食豆 ---- */
  .food-card .food-selector.coins { display:flex; gap:.9rem; overflow-x:auto; padding:.2rem .1rem .55rem; margin:0 -.1rem; scrollbar-width:none; }
  .food-card .food-selector.coins::-webkit-scrollbar { display:none; }
  .food-card .coin { flex:0 0 auto; width:58px; text-align:center; cursor:pointer; position:relative; background:none; border:none; padding:0; font:inherit; }
  .food-card .coin .disc {
    width:56px; height:56px; border-radius:50%; margin:0 auto; background:var(--fc-raise);
    border:1px solid var(--fc-hair); display:flex; align-items:center; justify-content:center;
    font-size:1.6rem; box-shadow:0 2px 5px rgba(40,30,20,.06); transition:box-shadow .15s, background .15s; overflow:hidden;
  }
  .food-card .coin .disc img { width:100%; height:100%; object-fit:cover; }
  .food-card .coin .disc .fc-initial { font-size: 0.84em; }
  .food-card .coin .cn { display:block; font-family:var(--font-body); font-size:.68rem; color:var(--fc-muted); margin-top:.38rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .food-card .coin.on .disc { box-shadow:0 0 0 2px var(--fc-gold), 0 4px 12px rgba(191,159,87,.32); background:var(--fc-raise); }
  .food-card .coin.on .cn { color:var(--fc-navy); font-weight:700; }
  .food-card .coin.add .disc { border-style:dashed; color:var(--fc-faint); font-size:1.35rem; background:transparent; box-shadow:none; }
  .food-card .coin .coin-edit { position:absolute; top:-2px; right:2px; width:20px; height:20px; border-radius:50%; border:1px solid var(--fc-hair); background:var(--fc-raise); color:var(--fc-muted); font-size:.66rem; line-height:1; display:none; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.12); }
  .food-card .coin.on .coin-edit { display:flex; }
  .food-card .coin:focus-visible .disc, .food-card .coin .coin-edit:focus-visible { outline:2px solid var(--fc-navy); outline-offset:2px; }

  /* ---- 填法：文字标签下划线（覆盖旧胶囊） ---- */
  .food-card .method-toggle { display:flex; gap:1.6rem; background:none; border:none; padding:0; margin:1.3rem 0 .1rem; }
  .food-card .method-toggle label {
    position:relative; padding:0 0 .4rem; margin:0; border:none; background:none; cursor:pointer;
    font-family:var(--font-body); font-size:.88rem; color:var(--fc-faint); border-radius:0; box-shadow:none;
  }
  .food-card .method-toggle label input { position:absolute; opacity:0; width:0; height:0; }
  .food-card .method-toggle label.active { color:var(--fc-ink); font-weight:600; }
  .food-card .method-toggle label.active::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--fc-navy); border-radius:2px; }

  /* ---- 下划线大输入 + 圆形记 ---- */
  .food-card .entry-line { display:flex; align-items:flex-end; gap:1rem; margin-top:.75rem; }
  .food-card .reading-group { flex:1; display:flex; align-items:baseline; gap:.5rem; border:none; border-bottom:1.5px solid var(--fc-navy); border-radius:0; background:none; padding:.15rem .1rem .5rem; box-shadow:none; }
  .food-card .reading-group .reading {
    flex:1; border:none; background:none; box-shadow:none; padding:0; min-width:0;
    font-family:var(--font-display); font-size:2.2rem; color:var(--fc-navy); font-variant-numeric:tabular-nums; font-weight:600; line-height:1;
  }
  .food-card .reading-group .reading::placeholder { color:#c8c0b0; font-weight:500; font-size:1.35rem; }
  .food-card .reading-group .reading:focus { outline:none; }
  .food-card .reading-group .unit-pick { border:none; background:none; box-shadow:none; color:var(--fc-muted); font-family:var(--font-body); font-size:.9rem; padding:0; }
  .food-card .reading-group .unit-suffix { color:var(--fc-muted); font-family:var(--font-body); font-size:.9rem; }
  .food-card .go-btn { flex:0 0 auto; width:54px; height:54px; border-radius:50%; background:var(--fc-navy); color:#fff; border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 16px -6px rgba(30,58,95,.6); transition:transform .08s; }
  .food-card .go-btn:active { transform:scale(.94); }
  .food-card .go-btn svg { width:1.5rem; height:1.5rem; }
  .food-card .extra-eq-row { margin-top:.7rem; padding:0; background:none; border:none; }
  .food-card .extra-eq-row .extra-eq { font-family:var(--font-body); font-size:.78rem; color:var(--fc-muted); }

  /* ---- 含碗/换新/时间 收成一条紧凑 meta 行（一行放不下自动换行）---- */
  .food-card .entry-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem 1.25rem; margin-top:1rem; padding-top:.95rem; border-top:1px dashed var(--fc-hair); }
  .food-card .mode-bowl { display:inline-flex; align-items:center; gap:.85rem; flex-wrap:wrap; }
  .food-card .mode-bowl .mode-toggle { display:inline-flex; gap:1.1rem; background:none; border:none; padding:0; }
  .food-card .mode-bowl .mode-toggle label { position:relative; padding:0 0 2px; margin:0; border:none; background:none; box-shadow:none; border-radius:0; font-family:var(--font-body); font-size:.82rem; color:var(--fc-faint); cursor:pointer; }
  .food-card .mode-bowl .mode-toggle label input { position:absolute; opacity:0; width:0; height:0; }
  .food-card .mode-bowl .mode-toggle label.active { color:var(--fc-navy); font-weight:700; border-bottom:2px solid var(--fc-gold); }
  .food-card .bowl-row { display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-body); font-size:.82rem; color:var(--fc-muted); }
  .food-card .bowl-row input { width:4.5rem; border:none; border-bottom:1px solid var(--fc-hair); background:none; border-radius:0; box-shadow:none; padding:0 .2rem .1rem; color:var(--fc-ink); font-variant-numeric:tabular-nums; font-family:var(--font-body); }
  .food-card .bowl-row input:focus { outline:none; border-bottom-color:var(--fc-navy); }
  .food-card .bowl-row select { border:none; background:none; box-shadow:none; color:var(--fc-muted); font-family:var(--font-body); font-size:.8rem; padding:0; }
  .food-card .bowl-row.needs-bowl input { border-bottom-color:var(--fc-gold); }
  /* 方案 A：「换新」收成一个不起眼的小开关；点开才高亮 + 冒一句大白话（不再是整行长句） */
  .food-card .reset-row { display:inline-flex; align-items:center; gap:.6rem; margin:0; cursor:pointer; }
  .food-card .reset-row input { position:absolute; opacity:0; width:0; height:0; }
  .food-card .renew-chip { display:inline-flex; align-items:center; gap:.3rem; font-family:var(--font-body); font-size:.78rem; color:var(--fc-faint); border:1px solid var(--fc-hair); border-radius:999px; padding:.2rem .62rem .2rem .5rem; transition:color .15s, border-color .15s, background .15s; }
  .food-card .renew-ico { width:.95rem; height:.95rem; flex:0 0 auto; }
  .food-card .reset-row input:checked ~ .renew-chip { color:var(--fc-navy); border-color:var(--fc-gold); background:var(--pet-gold-bg); font-weight:600; }
  .food-card .renew-hint { font-family:var(--font-body); font-size:.74rem; color:var(--fc-muted); display:none; }
  .food-card .reset-row input:checked ~ .renew-hint { display:inline; }
  .food-card .reset-row input:focus-visible ~ .renew-chip { outline:2px solid var(--fc-navy); outline-offset:2px; }

  /* ---- 次要：时间 ---- */
  .food-card .entry-sub { display:inline-flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin:0; }
  .food-card .entry-sub .time-pill { background:none; border:none; box-shadow:none; padding:0; min-height:0; color:var(--fc-muted); font-family:var(--font-body); font-size:.78rem; display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; }
  .food-card .entry-sub .time-pill .tp-ico { width:auto; height:auto; background:none; border-radius:0; }
  .food-card .entry-sub .time-pill .tp-ico svg { width:14px; height:14px; }
  .food-card .entry-sub .time-pill .tp-lbl { color:var(--fc-faint); }
  .food-card .entry-sub .time-pill .tp-val { color:var(--fc-navy); border-bottom:1px dotted var(--fc-navy); }
  .food-card .entry-sub .time-pill .tp-edit { color:var(--fc-faint); font-size:.72rem; }
  .food-card .entry-sub .time-add-end { background:none; border:none; color:var(--fc-navy); font-family:var(--font-body); font-size:.78rem; cursor:pointer; text-decoration:underline dotted; padding:0; }

  /* ---- 今天的记录：细线行 ---- */
  .food-card .entries-list { display:block; }
  /* 空记录：去掉白框，改成贴合纸面的留白提示 */
  .food-card .entries-list .empty-row {
    background:none; border:none; box-shadow:none; border-radius:0;
    color:var(--fc-faint); font-family:var(--font-body); font-size:.9rem;
    padding:1.6rem .1rem; text-align:center;
  }

  /* first-hint 融进纸面（去掉独立盒子的重边框） */
  .food-card .first-hint { background:var(--pet-gold-bg); border:none; border-left:3px solid var(--fc-gold); border-radius:0 8px 8px 0; margin:0 0 1.1rem; }

  /* ================================================================
     统一：趋势 + 历史也进「食记」纸卡语言（第二张 .food-card）
     ================================================================ */
  .food-card .log-head.trend-head { align-items:baseline; }
  .food-card .log-head .right { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; font-family:var(--font-body); }
  .food-card #chart-range-lbl { font-family:var(--font-body); font-size:.72rem; color:var(--fc-faint); letter-spacing:0; }
  /* 趋势区间标签 → 柔和小 chip */
  .food-card .trend-tabs { display:flex; flex-wrap:wrap; gap:.4rem; margin:0 0 1rem; border:none; }
  .food-card .trend-tabs button {
    font-family:var(--font-body); font-size:.8rem; padding:.32rem .82rem;
    border:1px solid var(--fc-hair); border-radius:999px; background:var(--fc-raise);
    color:var(--fc-muted); cursor:pointer;
  }
  .food-card .trend-tabs button.active { background:var(--fc-navy); color:#fff; border-color:var(--fc-navy); font-weight:600; }
  /* 目标参考线/横屏/下载 → 柔和小 chip */
  .food-card .target-toggle {
    font-family:var(--font-body); font-size:.74rem; padding:.24rem .68rem;
    border:1px solid var(--fc-hair); border-radius:999px; background:var(--fc-raise);
    color:var(--fc-muted); cursor:pointer; white-space:nowrap;
  }
  .food-card .target-toggle.active { background:var(--pet-chart-target-bg); border-color:var(--pet-chart-target); color:var(--pet-chart-target); font-weight:600; }
  /* 图表：去掉厚边框盒子，落在纸面上 */
  .food-card .chart-wrap { border:none; background:none; box-shadow:none; border-radius:0; padding:.2rem 0 0; position:relative; }
  /* 自定义/翻日期控件 → 贴合纸面 */
  .food-card .trend-custom, .food-card .trend-daynav {
    font-family:var(--font-body); font-size:.8rem; color:var(--fc-muted);
    display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:0 0 .9rem;
  }
  .food-card .trend-custom input, .food-card .trend-daynav .dn-date {
    border:none; border-bottom:1px solid var(--fc-hair); background:none; color:var(--fc-ink);
    border-radius:0; font-family:var(--font-body); padding:.12rem .25rem;
  }
  .food-card .trend-daynav .dn-arrow {
    width:1.9rem; height:1.9rem; border:1px solid var(--fc-hair); background:var(--fc-raise);
    color:var(--fc-muted); border-radius:50%; cursor:pointer; line-height:1;
  }
  .food-card .trend-daynav .dn-today {
    border:1px solid var(--fc-hair); background:var(--fc-raise); color:var(--fc-muted);
    border-radius:999px; padding:.22rem .8rem; font-size:.78rem; font-family:var(--font-body); cursor:pointer;
  }
  /* 历史「展开」按钮 */
  .food-card .hist-toggle { border:none; background:none; padding:0; color:var(--fc-navy); font-family:var(--font-body); font-size:.82rem; cursor:pointer; }
  .food-card #entries-history { margin-top:.5rem; }

  /* ================================================================
     记录行细线化 + 历史并进「记录」（展开更早）—— 统一进纸卡
     ================================================================ */
  .food-card .entries-list .entry-row {
    display:flex; align-items:center; gap:.75rem; padding:.68rem .15rem; margin:0;
    background:none; border:none; border-bottom:1px solid var(--fc-hair2); border-radius:0; box-shadow:none;
  }
  .food-card .entries-list .entry-row:last-child { border-bottom:none; }
  .food-card .er-time { font-family:var(--font-body); font-size:.74rem; color:var(--fc-faint); flex:0 0 auto; min-width:3rem; font-variant-numeric:tabular-nums; }
  .food-card .er-main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.08rem; }
  .food-card .er-delta { font-size:.95rem; line-height:1.35; }
  .food-card .er-reading { font-family:var(--font-body); font-size:.72rem; color:var(--fc-muted); }
  .food-card .er-raw { color:var(--fc-faint); font-size:.9em; }
  .food-card .er-actions { flex:0 0 auto; display:inline-flex; gap:.15rem; }
  .food-card .er-edit, .food-card .er-del {
    border:none; background:none; color:var(--fc-faint); cursor:pointer;
    font-size:.9rem; line-height:1; padding:.2rem .3rem; border-radius:6px;
  }
  @media (hover:hover){ .food-card .er-edit:hover, .food-card .er-del:hover { color:var(--fc-navy); } }
  .food-card .er-edit:focus-visible, .food-card .er-del:focus-visible { outline:2px solid var(--fc-navy); outline-offset:2px; }
  /* 历史滚动区（并进「记录」后，展开更早时用）*/
  .food-card #entries-history.scroll { max-height:19rem; overflow-y:auto; }
  /* 「展开更早的记录」素链接 */
  .food-card .more-history {
    display:inline-block; margin:.55rem 0 0; border:none; background:none; padding:0;
    color:var(--fc-navy); font-family:var(--font-body); font-size:.8rem; cursor:pointer;
  }
  .food-card .more-history:focus-visible { outline:2px solid var(--fc-navy); outline-offset:2px; border-radius:4px; }

  /* ================================================================
     记录「按日翻」day-nav（方案 B）：默认今天，‹ › 翻天，可跳日期 + 当天合计
     ================================================================ */
  .food-card .log-head.rec-head { align-items:center; }
  .food-card .rec-daynav { position:relative; display:inline-flex; align-items:center; gap:.4rem; font-family:var(--font-body); }
  .food-card .rn-arrow {
    width:1.85rem; height:1.85rem; border:1px solid var(--fc-hair); background:var(--fc-raise); color:var(--fc-muted);
    border-radius:50%; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; line-height:1; font-size:1.05rem; padding:0;
  }
  .food-card .rn-arrow:disabled { opacity:.35; cursor:default; }
  @media(hover:hover){ .food-card .rn-arrow:not(:disabled):hover { border-color:var(--fc-navy); color:var(--fc-navy); } }
  .food-card .rn-cur {
    border:none; background:none; color:var(--fc-navy); font-family:var(--font-body); font-size:.9rem; font-weight:600;
    cursor:pointer; padding:.1rem .35rem; min-width:3.4rem; text-align:center;
  }
  .food-card .rn-cur::after { content:" +"; color:var(--fc-faint); font-size:.7em; }
  .food-card .rn-date-hidden { position:absolute; left:50%; bottom:-4px; width:1px; height:1px; opacity:0; pointer-events:none; }
  .food-card .rn-cur:focus-visible, .food-card .rn-arrow:focus-visible { outline:2px solid var(--fc-navy); outline-offset:2px; }
  .food-card .rec-total { font-family:var(--font-body); font-size:.78rem; color:var(--fc-faint); text-align:center; margin-top:.9rem; }
  .food-card .rec-total:empty { display:none; }
  .food-card .rec-total b { color:var(--fc-ink); font-family:var(--font-display); font-variant-numeric:tabular-nums; }

  /* ================================================================
     体重框：同款「食记」语言（复用 food-hero / method-toggle / reading-group / go-btn / entry-row）
     ================================================================ */
  .food-card .weight-hero .fh-num #wh-num,
  .food-card .weight-hero .fh-num #wh-unit { font:inherit; color:inherit; background:none; }
  .food-card .weight-hero .fh-num em#wh-unit { font-style:normal; font-size:1.2rem; color:var(--fc-muted); margin-left:.15rem; }
  .food-card .fh-wsub { font-family:var(--font-body); font-size:.78rem; color:var(--fc-muted); margin-top:.35rem; }
  .food-card .fh-wsub .wh-delta { color:var(--fc-sage); font-weight:700; }
  /* 方法切换：weight-method 也套 method-toggle 文字下划线（清掉旧的胶囊/竖排）*/
  .food-card .weight-method { display:flex; gap:1.6rem; background:none; border:none; padding:0; margin:1.3rem 0 .1rem; flex-direction:row; }
  .food-card .weight-method label { position:relative; padding:0 0 .4rem; margin:0; border:none; background:none; box-shadow:none; border-radius:0; cursor:pointer; font-family:var(--font-body); font-size:.88rem; color:var(--fc-faint); display:inline-block; text-align:left; }
  .food-card .weight-method label input { position:absolute; opacity:0; width:0; height:0; }
  .food-card .weight-method label.active { color:var(--fc-ink); font-weight:600; }
  .food-card .weight-method label.active::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--fc-navy); border-radius:2px; }
  /* 输入：单称/作差都用下划线 reading-group */
  .food-card .weight-single, .food-card .weight-diff { margin-top:.75rem; }
  .food-card .weight-single .reading-group, .food-card .weight-diff .reading-group { border:none; border-bottom:1.5px solid var(--fc-navy); border-radius:0; background:none; box-shadow:none; padding:.15rem .1rem .5rem; display:flex; align-items:baseline; gap:.4rem; }
  .food-card .weight-reading .reading { flex:1; min-width:0; border:none; background:none; box-shadow:none; padding:0; font-family:var(--font-display); color:var(--fc-navy); font-variant-numeric:tabular-nums; font-weight:600; font-size:2rem; line-height:1; }
  .food-card .weight-reading .reading:focus { outline:none; }
  .food-card .weight-reading .reading::placeholder { color:#c8c0b0; font-weight:500; font-size:1.15rem; }
  .food-card .weight-reading .unit-pick { border:none; background:none; box-shadow:none; color:var(--fc-muted); font-family:var(--font-body); font-size:.88rem; padding:0; }
  .food-card .weight-reading .unit-echo { font-family:var(--font-body); font-size:.85rem; color:var(--fc-muted); }
  .food-card .wdiff-row { display:flex; align-items:flex-end; gap:.8rem; }
  .food-card .wdiff-row .reading-group { flex:1; }
  .food-card .wdiff-row .weight-reading .reading { font-size:1.45rem; }
  .food-card .wdiff-row .weight-reading .reading::placeholder { font-size:.95rem; }
  .food-card .wdiff-minus { color:var(--fc-faint); font-size:1.4rem; padding-bottom:.4rem; align-self:flex-end; }
  .food-card .diff-result { font-family:var(--font-body); font-size:.8rem; color:var(--fc-muted); margin-top:.7rem; }
  .food-card .diff-result.empty { color:var(--fc-faint); }
  .food-card .diff-result strong { color:var(--fc-navy); font-family:var(--font-display); font-variant-numeric:tabular-nums; font-weight:600; font-size:1.05rem; }
  /* 底部：时间(左) + 圆形记(右) */
  .food-card .wentry-foot { display:flex; justify-content:space-between; align-items:center; margin-top:1.1rem; gap:.8rem; flex-wrap:wrap; }
  .food-card .wentry-foot .time-pill { background:none; border:none; box-shadow:none; padding:0; min-height:0; color:var(--fc-muted); font-family:var(--font-body); font-size:.78rem; display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; }
  .food-card .wentry-foot .time-pill .tp-ico { width:auto; height:auto; background:none; border-radius:0; }
  .food-card .wentry-foot .time-pill .tp-ico svg { width:14px; height:14px; }
  .food-card .wentry-foot .time-pill .tp-lbl { color:var(--fc-faint); }
  .food-card .wentry-foot .time-pill .tp-val { color:var(--fc-navy); border-bottom:1px dotted var(--fc-navy); }
  .food-card .wentry-foot .time-pill .tp-edit { color:var(--fc-faint); font-size:.72rem; }
  /* 趋势图去盒子 + 空态无框 */
  .food-card .weight-chart-wrap { border:none; background:none; box-shadow:none; border-radius:0; padding:.2rem 0 0; position:relative; }
  .food-card .weight-empty { background:none; border:none; box-shadow:none; color:var(--fc-faint); font-family:var(--font-body); font-size:.9rem; text-align:center; padding:1.5rem .1rem; }
  /* 最近记录行细线化（weight-list 用 .entry-row，同粮食）*/
  .food-card .weight-list .entry-row { display:flex; align-items:center; gap:.75rem; padding:.68rem .15rem; margin:0; background:none; border:none; border-bottom:1px solid var(--fc-hair2); border-radius:0; box-shadow:none; }
  .food-card .weight-list .entry-row:last-child { border-bottom:none; }

  /* 体重历史记录：分页（上一页/下一页/跳页，每页固定条数）*/
  .food-card .wpage { display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:1.1rem; flex-wrap:wrap; font-family:var(--font-body); font-size:.8rem; }
  .food-card .wpage-btn { border:1px solid var(--fc-hair); background:var(--fc-raise); color:var(--fc-muted); border-radius:999px; padding:.3rem .85rem; cursor:pointer; font:inherit; white-space:nowrap; }
  .food-card .wpage-btn:disabled { opacity:.35; cursor:default; }
  @media(hover:hover){ .food-card .wpage-btn:not(:disabled):hover { border-color:var(--fc-navy); color:var(--fc-navy); } }
  .food-card .wpage-mid { color:var(--fc-muted); white-space:nowrap; }
  .food-card .wpage-select { border:none; border-bottom:1px solid var(--fc-hair); background:none; color:var(--fc-navy); font-family:var(--font-body); font-weight:600; font-variant-numeric:tabular-nums; padding:0 .15rem .05rem; cursor:pointer; }
  .food-card .wpage-btn:focus-visible, .food-card .wpage-select:focus-visible { outline:2px solid var(--fc-navy); outline-offset:2px; }

  /* 食物按类别筛选标签（食豆上方；有类别时才显示）*/
  .food-card .food-filter { display:flex; gap:.7rem; font-family:var(--font-body); font-size:.8rem; flex-wrap:wrap; align-items:center; }
  .food-card .food-filter .ff { border:none; background:none; padding:0; color:var(--fc-faint); cursor:pointer; font:inherit; }
  .food-card .food-filter .ff.active { color:var(--fc-navy); font-weight:700; }
  @media(hover:hover){ .food-card .food-filter .ff:not(.active):hover { color:var(--fc-muted); } }
  .food-card .food-filter .ff:focus-visible { outline:2px solid var(--fc-navy); outline-offset:2px; border-radius:4px; }

  /* 选中类别时旁边的「改名/删除」小 ✎（仅管理员）*/
  .food-card .food-filter .ff-edit { border:none; background:none; padding:0; margin-left:-.4rem; color:var(--fc-faint); cursor:pointer; font-size:.76rem; line-height:1; }
  @media(hover:hover){ .food-card .food-filter .ff-edit:hover { color:var(--fc-navy); } }
  .food-card .food-filter .ff-edit:focus-visible { outline:2px solid var(--fc-navy); outline-offset:2px; border-radius:4px; }

  /* 「加现有食物到某类别」弹窗（在某类别下点「＋」时打开）*/
  #cat-add-modal .cat-add-new { display:block; width:100%; text-align:center; font:inherit; font-size:.9rem; padding:.6rem; border:1px dashed var(--color-border); border-radius:10px; background:var(--color-bg); color:var(--color-accent); cursor:pointer; margin-bottom:1rem; }
  #cat-add-modal .cat-add-hint { font-size:.8rem; color:var(--color-muted); margin-bottom:.6rem; }
  #cat-add-modal .cat-add-list { display:flex; flex-direction:column; gap:.4rem; max-height:50vh; overflow-y:auto; }
  #cat-add-modal .cat-add-row { display:flex; align-items:center; gap:.6rem; padding:.55rem .7rem; border:1px solid var(--color-border); border-radius:10px; background:var(--color-bg); cursor:pointer; font:inherit; text-align:left; }
  @media(hover:hover){ #cat-add-modal .cat-add-row:hover { border-color:var(--color-accent); } }
  #cat-add-modal .cat-add-row .ca-emoji { font-size:1.15rem; flex:0 0 auto; display:inline-flex; }
  #cat-add-modal .cat-add-row .ca-emoji .fc-photo { width:1.4em; height:1.4em; object-fit:cover; border-radius:5px; display:block; }
  #cat-add-modal .cat-add-row .ca-name { flex:1; color:var(--color-ink); }
  #cat-add-modal .cat-add-row .ca-plus { color:var(--color-accent); font-size:.82rem; font-weight:600; flex:0 0 auto; }
  #cat-add-modal .cat-add-empty { color:var(--color-muted); font-size:.85rem; text-align:center; padding:1.2rem .5rem; line-height:1.6; }