:root{--bg:#f7f4ee;--card:#fff;--ink:#23312a;--muted:#6b766f;--g:#3d7a4f;--g2:#e3f0e6;--o:#e9873a;--line:#e3ded3}
*{box-sizing:border-box}
body{margin:0;font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink)}
header{padding:20px 16px 0;max-width:1000px;margin:auto}
h1{margin:0;font-size:1.7rem}.sub{margin:2px 0 14px;color:var(--muted)}
h2{margin:8px 0 12px}h3{margin:22px 0 8px}
nav{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;border-bottom:1px solid var(--line)}
nav button{white-space:nowrap}
main{max-width:1000px;margin:auto;padding:12px 16px 60px}
.tab{display:none}.tab.active{display:block}
button,select,input,textarea{font:inherit}
button{border:1px solid var(--line);background:var(--card);padding:8px 14px;border-radius:999px;cursor:pointer;color:var(--ink)}
button:hover{border-color:var(--g)}
nav button.active,button.primary,.chips button.on,.bigchoice button.on{background:var(--g);color:#fff;border-color:var(--g)}
.pill{background:var(--o);color:#fff;border-radius:999px;padding:0 7px;font-size:.8rem}.pill:empty{display:none}
.bigchoice{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.bigchoice button{font-size:1.15rem;padding:14px 22px;border-radius:16px}
.filters{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:10px 0}
.filters label{display:flex;gap:6px;align-items:center;font-size:.9rem;color:var(--muted)}
select,input,textarea{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:#fff}
textarea,#addForm input[name=name],#addForm input[name=url]{width:100%}
.chips{display:flex;gap:6px;flex-wrap:wrap}.chips button{padding:5px 12px;font-size:.9rem}
.row{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin:10px 0}
.muted{color:var(--muted);font-size:.9rem}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-top:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;cursor:pointer;display:flex;flex-direction:column;gap:6px}
.card:hover{box-shadow:0 4px 14px #0001}
.card h4{margin:0;font-size:1.05rem}.card .em{font-size:1.8rem}
.meta{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:.78rem;background:var(--g2);color:var(--g);border-radius:999px;padding:2px 9px}
.tag.o{background:#fdebd9;color:#b3591a}.tag.gray{background:#eee;color:#555}
.match{font-size:.85rem}.match b{color:var(--g)}.missing{color:#b3591a}
.note{background:var(--g2);border-radius:12px;padding:12px 14px;line-height:1.7}
.grid2{columns:2;padding-left:18px}@media(max-width:560px){.grid2{columns:1}}
#modal{position:fixed;inset:0;background:#0008;display:flex;align-items:flex-end;justify-content:center;z-index:9}
#modal[hidden]{display:none}
.sheet{background:#fff;width:100%;max-width:640px;max-height:92vh;overflow:auto;border-radius:20px 20px 0 0;padding:20px;position:relative}
@media(min-width:700px){#modal{align-items:center}.sheet{border-radius:20px}}
.x{position:absolute;right:12px;top:12px;padding:4px 10px}
.sheet h2{margin-right:40px}.sheet ul,.sheet ol{padding-left:20px}
.have{color:var(--g)}.have::before{content:"✓ "}.need::before{content:"○ ";color:var(--o)}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.group{margin:12px 0}.group h4{margin:0 0 6px;color:var(--muted);text-transform:uppercase;font-size:.78rem;letter-spacing:.05em}
.shopline{display:flex;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.shopline.done span{text-decoration:line-through;color:var(--muted)}.shopline small{color:var(--muted)}
.shopline .rm{margin-left:auto;padding:2px 8px}
form label{display:block;margin:8px 0;font-size:.9rem;color:var(--muted)}form .row label{margin:0}
.empty{color:var(--muted);padding:20px 0}