:root{--bg: #F4F6F7;--card: #FFFFFF;--teal: #0F766E;--tint: #E6F4F2;--gold: #F2B33D;--gold-tint: #FFF6E0;--income: #15803D;--expense: #C2410C;--fg: #1F2A37;--muted: #5B6B75;--line: #DCE3E6;--track: #E8EEF0;--font: "Mali", "IBM Plex Sans Thai", "Noto Sans Thai", "Leelawadee UI", system-ui, sans-serif;--r-lg: 22px;--r-md: 16px;--r-sm: 12px;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;-webkit-text-size-adjust:100%}body{min-height:100dvh}button,input,select{font:inherit;color:inherit}a{color:var(--teal)}.num{font-variant-numeric:tabular-nums}.in{color:var(--income)}.out{color:var(--expense)}.muted{color:var(--muted)}:focus-visible{outline:2px solid var(--teal);outline-offset:2px}.app{max-width:560px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}.page{flex:1;display:flex;flex-direction:column;gap:14px;padding:calc(env(safe-area-inset-top,0px) + 16px) max(16px,env(safe-area-inset-right,0px)) 110px max(16px,env(safe-area-inset-left,0px))}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.topbar h1{margin:0;font-size:22px;font-weight:700}.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--card);border-top:1px solid var(--line);padding:6px max(8px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 8px) max(8px,env(safe-area-inset-left,0px))}.nav-inner{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end}.nav a{text-decoration:none;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:13px;min-height:48px;justify-content:flex-end}.nav a[aria-current=page]{color:var(--fg);font-weight:700}.nav .fab{width:58px;height:58px;border-radius:999px;background:var(--gold);display:flex;align-items:center;justify-content:center;margin-top:-26px;box-shadow:0 4px 14px #f2b33d73}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px}.seg{display:flex;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:3px}.seg button{border:0;background:transparent;border-radius:999px;padding:7px 14px;font-size:14px;font-weight:600;cursor:pointer;min-height:36px}.seg button[aria-pressed=true]{background:var(--teal);color:#fff}.month{display:flex;align-items:center;gap:2px}.iconbtn{border:0;background:transparent;width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}.iconbtn:hover{background:var(--track)}.btn{border:1px solid var(--line);border-radius:14px;background:var(--card);min-height:44px;padding:0 16px;font-size:15px;font-weight:600;cursor:pointer}.btn.primary{background:var(--gold);border-color:var(--gold)}.btn.teal{background:var(--teal);border-color:var(--teal);color:#fff}.btn:disabled{opacity:.55;cursor:default}.chip{display:inline-block;font-size:14px;font-weight:600;background:var(--tint);border-radius:999px;padding:4px 12px}.chip.warn{background:var(--gold-tint)}.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}.field input,.field select,.search input,select.input{border:1px solid var(--line);border-radius:14px;background:var(--card);min-height:48px;padding:0 14px;font-size:16px;font-weight:400}.search{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 12px}.search input{border:0;flex:1;min-height:44px;padding:0;outline:none}.err{color:var(--expense);font-size:14px;margin:0}.toast{position:fixed;left:50%;transform:translate(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 96px);z-index:30;background:var(--fg);color:#fff;border-radius:14px;padding:10px 16px;font-size:15px;max-width:calc(100vw - 32px)}.hero{display:flex;gap:12px;align-items:center}.hero img{width:96px;height:110px;object-fit:contain;flex:none}.hero .big{margin:0;font-size:30px;font-weight:700;line-height:1.15;color:var(--teal)}.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.tile{text-decoration:none;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:2px}.tile b{font-size:22px}.tile span{font-size:14px}.bar{height:12px;background:var(--track);border-radius:999px;overflow:hidden}.bar>div{height:100%;border-radius:999px}.rows{display:flex;flex-direction:column;gap:8px}.row{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:var(--r-md);padding:10px 12px}.row .dot{width:40px;height:40px;border-radius:12px;background:var(--tint);flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--teal);font-size:13px}.row .name{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}h2{margin:4px 0 0;font-size:17px}.group{display:flex;flex-direction:column;gap:8px}.group .head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.group .payee{font-weight:700;min-width:0;overflow-wrap:anywhere}.group .actions{display:flex;gap:8px;flex-wrap:wrap}.group .actions .btn.primary{flex:1}.items{display:flex;flex-direction:column;border-top:1px solid var(--line);margin-top:4px}.login{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px))}.login form{width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px}.login .brand{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}.login .brand img{width:120px;height:120px}.login .brand h1{margin:0;font-size:26px}.soon{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:40px 16px}.soon img{width:140px}@media (min-width: 900px){.app,.nav-inner{max-width:760px}}.form{display:flex;flex-direction:column;gap:12px}.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.field select,.field input{width:100%;min-width:0}.field input.amount{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}.line-head{display:flex;justify-content:space-between;align-items:center}.linkbtn{border:0;background:none;color:var(--expense);font-weight:600;font-size:14px;cursor:pointer;padding:8px 4px}.btn.danger{background:var(--expense);border-color:var(--expense);color:#fff}.seg-wide{width:100%}.seg-wide button{flex:1}.sum{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin:0;font-size:15px}.sum dt{color:var(--muted)}.sum dd{margin:0;text-align:right}.sum .total{font-weight:700;color:var(--fg);font-size:17px;padding-top:6px;border-top:1px solid var(--line)}.sum dd.total.out{color:var(--expense)}.sum dd.total.in{color:var(--income)}@media (max-width: 360px){.two{grid-template-columns:1fr}}.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}.cal-h{text-align:center;font-size:12px;color:var(--muted);font-weight:600;padding-bottom:4px}.cal-d{border:0;background:transparent;border-radius:12px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:14px;font-weight:600;cursor:pointer}.cal-d:hover{background:var(--track)}.cal-d.today{background:var(--gold-tint)}.cal-d.on{background:var(--teal);color:#fff}.cal-d .dots{display:flex;gap:2px;height:6px}.cal-d .dots i{width:6px;height:6px;border-radius:999px;display:block}.rowbtn{border:0;width:100%;font:inherit;color:inherit;cursor:pointer}.rowbtn:hover{background:var(--tint)}.menu{display:flex;flex-direction:column}.menu a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 4px;color:var(--fg);text-decoration:none;font-weight:600;border-bottom:1px solid var(--track)}.menu a:last-child{border-bottom:0}.menu a span{color:var(--muted);font-weight:400;font-size:14px}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:#1f2a3759;display:flex;justify-content:center;align-items:flex-end}.sheet{background:var(--bg);width:100%;max-width:760px;max-height:100dvh;overflow-y:auto;border-radius:22px 22px 0 0;display:flex;flex-direction:column;gap:12px;padding:0 max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 20px) max(16px,env(safe-area-inset-left,0px))}.sheet-top{position:sticky;top:0;background:var(--bg);z-index:1;padding:calc(env(safe-area-inset-top,0px) + 12px) 0 8px}.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}@media (max-width: 420px){.three{grid-template-columns:1fr 1fr}.three>:last-child{grid-column:1 / 3}}@media (min-width: 761px){.sheet-backdrop{align-items:center}.sheet{border-radius:22px;max-height:92dvh}}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--card);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230F766E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:38px!important}select:focus,input:focus{outline:none;border-color:var(--teal)!important;box-shadow:0 0 0 3px var(--tint)}.btn.small{min-height:38px;font-size:14px;padding:0 12px}.btn.icon{display:inline-flex;align-items:center;gap:6px}.ico{display:inline-block;flex:none;object-fit:contain;vertical-align:middle}.cat-ico{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:12px;background:var(--tint);color:var(--teal);font-weight:700;overflow:hidden}.cat-ico img{width:100%;height:100%;object-fit:contain}.src{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;min-width:0;overflow-wrap:anywhere}.group{gap:10px;padding:14px}.g-pick{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center}.g-pick select{border:1px solid var(--line);border-radius:12px;min-height:44px;padding:0 12px;font-size:15px;width:100%;min-width:0}.g-meta{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted);flex-wrap:wrap}.g-meta .hint{color:var(--teal);font-weight:600}.items{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:10px;margin-top:2px}.item{border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;background:var(--card)}.item-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px}.item-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:8px}.item-row input,.item-row select{border:1px solid var(--line);border-radius:12px;background-color:var(--card);min-height:40px;padding:0 12px;font-size:14px;width:100%;min-width:0}.item-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}@media (max-width: 560px){.item-row{grid-template-columns:1fr}}@media (min-width: 700px){.group{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px}.group>.head,.group>.g-meta,.group>.items{grid-column:1 / 3}.group>.actions{flex-wrap:nowrap}.item{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px}.item-top{grid-column:1 / 3}.item-actions{flex-wrap:nowrap;align-self:center}}.cat-ico.has-img{background:transparent}.cat-ico.pickable{border:0;padding:0;cursor:pointer;font:inherit}.cat-ico.pickable:hover{box-shadow:0 0 0 2px var(--teal)}.tabs{flex:none;display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.tabs button{flex:none;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600;cursor:pointer;min-height:36px}.tabs button[aria-selected=true]{background:var(--teal);border-color:var(--teal);color:#fff}.sticker-grid{flex:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}.sticker-head{grid-column:1 / -1;font-size:13px;font-weight:700;color:var(--muted);padding-top:6px}.sticker-tile{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;font-size:12px;text-align:center;line-height:1.25;min-height:96px}.sticker-tile:hover{border-color:var(--teal)}.sticker-tile.on{border:2px solid var(--teal);background:var(--tint)}.tile-list{display:flex;flex-direction:column;padding:4px 12px}.tile-row{display:flex;align-items:center;gap:12px;padding:10px 0;border:0;border-bottom:1px solid var(--track);background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%}.tile-row:last-child{border-bottom:0}.tile-row .t-name{flex:1;min-width:0;font-weight:600;display:flex;flex-direction:column}.tile-row .t-name small{font-weight:400;color:var(--muted);font-size:13px}.filters{display:grid;grid-template-columns:auto repeat(3,minmax(0,1fr));gap:8px;align-items:center}.filters select{border:1px solid var(--line);border-radius:12px;min-height:40px;padding:0 12px;font-size:14px;width:100%;min-width:0}.filters .month .btn{min-width:104px}@media (max-width: 640px){.filters{grid-template-columns:repeat(3,minmax(0,1fr))}.filters .month{grid-column:1 / -1;justify-content:center}}.day{display:flex;flex-direction:column;gap:6px}.day-h{font-size:14px;color:var(--muted);margin:6px 4px 0;font-weight:600}.tile-row .t-title,.tile-row .t-name small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.t-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}.pill{font-size:11px;font-weight:700;color:#8a5a00;background:var(--gold-tint);border-radius:999px;padding:1px 8px}