body {
  --bg: #f6f8fa;
  --bg-alt: #fff;
  --border: #d0d7de;
  --text: #222;
  --text-light: #555;
  --pill: #fafbfc;
  --shadow: 0 1px 2px rgba(0,0,0,.06);
  --accent: #0366d6;
  --success: #2da44e;
  --danger: #d73a49;
  --secondary: #6a737d;
  font-family: system-ui, Arial, sans-serif;
  margin: 0;
  background: var(--bg);
  color: var(--text);
}
.container {
  max-width: 760px;
  margin: 2rem auto;
  padding: 0 1.25rem 3rem;
}
h1 { margin-top: 0; font-size: 2rem; }
.tagline { margin-top: .25rem; color: #555; }
.controls { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0; }
button { cursor: pointer; border: 1px solid transparent; padding: .65rem 1.1rem; border-radius: 6px; font-size: .95rem; font-weight: 600; letter-spacing: .25px; }
button:disabled { opacity: .45; cursor: not-allowed; }
button:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
[data-theme="dark"] button:focus-visible { outline:3px solid var(--accent); }
[data-theme="dark"] .badge { background:#1d2229; }
/* Progress bar */
.progress { height:8px; background:var(--border); border-radius:4px; overflow:hidden; margin:.5rem 0 1rem; position:relative; }
.progress #progressBar { height:100%; width:0%; background:linear-gradient(90deg,var(--accent), var(--success)); transition:width .35s ease; }
[data-theme="dark"] .progress { background:#30363d; }
button.primary { background:var(--accent); color:#fff; }
button.secondary { background:var(--secondary); color:#fff; }
button.success { background:var(--success); color:#fff; }
button.danger { background:var(--danger); color:#fff; margin-left:auto; }
button.primary:hover:not(:disabled) { filter:brightness(0.9); }
button.secondary:hover:not(:disabled) { filter:brightness(0.92); }
button.success:hover:not(:disabled) { filter:brightness(0.9); }
button.danger:hover:not(:disabled) { filter:brightness(0.9); }
.hidden { display:none !important; }
.meal-display { background:var(--bg-alt); border:1px solid var(--border); border-radius:8px; padding:1rem 1.25rem; box-shadow:var(--shadow); min-height:120px; display:flex; align-items:center; }
.meal-display.empty { color:#666; }
.meal-grid { width:100%; display:grid; grid-template-columns:max-content 1fr; gap:.4rem .75rem; }
.meal-label { font-weight:600; }
.stats { margin-top:1.25rem; font-size:.9rem; color:#444; }
.stats span { font-weight:600; }
details.exclusions, details.history { margin-top:1.5rem; background:var(--bg-alt); border:1px solid var(--border); border-radius:8px; padding:.75rem 1rem; }
details.exclusions[open], details.history[open] { box-shadow:0 1px 2px rgba(0,0,0,.05); }
details.exclusions summary, details.history summary { font-weight:600; cursor:pointer; outline:none; }
.exclude-groups { display:grid; gap:.75rem; margin-top:.75rem; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.exclude-group { border:1px solid var(--border); padding:.5rem .6rem; border-radius:6px; background:var(--pill); }
.exclude-group h4 { margin:.1rem 0 .4rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.5px; color:#555; }
.exclude-group label { display:block; font-size:.75rem; line-height:1.2; margin:.25rem 0; cursor:pointer; }
.exclude-hint { margin:.6rem 0 0; font-size:.7rem; color:#666; }
.history-list { list-style:none; padding:0; margin:.75rem 0 .75rem; max-height:200px; overflow:auto; font-size:.75rem; }
.history-list li { padding:.35rem .5rem; border-bottom:1px solid #e1e4e8; display:flex; gap:.5rem; }
.history-list li:nth-child(odd){ background:var(--pill); }
.rarity { display:inline-block; width:10px; height:10px; border-radius:50%; margin-left:6px; vertical-align:middle; box-shadow:0 0 0 1px rgba(0,0,0,.15); }
.rarity.common { background:#4caf50; }
.rarity.uncommon { background:#ff9800; }
.rarity.rare { background:#8e44ad; }
.meal-display.fade-in { animation: mealFade .4s ease; }
[data-theme="dark"] .rarity.common { background:#2ea043; }
[data-theme="dark"] .rarity.uncommon { background:#fb8f00; }
[data-theme="dark"] .rarity.rare { background:#b066e0; }

/* Meal component badges */
.badge { display:inline-block; padding:.2rem .55rem; background:var(--pill); border:1px solid var(--border); border-radius:14px; font-size:.7rem; font-weight:600; letter-spacing:.3px; }
[data-theme="dark"] .badge { background:#1d2229; }
.badge-mini { padding:.1rem .4rem; font-size:.6rem; margin-left:.4rem; }
.badge-mini.hidden { display:none; }
[data-theme="dark"] .badge { background:#1d2229; }

/* Empty state icon */
.empty-state { text-align:center; width:100%; }
.empty-state svg { width:42px; height:42px; display:block; margin:0 auto .5rem; }
.empty-state p { margin:.25rem 0 0; font-size:.75rem; color:var(--text-light); }

/* Export toast */
.toast { position:fixed; bottom:1rem; right:1rem; background:var(--bg-alt); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:.6rem .9rem; box-shadow:var(--shadow); font-size:.75rem; opacity:0; transform:translateY(6px); animation:toastIn .3s forwards; }
.toast.success { border-color:var(--success); }
.rarity-legend { display:flex; gap:1.1rem; font-size:.6rem; margin:.5rem 0 1rem; letter-spacing:.4px; }
.rarity-legend .legend-item { display:flex; align-items:center; gap:.35rem; color:var(--text-light); }
[data-theme="dark"] .rarity-legend .legend-item { color:var(--text-light); }
@keyframes toastIn { to { opacity:1; transform:translateY(0);} }
@keyframes toastOut { to { opacity:0; transform:translateY(6px);} }

@keyframes mealFade { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:translateY(0);} }

/* Dark theme */
[data-theme="dark"] {
  --bg: #0d1117;
  --bg-alt: #161b22;
  --border: #30363d;
  --text: #c9d1d9;
  --text-light: #8b949e;
  --pill: #1d2229;
  --shadow: 0 1px 2px rgba(0,0,0,.4);
  --accent: #58a6ff;
  --success: #3fb950;
  --danger: #f85149;
  --secondary: #6e7681;
}
[data-theme="dark"] .meal-display.empty { color: var(--text-light); }
[data-theme="dark"] details.exclusions[open], [data-theme="dark"] details.history[open] { box-shadow:0 1px 2px rgba(0,0,0,.6); }
.history-list .meal-part { font-weight:600; }
button.secondary#exportBtn { margin-top:.25rem; }
details.info { margin-top:2rem; }
details.info summary { cursor:pointer; font-weight:600; }
@media (max-width:580px) { .meal-grid { grid-template-columns: 1fr; } .meal-label { display:block; margin-top:.6rem; } }