:root {
  --bg: #fdf7ef;
  --card: #ffffff;
  --ink: #2a2320;
  --muted: #8a7f77;
  --line: #ece2d6;
  --accent: #c0392b;      /* 广式红 */
  --accent-2: #e08e0b;    /* 姜黄 */
  --green: #3f7d54;
  --green-soft: #eaf4ee;
  --red-soft: #fdeceb;
  --shadow: 0 6px 24px rgba(120, 80, 40, 0.08);
  --radius: 16px;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); line-height: 1.55; }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(135deg, #c0392b 0%, #a5281c 60%, #7d1a11 100%);
  color: #fff5ec;
  box-shadow: var(--shadow);
}
.hero-inner {
  max-width: 1080px; margin: 0 auto; padding: 22px 24px;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 14px; margin-right: auto; }
.logo {
  width: 54px; height: 54px; flex: 0 0 54px;
  display: grid; place-items: center;
  background: #fff5ec; color: var(--accent);
  font-size: 30px; font-weight: 800; border-radius: 14px;
  box-shadow: inset 0 0 0 3px rgba(192,57,43,.25);
}
.hero h1 { font-size: 26px; letter-spacing: 2px; }
.tagline { font-size: 12.5px; opacity: .9; margin-top: 2px; }

.date-nav { display: flex; align-items: center; gap: 10px; }
.today { font-size: 14px; font-weight: 600; min-width: 190px; text-align: center; }
.nav-btn {
  width: 34px; height: 34px; border: none; border-radius: 10px;
  background: rgba(255,255,255,.15); color: #fff; font-size: 20px; cursor: pointer;
  transition: background .15s;
}
.nav-btn:hover { background: rgba(255,255,255,.3); }

