:root { --bg:#f6f4ee; --card:#fff; --ink:#1f2a24; --muted:#7a857e; --green:#2f7d4f; --line:#e4e0d4; }
@media (prefers-color-scheme: dark) { :root { --bg:#15180f; --card:#1f241c; --ink:#eef1e8; --muted:#94a08f; --line:#2c3328; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.4 system-ui,-apple-system,sans-serif; padding-bottom:env(safe-area-inset-bottom); }
header { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; padding-top:calc(14px + env(safe-area-inset-top)); }
header h1 { margin:0; font-size:20px; } header span { color:var(--muted); font-size:13px; } header a { color:var(--green); }
main { max-width:560px; margin:0 auto; padding:0 16px 40px; }
input, select { font:inherit; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); min-width:0; }
button { font:inherit; border:0; border-radius:12px; background:var(--green); color:#fff; font-size:24px; cursor:pointer; }
button.ghost { background:none; color:var(--muted); font-size:14px; width:100%; margin-top:16px; padding:12px; }
.aisle { margin:18px 0 6px; font-size:13px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.item { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:6px; }
.item input { width:22px; height:22px; accent-color:var(--green); padding:0; }
.item .n { flex:1; } .item.done .n { text-decoration:line-through; color:var(--muted); }
.item small { color:var(--muted); } .item .x { background:none; color:var(--muted); font-size:18px; padding:4px 8px; }
.empty { text-align:center; color:var(--muted); margin-top:40px; }
.login { max-width:320px; margin:20vh auto; padding:0 16px; text-align:center; }
.login form { display:grid; gap:10px; } .login button { font-size:16px; padding:12px; } .err { color:#c0392b; }
#tabs { display:flex; gap:6px; max-width:560px; margin:0 auto 14px; padding:0 16px; overflow-x:auto; }
#tabs button { flex:1; font-size:14px; padding:10px 8px; background:var(--card); color:var(--muted); border:1px solid var(--line); white-space:nowrap; }
#tabs button.on { background:var(--green); color:#fff; border-color:var(--green); }
.row { display:flex; gap:8px; flex-wrap:wrap; } .row input { flex:1; } .row > button { width:56px; }
.stack { display:grid; gap:8px; margin-bottom:12px; }
textarea { font:inherit; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--ink); width:100%; resize:vertical; }
.stack button, button.plain, #confirm-import { font-size:15px; padding:12px; width:auto; }
button.plain { background:var(--card); color:var(--ink); border:1px solid var(--line); }
.search { width:100%; margin-bottom:10px; } .hint { color:var(--muted); font-size:14px; }
.pill { font-size:13px; padding:6px 12px; border-radius:99px; } .pill.ok { background:#dff0e4; color:#1f5a38; } .pill.ko { background:#f7dcd8; color:#9a2d20; }
.recipe-head { cursor:pointer; } .detail { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 14px; margin:-2px 0 8px; display:grid; gap:4px; }
.detail .row { margin-top:8px; } #confirm-import { margin-top:12px; width:100%; }
h2.aisle { margin:16px 0 6px; } h2.aisle:first-child { margin-top:4px; }
.item .n { cursor:pointer; } .item .qty { color:var(--green); font-weight:600; margin-left:4px; }
.item .note { display:block; }
.who { flex:none; width:24px; height:24px; border-radius:50%; background:var(--line); color:var(--muted); font-size:12px; font-weight:600; display:grid; place-items:center; }
.detail.edit { margin:-2px 0 10px; gap:10px; } .edit label { display:grid; gap:4px; font-size:13px; color:var(--muted); flex:1; }
.edit input, .edit select { width:100%; } .edit .row > button { font-size:15px; padding:10px 16px; width:auto; }
#toast, #net { position:fixed; left:50%; transform:translateX(-50%); max-width:calc(100% - 32px); border-radius:12px; font-size:14px; z-index:10; }
#toast { bottom:calc(16px + env(safe-area-inset-bottom)); display:flex; align-items:center; gap:14px; background:var(--ink); color:var(--bg); padding:10px 10px 10px 16px; box-shadow:0 4px 16px rgba(0,0,0,.2); }
#toast button { background:none; color:#8fd3a8; font-size:14px; font-weight:600; padding:6px 8px; }
#net { top:calc(8px + env(safe-area-inset-top)); background:#f3e6c4; color:#6b5210; padding:6px 12px; }
[hidden] { display:none !important; }