/* ============================================================
   狗狗鮮食營養計算器 v2 — styles.css
   配色系：開心果綠 #93c572 + 暖棕 #8B6F47 + 白
   食材分類：依類別不同顏色外框
   ============================================================ */

:root {
  /* 主色系 — 跟 carb-calc 一致 (暖米白底 / 白卡 / 深棕字 / 暖淺金邊) */
  --bg: #FFFAF0;             /* carb-calc --bg-page (暖米白) */
  --card: #FFFFFF;           /* carb-calc --bg-card */
  --text: #3D2914;           /* carb-calc --c-dark-brown */
  --text-dim: #7A5C3F;       /* carb-calc --c-text-secondary */
  --border: #F4E4BC;         /* carb-calc --bd-card (暖淺金) */

  /* 主色 — 開心果綠 */
  --accent: #93c572;
  --accent-dark: #6fa050;     /* 深一階 hover/active */
  --accent-light: #e8f3dc;    /* 淺淺綠 highlight */
  --accent-on: #2e4a1a;       /* 綠底上的深綠/暗字 */

  /* 棕色輔色 */
  --brown: #8B6F47;
  --brown-deep: #6B4F2F;

  /* 狀態色 — 綠/棕/紅 */
  --ok-bg: #e8f3dc;
  --ok-border: #b7d7a0;
  --ok-text: #4a7a2e;

  --warn-bg: #fff5cc;        /* 淺黃底 (不足/過低警示) */
  --warn-border: #f0d050;
  --warn-text: #8a6914;       /* 深琥珀字 (對白底有對比) */

  --bad-bg: #fae2de;
  --bad-border: #e4a69c;
  --bad-text: #8a2e24;

  --ref-bg: #f0ebe0;
  --ref-border: #d8d0bc;
  --ref-text: #6b5a48;

  /* 輸入欄 — 跟 carb-calc 一致 (白底) */
  --input: #FFFFFF;          /* carb-calc --bg-input */
  --input-highlight: #FFF8E7;

  /* Section header colors — 綠/棕/金/紅 */
  --section-macro: #93c572;       /* 巨量營養素 — 綠 (主色) */
  --section-mineral: #8B6F47;     /* 礦物質 — 棕 (取代橘) */
  --section-vitamin: #d4a64a;     /* 維生素 — 暖金 */
  --section-aa: #b34638;          /* 胺基酸 — 紅棕 */
  --section-other: #a89a86;       /* 參考用 — 暖灰棕 */
  --section-summary: #6fa050;     /* 摘要 — 深綠 */
  --section-dm: #8B6F47;          /* DM 分析 — 棕 */
  --section-ratio: #d4a64a;       /* 比例分析 — 金 */

  /* 食材分類色 (保留繽紛, 食物類別辨識用) */
  --cat-supplement: #7E57C2;       /* 補充品 — 紫 */
  --cat-supplement-cap: #FF7043;   /* 補充品(顆) — 橙 */
  --cat-supplement-pkt: #26A69A;   /* 補充品(包) — 藍綠 */
  --cat-feed: #6B4F2F;             /* 飼料 — 深棕 */
  --cat-meat: #E53935;             /* 肉類 — 紅 */
  --cat-seafood: #29B6F6;          /* 海鮮 — 藍 */
  --cat-egg: #FFB300;              /* 蛋類 — 金黃 */
  --cat-grain: #8D6E63;            /* 穀物/澱粉/根莖 — 棕 */
  --cat-veg: #43A047;              /* 蔬菜/蔬果 — 綠 */
  --cat-fruit: #EC407A;            /* 水果 — 紅粉 */
  --cat-oil: #689F38;              /* 油脂 — 橄欖綠 */
  --cat-condiment: #757575;        /* 調味 — 灰 */
  --cat-seed: #6D4C41;             /* 種子 — 深棕 */
  --cat-default: #8B6F47;          /* 其他 — 棕 */

  --shadow: 0 1px 3px rgba(70,50,30,.08);
  --radius: 10px;
  --radius-sm: 6px;

  /* iOS safe area */
  --safe-bottom: env(safe-area-inset-bottom, 0);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 跟 carb-calc dark mode 一致 (暖深棕黑) */
    --bg: #1F1610;             /* carb-calc --bg-page */
    --card: #2A1E16;           /* carb-calc --bg-card */
    --text: #F5E6D3;           /* carb-calc --c-text */
    --text-dim: #C8B89F;       /* carb-calc --c-text-muted */
    --border: #5C4A3A;         /* carb-calc --bd-card */

    --accent: #a8d788;          /* 飽和度提一階適應深底 */
    --accent-dark: #93c572;
    --accent-light: #2c3a1c;
    --accent-on: #f5e8d3;

    --brown: #c4a170;
    --brown-deep: #d4b58a;

    --ok-bg: #2a3a1c;
    --ok-border: #5a7a3a;
    --ok-text: #b5d595;

    --warn-bg: #3a3018;
    --warn-border: #8a7028;
    --warn-text: #ecc968;       /* 黃 (對深棕底有對比) */

    --bad-bg: #3d1e19;
    --bad-border: #7a3a30;
    --bad-text: #f0a89e;

    --ref-bg: #322618;
    --ref-border: #4a3c2a;
    --ref-text: #b8a690;

    --input: #36281D;          /* carb-calc --bg-input dark */
    --input-highlight: #4a3a20;

    --shadow: 0 1px 3px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "PingFang TC", "Heiti TC", "Microsoft JhengHei", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   Header — 白底 + 綠 accent (light), 棕底 + 綠 accent (dark)
   ============================================================ */
.header {
  background: var(--card);
  color: var(--text);
  padding: 12px 14px;
  padding-top: calc(12px + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 3px solid var(--accent);
  box-shadow: 0 1px 4px rgba(70,50,30,.08);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--brown-deep);
}

/* 舊 .tab-nav 已搬到底部, 隱藏避免遺留 */
.tab-nav { display: none !important; }

.header .version {
  font-size: 11px;
  background: rgba(255,255,255,.2);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
}

.header-btn {
  background: var(--accent);
  color: white;
  border: 1px solid var(--accent-dark);
  /* 圓形 — 鎖死正方形 */
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  max-width: 36px;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  box-sizing: border-box;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  transition: background 0.15s, transform 0.15s;
  font-family: inherit;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}

.header-btn:hover {
  background: rgba(255,255,255,.3);
  transform: rotate(180deg);
}

.header-btn:active {
  background: rgba(255,255,255,.4);
  transform: scale(0.92) rotate(180deg);
}

/* ============================================================
   Container & Cards
   ============================================================ */
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 12px;
  /* 留底部空間給 fixed bottom-nav (~64px) + iOS home indicator */
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

.card {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}

.section-title {
  margin: 0 0 8px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--brown-deep);
  letter-spacing: 0.3px;
  border-left: 4px solid var(--accent);
  padding-left: 8px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.section-header .section-title {
  margin: 0;
}

.hint {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0 0 10px 0;
}

.empty-state {
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
  padding: 12px 0;
  margin: 0;
}

/* ============================================================
   Form (狗狗基本資料)
   ============================================================ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

@media (min-width: 480px) {
  .form-grid {
    grid-template-columns: minmax(110px, 1fr) 2fr;
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.field label {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
}

.field input,
.field select {
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--input-highlight);
  color: var(--text);
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-light);
  background: var(--input-highlight);
}

.field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%236fa050' d='M6 8L0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}

.energy-bar {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 12px;
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-dim);
  border-left: 3px solid var(--accent);
}

.energy-bar .energy-label {
  font-weight: 700;
  color: var(--accent);
}

.energy-bar .energy-value {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 0 2px;
}

.energy-bar .energy-unit {
  font-size: 11px;
}

.energy-bar .energy-sep {
  color: var(--border);
  margin: 0 4px;
}

/* ============================================================
   食材選擇 chip — 透明底+分類色外框
   ============================================================ */
.ingredient-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.picker-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.picker-group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  margin: 4px 0 2px 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.picker-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  /* 預設透明底 + 分類色外框 */
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: transparent;
  color: var(--cat-color, var(--cat-default));
  border: 2px solid var(--cat-color, var(--cat-default));
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.chip:active {
  transform: scale(0.96);
}

/* :hover 只對有滑鼠的裝置, 避免 iOS 觸控 tap 後 hover 卡住 (chip 看起來像被選中) */
@media (hover: hover) {
  .chip:hover {
    background: var(--cat-color, var(--cat-default));
    color: white;
    opacity: 0.85;
  }
}

.chip.active {
  background: var(--cat-color, var(--cat-default));
  color: white;
  opacity: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}

/* 排除狀態 — 紅底 + ✗ + 刪除線 (明顯) */
.chip.excluded {
  background: var(--bad-bg) !important;
  border-color: var(--bad-text) !important;
  border-style: dashed !important;
  color: var(--bad-text) !important;
  text-decoration: line-through;
  opacity: 0.85;
}
.chip.excluded .chip-icon {
  color: var(--bad-text) !important;
  text-decoration: none;
  display: inline-block;
  font-weight: 900;
}

.chip .chip-icon {
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
}

/* ============================================================
   已加入食材
   ============================================================ */
.recipe-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recipe-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 9px 10px;
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
}