.actions { display: flex; gap: 8px; }
.btn {
  border: none; border-radius: 12px; padding: 9px 15px;
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff5ec; transition: transform .1s, background .15s;
}
.btn:hover { background: rgba(255,255,255,.28); }
.btn:active { transform: scale(.96); }
.btn.primary { background: var(--accent-2); color: #3a2600; }
.btn.primary:hover { background: #f5a11f; }
.btn.ai { background: linear-gradient(135deg, #6d5efc, #9b6dff); color: #fff; }
.btn.ai:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .55; cursor: default; }

/* AI 状态条 */
.ai-bar { max-width: 1080px; margin: 0 auto; padding: 0 24px 12px; }
.ai-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; padding: 4px 12px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff5ec;
}
.ai-status::before { content: "●"; font-size: 9px; opacity: .8; }
.ai-status.on { background: rgba(120,255,170,.2); }
.ai-status.on::before { color: #7dffab; }
.ai-status.off::before { color: #ffd27d; }
.ai-status.loading::before { color: #9b6dff; animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

/* 墨水屏版入口 */
.ai-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eink-link {
  font-size: 12px; padding: 4px 12px; border-radius: 999px; text-decoration: none;
  color: #fff5ec; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
}
.eink-link:hover { background: rgba(255,255,255,.26); }

/* 个性化偏好栏：人数 / 口味 / 食量 */
.prefs {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  background: #fff; border-radius: 14px; padding: 14px 18px; margin-bottom: 18px;
  box-shadow: 0 2px 10px rgba(140, 60, 20, .08);
}
.pref-group { display: flex; align-items: center; gap: 8px; }
.pref-group > label { font-size: 13px; font-weight: 700; color: #7a4a2b; white-space: nowrap; }
.prefs select {
  font-size: 14px; padding: 6px 10px; border-radius: 8px;
  border: 1.5px solid #e8d5c4; background: #fffaf5; color: #3a2600; cursor: pointer;
}
.seg { display: inline-flex; border: 1.5px solid #e8d5c4; border-radius: 999px; overflow: hidden; background: #fffaf5; }
.seg button {
  border: 0; background: transparent; padding: 6px 14px; font-size: 13px;
  color: #7a4a2b; cursor: pointer; transition: background .15s;
}
.seg button + button { border-left: 1px solid #e8d5c4; }
.seg button:hover { background: #f7e8d8; }
.seg button.on { background: var(--accent, #c0392b); color: #fff; font-weight: 700; }
.season-mark { font-style: normal; font-size: 11px; color: #b06a2c; margin-left: 4px; }

/* AI 徽标 */
.ai-badge {
  font-size: 11px; font-weight: 700; margin-left: 8px; vertical-align: middle;
  padding: 2px 8px; border-radius: 999px;
  background: linear-gradient(135deg, #6d5efc, #9b6dff); color: #fff;
}

/* ---------- Layout ---------- */
.wrap { max-width: 1080px; margin: 0 auto; padding: 24px; }

/* ---------- Scorecard ---------- */
.scorecard {
  background: var(--card); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow); margin-bottom: 26px;
  border: 1px solid var(--line);
}
.score-top { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.score-big { text-align: center; padding-right: 22px; border-right: 2px dashed var(--line); }
.score-big strong { display: block; font-size: 40px; color: var(--accent); line-height: 1; }
.score-big span { font-size: 12px; color: var(--muted); }
.score-totals { display: flex; gap: 26px; flex-wrap: wrap; }
.score-totals div { text-align: center; }
.score-totals b { display: block; font-size: 22px; color: var(--ink); }
.score-totals span { font-size: 12px; color: var(--muted); }

.score-list { margin-top: 16px; display: grid; gap: 8px; }
.score-row {
  display: grid; grid-template-columns: 26px 1.3fr 1fr 1.4fr; align-items: center;
  gap: 8px; padding: 8px 12px; border-radius: 10px; font-size: 13px;
}
.score-row.ok { background: var(--green-soft); }
.score-row.no { background: var(--red-soft); }
.score-row .dot {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; color: #fff; font-size: 13px;
}
.score-row.ok .dot { background: var(--green); }
.score-row.no .dot { background: var(--accent); }
.s-label { font-weight: 600; }
.s-val { font-weight: 700; }
.s-goal { color: var(--muted); font-size: 12px; text-align: right; }
.score-note { margin-top: 12px; font-size: 11.5px; color: var(--muted); }

/* ---------- Sections ---------- */
.sec { margin-bottom: 30px; }
.sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sec-icon {
  width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center;
  background: #fff; border-radius: 12px; font-size: 24px; box-shadow: var(--shadow);
}
.sec-head h2 { font-size: 19px; }
.sec-head p { font-size: 12.5px; color: var(--muted); }

/* ---------- Cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 16px;
}
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.card-head h3 { font-size: 18px; color: var(--accent); }
.card-head .meta { display: flex; gap: 14px; font-size: 13px; color: var(--muted); white-space: nowrap; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.tag {
  font-size: 11.5px; padding: 3px 10px; border-radius: 999px;
  background: #fbecd7; color: #8a5a12; font-weight: 600;
}

.nutri { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; }
.chip {
  font-size: 11.5px; padding: 4px 9px; border-radius: 8px;
  background: #f4efe8; color: #6b5f54; font-weight: 600;
}
.chip.kcal { background: var(--accent); color: #fff; }
.chip.warn { background: #fbe3c4; color: #9a5a00; }
.chip.added { background: var(--green-soft); color: var(--green); }

.cols { display: grid; grid-template-columns: 1fr 1.35fr; gap: 22px; margin-top: 6px; }
.col h4 {
  font-size: 13px; color: var(--accent-2); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 1px;
}
.ings { list-style: none; display: grid; gap: 5px; }
.ings li {
  display: flex; justify-content: space-between; gap: 10px; font-size: 13px;
  padding-bottom: 4px; border-bottom: 1px dashed var(--line);
}
.ings em { color: var(--muted); font-style: normal; white-space: nowrap; }
.steps { list-style: none; display: grid; gap: 8px; }
.steps li { font-size: 13px; padding-left: 26px; position: relative; }
.steps b {
  position: absolute; left: 0; top: 0; width: 18px; height: 18px;
  background: var(--accent); color: #fff; border-radius: 50%;
  font-size: 11px; display: grid; place-items: center;
}

.dga {
  margin-top: 14px; padding: 10px 12px; font-size: 12.5px;
  background: #f6f9f4; border-left: 3px solid var(--green); border-radius: 8px; color: #47564b;
}

/* ---------- Footer ---------- */
.foot { max-width: 1080px; margin: 10px auto 40px; padding: 0 24px; font-size: 12px; color: var(--muted); }
.foot .muted { margin-top: 4px; opacity: .8; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .cols { grid-template-columns: 1fr; gap: 14px; }
  .score-row { grid-template-columns: 24px 1fr auto; }
  .s-goal { display: none; }
  .brand { margin-right: 0; }
  .hero-inner { justify-content: space-between; }
  .today { min-width: 150px; font-size: 13px; }
}