*{box-sizing:border-box}
:root{--g:#0b9652;--gd:#087441;--bg:#d8efe8;--text:#183a2e;--muted:#6f8178;--line:#e1ebe5}
html,body{margin:0;width:100%;height:100%;font-family:"Segoe UI","Noto Sans Thai",Tahoma,sans-serif;background:var(--bg);color:var(--text)}
body{display:flex;justify-content:center;overflow:hidden}
a{text-decoration:none;color:inherit} button,input,select,textarea{font:inherit}
.app{width:100%;max-width:430px;height:100dvh;background:#fbfefc;position:relative;overflow:hidden}
.page{height:100%;overflow-y:auto;padding:16px 16px 94px;background:linear-gradient(#fff,#fbfefc)}
.head{position:sticky;top:-16px;z-index:5;height:65px;margin:-16px -16px 8px;padding:16px 16px 0;background:#fffffff2;display:grid;grid-template-columns:42px 1fr 42px;align-items:center}
.head h1{font-size:20px;text-align:center;color:var(--gd);margin:0}.back{font-size:27px}
.welcome{height:100%;overflow:hidden;background:linear-gradient(180deg,#dbf6f1,#d1eee5 48%,#85c7a4);position:relative;text-align:center}
.brand{padding-top:120px;position:relative;z-index:2}.brand h1{font-size:40px;color:var(--gd);margin:18px 0 6px}.brand p{line-height:1.7}
.logo{width:84px;height:84px;margin:auto;border-radius:50% 50% 50% 12px;background:#08756a;transform:rotate(-45deg);display:grid;place-items:center}
.logo span{transform:rotate(45deg);width:58px;height:58px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:40px}
.land{position:absolute;left:-10%;bottom:0;width:120%;height:48%;background:radial-gradient(ellipse at 50% 100%,#087249 0 34%,#42a871 35% 52%,#73c59c 53% 70%,transparent 71%)}
.actions{position:absolute;left:30px;right:30px;bottom:35px;z-index:3}.btn{display:block;width:100%;padding:14px;border-radius:28px;font-weight:800;text-align:center;margin-top:12px;border:0}.green{background:var(--g);color:#fff}.white{background:#fff;color:var(--gd)}
.authwrap{height:100%;overflow-y:auto;background:#e8f7ef;padding:22px;display:flex;align-items:center}.card{width:100%;background:#fff;border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:0 14px 40px #143c2d18}.card h2{color:var(--gd);font-size:27px;margin:0 0 6px}.card p{margin:0 0 14px;color:var(--muted)}
label{display:block;font-weight:700;margin:12px 0 6px}.control{width:100%;border:1px solid #d9e4dd;border-radius:13px;padding:12px;background:#fff}.switch{text-align:center;margin-top:14px;color:var(--muted);font-size:13px}.switch a{color:var(--g);font-weight:800}
.greet h2{font-size:25px;margin:8px 0 2px}.greet p{margin:0 0 14px;color:var(--muted)}.summary{background:linear-gradient(135deg,#effbf3,#dff5e7);border:1px solid #d9eadf;border-radius:22px;padding:18px;display:flex;justify-content:space-between;align-items:center}.summary strong{display:block;font-size:40px;color:var(--g)}.summary small,.summary span{color:#52695f}.earth{font-size:60px}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 22px}.quick a{border:1px solid var(--line);background:#fff;border-radius:18px;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700}.quick b{font-size:30px;margin-bottom:7px}.section{display:flex;justify-content:space-between;align-items:center}.activity{display:grid;grid-template-columns:50px 1fr auto;gap:10px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}.thumb{width:48px;height:48px;border-radius:14px;background:#e9f7ee;display:grid;place-items:center;font-size:25px}.activity small{color:var(--muted)}.points{color:var(--g);font-size:12px;font-weight:800}
.bottom{position:absolute;bottom:0;left:0;right:0;height:74px;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);align-items:center;z-index:10}.bottom a{text-align:center;color:#84928c;font-size:20px}.bottom small{display:block;font-size:10px}.bottom .active{color:var(--g);font-weight:800}.plus{width:50px;height:50px;border-radius:50%;background:var(--g);color:#fff!important;display:grid!important;place-items:center;margin:-24px auto 0;font-size:30px!important;box-shadow:0 7px 17px #0884484d}
.search{display:flex;gap:8px;border:1px solid #dce6e0;border-radius:15px;padding:10px;background:#fff}.search input{border:0;outline:0;flex:1}.chips{display:flex;gap:7px;overflow:auto;padding:10px 0}.chip{border:1px solid #dfe7e2;border-radius:20px;padding:7px 12px;background:#fff;white-space:nowrap}.sel{background:var(--g);color:#fff}.map{height:390px;border-radius:19px;position:relative;overflow:hidden;border:1px solid #d8e4dc;background:linear-gradient(22deg,transparent 0 45%,#f5e9ba 46% 50%,transparent 51%),linear-gradient(-18deg,transparent 0 44%,#f1edcf 45% 49%,transparent 50%),linear-gradient(90deg,#e8f2df 0 26%,#f8faf6 26% 65%,#e7f0dd 65%)}.river{position:absolute;width:65px;height:130%;left:43%;top:-15%;background:#b8e5f2;border-radius:40%;transform:rotate(15deg)}.pin{position:absolute;width:42px;height:42px;border-radius:50% 50% 50% 10%;background:var(--g);transform:rotate(-45deg);display:grid;place-items:center;box-shadow:0 7px 17px #0002}.pin span{transform:rotate(45deg)}.p1{left:18%;top:18%}.p2{left:68%;top:19%}.p3{left:33%;top:60%}.p4{left:72%;top:63%;background:#37a8df}.me{position:absolute;left:50%;top:52%;width:22px;height:22px;border-radius:50%;background:#168df1;border:4px solid #fff}.place{margin-top:12px;border:1px solid var(--line);border-radius:18px;padding:13px;display:grid;grid-template-columns:44px 1fr auto;gap:9px;align-items:center;background:#fff}.round{width:44px;height:44px;border-radius:50%;background:#e4f5ea;display:grid;place-items:center}.smallbtn{background:var(--g);color:#fff;border-radius:11px;padding:8px;font-size:11px}
.hero{height:190px;border-radius:19px;background:linear-gradient(135deg,#0a7542,#58ac68);display:flex;align-items:center;justify-content:center;font-size:48px}.badge{display:inline-block;margin-top:12px;padding:5px 10px;border-radius:14px;background:#e4f6ea;color:var(--gd);font-weight:800;font-size:12px}.info{border:1px solid var(--line);border-radius:18px;padding:5px 14px;margin:14px 0}.row{padding:11px 0;border-bottom:1px solid var(--line)}.row:last-child{border-bottom:0}.row small{display:block;color:var(--muted)}
.upload{height:145px;border:2px dashed #d9e5de;border-radius:18px;display:grid;place-items:center;text-align:center;font-size:38px}.upload small{display:block;font-size:12px;color:var(--muted)}textarea{min-height:95px}.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.stat{border:1px solid var(--line);border-radius:17px;padding:15px;background:#fff}.stat b{display:block;font-size:27px;color:var(--g)}.chart{border:1px solid var(--line);border-radius:18px;padding:14px;margin-top:14px}.bars{height:140px;display:flex;align-items:end;gap:8px}.bars i{flex:1;background:linear-gradient(#7ed5a1,#0b9552);border-radius:8px 8px 2px 2px}.learnhero{height:160px;border-radius:20px;background:linear-gradient(135deg,#168d4b,#57b762);color:#fff;padding:20px;display:flex;justify-content:space-between;align-items:center}.learngrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.learn{background:#eef8f1;border-radius:16px;padding:14px;text-align:center;font-size:30px}.learn small{display:block;font-size:12px}.profile{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center}.avatar{width:72px;height:72px;border-radius:50%;background:#dcefe4;display:grid;place-items:center;font-size:42px}.pstats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:18px;margin:16px 0;overflow:hidden}.pstats div{text-align:center;padding:14px 4px;border-right:1px solid var(--line)}.pstats div:last-child{border:0}.pstats b{display:block;font-size:22px;color:var(--g)}.menu{display:flex;padding:15px 2px;border-top:1px solid var(--line);gap:10px}.menu span:nth-child(2){flex:1}
@media(min-width:600px){.app{border-radius:28px;box-shadow:0 16px 50px #0002}}