:root{--brand:#d81b60;--ink:#1c1c1e;--mute:#6b6b70;--line:#e6e6ea;--bg:#f6f6f8;--card:#fff;--warn:#b45309;--bad:#c62828;--ok:#2e7d32}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden;max-width:100%}
body{font-family:"Noto Sans Thai","Leelawadee UI",Tahoma,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;font-size:15px;line-height:1.4;color:var(--ink);background:var(--bg);padding-bottom:84px;-webkit-text-size-adjust:100%}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
button:disabled{cursor:default;opacity:.45}
[hidden]{display:none!important}
.hdr{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 16px;background:var(--brand);color:#fff}
.brand{font-weight:700;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hdr-r{display:flex;align-items:center;gap:6px;flex-shrink:0}
.langs{display:flex;border:1px solid rgba(255,255,255,.6);border-radius:14px;overflow:hidden}
.langs button{padding:3px 7px;font-size:12px;color:#fff}
.langs button.on{background:#fff;color:var(--brand);font-weight:700}
.pill{padding:4px 10px;border-radius:14px;background:rgba(255,255,255,.2);color:#fff;font-size:13px}
.reo{position:relative}
.reo-m{position:absolute;right:0;top:32px;min-width:220px;background:#fff;color:var(--ink);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.18);padding:4px;z-index:30}
.reo-m button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:8px;font-size:14px}
.reo-m button:active{background:var(--bg)}
.srch{padding:10px 16px 6px}
.srch input{width:100%;padding:10px 12px;font-size:16px;border:1px solid var(--line);border-radius:10px;background:#fff}
.cats{display:flex;gap:6px;overflow-x:auto;padding:4px 16px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cats::-webkit-scrollbar{display:none}
.cats button{flex:0 0 auto;padding:6px 12px;border-radius:16px;background:#fff;border:1px solid var(--line);font-size:13px;white-space:nowrap}
.cats button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0 16px}
.card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--card);border-radius:12px;padding:8px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.card.hl{box-shadow:0 0 0 3px var(--brand)}
.card .img{position:relative;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:var(--bg)}
.card .img img{width:100%;height:100%;object-fit:cover;display:block}
.so-lb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:4px 10px;border-radius:6px;background:rgba(0,0,0,.7);color:#fff;font-size:13px;white-space:nowrap}
.card.so .img img,.card.so .t,.card.so .pr{opacity:.45}
.card .t{margin-top:6px;font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;min-height:2.8em}
.cond{margin-top:4px;font-size:12px;color:var(--warn);display:flex;align-items:flex-start;gap:4px;min-width:0}
.cond-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.open .cond-t{white-space:normal;overflow:visible}
.cond-b{flex:0 0 auto;font-size:12px;color:var(--brand);text-decoration:underline;padding:0}
.pr{margin-top:auto;padding-top:6px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.pr b{font-size:15px;color:var(--brand)}
.pr s{font-size:12px;color:var(--mute)}
.ctl{margin-top:6px}
.add{width:100%;padding:8px;border-radius:8px;background:var(--brand);color:#fff;font-weight:700}
.step{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--brand);border-radius:8px;overflow:hidden}
.sb{width:40px;height:36px;font-size:20px;color:var(--brand);font-weight:700}
.sn{flex:1;text-align:center;font-weight:700}
.lim{margin-top:3px;font-size:12px;color:var(--warn);text-align:center}
.empty{grid-column:1/-1;text-align:center;color:var(--mute);padding:24px 0}
.more{height:1px}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--line);box-shadow:0 -2px 10px rgba(0,0,0,.06)}
.bar span{font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar button{flex:0 0 auto;padding:10px 16px;border-radius:10px;background:var(--brand);color:#fff;font-weight:700}
.sheet,.done{padding:0 16px 24px;max-width:640px;margin:0 auto}
.sh-h{display:flex;align-items:center;gap:8px;padding:10px 0}
.sh-h h1,.done h1{font-size:19px;margin:0}
.back{font-size:28px;line-height:1;padding:0 8px 4px 0;color:var(--brand)}
.lines{display:flex;flex-direction:column;gap:8px}
.line{display:flex;align-items:center;gap:8px;background:#fff;border-radius:10px;padding:8px}
.line img{width:52px;height:52px;border-radius:6px;object-fit:cover;flex:0 0 auto;background:var(--bg)}
.lm{flex:1;min-width:0}
.lt{font-size:13.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.lp{font-size:13px;color:var(--brand);font-weight:700}
.line .step{flex:0 0 auto;width:112px}
.line .sb{width:34px;height:32px}
.del{flex:0 0 auto;width:30px;height:30px;font-size:20px;color:var(--mute)}
.sum{display:flex;align-items:baseline;gap:6px;padding:14px 2px 2px;font-size:16px}
.sum b{font-size:20px;color:var(--brand)}
.free{margin-left:auto;font-size:13px;color:var(--ok);font-weight:700}
.pnote{margin:4px 2px 10px;font-size:12.5px;color:var(--mute)}
.contact{border:1px solid var(--line);border-radius:10px;background:#fff;padding:8px 12px 12px;margin:0 0 14px;min-width:0}
.contact legend{font-size:13px;color:var(--mute);padding:0 4px}
.contact label{display:block;margin-top:8px;font-size:13px;color:var(--mute)}
.contact input,.contact textarea{display:block;width:100%;margin-top:3px;padding:9px 10px;font:inherit;font-size:16px;color:var(--ink);border:1px solid var(--line);border-radius:8px;background:#fff;resize:vertical}
.send{display:block;width:100%;padding:15px 12px;border-radius:12px;background:var(--brand);color:#fff;font-size:17px;font-weight:700}
.alt{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 16px;margin-top:14px;font-size:13.5px}
.alt a{color:var(--mute)}
.wnote{flex-basis:100%;text-align:center;font-size:12px;color:var(--warn)}
.done{padding-top:16px;text-align:center}
.done h1.ok{color:var(--ok)}
.done h1.bad{color:var(--bad);font-size:16px}
.code{margin:12px 0;font-size:34px;font-weight:800;letter-spacing:2px;color:var(--brand);word-break:break-all}
.warn{margin:0 0 10px;padding:8px 10px;border-radius:8px;background:#fff7ed;color:var(--warn);font-size:13px}
.txt{display:block;width:100%;padding:10px;font:inherit;font-size:14px;border:1px solid var(--line);border-radius:10px;background:#fff;text-align:left;resize:vertical}
.help{font-size:14px;color:var(--ink);margin:12px 0}
.btns{display:flex;flex-direction:column;gap:8px}
.btns button:not(.send){padding:12px;border-radius:12px;background:#fff;border:1px solid var(--line);font-weight:700}
.toast{position:fixed;left:16px;right:16px;bottom:90px;z-index:40;padding:12px 14px;border-radius:10px;background:rgba(28,28,30,.92);color:#fff;font-size:14px;text-align:center}
@media (min-width:720px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}