:root{
  --green:#1F7A4D; --green-dark:#155C39; --green-soft:#E7F3EC;
  --ink:#22302A; --muted:#6B7A72; --line:#DDE6E0; --bg:#F7FAF8; --card:#FFFFFF;
  --center:#7B1FA2; --farm:#2E7D32; --buyer:#E65100; --shop:#1565C0; --member:#C2185B;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
body{margin:0; font-family:"Sukhumvit Set","Noto Sans Thai",Tahoma,sans-serif;
  background:var(--bg); color:var(--ink); font-size:16px; line-height:1.6}
.topbar{position:sticky; top:0; z-index:1200; background:var(--green); color:#fff;
  padding:12px 16px; font-weight:700; font-size:17px; display:flex; align-items:center; gap:8px}
.wrap{max-width:640px; margin:0 auto; padding:14px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border:none;
  background:var(--green); color:#fff; font-family:inherit; font-size:16px; font-weight:600;
  padding:12px 18px; border-radius:12px; cursor:pointer; text-decoration:none}
.btn.gray{background:#8A968F}
.btn.outline{background:#fff; color:var(--green); border:1.5px solid var(--green)}
.btn:disabled{opacity:.5}
.btn.block{display:flex; width:100%}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin:10px 0}
.field{margin:10px 0}
.field label{display:block; font-size:14px; font-weight:600; margin-bottom:4px}
.field input,.field select,.field textarea{width:100%; font-family:inherit; font-size:16px;
  padding:11px 12px; border:1.5px solid var(--line); border-radius:10px; background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--green)}
.hint{font-size:12.5px; color:var(--muted)}
.chips{display:flex; gap:6px; overflow-x:auto; padding:8px 0; -webkit-overflow-scrolling:touch}
.chip{flex:0 0 auto; padding:6px 13px; border-radius:99px; border:1.5px solid var(--line);
  background:#fff; font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap}
.chip.on{color:#fff}
.chip.c-center.on{background:var(--center); border-color:var(--center)}
.chip.c-farm.on{background:var(--farm); border-color:var(--farm)}
.chip.c-buyer.on{background:var(--buyer); border-color:var(--buyer)}
.chip.c-shop.on{background:var(--shop); border-color:var(--shop)}
.chip.c-member.on{background:var(--member); border-color:var(--member)}
.badge{display:inline-block; font-size:12px; font-weight:700; color:#fff; padding:2px 10px; border-radius:99px}
.b-center{background:var(--center)} .b-farm{background:var(--farm)} .b-buyer{background:var(--buyer)}
.b-shop{background:var(--shop)} .b-member{background:var(--member)}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:#222; color:#fff;
  padding:10px 20px; border-radius:99px; font-size:14px; z-index:3000; opacity:0; transition:.3s}
.toast.show{opacity:1}
.empty{text-align:center; color:var(--muted); padding:40px 16px}
.spinner{border:3px solid var(--line); border-top-color:var(--green); border-radius:50%;
  width:28px; height:28px; animation:spin 1s linear infinite; margin:30px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.marker-emoji{font-size:26px; line-height:1; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}