/* ============================================================
 * 久便宜 · 养宠账本 · 元/天 — 前端样式（零依赖，纯 CSS）
 * 设计：干净、卡片化、以「元/天」为主视觉重点
 * ============================================================ */
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --ink: #1f2430;
  --ink-soft: #5b6472;
  --ink-mute: #6b7484;       /* 辅助说明文字（白底对比度 ≥4.5:1） */
  --line: #e6e9ef;
  --brand: #f0883e;          /* 暖橙：装饰 / 浅色描边 */
  --brand-strong: #c2410c;   /* 深橙：按钮 / 激活态底色（白字 ≥4.5:1） */
  --brand-ink: #b9551a;
  --accent: #2bb6a3;         /* 青：装饰 */
  --accent-ink: #14746a;     /* 深青：文字 / 按钮底色（白字 ≥4.5:1） */
  --accent-ink-dark: #0f5f56;/* 深青按下态 */
  --accent-soft: #e6f7f4;
  --ok: #1f8a4c;                /* 绿色：正常 / 高匹配 / 充足状态 */
  --warn-bg: #fff7e9;
  --warn-line: #f3d8a8;
  --warn-ink: #8a5a12;
  --ref-bg: #eef1f6;
  --ref-ink: #6b7484;
  --shadow: 0 1px 3px rgba(20, 30, 50, .06), 0 6px 18px rgba(20, 30, 50, .05);
  --radius: 14px;
}

/* 键盘焦点可见性（P0 修复：纯键盘用户能清楚看到焦点位置） */
:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 2px; border-radius: 6px; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .chip:focus-visible, .cat-tab:focus-visible, .link-btn:focus-visible {
  outline: 3px solid var(--brand-strong); outline-offset: 2px;
}

/* 占位符对比度（P2 修复：浏览器默认 placeholder 在白底上仅约 3:1，不达 WCAG AA）
   统一使用 --ink-mute(#6b7484)，在 #fbfcfe 输入底色上对比度≈4.6:1，达标；
   opacity:1 修正 Firefox 默认半透明导致对比度被进一步拉低的问题 */