.recipe-row .recipe-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.recipe-name-link {
  background: transparent;
  border: none;
  text-align: left;
  padding: 4px 6px;
  margin-left: -6px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(31,78,121,.35);
  text-underline-offset: 2px;
  -webkit-tap-highlight-color: transparent;
}

.recipe-name-link:hover,
.recipe-name-link:focus {
  background: rgba(31,78,121,.08);
  text-decoration-color: var(--accent);
  outline: none;
}

.recipe-name-link:active {
  transform: scale(0.97);
}

.recipe-name-info {
  font-style: normal;
  font-weight: 700;
  font-size: 12px;
  color: var(--accent);
  opacity: 0.7;
}

.recipe-row .recipe-portion {
  width: 64px;
  padding: 6px 8px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--input-highlight);
  color: var(--text);
  text-align: right;
  -webkit-appearance: none;
  appearance: none;
  font-weight: 600;
}

.recipe-row .recipe-portion:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-light);
}

.recipe-row .recipe-unit {
  font-size: 13px;
  color: var(--text-dim);
  min-width: 18px;
}

.recipe-row .recipe-remove {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 18px;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.recipe-row .recipe-remove:hover {
  background: var(--bad-bg);
  color: var(--bad-text);
}

.recipe-summary {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  padding: 10px;
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-dim);
  flex-wrap: wrap;
  border-left: 3px solid var(--accent);
}

