*{box-sizing:border-box}body{color:#20251f;background:#f7f8f5;margin:0;font:16px Arial,sans-serif}main{max-width:900px;margin:auto;padding:20px}header{border-bottom:1px solid #dce2d8;justify-content:space-between;align-items:center;padding-bottom:16px;display:flex}header b{color:#315b37;font-size:24px}button{color:#234428;cursor:pointer;background:#e7ede4;border:0;border-radius:8px;margin:3px;padding:9px 12px}.active,button:hover{color:#fff;background:#315b37}input,select{border:1px solid #cbd5c7;border-radius:8px;width:100%;margin:6px 0 12px;padding:11px}.search{max-width:500px}.categories{margin:12px 0}section{gap:8px;display:grid}article{background:#fff;border:1px solid #e4e8e1;border-radius:10px;justify-content:space-between;align-items:center;padding:14px;display:flex}p{color:#5f665e;margin:7px 0}.form{background:#fff;border-radius:12px;max-width:520px;padding:20px}.form label{font-weight:700;display:block}.success{background:#e1f2df;border-radius:8px;padding:12px}.order{cursor:pointer}.modal{background:#0006;padding:10vh 20px;position:fixed;inset:0}.modal>div{background:#fff;border-radius:12px;max-width:650px;max-height:80vh;margin:auto;padding:24px;overflow:auto}@media (width<=600px){header{display:block}main{padding:14px}}