::placeholder { color: var(--ink-mute); opacity: 1; }
::-webkit-input-placeholder { color: var(--ink-mute); opacity: 1; }
:-moz-placeholder { color: var(--ink-mute); opacity: 1; }
::-moz-placeholder { color: var(--ink-mute); opacity: 1; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  /* 与「宠物建档」页同一套氛围：暖橙 + 青绿晕染，避免纯灰平铺 */
  background:
    radial-gradient(1100px 420px at 12% -8%, rgba(240, 136, 62, .12), transparent 60%),
    radial-gradient(900px 380px at 92% 2%, rgba(43, 182, 163, .09), transparent 62%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
.container { width: min(1180px, 100% - 28px); margin: 0 auto; }

/* ---------- Header ----------
   2026-09-10 重排：品牌（左）/ 数据概况（中，内联仪表条）/ 操作区（右）三段式，
   用 grid 固定列，避免 flex 换行时三块错位；背景叠加暖橙 + 青绿两处柔光，
   与 body 氛围一致，不再是纯白平铺。 */
.site-header {
  background:
    radial-gradient(720px 180px at 8% -60%, rgba(240, 136, 62, .22), transparent 70%),
    radial-gradient(560px 160px at 88% -70%, rgba(43, 182, 163, .16), transparent 70%),
    linear-gradient(180deg, #ffffff 0%, #fffaf6 100%);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: grid; grid-template-columns: minmax(0, auto) 1fr auto;
  align-items: center; gap: 16px 24px; padding: 13px 0 12px;
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand-text { min-width: 0; }
.brand-emoji {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 23px; line-height: 1; border-radius: 13px;
  background: linear-gradient(145deg, #fff3e8, #ffe2cc);
  border: 1px solid #ffdcc2;
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px -2px rgba(194, 65, 12, .22);
}
.brand-name {
  font-size: 19px; font-weight: 800; letter-spacing: .2px; margin: 0; line-height: 1.25;
  /* 品牌名用一个记忆点：暖橙渐变文字，比纯色更有主张 */
  background: linear-gradient(92deg, #a8440f, #c2410c 48%, #b9551a);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.brand-descriptor { font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; }

/* 数据概况（P2-1）：合并为单句副标题药丸条，只保留关键数字，去「实时价/参考价」黑话 */
.header-stats {
  display: inline-flex; align-items: center; gap: 8px;
  justify-self: center;
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.4;
  background: rgba(255, 244, 236, .7);
  border: 1px solid #f0d8c4; border-radius: 999px;
  padding: 4px 14px;
  box-shadow: 0 1px 2px rgba(194, 65, 12, .05);
}
.header-stats .hs-line b { color: var(--brand-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.header-stats .hs-sep { color: #d8b48f; }

/* 引导条并入头部：与头部同一色系 + 左侧品牌竖条，消除此前的割裂感 */
.header-strip {
  background: linear-gradient(90deg, rgba(255, 244, 236, .95), rgba(255, 250, 246, .5));
  border-top: 1px solid #fbe6d6;
}
.header-strip-inner {
  font-size: 13px; color: #8a5a12; line-height: 1.5;
  padding: 7px 0 7px 10px; border-left: 3px solid var(--brand);
}
.header-strip-inner b { color: #b9551a; }
.header-strip-inner a { color: var(--brand-ink); font-weight: 700; text-decoration: none; }
.header-strip-inner a:hover { text-decoration: underline; }

/* 中屏以下：三段改单列堆叠，药丸条居中，操作区左对齐 */
@media (max-width: 900px) {
  .header-inner { grid-template-columns: 1fr; gap: 10px; padding: 12px 0; }
  .header-stats { justify-self: center; }
  .header-actions { justify-self: start; width: 100%; }
}
@media (max-width: 480px) {
  .stat span { font-size: 10.5px; }
  .brand-descriptor { display: none; }
}

/* ---------- Notice ---------- */
.notice {
  margin: 14px auto 0; width: min(1180px, 100% - 28px);
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink);
  border-radius: 10px; padding: 10px 14px; font-size: 13px;
}
.notice b { color: #9a5a10; }
/* P1-3：数据说明改为可折叠（<details>），首屏不再被长段说明占用，用户按需展开 */
.notice > summary { cursor: pointer; list-style: none; padding: 2px 0; user-select: none; }
.notice > summary::-webkit-details-marker { display: none; }
.notice > summary::before { content: "▸ "; color: var(--brand-ink); font-weight: 700; }
.notice[open] > summary::before { content: "▾ "; }
.notice > summary .notice-sum { font-weight: 700; color: var(--warn-ink); }
.notice .notice-body { margin-top: 8px; line-height: 1.7; }

/* ---------- Calculator ---------- */
.calculator {
  display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 18px; margin: 16px 0;
}
.calc-field { display: flex; flex-direction: column; gap: 6px; }
.calc-field.grow { flex: 1 1 240px; }
.calc-field label { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.hint { font-size: 11px; color: var(--ink-mute); }

.stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.stepper button {
  width: 34px; height: 38px; border: none; background: #f3f5f9; font-size: 20px;
  color: var(--ink); cursor: pointer;
}
.stepper button:hover { background: #e9edf3; }
.stepper input {
  width: 56px; height: 38px; border: none; text-align: center; font-size: 17px; font-weight: 700;
  color: var(--ink); -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

#sort-select, #search-input {
  height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px;
  font-size: 14px; background: #fbfcfe; color: var(--ink); min-width: 200px;
}
#search-input { width: 100%; }
#sort-select:focus, #search-input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.chip {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; cursor: pointer;
  transition: all .15s ease;
}
.chip:hover { border-color: var(--brand); color: var(--brand-ink); }
.chip.active { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; font-weight: 600; }
/* 移动端：chips 放大到 44px 触摸目标，并保证间距 ≥8px */
@media (max-width: 760px) {
  .chips { gap: 10px; }
  .chip { padding: 11px 16px; font-size: 13.5px; min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- Result info ---------- */
.result-info { font-size: 13px; color: var(--ink-soft); margin: 6px 2px 12px; }
.result-info b { color: var(--accent-ink); }

/* ---------- Table ----------
   2026-09-10 调整：
   ① table-layout:fixed + colgroup 固定列宽 → 展开/收起明细时浏览器无需重算全部列宽，
      消除「插入明细行 → 整表重排 → 鼠标粘滞」的卡顿（性能=体验）。
   ② 行内边距 11px→8px、列间距 12px→10px，收紧留白，解决「内容间距过大、不够紧凑」。 */
.table-wrap {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow-x: auto; margin-bottom: 18px;
  /* 滚动容器内独立的绘制层，减少 sticky 操作列重绘对整页的影响 */
  contain: paint;
}
.rank-table {
  width: 100%; table-layout: fixed; border-collapse: collapse;
  font-size: 13px; min-width: 800px;
}
/* 固定列宽（配合上表 colgroup）。列宽按「内容刚好够用」定，多余宽度全部交给
   .w-spacer 占位列吸收，商品列不再 auto 独吞（原 618px，占全表 52%，观感松散）。
   操作列 248px：td 左右各 8px 内边距 → 可用 232px；3 列网格 gap 6px →
   每格 (232-12)/3 = 73.3px ≥ 按钮最小宽 66px，从根上杜绝按钮互相重叠。
   【2026-09-10 修复 #3】原 220px 可用仅 200px，3 个 72px 按钮需 226px，
   实测「关注」右边缘 1159 > 「去淘宝」左边缘 1155，重叠 4px。 */
.rank-table col.w-rank { width: 38px; }
.rank-table col.w-name { width: 352px; }
.rank-table col.w-spec { width: 130px; }
.rank-table col.w-price { width: 126px; }
.rank-table col.w-perday { width: 110px; }
.rank-table col.w-days { width: 76px; }
.rank-table col.w-spacer { width: auto; }
.rank-table col.w-act { width: 248px; }

/* 窄屏（<1080）等比收紧固定列，避免出现横向滚动条；占位列归零即自动消失 */
@media (max-width: 1080px) {
  .rank-table col.w-rank { width: 36px; }
  .rank-table col.w-name { width: 300px; }
  .rank-table col.w-spec { width: 112px; }
  .rank-table col.w-price { width: 112px; }
  .rank-table col.w-perday { width: 96px; }
  .rank-table col.w-days { width: 66px; }
  .rank-table col.w-act { width: 232px; }
}
@media (max-width: 900px) {
  .rank-table col.w-rank { width: 36px; }
  .rank-table col.w-name { width: 250px; }
  .rank-table col.w-spec { width: 100px; }
  .rank-table col.w-price { width: 102px; }
  .rank-table col.w-perday { width: 88px; }
  .rank-table col.w-days { width: 60px; }
  .rank-table col.w-act { width: 216px; }
}

.rank-table thead th {
  position: sticky; top: 0; background: #fafbfd; color: var(--ink-soft);
  font-weight: 700; text-align: right; padding: 9px 10px; border-bottom: 2px solid var(--line);
  white-space: nowrap; font-size: 12px;
}
.rank-table thead th.col-name,
.rank-table thead th.col-spec,
.rank-table thead th.col-params,
.rank-table thead th.col-formula { text-align: left; }
.rank-table thead th.col-rank, .rank-table tbody td.col-rank { text-align: center; }
/* 【2026-09-10 修复】.col-name/.col-spec 这类单类名选择器优先级低于 `.rank-table tbody td`，
   导致「商品 / 规格」列的表头是左对齐、内容却被右对齐，视觉错位。
   这里用同等优先级的选择器显式覆盖为左对齐（文本列左对齐、数字列右对齐）。 */
.rank-table tbody td.col-name, .rank-table tbody td.col-spec { text-align: left; }
/* 规格列允许换行：两行结构（主规格 / 净重），避免长规格文本溢出到「到手价」列 */
.rank-table tbody td.col-spec { white-space: normal; line-height: 1.35; }
/* 操作列内边距收紧到 8px，把宽度让给按钮（叠加按钮最小宽下调，彻底消除重叠） */
.rank-table tbody td.col-act, .rank-table thead th.col-act { padding-left: 8px; padding-right: 8px; }
/* 占位列：无内容、无边框视觉，只用于吸收剩余宽度，让数据列保持自然宽度 */
.rank-table col.w-spacer, .rank-table th.col-spacer, .rank-table td.col-spacer { pointer-events: none; }
.rank-table td.col-spacer { padding: 0; }
.rank-table tbody td {
  padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; vertical-align: middle;
  white-space: nowrap;
}
.rank-table tbody tr:hover { background: #fafbfe; }
/* P2-3：桌面端长表加斑马纹（跳过展开明细行），增强行间分隔节奏 */
.rank-table tbody tr:nth-child(even):not(.detail-row) { background: #fafbfd; }
.rank-table tbody tr:nth-child(even):not(.detail-row):hover { background: #fafbfe; }
.rank-table tbody tr:last-child td { border-bottom: none; }

/* 列宽唯一来源是上方 colgroup（col.w-*），此处不再重复声明 width，避免两处数值漂移 */
.col-rank { text-align: center; }
.col-act { text-align: center; }

/* 操作列吸附在最右侧，横向滚动时始终可见。
   原用 box-shadow 做分隔阴影，滚动/悬停时每行都要重绘整列 → 改为 1px 边框，绘制开销更低。 */
.rank-table th.col-act, .rank-table td.col-act {
  position: sticky; right: 0; z-index: 2; background: var(--surface);
  border-left: 1px solid var(--line);
}
.rank-table thead th.col-act { top: 0; z-index: 3; background: #fafbfd; }
.rank-table tbody tr:hover td.col-act { background: #fafbfe; }
.rank-table tbody tr.is-open td.col-act { background: #f7f9fc; }
/* 操作区：两行结构（行1 = 三个平台按钮，行2 = 关注 / 我买了）。
   - 行1 用 3 列等宽网格，「去拼多多」4 字也放得下；
   - 行2 用 2 列等宽网格，关注 / 我买了 各占半行、彼此等宽；
   - 字号用 container query 单位(cqw) 随单元格宽度自适应：窄屏自动缩小、不挤出版心。 */
.row-actions {
  display: flex; flex-direction: column; gap: 6px;
  container-type: inline-size;
}
.row-actions .ra-line { display: grid; gap: 6px; }
.row-actions .ra-line-buy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row-actions .ra-line-act { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* 用 button 提高选择器优先级(0,2,1)，确保 clamp 字号不被 .btn-primary.sm / .btn-log
   的 font-size:13px 覆盖，从而真正「随单元格宽度(cqw)自适应」。 */
.row-actions .ra-line > button {
  width: 100%; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: clamp(12px, 5cqw, 14px);
}
.rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; background: #eef1f6; color: var(--ink-soft);
  font-weight: 700; font-size: 12px;
}
/* 名次配色按类名匹配（明细行插入后 nth-child 会错位） */
tr.top1 .rank-badge { background: var(--accent-ink); color: #fff; }
tr.top2 .rank-badge { background: #1f7d70; color: #fff; }
tr.top3 .rank-badge { background: var(--ink-mute); color: #fff; }

.col-name { text-align: left; }
.name-line { display: flex; align-items: flex-start; gap: 6px; }
.name-text { min-width: 0; flex: 1 1 auto; }
.name-brand { font-weight: 700; color: var(--ink); }
.name-title {
  font-size: 12px; color: var(--ink-soft); margin-top: 1px;
  /* 长标题截断为一行，避免个别超长商品名把整行撑高、破坏紧凑节奏 */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 规格列两行结构：主规格（如 10kg×1）+ 次要净重（如 净10kg）。
   拆行后规格列只需 ~118px 即可容纳，不再溢出压到「到手价」列。 */
.spec-main { font-size: 12.5px; color: var(--ink); font-weight: 500; }
.spec-sub { font-size: 11px; color: var(--ink-mute); margin-top: 2px; }

/* 明细展开/收起箭头（放在商品列，避免挤占右侧操作列宽度）
   性能：过渡只保留 transform（合成层属性），去掉 background/color/border-color 过渡——
   那些是绘制属性，配合整表重排会造成悬停/点击时的瞬时卡顿（用户反馈的「粘滞感」）。 */
.row-toggle {
  flex: 0 0 auto; width: 24px; height: 24px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 7px; background: var(--surface);
  color: var(--ink-soft); font-size: 11px; line-height: 1; cursor: pointer;
  transition: transform .14s ease;
}
.row-toggle:hover { background: #fff3ec; border-color: var(--brand); color: var(--brand-ink); }
tr.rank-row.is-open .row-toggle {
  transform: rotate(90deg); background: #fff3ec; border-color: var(--brand); color: var(--brand-ink);
}
tr.rank-row { cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .row-toggle { transition: none; } }

/* ============ 移动端：表格退化为卡片，让「到手价 / 元/天」一眼可见 ============
   2026-09-11 修复 #3：原表格 min-width:800px 在手机上横向滚动，248px 的吸附操作列
   把「到手价 / 元/天」挤出版心，选购关键决策信息无法一目了然。
   改为：≤760px 时每行是一张卡片，自上而下为
     [名次] 品牌·商品名
            规格
     ┌─────────┬─────────┬─────────┐
     │ 到手价   │ 元/天    │ 可吃天数 │   ← 决策信息条（醒目、横向平铺）
     └─────────┴─────────┴─────────┘
     [去淘宝][去京东][去拼多多]
     [🔔 关注][我买了]
   操作行占满整卡底部，决策条在上方，无需横向滚动。 */
@media (max-width: 760px) {
  .table-wrap { overflow: visible; contain: layout style; }
  .rank-table { min-width: 0; }
  .rank-table colgroup { display: none; }   /* 卡片布局下固定列宽失效 */
  .rank-table thead { display: none; }       /* 表头在卡片中无意义 */
  .rank-table tbody { display: block; }
  /* 【2026-09-11 修复 #4】原写法 grid-template-columns: 24px 1fr 1fr 1fr 配合
     "price perday days ." —— 「到手价」被放进【24px 的名次列】，内容(如「¥28 参考价」)
     必然溢出并压到隔壁「元/天」，出现文字重叠（用户截图反馈）。
     改为：名次徽标脱离网格流、绝对定位到卡片左上角；决策行用 3 个等宽列。 */
  .rank-table tr.rank-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "name   name   name"
      "spec   spec   spec"
      "price  perday days"
      "act    act    act";
    gap: 8px 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 12px 12px 14px;
    margin-bottom: 12px;
  }
  /* 明细展开行：作为卡片下方的子块 */
  .rank-table tr.detail-row { display: block; margin: -4px 0 12px; }
  .rank-table tr.detail-row > td { display: block; width: 100%; padding: 0; border: none; }
  .detail-box { border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; }

  /* 名次徽标：绝对定位到卡片左上角（脱离网格流，不再占用决策行的列宽） */
  .rank-table tbody td.col-rank {
    position: absolute; top: 11px; left: 12px;
    margin: 0; padding: 0; width: auto; text-align: left;
  }
  .rank-table tbody td.col-name { padding-left: 38px; }
  .col-name  { grid-area: name; }
  .col-spec  { grid-area: spec; }
  .col-price { grid-area: price; }
  .col-perday{ grid-area: perday; }
  .col-days  { grid-area: days; }
  .col-act   { grid-area: act; }
  .col-spacer{ display: none; }

  /* 决策信息条：到手价 / 元/天 / 可吃天数 三等分平铺、醒目。
     注意不要用 margin-left 做分隔（会与 grid gap 叠加导致三列不等宽） */
  .col-price, .col-perday, .col-days {
    display: flex; align-items: baseline; justify-content: flex-start;
    text-align: left; white-space: nowrap;
    min-height: 34px;
    border-top: 1px solid var(--line);
    padding: 10px 0 2px !important;
  }
  .col-perday, .col-days { border-left: 1px solid var(--line); padding-left: 10px !important; }

  /* 特异性提升到 .rank-table tbody td.col-x，确保 ≤760px 下覆盖第 502 行的基础 .col-perday{font-size:15px} */
  .rank-table tbody td.col-price { font-size: 19px; font-weight: 800; color: var(--ink); }
  .col-price .src-badge { font-size: 10px; font-weight: 600; margin-left: 4px; }
  .rank-table tbody td.col-perday { font-weight: 800; color: var(--brand-ink); font-size: 20px; }
  .col-perday .perday-unit { font-size: 12px; font-weight: 600; color: var(--brand-ink); }
  .rank-table tbody td.col-days { font-size: 14px; color: var(--ink-soft); }

  /* 操作列：取消吸附、占满整卡，两行按钮各自等宽 */
  .rank-table th.col-act,
  .rank-table td.col-act {
    position: static; border-left: none; background: transparent;
  }
  .rank-table td.col-act { padding: 0 !important; margin-top: 4px; }
  .row-actions .ra-line-buy { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .row-actions .ra-line-act { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 商品名列在卡片中更舒展 */
  .name-brand { font-size: 14px; }
  .name-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .col-spec { white-space: normal; }
  .spec-main { font-size: 13px; }
}


/* ============================================================
   【2026-09-10 修复 #1 #2】智能选粮（home-reco）合并到主榜同 rowHtml 后的样式
   - .is-reco：reco 行（🤖 徽标 + 蓝色底色 + 不参与前 3 名配色）
   - .reco-section-row：分隔条，把 reco 分组放在主榜之上
   - .reco-clear：收起推荐的小按钮
   注意：旧的 .reco-card 卡片样式保留（其他页面可能引用），app.js 已不再渲染 reco-card；
   但 .rc-reason 仍被新 detailRowHtml 的「🤖 推荐理由」段使用，保留。
   ============================================================ */
.rank-row.is-reco { background: linear-gradient(180deg, #f4faff 0%, #ffffff 100%); }
.rank-row.is-reco:hover { background: linear-gradient(180deg, #eaf4ff 0%, #f6fafe 100%); }
.rank-row.is-reco .rank-badge.reco-badge {
  background: linear-gradient(135deg, #4f7dff 0%, #6e54d6 100%);
  color: #fff; font-size: 14px;
}
.rank-row.is-reco td.col-rank { background: #f4faff; }
.rank-row.is-reco td.col-rank:hover { background: #eaf4ff; }

.reco-section-row { background: #fff8ee; }
.reco-section-row > td { padding: 0 !important; border-bottom: 2px solid #ffd591 !important; }
.reco-section-head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; flex-wrap: wrap;
  color: var(--ink); font-size: 13px;
}
.reco-section-ico { font-size: 16px; }
.reco-section-title { font-weight: 700; }
.reco-section-meta { color: var(--ink-soft); font-size: 12px; }
.reco-section-head .reco-badge { margin-left: 4px; }
.reco-clear { margin-left: auto; }
@media (max-width: 640px) {
  .reco-section-head { gap: 6px; padding: 7px 8px; }
  .reco-section-title { font-size: 12.5px; }
}

/* 明细行：折叠的次要信息（元/kg、元/月、年成本、参数、透明公式） */
/* 用选择器特异性覆盖 .rank-table tbody td，避免使用 !important */
.rank-table tbody tr.detail-row > td {
  padding: 0; background: #fbfcfe; border-bottom: 1px solid var(--line);
  white-space: normal; text-align: left;
}
.detail-box { padding: 10px 12px; text-align: left; }
.dg-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 10px 16px; margin-bottom: 10px;
}
.dg-item { display: flex; flex-direction: column; gap: 2px; }
.dg-k { font-size: 11.5px; color: var(--ink-mute); }
.dg-v { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.dg-em .dg-v { color: var(--accent-ink); }
.dg-sec { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }
.dg-sec > .dg-k { flex: 0 0 62px; padding-top: 2px; }
.dg-body { flex: 1 1 auto; font-size: 12px; color: var(--ink-soft); line-height: 1.55; white-space: normal; }
.dg-formula-text { color: var(--ink-mute); word-break: break-all; }

/* 排名表工具条 */
.table-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.table-tools .btn-ghost.sm { min-height: 34px; font-size: 12.5px; }
.tt-ico { display: inline-block; margin-right: 4px; }
.tt-hint { font-size: 12px; color: var(--ink-mute); line-height: 1.5; }
@media (max-width: 560px) { .tt-hint { flex: 1 1 100%; } }
.material-tag {
  display: inline-block; margin-top: 4px; font-size: 11px; padding: 1px 7px;
  border-radius: 6px; background: #f0f3f8; color: var(--ink-soft);
}
/* 比价页「多平台比价条」：每个平台一个 chip，最低价高亮 +「最低价」角标 */
.cmp-platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; }
.cmp-pf {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; line-height: 1; cursor: pointer;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--line); background: #fbfcfe; color: var(--ink-soft);
}
.cmp-pf:hover { border-color: var(--brand-strong); color: var(--brand-strong); }
.cmp-pf.is-lowest { border-color: #f0a500; background: #fff7e6; color: #a35a00; font-weight: 700; }
.cmp-badge { font-size: 9.5px; font-weight: 800; line-height: 1; padding: 2px 5px; border-radius: 999px; background: #ff7a00; color: #fff; }
.spec { color: var(--ink-soft); font-size: 12.5px; text-align: left; }

.price { font-weight: 700; }
.src-badge {
  display: inline-block; margin-left: 6px; font-size: 10px; padding: 1px 6px; border-radius: 6px;
  vertical-align: middle;
}
.src-live { background: var(--accent-soft); color: var(--accent-ink); }
/* P2-6：参考价角标文字色由 #6b7484(#ref-ink) 深化到 #4b5563，在 #eef1f6 底上对比度≈6.6:1（≥WCAG 4.5:1） */
.src-ref { background: var(--ref-bg); color: #4b5563; font-weight: 600; }

/* P2-3：引流/口碑榜（.rk-table）补足斑马纹与 hover 高亮（此前两者皆缺） */
.rk-table tbody tr:nth-child(even) { background: #fafbfd; }
.rk-table tbody tr:hover { background: #fff3ec; }
.rk-table tbody tr:hover .rk-day { color: var(--brand-strong); }

/* 平台公开信号（口碑榜每行来源标注，逐条标注平台） */
.rk-sigs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.rk-sig { font-size: 11.5px; line-height: 1.4; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line, #e6e0d8); color: var(--ink-soft, #6b6155); background: #fff8ef; white-space: nowrap; }
.rk-sig.tb  { border-color: #ff8c2b; color: #b45309; background: #fff3e6; }
.rk-sig.pdd { border-color: #e02e4f; color: #b3122f; background: #fff0f3; }
.rk-sig.jd  { border-color: #d4262c; color: #9b1c1c; background: #fdeaea; }

.col-perday { font-weight: 800; color: var(--brand-ink); font-size: 15px; }
.perday-unit { font-size: 11px; color: var(--ink-soft); font-weight: 500; }

.col-peryear { font-weight: 700; color: var(--accent-ink); }

/* 参数/公式现已收进明细行（div 结构），无需 !important 对抗 td 的 text-align:right */
.params { text-align: left; font-size: 12px; color: var(--ink-soft); }
.params .p { display: inline-block; margin-right: 6px; }
.params .flush { color: #1f6fb8; }

.formula { text-align: left; font-size: 11.5px; color: var(--ink-mute); max-width: 280px; white-space: normal; line-height: 1.4; }

/* ---------- Empty ---------- */
.empty-state { text-align: center; padding: 40px 0; color: var(--ink-soft); }
.empty-title { font-weight: 700; font-size: 15px; margin: 0 0 4px; }

/* ---------- Disclaimer ---------- */
.disclaimer {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 20px; margin-bottom: 24px;
}
.disclaimer h3 { margin: 0 0 10px; font-size: 15px; }
.disclaimer ul { margin: 0; padding-left: 20px; font-size: 13px; color: var(--ink-soft); }
.disclaimer li { margin: 6px 0; }
.disclaimer code { background: #f0f3f8; padding: 1px 6px; border-radius: 5px; color: var(--brand-ink); font-size: 12px; }
.disclaimer b { color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); padding: 18px 0; }
.site-footer p { margin: 0; text-align: center; font-size: 12px; color: var(--ink-soft); }
.site-footer .beian { margin-top: 6px; }
.site-footer .beian a { color: var(--brand-ink); text-decoration: none; }
.site-footer .beian a:hover { text-decoration: underline; }
.site-footer .foot-links { margin-top: 6px; }
.site-footer .foot-links a { color: var(--brand-ink); text-decoration: none; font-weight: 600; }
.site-footer .foot-links a:hover { text-decoration: underline; }
/* 通用页脚链接（pets.html 等未使用 .site-footer 的页面） */
.foot-links { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }
.foot-links a { color: var(--brand-ink); text-decoration: none; font-weight: 600; }
.foot-links a:hover { text-decoration: underline; }
/* 注册同意勾选（《隐私政策》《用户协议》） */
.auth-form .consent { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; color: var(--ink); margin: 2px 0 12px; line-height: 1.5; }
.auth-form .consent input { margin-top: 2px; flex: 0 0 auto; width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }
.auth-form .consent a { color: var(--brand-ink); text-decoration: underline; }

/* ---------- 选购指南 · 内链主题集群枢纽入口 ---------- */
.topic-nav { margin: 26px 0 4px; }
.topic-nav-title { font-size: 17px; font-weight: 800; color: var(--ink); margin: 0 0 12px; }
.topic-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.topic-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: var(--surface); box-shadow: var(--shadow); }
.topic-card h3 { margin: 0 0 6px; font-size: 15px; color: var(--ink); }
.topic-card p { margin: 0 0 10px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.75; }
.topic-card .topic-more { font-weight: 700; color: var(--brand-ink); text-decoration: none; font-size: 13px; }
.topic-card .topic-more:hover { text-decoration: underline; }
@media (max-width: 760px) { .topic-cards { grid-template-columns: 1fr; } }

/* ---------- 按钮 ---------- */
.btn-primary, .btn-ghost, .btn-danger {
  border-radius: 10px; padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: all .15s ease; font-family: inherit;
  /* 触摸目标 ≥44px；inline-flex 保证高度稳定且 emoji 与文字垂直居中 */
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-primary { background: var(--brand-strong); color: #fff; }
.btn-primary:hover { background: var(--brand-ink); }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--ink-soft); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand-ink); }
.btn-danger { background: #fff; border-color: #f0c9c4; color: #c0392b; }
.btn-danger:hover { background: #fdecea; }
/* .sm 用于表格等密集区，桌面端适度收敛；移动端统一放大到 44px 保证可点 */
.btn-primary.sm, .btn-ghost.sm, .btn-danger.sm { padding: 5px 12px; font-size: 13px; min-height: 34px; }
.btn-ghost.sm { background: #f7f9fc; }

/* ---------- 平台跳转按钮：淘宝 / 京东 / 拼多多 ----------
   三者必须同尺寸、同字重、同圆角，仅以品牌色区分。
   【2026-09-10 修复】原先 .btn-jd(#e1251b) 与 .btn-pdd(#e22e1f) 几乎同色，
   并排时无法分辨（用户反馈「底色建议有区分」）。现改为：
     去淘宝 = 淘宝橙 #ff5c00
     去京东 = 京东红 #d61f26
     去拼多多 = 玫红 #c2185b（与京东红拉开明显色相差）
   另加一层极轻的顶部高光渐变，避免大色块扁平。 */
.btn-pdd, .btn-jd {
  border: 1px solid transparent; border-radius: 8px; cursor: pointer;
  font-family: inherit; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 500; padding: 5px 12px; min-height: 34px;
  white-space: nowrap;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(0, 0, 0, .06));
  transition: background-color .15s ease, transform .08s ease;
}
.btn-jd { background-color: #d61f26; }
.btn-jd:hover { background-color: #b8181f; }
.btn-pdd { background-color: #c2185b; }
.btn-pdd:hover { background-color: #a01349; }
.btn-jd:active, .btn-pdd:active { transform: translateY(1px); }

/* 密集区按钮基础节奏（padding / 圆角 / 下限宽度 / 不换行）。
   字号交由 .row-actions 内的 clamp(cqw) 按单元格宽度自适应，此处不为
   .row-actions 按钮设定 font-size，避免覆盖自适应效果；.reco-card 按钮保持固定 12.5px。 */
.row-actions .ra-line > *,
.row-actions .btn-primary.sm, .row-actions .btn-ghost.sm, .row-actions .btn-pdd, .row-actions .btn-jd,
.row-actions .btn-log {
  padding: 5px 8px; min-height: 32px; font-weight: 500;
  border-radius: 8px; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reco-card .rc-buy, .reco-card .rc-buy-pdd, .reco-card .rc-buy-jd, .reco-card .rc-log {
  padding: 5px 8px; font-size: 12.5px; min-height: 32px; font-weight: 500;
  border-radius: 8px; min-width: 66px;
}
/* 「去淘宝」= 淘宝橙（与京东红 / 拼多多玫红三色可辨） */
.row-actions .btn-primary.sm, .reco-card .rc-buy { background: #ff5c00; color: #fff; }
.row-actions .btn-primary.sm:hover, .reco-card .rc-buy:hover { background: #e55200; }
/* 「我买了」= 记账入口：白底描边，与三个实心的「去买」按钮在语义和视觉上区分 */
.btn-log {
  background: #fff; border: 1px solid var(--brand); color: var(--brand-ink);
  border-radius: 8px; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 500; padding: 5px 12px; min-height: 34px;
  white-space: nowrap; transition: all .15s ease;
}
.btn-log:hover { background: #fff4ee; border-color: var(--brand-ink); }

/* 异步跳转忙碌态（转链请求 >100ms，必须有反馈，且防止重复点击开多标签页） */
button.is-busy, .btn-primary.is-busy, .btn-jd.is-busy, .btn-pdd.is-busy {
  opacity: .72; cursor: progress;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .3), rgba(255, 255, 255, .05));
  background-size: 200% 100%;
  animation: busySheen 1s linear infinite;
}
button.is-busy:disabled { cursor: progress; }
@keyframes busySheen { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { button.is-busy { animation: none; } }

@media (max-width: 760px) {
  .btn-primary.sm, .btn-ghost.sm, .btn-danger.sm,
  .btn-pdd, .btn-jd, .btn-log { min-height: 44px; padding: 8px 14px; }
  /* 【2026-09-11 修复】移动端三平台按钮必须同款触达尺寸（44px 高 / 8px14px 内边距）。
     注意：此处只统一「触达尺寸」，不再写死 font-size——否则会盖掉 .row-actions .ra-line > button
     上的 clamp(12px,5cqw,14px) 自适应字号，导致手机端标签无法随单元格宽度缩放。
     字号自适应统一交给 clamp(cqw) 处理（见 .row-actions .ra-line > button）。 */
  .row-actions .btn-primary.sm, .row-actions .btn-ghost.sm,
  .row-actions .btn-jd, .row-actions .btn-pdd,
  .row-actions .btn-log { min-height: 44px; padding: 8px 14px; }
}

/* ---------- 登录态区 ---------- */
/* 右侧操作组：登录/注册 → 记一笔 → 留言反馈（由 header-inner 的 grid 推到最右，不再用 margin-left:auto） */
.header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.auth-area { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.user-chip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.user-chip .u-name { font-weight: 700; color: var(--brand-ink); font-size: 13.5px; }

/* ---------- 个性化计算区 ---------- */
.profile-field {
  flex: 1 1 320px; display: flex; align-items: center;
  background: var(--accent-soft); border: 1px solid #bfe7e0; border-radius: 10px;
  padding: 10px 14px; font-size: 13.5px; color: var(--accent-ink);
}
.profile-field b { color: var(--accent-ink); }
.profile-field a { color: var(--brand-ink); font-weight: 600; }
.login-cta {
  font-size: 12.5px; color: var(--brand-ink); background: var(--warn-bg);
  border: 1px dashed var(--warn-line); border-radius: 10px; padding: 8px 12px; margin: 2px 0 14px;
}
.login-cta a { color: var(--brand-ink); font-weight: 700; text-decoration: underline; }
.profile-summary {
  font-size: 13.5px; color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--accent); border-radius: 10px; padding: 10px 14px; margin: 6px 2px 12px;
  box-shadow: var(--shadow);
}
.profile-summary b { color: var(--accent); }

/* ---------- 首页「选择宠物档案」+ 智能推荐（#25） ---------- */
.pet-profile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px; margin: 16px 0 4px;
}

/* 子标签(Tab)：选择通用设置 / 登录并建档 */
.pp-tabs {
  display: flex; gap: 6px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line); padding-bottom: 10px;
}
.pp-tab {
  appearance: none; border: 1px solid var(--line); background: #fff;
  color: var(--ink-soft); border-radius: 9px; padding: 8px 14px;
  font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 7px; transition: all .15s ease;
}
.pp-tab .pp-tab-ico { font-size: 15px; line-height: 1; }
.pp-tab:hover { border-color: var(--brand); color: var(--brand-ink); }
.pp-tab.active { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.pp-tab-badge {
  font-size: 10.5px; font-weight: 700; color: #fff; background: var(--brand-ink);
  border-radius: 999px; padding: 1px 7px; line-height: 1.6;
}
.pp-tab.active .pp-tab-badge { background: rgba(255, 255, 255, .28); }
.pp-panel { animation: ppFade .18s ease; }
.pp-panel[hidden] { display: none; }
@keyframes ppFade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  .pp-tab { flex: 1; justify-content: center; }
}
.pp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pp-title { margin: 0; font-size: 15.5px; }
.pp-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-pets { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px; }
.pp-chip {
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
  border-radius: 999px; padding: 7px 14px; cursor: pointer; font-size: 13px; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px; transition: all .15s ease;
}
.pp-chip:hover { border-color: var(--brand); color: var(--brand-ink); }
.pp-chip.active { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; font-weight: 600; }
@media (max-width: 760px) {
  .pp-chip { min-height: 44px; padding: 10px 16px; }
  .pp-gen-chips .pp-chip { min-height: 44px; }
}
.pp-sub { font-size: 11px; opacity: .75; }
.pp-hint { margin: 6px 0 0; }

/* 通用设置：位于宠物列表上方，沿用 pp-chip 模板。
   两行结构：① 估算口径（类型/数量/年龄） ② 排序口径（排序方式 + 品牌搜索） */
.pp-archive { margin-top: 12px; }
.pp-general {
  display: flex; flex-direction: column; gap: 10px;
  padding: 11px 13px; margin-bottom: 2px;
  background: linear-gradient(180deg, #fffaf6, #fff);
  border: 1px solid var(--line); border-radius: 11px;
}
.pp-gen-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pp-gen-row-ctl { padding-top: 10px; border-top: 1px dashed var(--line); }
.pp-gen-group { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pp-gen-group.grow { flex: 1 1 220px; }
.pp-gen-title { font-size: 13.5px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.pp-gen-label { font-size: 12px; color: var(--ink-mute); white-space: nowrap; }
.pp-gen-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-gen-chips .pp-chip {
  min-height: 36px; padding: 6px 13px; font-size: 12.5px;
  border-radius: 9px; /* 与档案 chip 的胶囊形区分：设置项用圆角方形 */
}
.pp-gen-hint { font-size: 12px; color: var(--ink-mute); margin-left: auto; }
/* 排序口径 / 品牌搜索控件 */
.pp-select, .pp-input {
  min-height: 38px; padding: 7px 11px; border: 1px solid var(--line-strong);
  border-radius: 9px; font-size: 13.5px; font-family: inherit; background: #fff; color: var(--ink);
}
.pp-gen-group.grow > .pp-select,
.pp-gen-group.grow > .pp-input { flex: 1 1 160px; min-width: 0; }
.pp-select:focus, .pp-input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
@media (max-width: 560px) {
  .pp-general { align-items: stretch; }
  .pp-gen-hint { margin-left: 0; flex-basis: 100%; }
  .pp-gen-group.grow { flex-basis: 100%; }
}

/* ---------- 移动端首页首屏重排（P1-2） ---------- */
.pp-mobile-toggle { display: none; }
@media (max-width: 760px) {
  /* 品类切换 Tab 吸顶：滚动后切换品类不必回滚到顶部 */
  .cat-tabs {
    position: sticky; top: 0; z-index: 30;
    width: auto; margin: 12px 14px 0;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(1.2) blur(8px);
    -webkit-backdrop-filter: saturate(1.2) blur(8px);
    padding: 8px 10px; border-radius: 12px;
    box-shadow: 0 2px 10px rgba(20, 30, 50, .08);
    border: 1px solid var(--line);
  }
  /* 筛选摘要条：仅移动端显示在面板顶部 */
  .pp-mobile-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; margin-bottom: 0;
    background: linear-gradient(180deg, #fffaf6, #fff);
    border: 1px solid var(--line); border-radius: 12px;
  }
  .pp-toggle-sum {
    font-size: 13px; font-weight: 700; color: var(--brand-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .pp-toggle-btn {
    flex: 0 0 auto; appearance: none; cursor: pointer; font-family: inherit;
    border: 1px solid var(--brand-strong); color: #fff; background: var(--brand-strong);
    border-radius: 9px; padding: 7px 13px; font-size: 13px; font-weight: 600;
  }
  .pp-toggle-btn:active { background: var(--brand-ink); }
  /* 折叠态：仅留摘要条，隐藏 tab 与两面板（账本回显条 .pp-ledger-bar 保留可见） */
  .pet-profile.collapsed .pp-tabs,
  .pet-profile.collapsed .pp-panel { display: none; }
}
/* 窄屏：药丸条收窄字号，进一步给首屏让位 */
@media (max-width: 480px) {
  .header-stats { padding: 4px 12px; font-size: 11.5px; }
}

.home-reco { margin: 4px 0 18px; }
.reco-head { font-size: 14px; margin: 4px 0 8px; color: var(--ink); }
.reco-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
}
.reco-badge.high { background: #e7f7ee; color: var(--ok); }
.reco-badge.mid { background: #fff4e0; color: var(--warn); }
.reco-badge.low { background: #f1f3f5; color: var(--ink-soft); }
.reco-card {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin: 8px 0; box-shadow: var(--shadow);
}
.reco-card .rc-rank {
  font-size: 14px; font-weight: 800; color: #fff; width: 26px; height: 26px; min-width: 26px;
  border-radius: 50%; background: #9aa3b2; display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.reco-card .rc-rank.top1 { background: var(--accent-ink); }
.reco-card .rc-rank.top2 { background: #1f7d70; }
.reco-card .rc-rank.top3 { background: var(--ink-mute); }
.reco-card .rc-main { flex: 1; min-width: 0; }
.reco-card .rc-name { font-weight: 700; font-size: 14.5px; }
.reco-card .rc-brand { font-size: 12px; color: var(--ink-soft); font-weight: 500; }
.reco-card .rc-price { color: var(--brand-ink); font-weight: 800; font-size: 15px; margin: 2px 0; }
.reco-card .rc-formula { font-size: 11px; color: var(--ink-mute); line-height: 1.5; }
.reco-card .rc-reason { font-size: 12px; color: #374151; background: #f8f9fb; border-radius: 7px; padding: 4px 8px; margin-top: 4px; border-left: 3px solid var(--accent); }
.reco-card .rc-buy { display: inline-block; margin-top: 8px; padding: 6px 14px; text-decoration: none; }


/* ---------- 弹窗 ---------- */
.dialog { border: none; border-radius: 16px; padding: 0; max-width: 420px; width: calc(100% - 28px); box-shadow: 0 20px 60px rgba(20,30,50,.25); }
.dialog::backdrop { background: rgba(20,30,50,.45); }
.dialog-card { position: relative; padding: 22px 22px 18px; }
.dialog-card.wide { max-width: 460px; }
.dialog-close {
  position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border: none;
  background: transparent; font-size: 24px; line-height: 1; color: var(--ink-soft); cursor: pointer; border-radius: 8px;
}
.dialog-close:hover { background: #f0f2f6; }
.dialog-card h2 { margin: 0 0 12px; font-size: 19px; }
.dialog-card h3 { margin: 14px 0 8px; font-size: 15px; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tab { flex: 1; padding: 8px; border: 1px solid var(--line); background: #f7f9fc; color: var(--ink-soft); border-radius: 9px; cursor: pointer; font-size: 14px; font-weight: 600; }
.tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.auth-form .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.auth-form label, .cat-form label { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; }
.auth-form input, .cat-form input {
  height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font-size: 14px; background: #fbfcfe; color: var(--ink);
}
.auth-form input:focus, .cat-form input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.form-msg { color: #c0392b; font-size: 12.5px; min-height: 16px; margin: 2px 0 8px; }
.dialog-foot { font-size: 11.5px; color: var(--ink-mute); margin-top: 10px; }
.divider { border: none; border-top: 1px solid var(--line); margin: 14px 0; }

/* ---------- 猫咪档案 ---------- */
.cat-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.cat-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #f7f9fc; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.cat-info { display: flex; flex-direction: column; gap: 2px; }
.cat-info b { font-size: 14.5px; color: var(--ink); }
.cat-meta { font-size: 12px; color: var(--ink-soft); }
.cat-actions { display: flex; gap: 6px; }
.dep-badge {
  display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 6px; font-size: 11px; font-weight: 600;
}
.dep-badge.urgent { background: #fdecea; color: #c0392b; border: 1px solid #f5c6c0; }
.dep-badge.soon { background: #fff4e0; color: #b9770a; border: 1px solid #f3d8a8; }
.dep-badge.ok { background: #e7f7ee; color: var(--ok); border: 1px solid #bfe7d4; }
.cat-form .field-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cat-form .field { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 120px; margin-bottom: 10px; }
.cat-form .field.small { flex: 1 1 30%; min-width: 90px; }
.cat-form .row { display: flex; gap: 10px; margin-top: 4px; }
.cat-form select {
  height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px;
  font-size: 14px; background: #fbfcfe; color: var(--ink);
}

/* ---------- 品类切换 Tab ---------- */
.cat-tabs {
  display: flex; gap: 8px; width: min(1180px, 100% - 28px); margin: 14px auto 0;
  flex-wrap: wrap;
}
.cat-tab {
  padding: 9px 18px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); border-radius: 999px; cursor: pointer;
  font-size: 14px; font-weight: 600; transition: all .15s ease; box-shadow: var(--shadow);
}
.cat-tab:hover { border-color: var(--brand); color: var(--brand-ink); }
.cat-tab.active {
  background: var(--brand-strong); border-color: var(--brand-strong); color: #fff;
  box-shadow: 0 2px 10px rgba(194,65,12,.35);
}

@media (max-width: 640px) {
  .calculator { gap: 12px; }
  .brand-name { font-size: 17px; }
  .brand-emoji { width: 38px; height: 38px; font-size: 20px; border-radius: 11px; }
  .header-inner { gap: 10px; row-gap: 10px; }
  .header-stats { justify-self: center; }
  .btn-feedback, .auth-area, .header-actions { flex: 0 0 auto; }
  .cat-tabs { gap: 6px; }
  .cat-tab { padding: 8px 14px; font-size: 13px; }
}

/* 尊重用户的减少动态效果偏好（P2 增强） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 提醒横幅 ---------- */
.alert-banner { margin: 12px auto 0; width: min(1180px, 100% - 28px); display: flex; flex-direction: column; gap: 6px; }
.alert-item {
  background: linear-gradient(90deg, #fff4ec, #fff); border: 1px solid #f3c9a8; color: #9a4e12;
  border-left: 4px solid var(--brand); border-radius: 10px; padding: 9px 14px; font-size: 13.5px;
  box-shadow: var(--shadow);
}
.alert-item b { color: #b9551a; }

/* ---------- 关注 / 提醒 弹窗 ---------- */
.follow-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.follow-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #f7f9fc; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; flex-wrap: wrap;
}
.follow-info { display: flex; flex-direction: column; gap: 2px; }
.follow-info b { font-size: 14.5px; color: var(--ink); }
.follow-meta { font-size: 12px; color: var(--ink-soft); }
.follow-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.f-tag { font-size: 11.5px; padding: 2px 8px; border-radius: 6px; background: #eef1f6; color: var(--ink-soft); }
.f-tag.trig { background: var(--warn-bg); color: #9a5a10; border: 1px solid var(--warn-line); font-weight: 600; }
.follow-actions { display: flex; gap: 6px; }
.follow-form .field-row { display: flex; gap: 10px; }
.follow-form .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.follow-form .field.small { flex: 0 0 48%; }
.follow-form select, .follow-form input {
  height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px;
  font-size: 14px; background: #fbfcfe; color: var(--ink); max-width: 100%;
}
.follow-form select:focus, .follow-form input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.follow-form .row { display: flex; gap: 10px; margin-top: 4px; }

/* ---------- 注册/登录强化 ---------- */
.req { color: #c0392b; }
.field-hint { font-size: 11.5px; color: var(--ink-mute); margin-top: -2px; }
/* 昵称防重实时校验结果（注册表单） */
.field-hint.is-error { color: #c0392b; }
.field-hint.is-ok { color: var(--ok); }
.pw-strength { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.pw-bar { flex: 1; height: 6px; background: #e5e9f0; border-radius: 3px; overflow: hidden; }
.pw-fill { height: 100%; width: 0%; transition: width .2s ease, background .2s ease; }
.pw-text { font-size: 11.5px; color: var(--ink-soft); min-width: 32px; }

/* 登录与注册弹窗差异化 */
.dialog-subtitle { margin: -8px 0 14px; font-size: 13px; color: var(--ink-soft); }
.login-card { border-top: 4px solid var(--accent); }
.login-card h2 { color: var(--accent-ink); }
.login-submit { background: var(--accent-ink); }
.login-submit:hover { background: var(--accent-ink-dark); }
.register-card { border-top: 4px solid var(--brand); }
.register-card h2 { color: var(--brand-strong); }
.register-submit { background: var(--brand-strong); }
.register-submit:hover { background: var(--brand-ink); }
.dialog-foot a { color: var(--brand-ink); font-weight: 600; text-decoration: underline; }

/* 登录弹窗：微信扫码登录分区 */
.auth-divider { display: flex; align-items: center; gap: 10px; color: var(--ink-mute); font-size: 12px; margin: 14px 0 10px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line, #e3e6ee); }
.btn-wechat {
  width: 100%; padding: 10px 14px; border: 1px solid #1aad19; border-radius: 8px;
  background: #fff; color: #1aad19; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s ease;
}
.btn-wechat:hover { background: #f1fbf0; }
.btn-wechat:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 2px; }
.wechat-qr { margin-top: 10px; display: flex; justify-content: center; }

/* 首页留言反馈入口 */
.btn-feedback {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--accent-ink); font-size: 13.5px; font-weight: 600;
  cursor: pointer; transition: all .15s ease;
}
.btn-feedback:hover { background: var(--accent-soft); border-color: var(--accent-ink); color: var(--accent-ink); }

/* 伪链接按钮（替代滥用 <a href="#"> 的语义化按钮） */
.link-btn {
  background: none; border: none; padding: 0; margin: 0;
  color: var(--brand-ink); font-weight: 700; text-decoration: underline;
  cursor: pointer; font-size: inherit; font-family: inherit;
}
.link-btn:hover { color: var(--brand-strong); }

/* ---------- 留言板 ---------- */
.gb-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; max-height: 320px; overflow-y: auto; }
.gb-card { background: #f7f9fc; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.gb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.gb-head b { font-size: 14px; color: var(--ink); }
.gb-time { font-size: 11.5px; color: var(--ink-mute); }
.gb-contact { font-size: 11.5px; color: var(--ink-soft); background: #eef1f6; padding: 1px 6px; border-radius: 4px; }
.gb-body { font-size: 13.5px; color: var(--ink); line-height: 1.6; white-space: pre-wrap; }
.auth-form textarea {
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px;
  background: #fbfcfe; color: var(--ink); resize: vertical; min-height: 80px;
}
.auth-form textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

/* 密码可见切换按钮（登录/注册弹窗，与智能选粮页一致） */
.pwd-wrap { position: relative; display: flex; width: 100%; }
.pwd-wrap input { width: 100%; padding-right: 38px; }
.pwd-eye {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; cursor: pointer; font-size: 16px; padding: 0; line-height: 1; color: var(--ink-soft);
}
.pwd-eye:hover { color: var(--brand-ink); }
.pwd-eye:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 2px; border-radius: 6px; }

/* ---------- 用户画像弹窗（#26 新增） ---------- */
.profile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 4px 0 2px; }
.profile-stat {
  background: #f7f9fc; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.profile-stat .ps-val { font-size: 17px; font-weight: 800; color: var(--brand-ink); word-break: break-word; }
.profile-stat .ps-label { font-size: 12px; color: var(--ink-soft); font-weight: 600; }
@media (max-width: 480px) {
  .profile-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * 营养 / 膳食参考模块（页面底部 · 科普计算 + 风险控制）
 * 设计取向：弱化色（不抢主榜单视觉），但免责声明与高危拦截必须显眼
 * ============================================================ */
.nutri-panel {
  margin: 22px 0 4px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
}
.np-head h3 { margin: 0 0 6px; font-size: 17px; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.np-tag {
  font-size: 11.5px; font-weight: 700; background: var(--ref-bg); color: var(--ref-ink);
  padding: 2px 8px; border-radius: 999px; letter-spacing: .2px;
}
.np-lead { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.7; }

/* 常驻免责声明（面板顶部） —— 醒目但不刺眼 */
.np-disclaimer {
  margin: 12px 0 10px; padding: 9px 12px; font-size: 13px; line-height: 1.65;
  color: var(--ink-soft); background: #f2f6fb; border-left: 4px solid #7f93ad; border-radius: 8px;
}
/* 推荐结果处的免责声明（全站复用） */
.np-notice {
  margin: 10px 0 0; padding: 8px 12px; font-size: 12.5px; line-height: 1.65;
  color: var(--ink-soft); background: #f2f6fb; border-left: 4px solid #7f93ad; border-radius: 8px;
}
.np-notice.compact { margin-top: 8px; }

.np-body > .np-summary {
  cursor: pointer; font-size: 14px; font-weight: 700; color: var(--brand-ink);
  padding: 8px 10px; border-radius: 10px; background: #fff6ef; border: 1px solid #f7dfcd; list-style: none;
}
.np-body > .np-summary::-webkit-details-marker { display: none; }
.np-body > .np-summary::before { content: "▸ "; color: var(--brand-strong); }
.np-body[open] > .np-summary::before { content: "▾ "; }
.np-body[open] > .np-summary { margin-bottom: 12px; }

/* 表单 */
.np-form-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.np-field { flex: 1 1 150px; min-width: 130px; display: flex; flex-direction: column; gap: 4px; }
.np-field.grow { flex: 2 1 220px; }
.np-field label { font-size: 12.5px; color: var(--ink-mute); font-weight: 600; }
.np-field select, .np-field input {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
  font-size: 14px; background: #fbfcfe; color: var(--ink); min-height: 40px;
}

/* 高危自查 */
.np-risk {
  margin: 12px 0 10px; padding: 10px 12px 12px; border: 1px solid var(--warn-line);
  border-radius: 12px; background: #fffaf3;
}
.np-risk legend { font-size: 13.5px; font-weight: 800; color: var(--warn-ink); padding: 0 6px; }
.np-risk-hint { margin: 2px 0 8px; font-size: 12.5px; color: var(--ink-soft); }
.np-risk-group { margin-bottom: 8px; }
.np-risk-gtitle { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); margin-bottom: 2px; }
.np-check {
  display: flex; align-items: flex-start; gap: 8px; padding: 5px 4px; cursor: pointer;
  font-size: 13px; color: var(--ink); border-radius: 8px; line-height: 1.55;
}
.np-check:hover { background: #fff3e6; }
.np-check input { margin: 3px 0 0; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--brand-strong); }
.np-check-txt { flex: 1 1 auto; }
.np-form-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.np-hint-inline { font-size: 12px; color: var(--ink-mute); }

/* 结果卡片 */
.np-result { margin-top: 6px; }
.np-err { font-size: 13px; color: #b3261e; background: #fff5f5; border: 1px solid #f2c4c4; border-radius: 10px; padding: 10px 12px; }
.np-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 12px; }
.np-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: #fcfdff; }
.np-card-h { font-size: 12.5px; font-weight: 700; color: var(--ink-mute); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.np-big { font-size: 26px; font-weight: 800; color: var(--brand-strong); line-height: 1.25; }
.np-unit { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.np-meta { font-size: 12.5px; color: var(--ink-mute); margin-top: 4px; }
.np-formula {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px;
  background: var(--ref-bg); color: var(--ink-soft); padding: 6px 8px; border-radius: 8px;
  margin: 8px 0; overflow-wrap: anywhere;
}
.np-warn {
  font-size: 12.5px; color: var(--warn-ink); background: var(--warn-bg);
  border-radius: 8px; padding: 6px 8px; margin-top: 6px; line-height: 1.6;
}

/* 来源徽标 */
.np-srcref {
  font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink-dark); border: 1px solid #cdeae4;
  text-decoration: none; white-space: nowrap;
}
.np-srcref:hover { background: #d5f0ea; }

/* 营养素表 */
.np-nutri { margin-top: 12px; }
.np-nutri > summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.np-scope-lead { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 8px; line-height: 1.7; }
.np-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.np-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 620px; }
.np-table th, .np-table td { border-bottom: 1px solid var(--line); padding: 7px 8px; text-align: left; vertical-align: top; }
.np-table thead th { background: #f7f9fc; color: var(--ink-soft); font-size: 12px; white-space: nowrap; }
.np-table tbody th { font-weight: 700; color: var(--ink); white-space: nowrap; }
.np-scope { color: var(--ink-mute); }
.np-why { font-size: 12px; color: var(--ink-mute); margin-top: 2px; line-height: 1.6; }

/* 前提与局限 */
.np-notes { margin-top: 12px; background: #fbfcfe; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.np-notes-h { font-size: 13px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }
.np-notes ul { margin: 0; padding-left: 18px; }
.np-notes li { font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; }
.np-scope-line { margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }

/* 高危拦截（最重要的风控 UI） */
.np-block {
  border: 1px solid #f0c0c0; border-left: 5px solid #c0392b; border-radius: 12px;
  background: #fff6f5; padding: 14px 16px;
}
.np-block.lv-caution { border-color: var(--warn-line); border-left-color: #d98324; background: #fffaf3; }
.np-block-head { font-size: 15px; font-weight: 800; color: #a32b1c; margin-bottom: 8px; line-height: 1.5; }
.np-block.lv-caution .np-block-head { color: var(--warn-ink); }
.np-block-lead { margin: 0 0 8px; font-size: 13px; color: var(--ink); line-height: 1.75; }
.np-risk-list { list-style: none; margin: 8px 0; padding: 0; }
.np-risk-list li {
  display: flex; gap: 8px; align-items: flex-start; padding: 8px 0;
  border-bottom: 1px dashed #f0d3d3; font-size: 13px; line-height: 1.6;
}
.np-risk-list li:last-child { border-bottom: none; }
.np-lv { font-size: 11.5px; font-weight: 800; padding: 2px 7px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; margin-top: 1px; }
.np-lv.lv-emergency { background: #fdecec; color: #a32b1c; border: 1px solid #f3c9c9; }
.np-lv.lv-urgent { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); }
.np-lv.lv-caution { background: #eef3f8; color: #3c5a7a; border: 1px solid #d5e2ee; }
.np-actions-todo { display: grid; gap: 6px; margin-top: 10px; }
.np-todo {
  font-size: 13px; color: var(--ink); background: #fff; border: 1px solid #f0d3d3;
  border-radius: 8px; padding: 8px 10px; line-height: 1.7;
}
.np-block.lv-caution .np-todo { border-color: var(--warn-line); }
.np-block-foot { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-mute); line-height: 1.7; }

/* 依据来源 */
.np-sources { margin-top: 12px; }
.np-sources > summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.np-src-list { margin: 0; padding-left: 20px; }
.np-src-item {
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 8px;
  background: #fbfcfe; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
}
.np-src-name { font-weight: 700; color: var(--ink); }
.np-src-name a { margin-left: 6px; font-size: 12px; font-weight: 600; }
.np-src-org { font-size: 12px; color: var(--ink-mute); margin-bottom: 2px; }
.np-src-limit { color: var(--ink-mute); }
.np-src-foot { font-size: 12px; color: var(--ink-mute); margin: 6px 0 0; line-height: 1.7; }

/* 榜单下方的风险提示条 */
.risk-note {
  margin: 14px 0 0; padding: 9px 12px; font-size: 13px; line-height: 1.7;
  color: var(--ink-soft); background: #f2f6fb; border-left: 4px solid #7f93ad; border-radius: 8px;
}
.risk-note a { color: var(--brand-ink); font-weight: 700; }

/* ============================================================
 * 添加到桌面 / 主屏幕 引导条
 * 网站无法用 JS 直接创建桌面图标，仅引导用户使用浏览器原生能力。
 * 固定底部居中胶囊；移动端/桌面端文案由 install-hint.js 按视口切换。
 * ============================================================ */
.install-hint {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 60; max-width: min(92vw, 580px); width: max-content;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 14px; border-radius: 14px;
  background: rgba(255, 247, 242, .96); border: 1px solid #f3d9c8;
  box-shadow: 0 6px 22px rgba(194, 65, 12, .18);
  font-size: 13px; color: var(--ink); line-height: 1.4;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.install-hint[hidden] { display: none; }
.install-hint .ih-ico { font-size: 16px; flex: 0 0 auto; line-height: 1; }
.install-hint .ih-text { flex: 1 1 auto; }
.install-hint .ih-close {
  flex: 0 0 auto; border: 0; background: transparent; color: var(--ink-soft);
  font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 8px;
}
.install-hint .ih-close:hover { background: #f6e2d5; color: var(--brand-strong); }
@media (max-width: 760px) {
  .install-hint { bottom: 12px; font-size: 12.5px; padding: 9px 10px 9px 12px; gap: 8px; }
}

@media (max-width: 760px) {
  .nutri-panel { padding: 14px 12px; }
  .np-big { font-size: 22px; }
  .np-field { flex: 1 1 100%; }
  .np-table { font-size: 12px; }
}

/* ============================================================
   养宠账本
   ============================================================ */
/* 首页档案面板上的本月花费回显（③ 结果反馈） */
.pp-ledger-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 10px;
  background: #fff4ee; border: 1px solid #f6d6c4; border-radius: 10px;
  font-size: 13px; color: var(--brand-ink);
}
.pp-ledger-bar b { color: var(--brand-strong); font-size: 14px; }
.plb-sep { color: #d9b8a6; }
.plb-more {
  margin-left: auto; background: #fff; border: 1px solid var(--brand);
  color: var(--brand-ink); border-radius: 8px; padding: 4px 10px;
  font-size: 12px; font-family: inherit; cursor: pointer; min-height: 30px;
}
.plb-more:hover { background: var(--brand-strong); color: #fff; border-color: var(--brand-strong); }

/* ---------- 账本弹窗 ----------
   同页 DOM，不整页重载（ECS 带宽 2.4Mbps，重载代价高）。
   形态：桌面端屏幕居中模态（原为右侧贴边抽屉，「不在屏幕中间」体验差）；
        移动端（≤760px）退化为底部半屏面板。支持最小化为右下角悬浮胶囊。 */
.ledger-drawer {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center; padding: 24px 16px;
}
.ledger-drawer[hidden] { display: none; }
.ld-mask { position: absolute; inset: 0; background: rgba(24, 28, 36, .48); }
.ld-panel {
  position: relative; width: min(760px, 96vw); max-height: min(88vh, 900px);
  background: var(--surface); display: flex; flex-direction: column; overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 28px 64px -16px rgba(15, 25, 45, .34), 0 0 0 1px rgba(20, 30, 50, .06);
  animation: ldPop .2s cubic-bezier(.2, .7, .3, 1);
}
@keyframes ldPop { from { transform: translateY(16px) scale(.985); opacity: .55; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ld-panel { animation: none; } }

.ld-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line); flex: 0 0 auto;
  background: linear-gradient(180deg, #fff, #fdfaf7);
}
.ld-title { font-size: 16px; font-weight: 700; margin: 0; }
.ld-head-ops { display: flex; align-items: center; gap: 8px; }
.ld-icon-btn {
  background: none; border: 1px solid var(--line); border-radius: 9px;
  width: 36px; height: 36px; font-size: 15px; line-height: 1; cursor: pointer;
  color: var(--ink-soft); font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center;
}
.ld-icon-btn:hover { border-color: var(--brand); color: var(--brand-ink); background: #fff7f2; }
.ld-min { font-size: 18px; font-weight: 700; padding-bottom: 4px; }
.ld-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px 40px; -webkit-overflow-scrolling: touch; }

/* 最小化：面板收成右下角胶囊，遮罩移除、页面恢复可滚动可点击 */
.ledger-drawer.is-min { align-items: flex-end; justify-content: flex-end; padding: 0; pointer-events: none; }
.ledger-drawer.is-min .ld-mask { display: none; }
.ledger-drawer.is-min .ld-panel { display: none; }
.ld-mini {
  position: absolute; right: 18px; bottom: 18px; z-index: 1; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-strong); color: #fff; border: none; border-radius: 999px;
  padding: 10px 16px; min-height: 44px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 10px 26px -8px rgba(194, 65, 12, .55);
}
.ld-mini[hidden] { display: none; }
.ld-mini:hover { background: var(--brand-ink); }
.ld-mini-amt { font-variant-numeric: tabular-nums; opacity: .92; }

/* 汇总卡片 */
.ld-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.ld-metric { background: #f7f9fc; border-radius: 10px; padding: 10px 12px; }
.ld-metric-label { font-size: 12px; color: var(--ink-soft); }
.ld-metric-value { font-size: 20px; font-weight: 600; margin: 2px 0; }
.ld-metric-sub { font-size: 11px; color: var(--ink-soft); }

/* 区块 */
.ld-block { margin-bottom: 18px; }
.ld-block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ld-block-title { font-size: 14px; font-weight: 600; }
.ld-empty { font-size: 13px; color: var(--ink-soft); padding: 10px 0; }
.ld-tip { font-size: 12px; color: var(--ink-soft); background: #f7f9fc; border-radius: 8px; padding: 10px; }

/* 预算进度 */
.ld-budget-set { display: inline-flex; gap: 6px; align-items: center; }
.ld-bar { height: 10px; background: #eef1f6; border-radius: 999px; overflow: hidden; }
.ld-bar-fill { height: 100%; background: var(--accent, #2bb6a3); border-radius: 999px; transition: width .2s ease; }
.ld-bar-fill.over { background: #d93025; }
.ld-bar-note { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }

/* 分类 / 宠物占比条 */
.ld-cat { display: grid; grid-template-columns: 68px 1fr auto; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.ld-cat-name { color: var(--ink-soft); }
.ld-cat-bar { height: 8px; background: #eef1f6; border-radius: 999px; overflow: hidden; }
.ld-cat-bar i { display: block; height: 100%; background: var(--brand, #f0883e); border-radius: 999px; }
.ld-cat-amt { font-variant-numeric: tabular-nums; }
.ld-cat-amt em { font-style: normal; color: var(--ink-soft); font-size: 11px; margin-left: 4px; }

/* 近 12 月趋势 */
.ld-trend { display: flex; align-items: flex-end; gap: 4px; height: 78px; }
.ld-trend-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.ld-trend-col i { width: 100%; max-width: 22px; background: #cfd6e2; border-radius: 3px 3px 0 0; }
.ld-trend-col.cur i { background: var(--brand-strong, #c2410c); }
.ld-trend-col span { font-size: 10px; color: var(--ink-soft); }

/* 表单 */
.ld-form-block { background: #f7f9fc; border-radius: 10px; padding: 12px; }
.ld-form { display: flex; flex-direction: column; gap: 8px; }
.ld-row { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 8px; }
.ld-row-label { font-size: 13px; color: var(--ink-soft); }
.ld-input {
  width: 100%; min-height: 36px; padding: 6px 10px; font-size: 14px; font-family: inherit;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: inherit; box-sizing: border-box;
}
.ld-input.sm { width: auto; min-width: 96px; min-height: 30px; font-size: 12px; padding: 4px 8px; }
.ld-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ld-pets { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0; }
.ld-pet { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; cursor: pointer; }
.ld-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.ld-prefill-tip { font-size: 12px; color: var(--brand-ink); margin-right: auto; }
.ld-btn-primary {
  background: var(--brand-strong, #c2410c); color: #fff; border: 1px solid transparent;
  border-radius: 8px; padding: 8px 18px; font-size: 14px; font-family: inherit; cursor: pointer; min-height: 40px;
}
.ld-btn-primary:hover { background: var(--brand-ink, #b9551a); }
.ld-btn-mini {
  background: #fff; border: 1px solid var(--line); color: var(--ink-soft);
  border-radius: 6px; padding: 4px 10px; font-size: 12px; font-family: inherit; cursor: pointer; min-height: 28px;
}
.ld-btn-mini:hover { border-color: var(--brand); color: var(--brand-ink); }
.ld-btn-mini.danger:hover { border-color: #d93025; color: #d93025; }
.ld-filters { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* 流水列表 */
.ld-list { display: flex; flex-direction: column; }
.ld-item {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.ld-item-date { font-size: 12px; color: var(--ink-soft); }
.ld-item-date em { font-style: normal; background: #f1f4f9; border-radius: 4px; padding: 1px 6px; margin-left: 4px; }
.ld-item-name { font-size: 14px; margin-top: 2px; }
.ld-item-brand { font-size: 12px; color: var(--ink-soft); }
.ld-item-sub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.ld-item-amt { text-align: right; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ld-item-plat { font-size: 11px; color: var(--ink-soft); font-weight: 400; margin-top: 2px; }
.ld-item-ops { display: flex; gap: 6px; }

@media (max-width: 760px) {
  /* 移动端：居中模态改为底部半屏面板（拇指可达），圆角只保留上侧 */
  .ledger-drawer { padding: 0; align-items: flex-end; }
  .ld-panel { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
  .ld-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ld-row { grid-template-columns: 68px 1fr; }
  .ld-trend-col span { font-size: 9px; }
  .pp-ledger-bar { font-size: 12px; }
}