:root{
  --bg:#171717; --panel:#1f1f1f; --text:#eaeaea; --muted:#b9b9b9; --hair:#2e2e2e;
  --accent:#4d8f54; --accent-2:#3b7541;
  --safe:#2e7d32; --caution:#b8860b; --toxic:#9c5a1a; --deadly:#a02222;
}

*{ box-sizing:border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family:system-ui, -apple-system, Segoe UI, Arial, sans-serif; }

.topbar { padding:22px 16px 10px; text-align:center; }
.topbar h1 { margin:0; color:#a4ffb0; letter-spacing:.5px; }
.subtitle { margin:6px 0 0; color:var(--muted); font-size:.95rem; }

.controls { padding:12px 16px 0; max-width:1080px; margin:0 auto; }
.controls-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
#searchBox {
  flex:1 1 320px; min-width:240px;
  padding:12px 14px; border-radius:14px; border:1px solid var(--hair);
  background:#121212; color:var(--text); font-size:1rem;
}
.chip {
  border:1px solid var(--hair); background:#161616; color:var(--text);
  padding:10px 14px; border-radius:999px; cursor:pointer; font-size:.95rem;
}
.chip[aria-pressed="true"] { background:var(--accent); border-color:var(--accent-2); }

.toggle { display:inline-flex; align-items:center; gap:8px; color:var(--text); }
.toggle input { width:18px; height:18px; }

.grid {
  max-width:1080px; margin:14px auto 46px; padding:0 16px;
  display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr));
}
@media (max-width: 960px){ .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px){ .grid{ grid-template-columns: 1fr; } }

.card {
  background:var(--panel); border:1px solid var(--hair); border-radius:16px; padding:12px;
  display:flex; flex-direction:column; gap:10px; box-shadow:0 0 10px rgba(0,0,0,.25);
}
.card img {
  width:100%; height:auto; border-radius:12px; object-fit:cover; max-height:240px; background:#111;
  border:1px solid var(--hair);
}
.card h2 { margin:0; font-size:1.05rem; }
.sci { color:#cfe7cf; font-style:italic; }
.safety {
  display:inline-flex; gap:6px; padding:4px 10px; border-radius:999px; font-size:.85rem; border:1px solid #444; width:max-content;
}
.safety.safe   { background:rgba(46,125,50,.14); border-color:var(--safe); color:#c7f5cc; }
.safety.caution{ background:rgba(184,134,11,.14); border-color:var(--caution); color:#ffe5a6; }
.safety.toxic  { background:rgba(156,90,26,.14); border-color:var(--toxic); color:#ffd3b5; }
.safety.deadly { background:rgba(160,34,34,.16); border-color:var(--deadly); color:#ffbaba; }

.meta { color:var(--muted); font-size:.93rem; }
.block { background:#161616; border:1px solid var(--hair); border-radius:12px; padding:8px 10px; }
.block h3 { margin:0 0 6px; font-size:.95rem; color:#d7ffd9; }
.block p { margin:.3rem 0; font-size:.95rem; }

.footer { text-align:center; color:var(--muted); padding:24px 12px; font-size:.9rem; }
.hidden { display:none !important; }