:root { --bg:#f7f5f2; --card:#fff; --ink:#201a14; --muted:#74695e; --line:#e9e3dc; --soft:#f1ece6; --accent:#ea580c; --accent-ink:#fff;
  --ok:#0f9d6b; --ok-bg:#e3f6ee; --warn:#b7791f; --warn-bg:#fdf1d9; --bad:#d33b3b; --bad-bg:#fde8e8; --shadow:0 1px 2px rgba(40,25,10,.06),0 6px 22px rgba(40,25,10,.07); }
@media (prefers-color-scheme: dark) { :root { --bg:#141110; --card:#1d1917; --ink:#f0ebe5; --muted:#a39a90; --line:#2d2723; --soft:#26211e; --accent:#fb923c; --accent-ink:#141110;
  --ok:#3ddc97; --ok-bg:#12312a; --warn:#f5c04a; --warn-bg:#3a2f12; --bad:#ff7b7b; --bad-bg:#3b1a1d; --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 22px rgba(0,0,0,.3); } }
* { box-sizing:border-box; } [hidden] { display:none !important; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; padding-bottom:48px; }
.wrap { max-width:1000px; margin:0 auto; padding:0 16px; }
header.top { background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:5; padding-top:env(safe-area-inset-top); }
header.top .wrap { display:flex; align-items:center; gap:12px; height:58px; }
h1 { margin:0; font-size:21px; letter-spacing:-.02em; } h2 { margin:26px 0 10px; font-size:17px; } h3 { margin:18px 0 6px; font-size:14px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.sub { color:var(--muted); font-weight:450; font-size:13px; margin-left:6px; }
.days { margin-left:auto; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; }
select, input { font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px 11px; min-width:0; }
select:focus-visible, input:focus-visible, button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.status { color:var(--muted); margin:18px 0 0; } .status.error { color:var(--bad); font-weight:600; }

.chips { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.chip { background:var(--card); border-radius:999px; box-shadow:var(--shadow); padding:7px 14px; display:flex; gap:8px; align-items:center; font-weight:600; }
.chip small { color:var(--muted); font-weight:500; } .chip.nomatch { opacity:.55; }
.pill { font-size:12px; font-weight:700; padding:1px 8px; border-radius:999px; }
.pill.bad { background:var(--bad-bg); color:var(--bad); } .pill.soon { background:var(--warn-bg); color:var(--warn); } .pill.ok { background:var(--ok-bg); color:var(--ok); }

.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.card { background:var(--card); border-radius:16px; box-shadow:var(--shadow); overflow:hidden; text-align:left; border:0; padding:0; font:inherit; color:inherit; cursor:pointer; display:flex; flex-direction:column; transition:transform .15s; }
.card:hover { transform:translateY(-3px); }
.card img { width:100%; aspect-ratio:16/10; object-fit:cover; background:var(--soft); display:block; }
.card .in { padding:12px 14px 14px; display:grid; gap:6px; }
.card .t { font-weight:700; letter-spacing:-.01em; }
.uses { display:flex; flex-wrap:wrap; gap:5px; } .uses span { font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--ok-bg); color:var(--ok); }
.need { font-size:13px; color:var(--muted); }
.empty { text-align:center; color:var(--muted); padding:44px 12px; }

.hist { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.hist li { background:var(--card); border-radius:12px; padding:10px 14px; display:flex; gap:12px; align-items:center; box-shadow:var(--shadow); }
.hist img { width:48px; height:48px; border-radius:10px; object-fit:cover; background:var(--soft); }
.hist b { display:block; } .hist span { color:var(--muted); font-size:13px; }

.btn { appearance:none; border:1px solid var(--line); background:var(--card); color:var(--ink); font:inherit; font-weight:600; padding:10px 18px; border-radius:11px; cursor:pointer; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); } .btn:disabled { opacity:.5; }

dialog { border:0; border-radius:20px; padding:0; background:var(--card); color:var(--ink); width:min(680px,calc(100% - 20px)); max-height:calc(100% - 20px); box-shadow:0 24px 70px rgba(0,0,0,.45); overflow:hidden; }
dialog::backdrop { background:rgba(10,8,6,.55); }
#recipeDlg[open] article { display:flex; flex-direction:column; max-height:calc(100vh - 20px); }
#rImg { width:100%; max-height:240px; object-fit:cover; display:block; background:var(--soft); }
.body { padding:16px 20px; overflow-y:auto; flex:1; } .body h2 { margin:0 0 2px; font-size:22px; }
.meta { color:var(--muted); font-size:14px; margin:4px 0; }
.ing { list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.ing li { display:flex; gap:8px; padding:5px 10px; border-radius:9px; background:var(--soft); }
.ing li.have { background:var(--ok-bg); color:var(--ok); font-weight:600; } .ing .m { margin-left:auto; color:var(--muted); font-weight:450; white-space:nowrap; }
.steps p { margin:0 0 10px; }
.bar { display:flex; gap:8px; justify-content:flex-end; padding:12px 20px; border-top:1px solid var(--line); }
#cookForm { padding:20px; } #cookForm h2 { margin:0 0 4px; }
.cooklist { list-style:none; margin:14px 0; padding:0; display:grid; gap:8px; }
.cooklist li { display:grid; grid-template-columns:auto 1fr 96px auto; gap:10px; align-items:center; }
.cooklist input[type=checkbox] { width:20px; height:20px; accent-color:var(--accent); } .cooklist .u { color:var(--muted); font-size:14px; min-width:28px; }
.actions { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; } .error { color:var(--bad); font-weight:600; }
.toast { position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:11px 20px; border-radius:999px; font-weight:600; z-index:20; max-width:calc(100% - 32px); box-shadow:var(--shadow); }
@media (max-width:560px) { .days span { display:none; } .cooklist li { grid-template-columns:auto 1fr 84px auto; } }