.recipe-summary b {
  color: var(--accent);
  font-weight: 700;
  font-size: 14px;
}

/* ============================================================
   乾物質基礎分析
   ============================================================ */
.dm-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 4px;
}

.dm-row {
  display: grid;
  grid-template-columns: 1fr 80px 80px;
  gap: 8px;
  padding: 7px 0;
  font-size: 13px;
  border-bottom: 1px dashed var(--border);
}

.dm-row:last-child {
  border-bottom: none;
}

.dm-row.dm-header {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 700;
  text-align: right;
  padding: 4px 0;
  border-bottom: 2px solid var(--section-dm);
  letter-spacing: 1px;
}

.dm-row.dm-header > span:first-child {
  text-align: left;
}

.dm-row.dm-meta {
  background: #FFF8E7;
  padding: 7px 8px;
  margin: 0 -8px;
  border-radius: var(--radius-sm);
  border-bottom: none;
}

@media (prefers-color-scheme: dark) {
  .dm-row.dm-meta {
    background: #2d2914;
  }
}

.dm-row.dm-em .dm-amount {
  font-weight: 700;
  color: var(--section-dm);
}

.dm-row .dm-name {
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dm-row .dm-formula {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 400;
  font-family: ui-monospace, SF Mono, Menlo, Consolas, monospace;
  font-style: italic;
}

.dm-row .dm-amount,
.dm-row .dm-pct {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-family: ui-monospace, SF Mono, Menlo, Consolas, monospace;
}

.dm-row .dm-amount {
  color: var(--text);
  font-weight: 600;
}

.dm-row .dm-pct {
  color: var(--section-dm);
  font-weight: 700;
}

/* ============================================================
   達標儀表板
   ============================================================ */
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dash-section-header {
  font-size: 11px;
  font-weight: 700;
  color: white;
  padding: 4px 10px;
  margin: 8px -10px 4px -10px;
  border-radius: var(--radius-sm);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.dash-section-header:first-child {
  margin-top: 0;
}

.dash-section-header.macro { background: var(--section-macro); }
.dash-section-header.mineral { background: var(--section-mineral); }
.dash-section-header.vitamin { background: var(--section-vitamin); color: #333; }
.dash-section-header.aa { background: var(--section-aa); }
.dash-section-header.other { background: var(--section-other); }

.dash-row {
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px dashed var(--border);
}

.dash-row:last-child {
  border-bottom: none;
}

.dash-row-main {
  display: grid;
  grid-template-columns: 110px 1fr 56px;
  gap: 8px;
  align-items: center;
}

.dash-detail {
  font-size: 10.5px;
  color: var(--text-dim);
  margin-top: 4px;
  margin-left: 4px;
  font-family: ui-monospace, SF Mono, Menlo, Consolas, monospace;
  letter-spacing: -0.2px;
}

.dash-row .dash-name {
  font-weight: 600;
}

.dash-row .dash-name .dash-unit {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 400;
  margin-left: 2px;
}

.dash-row .dash-bar-wrap {
  position: relative;
  height: 14px;
  background: var(--ref-bg);
  border-radius: 7px;
  overflow: hidden;
}

.dash-row .dash-bar {
  height: 100%;
  border-radius: 7px;
  transition: width 0.3s;
}

.dash-row .dash-pct {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
}

.dash-row.status-ok .dash-bar { background: var(--ok-text); }
.dash-row.status-ok .dash-pct { color: var(--ok-text); }

.dash-row.status-warn .dash-bar { background: var(--warn-text); }
.dash-row.status-warn .dash-pct { color: var(--warn-text); }

.dash-row.status-bad .dash-bar { background: var(--bad-text); }
.dash-row.status-bad .dash-pct { color: var(--bad-text); }

.dash-row.status-ref .dash-bar { background: var(--ref-text); }
.dash-row.status-ref .dash-pct { color: var(--ref-text); }

/* 緊湊版 (計算器用) — 不畫進度條, 純百分比 + 顏色 */
.dash-row-compact {
  padding: 4px 4px;
}
.dash-row-compact .dash-bar-wrap,
.dash-row-compact .dash-bar {
  display: none !important;             /* 雙保險: 即使 render 了也隱藏 */
}
.dash-row-compact .dash-row-main {
  grid-template-columns: 1fr auto !important;  /* 名字 | 百分比 (覆蓋舊 3-col) */
  gap: 8px;
}
.dash-row-compact .dash-pct {
  font-size: 15px;
  font-weight: 800;
  min-width: 56px;
}
.dash-row-compact .dash-detail {
  margin-top: 2px;
  font-size: 10px;
  opacity: 0.85;
}
/* 不同 status 的小色塊提示 */
.dash-row-compact.status-ok {
  border-left: 3px solid var(--ok-text);
  padding-left: 8px;
}
.dash-row-compact.status-warn {
  border-left: 3px solid var(--warn-border);
  padding-left: 8px;
  background: var(--warn-bg);
}
.dash-row-compact.status-warn .dash-pct {
  color: #d4a000 !important;     /* 不足 → 鮮黃字 */
}
.dash-row-compact.status-bad {
  border-left: 3px solid var(--bad-text);
  padding-left: 8px;
  background: var(--bad-bg);
}
.dash-row-compact.status-ref {
  border-left: 3px solid var(--ref-text);
  padding-left: 8px;
  opacity: 0.7;
}

.dashboard-summary {
  display: flex;
  gap: 6px;
  margin-top: 12px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 2px solid var(--accent-light);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid;
  font-weight: 600;
}

.badge b {
  font-size: 13px;
  font-weight: 700;
}

.badge-ok { background: var(--ok-bg); color: var(--ok-text); border-color: var(--ok-border); }
.badge-warn { background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border); }
.badge-bad { background: var(--bad-bg); color: var(--bad-text); border-color: var(--bad-border); }

/* ============================================================
   比例分析
   ============================================================ */
.ratios {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ratio-row {
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px dashed var(--border);
}

.ratio-row:last-child {
  border-bottom: none;
}

.ratio-row-main {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: baseline;
}

.ratio-row .ratio-name {
  color: var(--text);
  font-weight: 600;
}

.ratio-row .ratio-ideal {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 400;
  margin-left: 2px;
}

.ratio-row .ratio-value {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-family: ui-monospace, SF Mono, Menlo, Consolas, monospace;
  font-size: 14px;
}

/* 比例分析專用色: 飽和鮮黃 (跟乾物質% 用的淡黃做區分) */
:root {
  --ratio-warn-bg: #fff200;        /* 鮮黃底 */
  --ratio-warn-border: #d4b800;    /* 黃邊 */
  --ratio-warn-text: #4a3a00;       /* 深黃褐字 (黃底高對比) */
}
@media (prefers-color-scheme: dark) {
  :root {
    --ratio-warn-bg: #d4b800;       /* 飽和金黃 dark mode */
    --ratio-warn-border: #fff200;
    --ratio-warn-text: #1a1500;
  }
}

.ratio-row .ratio-value.ok { color: var(--ok-text); }
/* 不足時數值用鮮黃字體 (整列不上底色, 名字維持深字) */
.ratio-row .ratio-value.warn {
  color: #d4a000;
  font-weight: 800;
}
.ratio-row .ratio-value.bad { color: var(--bad-text); }
.ratio-row .ratio-value.ref { color: var(--ref-text); }

/* 警示說明文字 (例如「↓ 鉀不足/鈉過高...」) 用淡黃底色 */
.ratio-row .ratio-warning {
  margin-top: 5px;
  padding: 6px 10px;
  background: var(--warn-bg);          /* 淡黃底 #fff5cc */
  color: var(--warn-text);              /* 深琥珀字 */
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  line-height: 1.4;
  font-weight: 500;
}

.ratio-row .ratio-warning-icon {
  font-weight: 700;
  font-size: 13px;
  margin-right: 2px;
}

@media (prefers-color-scheme: dark) {
  .ratio-row .ratio-value.warn { color: #ffd838; }
}

/* ============================================================
   按鈕
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.1s;
}

.btn:active {
  transform: scale(0.97);
}

.btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(31,78,121,.25);
}

.btn-primary:hover {
  background: var(--accent-dark);
  box-shadow: 0 3px 8px rgba(31,78,121,.35);
}

.btn-danger {
  background: var(--bad-bg);
  color: var(--bad-text);
  border-color: var(--bad-border);
  font-size: 12px;
  padding: 5px 10px;
}

.btn-danger:hover {
  background: var(--bad-text);
  color: white;
}

.actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 16px 0 8px 0;
}

.actions .btn {
  flex: 1;
  max-width: 200px;
  padding: 12px 20px;
  font-size: 15px;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 16px;
  padding: 12px 8px;
  border-top: 1px solid var(--border);
}

.footer p {
  margin: 4px 0;
}

.footer .version-tag {
  display: inline-block;
  background: var(--accent-light);
  color: var(--accent);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 10px;
  margin-top: 4px;
}

.footer .disclaimer {
  color: var(--bad-text);
  font-weight: 500;
  font-size: 10px;
  margin-top: 8px;
}

/* ============================================================
   Chip ⓘ info button
   ============================================================ */
.chip-info {
  margin-left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  color: inherit;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
  font-style: normal;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.chip:not(.active) .chip-info {
  background: var(--cat-color, var(--cat-default));
  color: white;
  opacity: 0.6;
}

.chip-info:hover {
  background: rgba(0,0,0,.18);
  transform: scale(1.15);
}

.chip.active .chip-info {
  background: rgba(255,255,255,.3);
}

/* ============================================================
   食材詳情 Modal
   ============================================================ */
.food-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.food-modal[hidden] {
  display: none;
}

.food-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  cursor: pointer;
}

.food-modal-content {
  position: relative;
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.3);
  width: calc(100% - 32px);
  max-width: 480px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  margin: 16px;
  overflow: hidden;
}

.food-modal-header {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%);
  color: white;
  padding: 16px 20px;
  padding-top: calc(16px + env(safe-area-inset-top));
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
}

.food-modal-title-wrap {
  flex: 1;
  min-width: 0;
}

.food-modal-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
}

.food-modal-meta {
  margin: 4px 0 0 0;
  font-size: 11px;
  opacity: 0.85;
  line-height: 1.4;
}

.modal-close {
  background: rgba(255,255,255,.2);
  color: white;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: inherit;
  line-height: 1;
}

.modal-close:hover {
  background: rgba(255,255,255,.35);
}

.food-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

.detail-section {
  margin-bottom: 14px;
}

.detail-section-title {
  font-size: 11px;
  font-weight: 700;
  color: white;
  padding: 4px 10px;
  margin: 0 0 6px 0;
  border-radius: var(--radius-sm);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.detail-section.macro .detail-section-title { background: var(--section-macro); }
.detail-section.mineral .detail-section-title { background: var(--section-mineral); }
.detail-section.vitamin .detail-section-title { background: var(--section-vitamin); color: #333; }
.detail-section.aa .detail-section-title { background: var(--section-aa); }
.detail-section.fa .detail-section-title { background: var(--section-summary); }
.detail-section.other .detail-section-title { background: var(--section-other); }
.detail-section.meta .detail-section-title { background: var(--accent); }

.detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.detail-table tr {
  border-bottom: 1px dashed var(--border);
}

.detail-table tr:last-child {
  border-bottom: none;
}

.detail-table td {
  padding: 5px 8px;
  vertical-align: top;
}

.detail-table .detail-name {
  color: var(--text);
}

.detail-table .detail-value {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SF Mono, Menlo, Consolas, monospace;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.detail-table .detail-unit {
  text-align: left;
  font-size: 10.5px;
  color: var(--text-dim);
  width: 50px;
  font-weight: 400;
}

.detail-table tr.zero .detail-name,
.detail-table tr.zero .detail-value {
  color: var(--text-dim);
  opacity: 0.5;
}

.detail-source-note {
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--accent-light);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
}

.detail-source-note .src-label {
  color: var(--accent);
  font-weight: 700;
}

/* ============================================================
   日誌頁面 — 月曆 / 事件 / Modal
   ============================================================ */

/* btn-secondary */
.btn-secondary {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
.btn-secondary:hover {
  background: var(--accent);
  color: white;
}

/* 月曆 nav */
.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.cal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
}
.cal-nav-btn {
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid var(--accent);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
}
.cal-nav-btn:hover { background: var(--accent); color: white; }

/* 月曆 weekday header */
.cal-weekday-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 2px;
  font-size: 11px;
  text-align: center;
  color: var(--text-dim);
  font-weight: 700;
  padding: 4px 0;
  background: var(--accent-light);
  border-radius: 6px;
}

/* 月曆 grid */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.cal-day {
  position: relative;
  aspect-ratio: 1;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font-size: 11px;
  transition: all 0.1s;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.cal-day:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}
.cal-day.other-month {
  background: transparent;
  border-color: transparent;
  color: var(--text-dim);
  opacity: 0.4;
  cursor: default;
}
.cal-day.today {
  border: 2px solid var(--accent);
  font-weight: 700;
}
.cal-day .cal-day-num {
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}
.cal-day .cal-day-events {
  margin-top: auto;
  text-align: right;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 食譜 highlight (顏色 strip 在 day cell top) */
.cal-day .cal-day-feed {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 6px 6px 0 0;
}

.feed-color-0 { background: #FF7043; }
.feed-color-1 { background: #5B9BD5; }
.feed-color-2 { background: #43A047; }
.feed-color-3 { background: #C00000; }
.feed-color-4 { background: #7E57C2; }
.feed-color-5 { background: #FFB300; }
.feed-color-6 { background: #26A69A; }
.feed-color-7 { background: #EC407A; }

/* 月曆 legend */
.cal-legend {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  font-size: 10px;
  color: var(--text-dim);
}
.cal-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.cal-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
}
.cal-legend-dot.today { background: white; border: 2px solid var(--accent); }
.cal-legend-dot.has-feed { background: #FF7043; }
.cal-legend-dot.has-event { background: var(--warn-text); }

/* 食譜歷史列表 */
.recipe-history { display: flex; flex-direction: column; gap: 8px; }
.recipe-history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--accent-light);
  border-radius: 6px;
  border-left: 4px solid var(--accent);
}
.recipe-history-item .feed-color-strip {
  width: 6px;
  height: 36px;
  border-radius: 3px;
  flex-shrink: 0;
}
.recipe-history-item .rh-info {
  flex: 1;
  min-width: 0;
}
.recipe-history-item .rh-name {
  font-weight: 700;
  color: var(--text);
  font-size: 14px;
}
.recipe-history-item .rh-period {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}
.recipe-history-item .rh-actions {
  display: flex;
  gap: 4px;
}
.recipe-history-item .btn-mini {
  padding: 4px 8px;
  font-size: 11px;
}

/* Diary modal form */
.diary-modal { max-width: 480px; }
.diary-form { display: flex; flex-direction: column; gap: 12px; }
.diary-form .field input,
.diary-form .field textarea {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input);
  color: var(--text);
  width: 100%;
}
.diary-form .field input:disabled {
  background: var(--ref-bg);
  color: var(--text-dim);
}
.diary-end-options {
  display: flex;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.diary-radio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  cursor: pointer;
}

.food-modal-footer {
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid var(--border);
  background: var(--card);
}

/* Day detail */
.day-detail-section {
  margin-bottom: 14px;
}
.day-detail-section h4 {
  margin: 0 0 6px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.5px;
}
.day-feeding {
  padding: 10px;
  background: var(--accent-light);
  border-radius: 6px;
  border-left: 4px solid var(--accent);
  font-size: 13px;
}
.day-feeding .feed-name { font-weight: 700; }
.day-feeding .feed-period { font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.day-events { display: flex; flex-direction: column; gap: 6px; }
.day-event-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: var(--input);
  border-radius: 6px;
  border-left: 3px solid var(--warn-border);
  font-size: 13px;
}
.day-event-item .ev-emoji {
  font-size: 18px;
  line-height: 1;
}
.day-event-item .ev-info { flex: 1; min-width: 0; }
.day-event-item .ev-name { font-weight: 600; }
.day-event-item .ev-note { font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.day-event-item .ev-delete {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}
.day-event-item .ev-delete:hover { color: var(--bad-text); }

.day-add-btn { width: 100%; margin-top: 8px; }

/* Event picker */
.event-picker-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.event-cat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.event-cat-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border);
}
.event-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
}
.event-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.1s;
}
.event-chip:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}
.event-chip:active { transform: scale(0.97); }
.event-chip .ec-emoji { font-size: 16px; line-height: 1; }

.event-detail-form {
  margin-top: 10px;
  padding: 12px;
  background: var(--accent-light);
  border-radius: 6px;
  border: 1px solid var(--accent);
}
.event-detail-form h4 {
  margin: 0 0 8px 0;
  color: var(--accent);
}
.event-detail-form .field {
  margin-bottom: 8px;
}
.event-detail-form input,
.event-detail-form textarea {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card);
  color: var(--text);
  width: 100%;
}
.event-detail-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 10px;
}

/* 事件統計 */
.event-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 6px;
  font-size: 12px;
}
.event-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--input);
  border-radius: 4px;
}
.event-stat .es-count {
  margin-left: auto;
  font-weight: 700;
  color: var(--accent);
}

