:root{--fs-base:17px;--fs-label:16px;--fs-btn:20px;--fs-input:18px;--pri:#D9531E;--g:#B8431A;--gpress:#9A3714;--g2:#FFF4EC;--bt:#F3C6AD;--ln:#d1d5db;--tx:#1F2937;--mu:#6B7280;--red:#B91C1C;--redbg:#FEF2F2;--redln:#FECACA;--brn:#B45309;--bg:#FAFAF8}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--tx);font-family:'Sarabun',system-ui,sans-serif;font-size:var(--fs-base);line-height:1.5}
body{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
body.hasbar{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
.devbar{background:var(--red);color:#fff;text-align:center;font-weight:700;padding:4px}
.top{display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #e5e7eb;padding:6px 16px;position:sticky;top:0;z-index:1000;min-height:52px}
.top .title{font-weight:700;font-size:17px;text-align:center;flex:1}
.top .close{background:none;border:0;padding:0;min-height:44px;min-width:48px;text-align:left;font-size:16px;font-weight:600;color:var(--g)}
.top .side{min-width:48px;text-align:right;font-size:13px;color:var(--mu);white-space:nowrap}
button,.btn{font:inherit;min-height:44px;padding:8px 16px;border-radius:10px;border:1px solid var(--ln);background:#fff;color:var(--tx);cursor:pointer}
button.primary,.btn.primary{background:var(--g);color:#fff;border-color:var(--g);font-weight:700;font-size:var(--fs-btn)}
button.primary:active,.btn.primary:active{background:var(--gpress);border-color:var(--gpress)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--pri);outline-offset:2px}
button.danger{color:var(--red);border-color:var(--red)}
button.big{width:100%;min-height:60px;border-radius:14px;font-size:var(--fs-btn)}
button.mid{width:100%;min-height:52px;border-radius:14px;font-size:17px;font-weight:600}
button.link{border:0;background:none;color:var(--mu);min-height:48px;width:100%}
button:disabled{opacity:.5}
.pad{padding:12px 16px}
.muted{color:var(--mu)}
.small{font-size:12px;color:var(--mu)}
.wrap{padding:16px;display:flex;flex-direction:column;gap:20px}
section.card{background:#fff;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px}
section.card h2{font-size:15px;font-weight:700;margin:0}
section.card .lbl{font-size:var(--fs-label);color:#374151}
section.card .lbl.sub{margin-top:4px}
input[type=text],input[type=tel],input[type=date],select,textarea{width:100%;font:inherit;font-size:var(--fs-input);min-height:52px;padding:8px 12px;border:1px solid var(--ln);border-radius:10px;background:#fff;color:var(--tx)}
textarea{min-height:88px;line-height:1.5}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
label.chk{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 10px;border:1px solid var(--ln);border-radius:10px;font-size:15px;background:#fff}
label.chk input{width:20px;height:20px;flex:none}
label.chk.on{border-color:var(--pri);background:var(--g2)}
.opt{min-height:46px;border-radius:10px;border:1px solid var(--ln);background:#fff;font-size:15px;color:#374151;padding:0 8px}
.opt.on{border:2px solid var(--pri);background:var(--g2);color:var(--g);font-weight:700}
.opt.warn.on{border-color:var(--red);background:var(--redbg);color:var(--red)}
.opt.rev.on{border-color:var(--brn);background:#FEF6E7;color:var(--brn)}
.opt.kind{min-height:52px;font-size:16px;font-weight:600}
.consent{display:flex;align-items:flex-start;gap:10px;padding:10px;border:1px solid var(--bt);background:var(--g2);border-radius:10px;font-size:14px;line-height:1.5;color:#374151}
.consent input{width:22px;height:22px;margin-top:2px;flex:none}
.map{height:230px;border-radius:10px;border:0;background:#e9e7e2;position:relative}
.maptags{position:absolute;left:10px;top:10px;z-index:500;display:flex;flex-direction:column;align-items:flex-start;gap:4px;max-width:calc(100% - 76px);pointer-events:none}
.maptag{background:rgba(255,255,255,.92);border-radius:6px;padding:2px 6px;font-size:11px;line-height:1.4;color:var(--g);font-weight:600}
.maptag[hidden]{display:none}
.maptag.fb{color:var(--mu)}
.maptag.hint{color:#374151;font-weight:400}
.mapboxgl-ctrl-attrib,.mapboxgl-ctrl-attrib-button,.mapboxgl-ctrl-attrib-inner,.mapboxgl-ctrl-bottom-right,.leaflet-control-attribution,.leaflet-bottom.leaflet-right,.mapboxgl-ctrl-zoom-in,.mapboxgl-ctrl-zoom-out,.leaflet-control-zoom{display:none!important}
.gpsbtn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border:1px solid var(--pri);color:var(--g);font-weight:600}
.bar{background:var(--g2);border-left:4px solid var(--pri);padding:8px 10px;border-radius:6px;margin:4px 0;font-size:14px}
.bar.warn{background:var(--redbg);border-left-color:var(--red)}
.bar.err{background:var(--redbg);border-left-color:var(--red);color:#7F1D1D}
.photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.photos .th{position:relative;height:104px;border-radius:10px;overflow:hidden;background:#d9dee3}
.photos .th img{width:100%;height:100%;object-fit:cover}
.photos .th .x{position:absolute;top:0;right:0;min-height:30px;width:30px;padding:0;background:rgba(0,0,0,.6);color:#fff;border:0;border-radius:0 0 0 10px}
.photos .th .tag{position:absolute;left:0;right:0;bottom:0;padding:2px 6px;font-size:11px;color:#fff;background:rgba(0,0,0,.45)}
.photos .add{height:104px;border-radius:10px;border:2px dashed #9ca3af;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:13px;color:#374151;padding:0}
.mic{position:relative}
.mic textarea{padding-right:44px}
.mic svg{position:absolute;right:12px;top:12px}
.submitwrap{display:flex;flex-direction:column;gap:10px;padding-bottom:24px}
.submitwrap .small{text-align:center}
.done{display:flex;flex-direction:column;align-items:center;gap:18px;padding:40px 24px}
.done h1{margin:0;font-size:24px}
.done .info{text-align:center;font-size:16px;color:#374151;line-height:1.6}
.done .note{width:100%;background:#fff;border-radius:14px;padding:14px;font-size:14px;color:#374151;line-height:1.6}
.done .acts{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:10px}
.stats{display:flex;gap:8px;padding:12px 16px}
.stat{flex:1;background:#fff;border-radius:12px;padding:10px;text-align:center}
.stat b{display:block;font-size:22px}
.stat span{font-size:12px;color:var(--mu)}
.stat.u b{color:var(--red)}
.items{padding:4px 16px;display:flex;flex-direction:column;gap:10px}
.item{background:#fff;border-radius:14px;padding:12px 14px;display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit;border-left:4px solid transparent}
.item.urgent{border-left-color:var(--red)}
.item:not(.urgent){border-left-color:var(--bt)}
.item .ph{width:56px;height:56px;border-radius:10px;background:#d9dee3;flex:none;object-fit:cover}
.item .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.item .tt{font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .l2{font-size:13px;color:#374151;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .l3{font-size:12px;color:var(--mu);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item .st{font-size:12px;font-weight:600;color:var(--g);flex:none}
.item .st.wait{color:var(--red)}.item .st.rev{color:var(--brn)}
.bottombar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #e5e7eb;padding:10px 16px calc(10px + env(safe-area-inset-bottom));z-index:1000}
.filters{display:flex;gap:6px;padding:8px 12px;overflow-x:auto;background:#fff;border-bottom:1px solid #e5e7eb}
.filters button{white-space:nowrap;min-height:40px;padding:4px 14px;border-radius:20px}
.filters button.on{background:var(--g);color:#fff;border-color:var(--g)}
.mapwrap{position:relative}
#mapfull{height:calc(100vh - 52px - 57px);min-height:320px}
.legend{position:absolute;left:10px;bottom:34px;z-index:500;background:rgba(255,255,255,.95);border-radius:10px;padding:6px 10px;font-size:12px;display:flex;flex-direction:column;gap:2px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:6px;margin-right:6px;vertical-align:-1px}
.locbtn{position:absolute;right:10px;top:10px;z-index:500;width:48px;height:48px;padding:0;border-radius:24px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 6px rgba(0,0,0,.2)}
.card-bottom{position:fixed;left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom));background:#fff;border-radius:14px;padding:12px 14px;z-index:1100;box-shadow:0 2px 12px rgba(0,0,0,.2)}
.card-bottom .row1{display:flex;gap:12px;align-items:center}
.card-bottom .acts{display:flex;gap:8px;margin-top:10px}
.card-bottom .acts button{flex:1;min-height:44px;padding:4px 6px}
.sum{background:#fff;border-radius:14px;padding:14px}
.sum .a{font-weight:700;font-size:16px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .opt{min-height:40px;padding:0 12px}
.hist div{font-size:14px;padding:4px 0;border-top:1px solid #eef0f2}
.hist div:first-of-type{border-top:0}
.guide .hero{background:var(--g);color:#fff;border-radius:14px;padding:14px;font-size:15px;line-height:1.6}
.guide .hero span{font-size:13px;opacity:.9}
.guide section{background:#fff;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.6}
.guide section h3{font-size:15px;margin:0}
.guide section .tip{font-size:13px;color:var(--g);font-weight:600}
.guide section.priv{background:var(--g2);border:1px solid var(--bt)}
.guide section.priv h3{color:var(--g)}
.guide .four{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.guide .four div{border:1px solid var(--ln);border-radius:10px;padding:10px}
.guide .four b{display:block}
.guide .four span{font-size:13px;color:#374151}
.guide a.go{display:flex;align-items:center;justify-content:center;height:56px;border-radius:14px;background:var(--g);color:#fff;font-size:19px;font-weight:700;text-decoration:none}
.mono{font-family:ui-monospace,Menlo,monospace}
/* organise the map overlay and markers (shared by Mapbox GL and the Leaflet fallback) */
.leaflet-container{font-family:inherit}
.mapboxgl-map{font-family:inherit}
.mapwrap.full{position:fixed;left:0;right:0;top:0;bottom:0;z-index:2000;background:#fff}
.mapwrap.full .map{height:100vh;height:100dvh;border-radius:0}
.expbtn{position:absolute;right:10px;top:10px;z-index:500;width:44px;height:44px;min-height:44px;padding:0;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 6px rgba(0,0,0,.25);color:var(--tx)}
.okbtn{display:none;position:absolute;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:500;min-height:64px;height:64px;border-radius:14px;font-size:22px;font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.mapwrap.full .okbtn{display:block}
.mapwrap.full .expbtn{display:none}
body.maplock{overflow:hidden}
.pin,.pdot,.me,.clabel{width:0;height:0;position:relative}
.pin b{position:absolute;left:-13px;top:-34px;width:26px;height:26px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--pri);border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.45);cursor:grab}
.pin b::after{content:"";position:absolute;left:5px;top:5px;width:10px;height:10px;border-radius:50%;background:#fff}
.pdot b{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45);cursor:pointer}
.me b{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#2563EB;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.me{pointer-events:none}
.clabel{pointer-events:none}
.clabel span{position:absolute;left:0;top:0;transform:translate(-50%,-50%);white-space:nowrap;font-size:13px;font-weight:700;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000,0 0 6px #000}
.rip{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.rip i{position:absolute;left:0;top:0;width:5.5rem;height:5.5rem;margin:-2.75rem 0 0 -2.75rem;border-radius:50%;border:3px solid #2563EB;opacity:0;transform:scale(.15);animation:srv-rip 2.4s ease-out infinite}
.rip i:nth-child(2){animation-delay:.8s}
.rip i:nth-child(3){animation-delay:1.6s}
@keyframes srv-rip{0%{opacity:.5;transform:scale(.15)}60%{opacity:.35}100%{opacity:0;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.rip i{animation:none;opacity:.4;transform:scale(.55)}.rip i:nth-child(n+2){display:none}}
.mapwrap.full .mapboxgl-ctrl-bottom-right,.mapwrap.full .mapboxgl-ctrl-bottom-left,.mapwrap.full .leaflet-bottom{bottom:calc(100px + env(safe-area-inset-bottom))}

.mapboxgl-ctrl-logo{position:relative;z-index:1}
.fullbtn{display:none;position:absolute;right:10px;z-index:500;width:56px;min-height:56px;height:56px;padding:0;border-radius:12px;align-items:center;justify-content:center;box-shadow:0 1px 6px rgba(0,0,0,.3);color:var(--tx)}
.fullbtn.col{top:calc(10px + env(safe-area-inset-top))}
.fullbtn.gpsf{top:calc(76px + env(safe-area-inset-top));flex-direction:column;gap:0;font-size:14px;font-weight:700;line-height:1.1;color:var(--g);border-color:var(--pri)}
.mapwrap.full .fullbtn{display:flex}
.mapwrap.full .maptags{left:50%;right:auto;top:calc(12px + env(safe-area-inset-top));transform:translateX(-50%);align-items:center;max-width:calc(100% - 150px)}
.mapwrap.full .maptag.hint{background:#fff;font-size:20px;font-weight:700;padding:8px 14px;border-radius:10px;line-height:1.3;color:var(--tx);text-align:center;box-shadow:0 1px 6px rgba(0,0,0,.25)}