:root { color-scheme: light dark; --bg:#f5f4f0; --card:#fff; --text:#18181b; --muted:#71717a; --line:#e4e4e7; --accent:#0f766e; --on:#fff; --bad:#b91c1c; --soft:#ecfdf5; }
@media (prefers-color-scheme: dark) { :root { --bg:#0c0c0e; --card:#18181b; --text:#fafafa; --muted:#a1a1aa; --line:#27272a; --accent:#2dd4bf; --on:#042f2e; --bad:#f87171; --soft:#0f2624; } }
* { box-sizing: border-box }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
main { max-width:560px; margin:0 auto; padding:16px 16px calc(32px + env(safe-area-inset-bottom)); }
h1 { font-size:20px; margin:0 } h2 { font-size:15px; margin:0 0 10px; font-weight:650 }
.muted { color:var(--muted) } .small { font-size:13px } .bad { color:var(--bad) }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; margin-top:12px }
.row { display:flex; align-items:center; gap:8px } .row > .grow { flex:1; min-width:0 } .wrap { flex-wrap:wrap }
.between { justify-content:space-between }
button, input, select { font:inherit; color:inherit }
button { border:1px solid var(--line); background:var(--card); border-radius:10px; padding:8px 12px; cursor:pointer }
button.primary { background:var(--accent); color:var(--on); border-color:transparent; font-weight:600 }
button.ghost { border-color:transparent; color:var(--muted); padding:6px 8px }
button.chip { border-radius:999px; padding:6px 12px } button.chip.on { background:var(--soft); border-color:var(--accent) }
input, select { border:1px solid var(--line); background:var(--bg); border-radius:10px; padding:8px 10px; min-width:0 }
input[type=number] { width:78px } input[type=checkbox] { width:20px; height:20px; accent-color:var(--accent) }
.big { font-size:30px; font-weight:700; letter-spacing:-.5px }
.bar { height:8px; background:var(--line); border-radius:8px; overflow:hidden; margin:8px 0 }
.bar > i { display:block; height:100%; background:var(--accent); border-radius:8px }
.macros { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; text-align:center }
.macros b { display:block; font-size:17px } .macros span { font-size:12px; color:var(--muted) }
ul { list-style:none; margin:0; padding:0 } li { padding:8px 0; border-top:1px solid var(--line) } li:first-child { border-top:0 }
.dish { display:grid; grid-template-columns:auto 1fr auto auto; gap:8px; align-items:center }
.dish .name { min-width:0 } .dish small { display:block; color:var(--muted) }
table { width:100%; border-collapse:collapse; font-size:14px } td, th { padding:5px 4px; text-align:right; border-top:1px solid var(--line) } td:first-child, th:first-child { text-align:left } th { color:var(--muted); font-weight:500; border-top:0 }
.login { max-width:380px; margin:14vh auto 0 } .login input { width:100%; margin:10px 0 }
.toast { position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:var(--text); color:var(--bg); padding:10px 16px; border-radius:12px; font-size:14px; max-width:90vw }