/* ============================================================
   日誌：統計區塊（最近 30 天）
   ============================================================ */
#diary-stats-card .stats-block + .stats-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
}
.stats-subtitle {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.5px;
  margin: 0 0 8px 0;
  text-transform: uppercase;
}
.stats-events {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
  font-size: 12px;
}
.stats-recipes { display: flex; flex-direction: column; gap: 6px; }
.recipe-stat-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}
.recipe-stat-row .rs-bar-wrap {
  height: 10px;
  background: var(--input);
  border-radius: 5px;
  overflow: hidden;
}
.recipe-stat-row .rs-bar {
  height: 100%;
  border-radius: 5px;
  transition: width 0.3s ease;
}
.recipe-stat-row .rs-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.recipe-stat-row .rs-name { font-weight: 600; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recipe-stat-row .rs-days { color: var(--text-dim); font-size: 11px; flex-shrink: 0; }

/* 食譜名稱 → 計算器 連結按鈕 */
.feed-name-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.feed-name-link:hover { color: var(--accent-dark); }
.feed-name-link .feed-name-arrow {
  font-size: 11px;
  background: var(--accent);
  color: white;
  padding: 1px 6px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
}

/* Existing-recipe selector + range fill */
.diary-form select {
  font-family: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input);
  color: var(--text);
  width: 100%;
}
.section-header .btn-mini {
  padding: 4px 10px;
  font-size: 11px;
}

