:root { --bg:#faf8f5; --fg:#2b2622; --muted:#7a7068; --card:#fff; --accent:#c2410c; --line:#e7e0d8; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#1c1917; --fg:#f1ebe4; --muted:#a39a90; --card:#292524; --accent:#fb923c; --line:#3b3632; }
}
* { box-sizing: border-box; }
body { margin:0; font:16px/1.55 system-ui, sans-serif; background:var(--bg); color:var(--fg); }
a { color:var(--accent); }
header, main, footer { max-width: 60rem; margin: 0 auto; padding: 1rem; }
header { border-bottom: 1px solid var(--line); }
.brand { font-size:1.4rem; font-weight:700; text-decoration:none; color:var(--fg); }
footer { color:var(--muted); font-size:.85rem; text-align:center; }
.search { display:flex; gap:.5rem; margin:1rem 0; }
.search input, .search select, input[type=password] { padding:.6rem .8rem; border:1px solid var(--line); border-radius:.5rem; background:var(--card); color:var(--fg); font:inherit; }
.search input { flex:1; }
h2.cat { margin:1.5rem 0 .25rem; border-bottom:2px solid var(--accent); padding-bottom:.2rem; }
.notes { color:var(--muted); margin:.25rem 0 .75rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:.75rem; margin:.75rem 0; }
.card { display:flex; flex-direction:column; gap:.25rem; padding:.9rem 1rem; background:var(--card); border:1px solid var(--line); border-radius:.75rem; text-decoration:none; color:var(--fg); }
.card:hover { border-color:var(--accent); }
.card small { color:var(--muted); }
.empty { color:var(--muted); text-align:center; padding:2rem; }
.recipe h1 { margin-bottom:.5rem; }
.recipe h2 { color:var(--accent); font-size:1.2rem; margin:1.25rem 0 .25rem; }
.times { display:flex; flex-wrap:wrap; gap:1rem; margin:.5rem 0 1rem; }
.times div { background:var(--card); border:1px solid var(--line); border-radius:.5rem; padding:.4rem .8rem; }
.times dt { font-size:.75rem; color:var(--muted); text-transform:uppercase; }
.times dd { margin:0; font-weight:600; }
button { padding:.6rem 1rem; border:0; border-radius:.5rem; background:var(--accent); color:#fff; font:inherit; cursor:pointer; }
button.secondary { background:var(--muted); }
.actions { display:flex; gap:.5rem; margin-top:.75rem; flex-wrap:wrap; }
.msg { padding:.6rem .9rem; border-radius:.5rem; }
.msg.ok { background:#dcfce7; color:#14532d; }
.msg.err { background:#fee2e2; color:#7f1d1d; }
@media print {
  header, footer, nav, .search { display:none; }
  body { background:#fff; color:#000; }
}
.recipe figure { margin:1rem 0; }
.recipe figure img { max-width:100%; height:auto; border-radius:.5rem; }
.card .thumb { width:100%; height:9rem; object-fit:cover; border-radius:.5rem; margin-bottom:.25rem; }