:root { --bg:#1b1d24; --panel:#252833; --text:#e8e6e3; --muted:#9aa0ac;
        --accent:#e0a458; --border:#3a3f4d; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text);
       font:16px/1.5 system-ui, sans-serif; }
a { color:var(--accent); text-decoration:none; }
main { max-width:960px; margin:0 auto; padding:1rem; }
.topbar { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center;
          padding:.6rem 1rem; background:var(--panel);
          border-bottom:1px solid var(--border); }
.brand { font-weight:700; color:var(--text); }
.topsearch { flex:1; min-width:150px; }
.topsearch input, .bigsearch { width:100%; padding:.55rem .8rem;
  border-radius:8px; border:1px solid var(--border);
  background:var(--bg); color:var(--text); font-size:1rem; }
.topbar nav a { margin-left:.75rem; }
.hero { text-align:center; padding:2rem 0 1rem; }
.bigsearch { max-width:520px; font-size:1.15rem; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
         gap:.75rem; margin:1.5rem 0; }
.tile { background:var(--panel); border:1px solid var(--border);
        border-radius:10px; padding:1.2rem; text-align:center; font-weight:600; }
.filters { display:flex; flex-wrap:wrap; gap:.5rem; margin:.75rem 0; }
.filters a { padding:.25rem .7rem; border-radius:999px;
             border:1px solid var(--border); color:var(--muted); }
.filters a.on { background:var(--accent); color:#1b1d24; border-color:var(--accent); }
.results { list-style:none; padding:0; }
.results a { display:flex; gap:.8rem; align-items:center; padding:.6rem;
             border-bottom:1px solid var(--border); color:var(--text); }
.results img, .noimg { width:48px; height:48px; object-fit:contain;
  image-rendering:pixelated; background:var(--panel); border-radius:6px;
  display:flex; align-items:center; justify-content:center; color:var(--muted); }
.badge { font-size:.75rem; padding:.1rem .5rem; border-radius:999px;
         background:var(--panel); border:1px solid var(--border); color:var(--muted); }
.fact { color:var(--accent); font-size:.85rem; margin-left:auto; }
.fact.big { font-size:1.1rem; font-weight:600; margin:0.4rem 0 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
        gap:.75rem; }
.card { background:var(--panel); border:1px solid var(--border);
        border-radius:10px; padding:.7rem; text-align:center; color:var(--text); }
.card img, .noimg.big { width:96px; height:96px; margin:0 auto .4rem;
  object-fit:contain; image-rendering:pixelated; font-size:2rem; }
.entry-head { display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; }
.hero-img { width:160px; height:160px; object-fit:contain;
            image-rendering:pixelated; background:var(--panel); border-radius:12px; }
.recipe-img { max-width:100%; image-rendering:pixelated; background:var(--panel);
              border:1px solid var(--border); border-radius:12px; padding:.5rem; }
.facts { border-collapse:collapse; margin:1rem 0; width:100%; }
.facts th, .facts td { text-align:left; padding:.45rem .6rem;
                       border-bottom:1px solid var(--border); }
.facts th { color:var(--muted); width:9rem; font-weight:600; }
.muted { color:var(--muted); }
.warn { background:#4d3a1f; border:1px solid var(--accent);
        border-radius:8px; padding:.6rem .8rem; margin:.4rem 0; }
.packlist { list-style:none; padding:0; }
.packlist li { padding:.4rem 0; border-bottom:1px solid var(--border); }
button { background:var(--accent); border:0; color:#1b1d24; font-weight:600;
         padding:.5rem 1rem; border-radius:8px; cursor:pointer; }
label.packrow { display:block; padding:.4rem 0; }