/* ============================================================
   Print-only
   ============================================================ */
.print-only { display: none; }

@media print {
  @page {
    size: A4 portrait;
    margin: 1.2cm;
  }

  body {
    background: white !important;
    color: black !important;
    font-size: 10pt;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .header,
  .actions,
  .btn,
  .ingredient-picker,
  .hint,
  .recipe-row .recipe-remove,
  .section-header .btn,
  #ingredient-picker,
  .empty-state,
  .footer .disclaimer {
    display: none !important;
  }

  .print-only { display: block; }

  .print-header {
    border-bottom: 2px solid #6fa050;
    padding-bottom: 8pt;
    margin-bottom: 12pt;
  }

  .print-title {
    font-size: 16pt;
    color: #6fa050;
    margin: 0 0 6pt 0;
  }

  .print-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4pt 12pt;
    font-size: 9pt;
    color: #333;
  }

  .print-meta b {
    color: #6fa050;
  }

  .container {
    padding: 0;
    max-width: none;
  }

  .card {
    box-shadow: none !important;
    border: 1px solid #888 !important;
    background: white !important;
    margin-bottom: 8pt;
    padding: 8pt;
    page-break-inside: avoid;
  }

  .section-title {
    color: #6fa050 !important;
    font-size: 11pt;
    margin: 0 0 4pt 0;
  }

  .recipe-row {
    background: white !important;
    border: 1px solid #ccc !important;
    padding: 4pt 8pt !important;
    grid-template-columns: 1fr auto auto !important;
  }

  .recipe-row .recipe-portion {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    width: auto !important;
    font-weight: 600;
    color: #6fa050 !important;
    font-size: 10pt;
  }

  .recipe-summary {
    background: #f5f5f0 !important;
    page-break-after: avoid;
  }

  .dash-row {
    page-break-inside: avoid;
  }

  .dash-row.status-ok .dash-bar { background: #1f5a2a !important; }
  .dash-row.status-warn .dash-bar { background: #8a6914 !important; }
  .dash-row.status-bad .dash-bar { background: #8a2e24 !important; }
  .dash-row.status-ref .dash-bar { background: #999 !important; }

  .badge {
    border: 1px solid #888 !important;
    background: white !important;
    color: black !important;
  }

  .ratio-row {
    page-break-inside: avoid;
  }

  .energy-bar {
    background: #DDEBF7 !important;
    color: #6fa050 !important;
  }

  .footer {
    font-size: 8pt;
    color: #555;
    margin-top: 8pt;
    padding-top: 4pt;
    border-top: 1px solid #ccc;
  }
}

@media (min-width: 700px) {
  .container { padding: 20px; }
  .card { padding: 20px; }
  .dash-row-main { grid-template-columns: 140px 1fr 60px; font-size: 14px; }
}

/* ============================================================
   食譜生成 page
   ============================================================ */
.gen-mode-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.gen-radio {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--input);
  transition: background .15s, border .15s;
  font-size: 13px;
  line-height: 1.4;
}
.gen-radio input { margin-top: 2px; }
.gen-radio:hover { background: var(--accent-light); }
.gen-radio:has(input:checked) {
  background: var(--accent-light);
  border-color: var(--accent);
}

#gen-maxauto {
  width: 100%;
  margin-top: 6px;
  accent-color: var(--accent);
}

#gen-maxauto-val {
  color: var(--accent);
  font-size: 15px;
}

/* 已選食材 list */
.gen-selected-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 一行排列: [食材名] [input+unit] [模式] [✕] */
.gen-sel-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 48px 22px;
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--input);
  align-items: center;
}
.gen-sel-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  line-height: 1.2;
  /* 長名字 → 折 2 行 + 字體縮 */
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal !important;
  overflow-wrap: anywhere;     /* 必要時連單字內也能斷 */
  word-break: break-word;
  min-width: 0;
}
.gen-sel-name.long {
  font-size: 11px;
  line-height: 1.15;
}
.gen-sel-mode {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 4px;
  font-size: 12px !important;
  font-family: inherit;
  color: var(--text);
  min-width: 0;
  width: 100%;
}
.gen-sel-remove {
  background: transparent;
  border: none;
  color: var(--bad-text);
  font-size: 16px;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  width: 28px;
  height: 28px;
}

