*{box-sizing:border-box}
:root{
  --bg:#edf3f1; --card:#fff; --ink:#10201d; --muted:#647771;
  --accent:#0d6e64; --accent-soft:#c9f2ea; --line:#e7efed;
  --radius:14px;
}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-tap-highlight-color:transparent;
}
.wrap{max-width:520px;margin:0 auto;padding:12px 12px 48px}
header.top{display:flex;align-items:center;justify-content:space-between;padding:6px 4px}
header.top h1{font-size:20px;margin:0}
.net{font-size:13px;color:var(--muted)}
.net b{color:var(--ink);font-size:15px}
.tabs{display:flex;background:#dbe7e3;border-radius:12px;padding:4px;margin:6px 0 12px}
.tabs button{flex:1;border:0;background:transparent;padding:10px;border-radius:9px;
  font-size:15px;color:var(--muted);font-weight:600;cursor:pointer}
.tabs button.active{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.datebar{margin-bottom:12px}
.datebar input{width:100%}
.summary{display:flex;gap:8px;margin-bottom:12px}
.summary .box{flex:1;background:var(--card);border-radius:var(--radius);
  padding:10px 6px;text-align:center;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.summary .box small{display:block;color:var(--muted);font-size:12px;margin-bottom:4px}
.summary .box b{font-size:17px;font-variant-numeric:tabular-nums}
.card{background:var(--card);border-radius:var(--radius);padding:14px;margin-bottom:12px;
  box-shadow:0 1px 2px rgba(0,0,0,.05)}
.card h2{font-size:15px;margin:0 0 10px;display:flex;justify-content:space-between;align-items:center}
.card h2 .total{font-size:14px;color:var(--accent);font-variant-numeric:tabular-nums}
.row{display:flex;gap:8px}
input,button{font-size:16px;font-family:inherit}
input[type=text],input[type=number],input[type=date]{
  flex:1;min-width:0;border:1px solid #cbd8d4;border-radius:10px;
  padding:10px 12px;background:#fbfdfc;color:var(--ink)}
input.kcal{max-width:104px}
input:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
button.primary{background:var(--accent);color:#fff;border:0;border-radius:10px;
  padding:10px 18px;font-weight:700;cursor:pointer;white-space:nowrap}
button.primary:active{transform:scale(.96)}
ul.log{list-style:none;margin:10px 0 0;padding:0}
ul.log li{display:flex;align-items:center;gap:8px;padding:9px 2px;
  border-top:1px solid var(--line);font-size:15px}
ul.log li .n{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ul.log li .k{font-weight:700;font-variant-numeric:tabular-nums}
ul.log button.del{border:0;background:transparent;color:#9db3af;font-size:20px;
  padding:2px 8px;cursor:pointer;line-height:1}
.empty{color:var(--muted);font-size:14px;padding:6px 2px;border-top:0 !important}
canvas#chart{width:100%;height:auto;display:block}
.backup{display:flex;gap:8px;margin-top:2px}
.backup button{flex:1;border:1px solid #cbd8d4;background:#fff;border-radius:10px;
  padding:10px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.hint{font-size:13px;color:var(--muted);text-align:center;margin:18px 0 0}