:root{
  --bg:#12151A; --panel:#1A1F26; --panel-alt:#212832; --border:#2A323D;
  --text:#EDEFF2; --muted:#8992A1; --muted2:#5D6673;
  --cal:#E8A23C; --protein:#5FB88A; --carb:#6FA8E0; --fat:#E0716A;
  --good:#5FB88A; --bad:#E0716A;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,sans-serif; min-height:100vh; }
.auth-screen{ display:none; min-height:100vh; align-items:center; justify-content:center; padding:20px; }
.auth-card{ background:var(--panel); border:1px solid var(--border); border-radius:10px; padding:26px;
  width:100%; max-width:340px; }
.auth-card h1{ font-size:16px; margin:0 0 4px; letter-spacing:.02em; }
.auth-card input{ width:100%; }
.mono{ font-family:'JetBrains Mono','SF Mono',monospace; font-variant-numeric: tabular-nums; }
h1,h2,h3,.disp{ font-family:'Space Grotesk',system-ui,sans-serif; }
#app{ max-width:900px; margin:0 auto; min-height:100vh; display:flex; flex-direction:column; }
.head{ display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--border); background:var(--panel);
  position:sticky; top:0; z-index:5; }
.head h1{ font-size:15px; font-weight:700; letter-spacing:.02em; margin:0; }
.head .sub{ color:var(--muted2); font-size:11px; margin-top:2px; }
.reset-btn{ background:none; border:1px solid var(--border); color:var(--muted); font-size:11px;
  padding:5px 10px; border-radius:6px; cursor:pointer; }
.reset-btn:hover{ border-color:var(--fat); color:var(--fat); }
.tabs{ display:flex; border-bottom:1px solid var(--border); background:var(--bg); overflow-x:auto; }
.tab{ padding:11px 16px; font-size:12.5px; color:var(--muted); cursor:pointer;
  border-bottom:2px solid transparent; white-space:nowrap; display:flex; gap:6px; align-items:center; }
.tab .idx{ color:var(--muted2); font-family:'JetBrains Mono',monospace; font-size:11px; }
.tab.active{ color:var(--text); border-bottom-color:var(--cal); }
.tab.active .idx{ color:var(--cal); }
.tab:hover:not(.active){ color:var(--text); }
.panel{ padding:16px; flex:1; }
.row{ display:flex; gap:10px; flex-wrap:wrap; }
.field{ display:flex; flex-direction:column; gap:4px; }
label{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
input, select{ background:var(--panel-alt); border:1px solid var(--border); color:var(--text);
  padding:7px 9px; border-radius:6px; font-size:13px; font-family:inherit; }
input:focus, select:focus{ outline:none; border-color:var(--cal); }
button.primary{ background:var(--cal); color:#1a1206; border:none; font-weight:700; font-size:12.5px;
  padding:8px 14px; border-radius:6px; cursor:pointer; }
button.primary:hover{ opacity:.88; }
button.ghost{ background:none; border:1px solid var(--border); color:var(--muted); font-size:12px;
  padding:7px 12px; border-radius:6px; cursor:pointer; }
button.ghost:hover{ color:var(--text); border-color:var(--muted); }
button.scan{ background:var(--panel-alt); border:1px solid var(--carb); color:var(--carb);
  font-size:12px; padding:7px 12px; border-radius:6px; cursor:pointer; display:flex; align-items:center; gap:6px; }
button.scan:hover{ background:var(--carb); color:#0a1420; }
table{ width:100%; border-collapse:collapse; font-size:12.5px; }
th{ text-align:left; color:var(--muted2); font-weight:600; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.03em; padding:6px 8px; border-bottom:1px solid var(--border); }
td{ padding:7px 8px; border-bottom:1px solid var(--border); }
.num{ font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; }
.readout{ display:flex; flex-direction:column; }
.readout .v{ font-family:'JetBrains Mono',monospace; font-size:15px; font-weight:600; }
.readout .u{ font-size:9px; color:var(--muted2); text-transform:uppercase; letter-spacing:.05em; }
.macro-c{ color:var(--cal); } .macro-p{ color:var(--protein); }
.macro-cb{ color:var(--carb); } .macro-f{ color:var(--fat); }
.card{ background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:12px; }
.grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media(max-width:560px){ .grid4{ grid-template-columns:repeat(2,1fr); } }
.empty{ color:var(--muted2); font-size:12.5px; text-align:center; padding:30px 10px; }
.del{ color:var(--muted2); cursor:pointer; font-size:12px; }
.del:hover{ color:var(--fat); }
.edit-link{ color:var(--muted2); cursor:pointer; font-size:12px; }
.edit-link:hover{ color:var(--carb); }
.common-food-list{ max-height:340px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.common-food-row{ display:flex; justify-content:space-between; align-items:center; padding:8px 10px; border-radius:6px; cursor:pointer; font-size:12.5px; }
.common-food-row:hover{ background:var(--panel-alt); }
.week-table td, .week-table th{ text-align:center; }
.week-table td:first-child, .week-table th:first-child{ text-align:left; }
.day-cell{ cursor:pointer; color:var(--carb); }
.day-cell:hover{ text-decoration:underline; }
.day-total{ font-weight:700; }
.bar-row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.bar-label{ width:120px; font-size:11.5px; color:var(--muted); flex-shrink:0; }
.bar-track{ flex:1; background:var(--panel-alt); border-radius:4px; height:16px; position:relative; overflow:hidden; }
.bar-fill{ background:var(--cal); height:100%; border-radius:4px; }
.bar-val{ width:70px; text-align:right; flex-shrink:0; }
.delta-up{ color:var(--fat); } .delta-down{ color:var(--good); }
.loading{ text-align:center; color:var(--muted2); padding:60px 10px; font-size:12.5px; }
.slot-list{ list-style:none; margin:6px 0 0; padding:0; font-size:12px; color:var(--muted); }
.slot-list li{ display:flex; justify-content:space-between; padding:2px 0; }
code{ background:var(--panel-alt); border:1px solid var(--border); border-radius:4px; padding:1px 5px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--carb); }
.analysis-text{ white-space:pre-wrap; line-height:1.6; font-size:12.5px; }
.offline-pill{ font-size:10px; padding:3px 8px; border-radius:20px; border:1px solid var(--border); color:var(--muted2); }
.offline-pill.online{ color:var(--good); border-color:var(--good); }
.offline-pill.offline{ color:var(--fat); border-color:var(--fat); }

/* modal */
.modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex;
  align-items:center; justify-content:center; z-index:50; padding:16px; }
.modal{ background:var(--panel); border:1px solid var(--border); border-radius:10px;
  padding:16px; width:100%; max-width:420px; max-height:90vh; overflow-y:auto; }
.modal h3{ margin:0 0 10px; font-size:14px; }
#reader{ width:100%; border-radius:8px; overflow:hidden; }
.modal-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
.scan-note{ font-size:11px; color:var(--muted2); margin-top:8px; }
.ocr-status{ font-size:12px; color:var(--carb); margin-top:8px; }