/* 結果區 */
.gen-results {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.gen-variant {
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--card);
  padding: 14px;
  box-shadow: var(--shadow);
}
.gen-variant-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid var(--accent-light);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.gen-variant-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
}
.gen-variant-meta {
  font-size: 11px;
  color: var(--text-dim);
}
.gen-variant-foods {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.gen-food-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  padding: 6px 8px;
  font-size: 13px;
  border-bottom: 1px dashed var(--border);
  align-items: center;
}
.gen-food-row:last-child { border-bottom: none; }
.gen-food-name {
  display: flex;
  align-items: center;
  gap: 6px;
}
.gen-food-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
}
.gen-food-tag.locked { background: #6fa050; color: white; }
.gen-food-tag.user { background: #5B9BD5; color: white; }
.gen-food-tag.auto { background: #ED7D31; color: white; }
.gen-food-grams {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}
.gen-food-portion {
  font-size: 11px;
  color: var(--text-dim);
  text-align: right;
}

.gen-variant-totals {
  background: var(--accent-light);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--accent-dark);
  font-weight: 600;
}

.gen-variant-warn {
  background: var(--warn-bg);
  color: var(--warn-text);
  border: 1px solid var(--warn-border);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.gen-variant-bad {
  background: var(--bad-bg);
  color: var(--bad-text);
  border: 1px solid var(--bad-border);
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  margin-bottom: 10px;
  line-height: 1.5;
}

.gen-mini-dash {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
}
.gen-mini-dash-row {
  display: grid;
  grid-template-columns: 90px 1fr 50px;
  gap: 6px;
  align-items: center;
  font-size: 11px;
}
.gen-mini-dash-name { color: var(--text-dim); }
.gen-mini-dash-bar-wrap {
  height: 6px;
  background: var(--ref-bg);
  border-radius: 3px;
  overflow: hidden;
}
.gen-mini-dash-bar {
  height: 100%;
  border-radius: 3px;
}
.gen-mini-dash-bar.ok { background: var(--ok-text); }
.gen-mini-dash-bar.warn { background: var(--warn-text); }
.gen-mini-dash-bar.bad { background: var(--bad-text); }
.gen-mini-dash-bar.ref { background: var(--ref-text); }
.gen-mini-dash-pct {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
}

.gen-variant-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.gen-variant-actions .btn { flex: 1; }

@media (min-width: 480px) {
  /* 桌機/平板上: 食材名給多一點空間 */
  .gen-sel-row { grid-template-columns: minmax(0, 2fr) 90px 64px 26px; }
  .gen-mini-dash-row { font-size: 12px; }
}

/* ============================================================
   底部 tab bar (bottom-nav) — fixed bottom, iOS-style
   ============================================================ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--card);
  border-top: 1px solid var(--border);
  padding-bottom: var(--safe-bottom);
  box-shadow: 0 -2px 8px rgba(70,50,30,.06);
  z-index: 90;
}

.bottom-nav .tab-btn {
  /* 覆蓋舊 .tab-btn (舊版 horizontal 樣式), 改 column 大圖示 */
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px 6px;
  background: transparent;
  border: none;
  border-top: 3px solid transparent;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.bottom-nav .tab-icon {
  font-size: 22px;
  line-height: 1;
}

.bottom-nav .tab-btn.active {
  color: var(--accent-dark);
  border-top-color: var(--accent);
  background: var(--accent-light);
}

.bottom-nav .tab-btn:active {
  background: var(--accent-light);
}

@media (prefers-color-scheme: dark) {
  .bottom-nav .tab-btn.active {
    color: var(--accent);
    background: var(--accent-light);
  }
}

@media print {
  .bottom-nav { display: none !important; }
}

/* hint 變體：橘黃警示 (生成頁總量提示) */
.hint.hint-warn {
  background: var(--warn-bg);
  color: var(--warn-text);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 10px;
}

/* gen 食材 input + unit 標籤 (一行緊湊版) */
.gen-sel-input-wrap {
  display: flex;
  align-items: center;
  gap: 1px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 3px 0 0;
  min-width: 0;
}
.gen-sel-input-wrap input {
  background: transparent !important;
  border: none !important;
  padding: 3px 1px 3px 4px !important;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  color: var(--text);
  font-size: 13px !important;
}
.gen-sel-input-wrap input:focus { outline: none; }
.gen-sel-input-wrap:focus-within { border-color: var(--accent); }
.gen-sel-unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--brown);
  flex-shrink: 0;
}
.gen-sel-eq {
  font-size: 10px;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

/* gen 完整營養分析摺疊 */
.gen-full-dash-wrap {
  margin: 8px 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.gen-full-dash-wrap > summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--brown-deep);
  font-weight: 600;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  position: relative;
}
.gen-full-dash-wrap > summary::-webkit-details-marker { display: none; }
.gen-full-dash-wrap > summary::after {
  content: '▼';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-size: 10px;
  transition: transform 0.2s;
  color: var(--text-dim);
}
.gen-full-dash-wrap[open] > summary::after { transform: translateY(-50%) rotate(0deg); }
.gen-full-dash-wrap[open] > summary {
  border-bottom: 1px solid var(--border);
}
.gen-full-dash {
  padding: 8px 10px;
}

/* gen 完整分析內部 — 區段分隔 */
.gen-full-body { display: flex; flex-direction: column; gap: 14px; padding: 10px 12px 14px; }
.gen-full-section { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; }
.gen-full-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--brown-deep);
  border-left: 3px solid var(--accent);
  padding-left: 6px;
  margin-bottom: 8px;
}
/* 微調儀表板 / DM / ratio 在折疊區內的尺寸 */
.gen-full-section .dashboard { font-size: 12px; }
.gen-full-section .dash-row-main { gap: 6px; }
.gen-full-section .dash-section-header { font-size: 11px; padding: 4px 8px; }
.gen-full-section .dm-grid { font-size: 12px; }
.gen-full-section .ratio-row { font-size: 12px; }

/* gen 各類自動補 — inline 「最少 [X] ~ [Y] 最多」排版 */
.gen-cat-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.gen-cat-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  background: var(--input);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  min-height: 32px;
}
.gen-cat-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.gen-cat-tag {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 500;
  flex-shrink: 0;
  white-space: nowrap;
}
.gen-cat-tilde {
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
  flex-shrink: 0;
  width: 8px;
  text-align: center;
}
.gen-cat-num {
  width: 38px !important;
  flex: 0 0 38px;
  font-size: 14px !important;
  font-weight: 600;
  padding: 3px 4px !important;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.gen-cat-num:focus {
  outline: none;
  border-color: var(--accent);
}
.gen-cat-max {
  color: var(--accent-dark);
  font-weight: 700;
}
@media (prefers-color-scheme: dark) {
  .gen-cat-max { color: var(--accent); }
}
.gen-cat-num::-webkit-inner-spin-button,
.gen-cat-num::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.gen-cat-num[type="number"] { -moz-appearance: textfield; }
@media (prefers-color-scheme: dark) {
  .gen-cat-val { color: var(--accent); }
}