:root {
  --ok: #2ca24c;
  --bad: #cc3d3d;
  --pill-bg: #eef2f7;
}
.subtitle { color: #666; margin-top: -0.5rem; }
.tabs { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tab-link { border: 1px solid var(--muted-border-color,#ccc); background: #fff; padding: .5rem .75rem; border-radius: 999px; cursor: pointer; }
.tab-link.active { background: #f0f4ff; border-color: #8aa2ff; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
.pill { display: inline-block; background: var(--pill-bg); padding: .25rem .5rem; border-radius: 999px; }
.pill.ok { background: #e8f7ee; color: var(--ok); border: 1px solid #bfe6cb; }
.pill.bad { background: #fdeaea; color: var(--bad); border: 1px solid #f2c0c0; }
form .form-msg { margin-top: .5rem; min-height: 1.25rem; }
.card { border: 1px solid #e6e6e6; border-radius: .75rem; padding: .75rem; }
.meal-card h4 { margin-bottom: .25rem; }
.meal-card ul { margin: .25rem 0 .5rem 1rem; }
.details { font-size: .9em; color: #666; }
.history-day { margin: 1rem 0; }
.history-group { border: 1px solid #eee; padding: .75rem; border-radius: .5rem; margin-top: .5rem; }
.history-item { border-top: 1px dashed #eee; padding-top: .5rem; margin-top: .5rem; }
.history-item:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.edit-area { margin-top: .5rem; background:#fafafa; padding:.5rem; border-radius:.5rem; }
small { color: #666; }