@import url('/fonts.css');
:root{--green:#264e40;--green-soft:#eaf1e6;--warm:#a8603a;--warm-soft:#fbefe5;--ink:#233c33;--muted:#6f7d74;--line:#e1e5dc;--bg:#f4f4ee;font-family:"Noto Sans Thai","Leelawadee UI",Tahoma,system-ui,sans-serif;color:var(--ink);-webkit-text-size-adjust:100%}
*{box-sizing:border-box}body{margin:0;background:var(--bg);min-height:100vh}a{color:inherit;text-decoration:none}h1,h2,p{margin:0}
.loading{padding:35vh 24px;text-align:center;font:600 18px system-ui;letter-spacing:3px;color:var(--green)}.loading span{display:block;font:14px system-ui;letter-spacing:0;margin:10px auto 0;max-width:420px;line-height:1.7;color:var(--muted)}
.home-bar{display:flex;align-items:center;gap:12px;padding:14px 18px;padding-top:max(14px,env(safe-area-inset-top));background:var(--green);color:#fff}.home-bar .logo{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.14);display:grid;place-items:center}.home-bar .logo svg{width:24px;height:24px}.home-bar strong{display:block;letter-spacing:2px;font-size:15px}.home-bar small{color:#cfe0d6;font-size:12px}
.home{max-width:1040px;margin:0 auto;padding:22px 16px 40px;display:flex;flex-direction:column;gap:18px}.home h1{font-size:22px}
.paths{display:grid;grid-template-columns:1fr;gap:16px}
.path{background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:12px}
.path-main{display:flex;align-items:center;gap:14px;border-radius:14px;padding:16px;color:#fff}.path.new .path-main{background:var(--green)}.path.ext .path-main{background:var(--warm)}
.path-main h2{font-size:19px}.path-main p{font-size:13px;line-height:1.6;opacity:.92;margin-top:4px}.path-main .go{margin-left:auto;font-size:30px;line-height:1;opacity:.85}
.big-icon{flex:none;width:58px;height:58px;border-radius:16px;background:rgba(255,255,255,.16);display:grid;place-items:center}.big-icon svg{width:34px;height:34px}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:6px;border:1px solid var(--line);border-radius:14px;padding:14px;min-height:108px;background:#fff;transition:border-color .15s,transform .15s}.tile:active{transform:scale(.98)}.tile:hover{border-color:#b9c7b2}
.tile strong{font-size:14px}.tile small{font-size:12px;color:var(--muted)}
.tile-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none}.tile-icon svg{width:24px;height:24px}
.path.new .tile-icon,.recent-item.new .tile-icon{background:var(--green-soft);color:var(--green)}.path.ext .tile-icon,.recent-item.ext .tile-icon{background:var(--warm-soft);color:var(--warm)}
.recent{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;display:flex;flex-direction:column;gap:8px}.recent h2{font-size:16px;margin-bottom:4px}
.recent-item{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:10px 12px}.recent-item strong{display:block;font-size:14px}.recent-item small{font-size:12px;color:var(--muted)}.recent-item .go,.recent-item .amount{margin-left:auto;white-space:nowrap}.recent-item .amount{font-weight:700;color:var(--green);font-size:14px}.recent-item .go{font-size:22px;color:var(--muted)}
.foot{font-size:12px;color:var(--muted);line-height:1.7;text-align:center}
a:focus-visible{outline:3px solid #8db4a0;outline-offset:2px}
@media(min-width:640px){.tiles{grid-template-columns:repeat(4,1fr)}}
@media(min-width:900px){.paths{grid-template-columns:1fr 1fr}.tiles{grid-template-columns:repeat(2,1fr)}.home h1{font-size:26px}}