:root { --bg:#F4F1EA; --ink:#1C1B18; --muted:#5B5852; --line:#D9D3C6; --accent:#C2410C; --card:#fff; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin:0; font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--ink); padding-bottom: 80px; }
section { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
h3 { margin: 6px 0 0; font-size: 15px; }
.bar { display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:18px; padding-top: env(safe-area-inset-top); }
.bar button { min-width:44px; height:44px; border:0; background:transparent; font-size:22px; color: var(--ink); }
.card { background: var(--card); border-radius: 14px; padding: 12px 14px; display:flex; flex-direction:column; gap:8px; }
input[type=search], input[type=text], textarea { width:100%; height:44px; border:1px solid var(--line); border-radius:12px; padding:0 14px; font:inherit; font-size:16px; background:var(--card); color: var(--ink); }
textarea { height:auto; padding:10px 14px; }
label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); }
button { font:inherit; color: var(--ink); }
.card > button, .btn { height:44px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.chips { display:flex; gap:8px; flex-wrap: wrap; }
.chips button { height:36px; padding:0 14px; border:1px solid var(--line); border-radius:18px; background:var(--card); }
.chips button.on { border:2px solid var(--ink); font-weight:700; }
.row { display:flex; align-items:center; gap:6px; padding:8px 8px 8px 12px; background:var(--card); border-radius:12px; margin-bottom:8px; transition: outline-color .3s; outline: 2px solid transparent; }
.row .info { flex:1; min-width:0; text-align:start; border:0; background:transparent; padding:0; font-size:15px; font-weight:500; overflow:hidden; text-overflow: ellipsis; }
.row .info small { display:block; color:var(--muted); font-size:12px; font-weight:400; }
.row button:not(.info) { height:40px; min-width:40px; border:1px solid var(--line); border-radius:10px; background:var(--card); font-size:16px; }
.row .pill { width:92px; flex:none; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 4px; }
.row .add { width:44px; height:44px !important; border:0 !important; background:var(--accent) !important; color:#fff; font-size:22px !important; font-weight:700; border-radius:12px !important; }
.row.flash { outline-color: var(--accent); }
.entry { display:flex; justify-content:space-between; gap: 8px; width: 100%; padding:10px 12px; background:var(--card); border:0; border-radius:10px; margin-bottom:6px; font-size:14px; border-inline-start: 3px solid var(--accent); text-align: start; }
.entry span:last-child { color:var(--muted); white-space: nowrap; }
.meal-head { font-size:13px; font-weight:700; color:var(--muted); margin:8px 0 4px; }
.empty { color: var(--muted); font-size: 14px; }
.macros { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; }
.macro { display:flex; flex-direction:column; gap:4px; min-width:0; }
.macro .lbl { font-size:12px; color:var(--muted); }
.macro .val { font-size:13px; color:var(--muted); white-space:nowrap; }
.macro .val b { font-size:17px; color:var(--ink); }
.macro.over .bar-fill { background:#B91C1C; }
.bar-track { height:6px; background:#E6E1D6; border-radius:3px; } .bar-fill { height:6px; background:var(--accent); border-radius:3px; }
.tabs { position:fixed; bottom:0; left:0; right:0; height:calc(64px + env(safe-area-inset-bottom)); background:var(--card); border-top:1px solid #E6E1D6; display:flex; justify-content:space-around; align-items:flex-start; padding-top: 10px; }
.tabs button { border:0; background:transparent; font-size:14px; color:var(--muted); height:44px; padding:0 16px; }
.tabs button.active { color:var(--accent); font-weight:700; }
#sheet { position:fixed; inset:0; background:rgba(28,27,24,.3); display:flex; align-items:flex-end; z-index: 10; }
.sheet-body { background:var(--card); width:100%; max-height: 90vh; overflow-y: auto; border-radius:24px 24px 0 0; padding:16px 20px calc(24px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:14px; }
.sheet-body .primary { height:52px; border:0; border-radius:14px; background:var(--accent); color:#fff; font-size:17px; font-weight:700; }
.sheet-body .danger { height:44px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:#B91C1C; }
.sheet-body .secondary { height:44px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.sheet-body .danger:disabled { color: var(--muted); }
.sheet-body .urow { display:flex; gap:8px; }
.sheet-body .urow button { width:44px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.grid4 { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; }
#toast { position:fixed; bottom:90px; left:50%; transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 16px; border-radius:12px; font-size:14px; z-index: 20; }
#banner { background:#B91C1C; color:#fff; padding:8px 16px; text-align:center; }
.frow { display:flex; justify-content:space-between; width:100%; padding:12px; background:var(--card); border:0; border-radius:10px; margin-bottom:6px; font-size: 15px; text-align: start; }
.frow span:last-child { color: var(--muted); }