:root { color-scheme: light dark; }
body {
  margin: 0;
  font: 16px/1.5 -apple-system, system-ui, sans-serif;
  background: var(--tg-theme-bg-color, #fff);
  color: var(--tg-theme-text-color, #111);
}
#tabs { display: flex; position: sticky; top: 0; background: inherit; border-bottom: 1px solid #8883; }
#tabs button {
  flex: 1; padding: 12px 4px; border: 0; background: none; font: inherit; font-size: 14px;
  color: var(--tg-theme-hint-color, #888); cursor: pointer;
}
#tabs button.active { color: var(--tg-theme-link-color, #2481cc); box-shadow: inset 0 -2px 0 currentColor; }
#content { padding: 12px; }
.card { padding: 14px; margin-bottom: 12px; border-radius: 12px; background: var(--tg-theme-secondary-bg-color, #f4f4f5); }
.card h2, .card h3 { margin: 0 0 8px; font-size: 17px; }
.card.danger { background: #d32f2f1a; }
.card.adverse { background: #f9a8251a; }
.card.ok { background: #22c55e1a; }
.button { display: block; padding: 12px; text-align: center; border-radius: 10px; text-decoration: none;
  background: var(--tg-theme-button-color, #2481cc); color: var(--tg-theme-button-text-color, #fff); }
#diet-search { width: 100%; box-sizing: border-box; padding: 10px; margin-bottom: 12px; border-radius: 10px;
  border: 1px solid #8884; background: transparent; color: inherit; font: inherit; }
ul.diet { list-style: none; margin: 0; padding: 0; }
ul.diet li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid #8882; }
ul.diet.bad b { color: #d32f2f; }
ul.diet.good b { color: #16a34a; }