/*
 * Token màu + khung layout.
 *
 * Ba trục màu, cố ý tách riêng để đừng lẫn vào nhau:
 *   --brand          thương hiệu, chỉ dùng cho nút chính và tab đang mở
 *   --c-<nhóm>       nhóm nguyên liệu: Đạm / Rau củ / Tinh bột / Khác / Đồ uống
 *   --m-<bữa>        bữa trong ngày: sáng / trưa / tối / vặt
 * Mỗi trục có bản "soft" làm nền. Nhờ vậy một dòng nguyên liệu và một thẻ bữa
 * không bao giờ tranh nhau chỗ nhấn mạnh.
 */
:root{
  --bg:#f7f4ee; --bg-2:#efe9de; --card:#fff; --card-2:#fbf9f5;
  --ink:#1c1a16; --ink-2:#3d3931; --dim:#78736a; --line:#e7e1d6; --line-2:#d8d0c1;

  --brand:#1b5e46; --brand-2:#2c8462; --brand-soft:#e2f0e8; --brand-ink:#fff;
  --amber:#a8690f; --amber-soft:#fbf0dd;
  --red:#a8301f; --red-soft:#fbe6e2;
  --ok:#1f7a4d; --ok-soft:#e2f2e9;

  --c-dam:#b3392a;      --c-dam-soft:#fce9e5;
  --c-rau:#2f7a3e;      --c-rau-soft:#e6f3e8;
  --c-tinhbot:#a06a10;  --c-tinhbot-soft:#fbf0da;
  --c-khac:#6a4fb8;     --c-khac-soft:#ede9fb;
  --c-uong:#0e7490;     --c-uong-soft:#ddf0f6;

  --m-sang:#cf7a1c;     --m-sang-soft:#fdefdd;
  --m-trua:#96811a;     --m-trua-soft:#f8f3d8;
  --m-toi:#4b47a6;      --m-toi-soft:#e9e8fa;
  --m-vat:#ad3572;      --m-vat-soft:#fbe5f0;

  --radius:16px; --radius-sm:11px;
  --shadow:0 1px 2px rgba(28,26,22,.05), 0 6px 18px -10px rgba(28,26,22,.22);
  --shadow-lg:0 10px 40px -12px rgba(28,26,22,.35);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#12130f; --bg-2:#191b16; --card:#1d1f1a; --card-2:#232620;
    --ink:#eeece4; --ink-2:#cfccc2; --dim:#9a978c; --line:#2f322b; --line-2:#3d4138;

    --brand:#5cc297; --brand-2:#7ad3ae; --brand-soft:#17281f; --brand-ink:#0e1a14;
    --amber:#e0a457; --amber-soft:#2c2415;
    --red:#ec8873; --red-soft:#2e1a16;
    --ok:#63c493; --ok-soft:#17281f;

    --c-dam:#f08a76;      --c-dam-soft:#301c18;
    --c-rau:#78cd85;      --c-rau-soft:#182a1b;
    --c-tinhbot:#e0ad55;  --c-tinhbot-soft:#2c2413;
    --c-khac:#ad9cf0;     --c-khac-soft:#211d33;
    --c-uong:#63c3dd;     --c-uong-soft:#132a31;

    --m-sang:#eda54d;     --m-sang-soft:#2e2414;
    --m-trua:#d6c14a;     --m-trua-soft:#2b2814;
    --m-toi:#9d99ef;      --m-toi-soft:#1e1d38;
    --m-vat:#ef86bb;      --m-vat-soft:#301a26;

    --shadow:0 1px 2px rgba(0,0,0,.35), 0 6px 18px -10px rgba(0,0,0,.7);
    --shadow-lg:0 10px 40px -12px rgba(0,0,0,.8);
  }
}

*{box-sizing:border-box}
/* Phải đứng trước mọi rule đặt display, nếu không hidden bị đè và sheet luôn mở. */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  padding-bottom:calc(78px + env(safe-area-inset-bottom));
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}
.wrap{max-width:700px;margin:0 auto;padding:0 14px}

/* ------------------------------------------------------------- topbar */
#topbar{
  position:sticky;top:0;z-index:20;padding:12px 0 11px;
  padding-top:calc(12px + env(safe-area-inset-top));
  background:var(--bg);border-bottom:1px solid var(--line);
  transition:background .25s;
}
#topbar::after{
  content:'';position:absolute;inset:0 0 -1px;pointer-events:none;
  background:linear-gradient(180deg,var(--tint,transparent) 0%,transparent 100%);
  opacity:.6;
}
#topbar .wrap{position:relative;z-index:1;display:flex;align-items:center;gap:12px}
#topbar h1{margin:0;font-size:23px;letter-spacing:-.025em;font-weight:800}
#subtitle{color:var(--dim);font-size:12.5px;margin-top:1px}
main{padding-top:14px;min-height:50vh}
.loading{color:var(--dim);padding:40px 0;text-align:center}

/* ------------------------------------------------------------- tabs */
#tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;
  background:var(--card); /* dự phòng cho trình duyệt chưa có color-mix */
  background:color-mix(in srgb,var(--card) 92%,transparent);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
#tabs button{
  flex:1;border:0;background:none;color:var(--dim);font:inherit;font-size:10.5px;
  padding:9px 2px 9px;display:flex;flex-direction:column;align-items:center;gap:3px;
  cursor:pointer;position:relative;font-weight:600;
}
#tabs button .ic{
  font-size:19px;line-height:1;width:36px;height:26px;display:grid;place-items:center;
  border-radius:99px;transition:background .18s,transform .18s;
}
#tabs button.on{color:var(--tabc,var(--brand))}
#tabs button.on .ic{background:var(--tabsoft,var(--brand-soft));transform:translateY(-1px)}
#tabs button:active .ic{transform:scale(.9)}

/* ------------------------------------------------------------- tiện ích */
.muted{color:var(--dim);font-size:13px}
.row{display:flex;align-items:center;gap:10px}
.row.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.stack{display:flex;flex-direction:column;gap:8px}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty{text-align:center;color:var(--dim);padding:36px 16px}
.empty .big-emoji{font-size:44px;display:block;margin-bottom:10px;opacity:.85}
.empty p{margin:8px 0 16px}
.section-title{
  display:flex;align-items:center;gap:8px;margin:18px 0 8px;
  font-size:12px;text-transform:uppercase;letter-spacing:.07em;font-weight:800;color:var(--dim);
}
.section-title .bar{height:3px;border-radius:99px;flex:1;background:var(--line)}