:root { --accent:#c0392b; --bg:#fdf8f3; --card:#fff; --text:#333; --muted:#888; }
* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
       background:var(--bg); color:var(--text); line-height:1.6; }
a { color:var(--accent); text-decoration:none; }
header { background:var(--accent); color:#fff; padding:1.2rem 1rem; text-align:center; }
header h1 { font-size:1.6rem; font-weight:600; }
header p { opacity:.85; font-size:.9rem; margin-top:.2rem; }
.wrap { max-width:1100px; margin:0 auto; padding:1rem; }
.toolbar { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.2rem 0; }
#search { flex:1; min-width:200px; padding:.55rem .9rem; border:1px solid #ddd;
          border-radius:24px; font-size:1rem; background:#fff; }
.cats { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.2rem; }
.cat { padding:.25rem .8rem; border-radius:20px; border:1px solid #ddd; background:#fff;
       cursor:pointer; font-size:.85rem; }
.cat.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
.card { background:var(--card); border-radius:10px; overflow:hidden;
        box-shadow:0 1px 4px rgba(0,0,0,.08); transition:transform .15s; }
.card:hover { transform:translateY(-3px); }
.card img { width:100%; height:170px; object-fit:cover; display:block; }
.card .body { padding:.7rem .9rem; }
.card h3 { font-size:1rem; font-weight:600; }
.card h3 a { color:var(--text); }
.card .meta { font-size:.8rem; color:var(--muted); margin-top:.3rem; }
.count { color:var(--muted); font-size:.85rem; margin-bottom:.6rem; }
/* recipe page */
.recipe-hero { width:100%; max-height:420px; object-fit:cover; border-radius:12px; }
.recipe-head { margin:1rem 0; }
.badges { display:flex; flex-wrap:wrap; gap:.5rem; margin:.6rem 0; }
.badge { background:#fff; border:1px solid #eee; border-radius:8px;
         padding:.3rem .7rem; font-size:.85rem; }
.cols { display:grid; grid-template-columns:1fr 1.6fr; gap:2rem; margin-top:1rem; }
@media (max-width:700px){ .cols { grid-template-columns:1fr; } }
h2 { font-size:1.15rem; margin-bottom:.6rem; border-bottom:2px solid var(--accent);
     display:inline-block; padding-bottom:.15rem; }
ul.ing { list-style:none; }
ul.ing li { padding:.35rem 0 .35rem 1.4rem; position:relative; border-bottom:1px dashed #eee; }
ul.ing li::before { content:"•"; color:var(--accent); position:absolute; left:.3rem; }
ol.steps { padding-left:1.3rem; }
ol.steps li { margin-bottom:.7rem; padding-left:.3rem; }
.photos { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
          gap:.6rem; margin-top:1rem; }
.photos img { width:100%; border-radius:8px; cursor:pointer; }
.back { display:inline-block; margin-bottom:.8rem; }
footer { text-align:center; color:var(--muted); font-size:.8rem; padding:2rem 1rem; }
@media print { header,.toolbar,.back,footer,.photos { display:none; } }