:root{--bg:#f6f4ef;--card:#fff;--ink:#1f2a24;--mute:#6b756f;--line:#e4e0d6;--brand:#2f6b4f;--brand-ink:#fff;--brand-soft:#e6f0ea;--good:#1f7a4d;--good-bg:#e3f3ea;--warn:#9a6700;--warn-bg:#fff4d6;--bad:#b3261e;--bad-bg:#fde8e6;--info:#235a8c;--info-bg:#e6f0fa}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font-family:IBM Plex Sans Thai,system-ui,sans-serif;font-size:14.5px;line-height:1.5}h1{font-size:22px;margin:0 0 4px;font-weight:600}h2{font-size:17px;margin:0;font-weight:600}h3{font-size:14.5px;margin:18px 0 8px;font-weight:600}p{margin:0 0 10px}a{color:var(--brand);cursor:pointer;text-decoration:none}a:hover{text-decoration:underline}button,input,select,textarea{font:inherit;color:inherit}input,select,textarea{border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:#fff;width:100%;min-width:0}input:focus,select:focus,textarea:focus,.picker-btn:focus{outline:2px solid var(--brand);outline-offset:-1px}input.num{text-align:right;font-variant-numeric:tabular-nums}textarea{min-height:110px;resize:vertical}button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 14px;cursor:pointer;white-space:nowrap}button:hover:not(:disabled){background:#f3f1ea}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:500}button.primary:hover:not(:disabled){background:#27593f}button.danger{color:var(--bad)}button.small{padding:3px 9px;font-size:13px}button.icon{border:0;background:none;padding:4px 8px;font-size:16px}button.link{border:0;background:none;padding:0;color:var(--brand)}.app{display:grid;grid-template-columns:216px 1fr;min-height:100vh}.side{background:#22332b;color:#dfe8e2;padding:18px 12px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh}.side .logo{font-weight:600;font-size:16px;color:#fff;padding:2px 10px 14px}.side .logo small{display:block;font-weight:400;color:#9fb3a8;font-size:12px}.side a{color:inherit;padding:8px 10px;border-radius:8px;display:flex;justify-content:space-between;align-items:center}.side a:hover{background:#2d4338;text-decoration:none}.side a.on{background:#3a5647;color:#fff}.side .count{background:#e9a23b;color:#22332b;border-radius:99px;font-size:12px;padding:0 7px;font-weight:600}.side .who{margin-top:auto;padding:10px;font-size:13px;color:#9fb3a8}.side .who b{color:#fff;display:block;font-weight:500}.side .who button{margin-top:8px;background:none;color:#dfe8e2;border-color:#48604f;width:100%}main{padding:24px 28px 60px;min-width:0}.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:16px;flex-wrap:wrap}.head .sub{color:var(--mute)}.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}.toolbar input[type=search],.toolbar .search{max-width:280px}.toolbar select{width:auto}.toolbar label.check{display:flex;gap:6px;align-items:center;white-space:nowrap}.toolbar label.check input{width:auto}.tabs{display:flex;gap:4px}.tabs button{border-radius:99px;padding:5px 14px}.tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}.card+.card{margin-top:14px}.grid{display:grid;gap:14px}.grid.c4{grid-template-columns:repeat(4,1fr)}.grid.c2{grid-template-columns:repeat(2,1fr)}.grid.c3{grid-template-columns:repeat(3,1fr)}.stat-label{color:var(--mute);font-size:13px}.stat-value{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}.stat-sub{color:var(--mute);font-size:13px}.stat.bad .stat-value{color:var(--bad)}.stat.warn .stat-value{color:var(--warn)}.stat.good .stat-value{color:var(--good)}.table-wrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:12px}table{border-collapse:collapse;width:100%}th,td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}th{font-weight:500;color:var(--mute);font-size:13px;white-space:nowrap;background:#fbfaf6;position:sticky;top:0}th.sort{cursor:pointer}tr:last-child td{border-bottom:0}td.r,th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}tr.click{cursor:pointer}tr.click:hover td{background:#faf8f2}th.grp{text-align:center;border-left:1px solid var(--line)}td.gl,th.gl{border-left:1px solid var(--line)}td small,.mute{color:var(--mute)}td.good,.good{color:var(--good)}td.warn,.warn{color:var(--warn)}td.bad,.bad{color:var(--bad)}td.strong{font-weight:600}.badge{display:inline-block;border-radius:99px;padding:1px 9px;font-size:12px;background:#eeece4;color:var(--mute);white-space:nowrap}.badge.bad{background:var(--bad-bg);color:var(--bad)}.badge.warn{background:var(--warn-bg);color:var(--warn)}.badge.good{background:var(--good-bg);color:var(--good)}.badge.info{background:var(--info-bg);color:var(--info)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#141e1959;z-index:20;display:flex;justify-content:flex-end}.drawer{background:var(--bg);width:min(560px,100vw);height:100%;display:flex;flex-direction:column;box-shadow:-8px 0 30px #00000026}.drawer.wide,.drawer.mid{width:min(1120px,100vw)}.drawer>header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:#fff;border-bottom:1px solid var(--line)}.drawer-body{padding:18px 20px;overflow-y:auto;flex:1}.drawer>footer{padding:12px 20px;background:#fff;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;align-items:center}.form{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 12px}.field{display:flex;flex-direction:column;gap:3px;grid-column:span 2}.field.wide{grid-column:1 / -1}.field.q{grid-column:span 1}.field-label{font-size:13px;color:var(--mute)}.hint{font-size:12.5px;color:var(--mute)}.picker{position:relative;min-width:0}.picker-btn{width:100%;text-align:left;display:flex;flex-direction:column;white-space:normal;padding:5px 10px;line-height:1.3}.picker-btn.empty{color:var(--mute)}.picker-btn small{color:var(--mute);font-size:12px}.picker-pop{position:absolute;z-index:30;top:calc(100% + 4px);left:0;width:max(100%,340px);background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px #00000026;padding:8px}.picker-pop ul{list-style:none;margin:6px 0 0;padding:0;max-height:280px;overflow-y:auto}.picker-pop li{padding:6px 8px;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;line-height:1.3}.picker-pop li:hover,.picker-pop li.on{background:var(--brand-soft)}.picker-pop li small,.picker-pop li em{color:var(--mute);font-size:12px;font-style:normal}.picker-pop li.none,.picker-pop li.clear{color:var(--mute)}.note{border-radius:10px;padding:10px 12px;background:var(--info-bg);color:var(--info);margin-bottom:12px;font-size:13.5px}.note.warn{background:var(--warn-bg);color:var(--warn)}.note.bad{background:var(--bad-bg);color:var(--bad)}.note.good{background:var(--good-bg);color:var(--good)}.empty{padding:28px;text-align:center;color:var(--mute)}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:10px;z-index:50;box-shadow:0 8px 24px #0003}.toast.err{background:var(--bad)}.lines td{padding:5px 6px;vertical-align:top}.lines input{padding:5px 7px}.lines .err{color:var(--bad);font-size:12.5px}.lines .wn{color:var(--warn);font-size:12.5px}.lines tr.haserr td{background:#fff8f7}.lines tr.review td{background:#fffbef}.linkinfo{font-size:12px;color:var(--mute);margin-top:2px}.kv{display:grid;grid-template-columns:1fr auto;gap:4px 16px;font-variant-numeric:tabular-nums}.kv .t{font-weight:600;border-top:1px solid var(--line);padding-top:4px}.kv>:nth-child(2n){text-align:right}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.spacer{flex:1}.sentence{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.sentence input{width:90px}.sentence input.txt{width:110px}.login{max-width:380px;margin:10vh auto}.login .card{display:flex;flex-direction:column;gap:10px}.idea{display:flex;flex-direction:column;gap:6px}.idea h4{margin:0;font-size:14.5px}.idea .nums{font-variant-numeric:tabular-nums;color:var(--mute);font-size:13.5px}.diff{font-size:13px}.diff del{color:var(--bad);text-decoration:line-through}.diff ins{color:var(--good);text-decoration:none}.card.pricing-todo{border-color:#9cc3e6;background:#f6faff}.pw{position:relative}.pw input{padding-right:42px}.pw button{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--mute);display:flex;padding:6px}.newversion{position:fixed;top:12px;left:50%;transform:translate(-50%);z-index:60;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 14px;display:flex;gap:10px;align-items:center;box-shadow:0 8px 24px #00000026}.pline{margin-top:12px}.pline.ok{border-color:#bfe0cc}.pline-result{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:10px;font-variant-numeric:tabular-nums}.ask{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--warn-bg);display:flex;flex-direction:column;gap:6px}.ask label,label.confirm{display:flex;gap:8px;align-items:center;cursor:pointer}.ask input,label.confirm input{width:auto}label.confirm{margin-top:10px;padding:8px 12px;border-radius:10px;background:var(--info-bg)}label.confirm.warnbox{background:var(--bad-bg);color:var(--bad)}.grid.c2.receipt-grid{grid-template-columns:minmax(280px,.8fr) 1.2fr;align-items:start}.receipt-side{position:sticky;top:12px}.receipt-img{width:100%;border-radius:8px;border:1px solid var(--line);max-height:80vh;object-fit:contain;background:#fff}@media (max-width: 860px){.grid.c2.receipt-grid{grid-template-columns:1fr}.receipt-side{position:static}}@media (max-width: 860px){.app{grid-template-columns:1fr}.side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;padding:8px}.side .logo{width:100%;padding-bottom:4px}.side .who{margin:0 0 0 auto;display:flex;gap:8px;align-items:center;padding:4px}.side .who button{margin:0;width:auto}main{padding:16px 12px 60px}.grid.c4,.grid.c3,.grid.c2,.form{grid-template-columns:1fr 1fr}.field.q{grid-column:span 1}}.kitchen{max-width:720px}.kitchen h1{margin-bottom:6px}.ksearch{font-size:16px;padding:11px 14px;margin:6px 0 10px}.ktimes{margin-bottom:12px;flex-wrap:wrap}.ktimes button{padding:7px 16px}.kback{margin-bottom:12px;padding:8px 14px}.klist,.klines{padding:0;overflow:hidden}.klist a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 14px;color:inherit;border-bottom:1px solid var(--line);font-size:15.5px}.klist a:last-child{border-bottom:0}.klist a:hover{background:#faf8f2;text-decoration:none}.klist small,.kline small{display:block;color:var(--mute);font-size:12.5px}.kline{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:15.5px}.kline:last-child{border-bottom:0}.kline b{white-space:nowrap;font-variant-numeric:tabular-nums;font-size:17px}.kline b span{font-weight:400;color:var(--mute);font-size:14px}.kmethod{white-space:pre-wrap}@media (max-width: 860px){input,select,textarea{font-size:16px}.fewnav .side{flex-wrap:nowrap;align-items:center;position:sticky;top:0;z-index:10;padding:8px 10px}.fewnav .side .logo{width:auto;padding:0 4px}.fewnav .side .logo small{display:none}.fewnav .side a{position:fixed;bottom:0;left:0;width:50%;z-index:15;justify-content:center;border-radius:0;background:#22332b;padding:14px 8px calc(14px + env(safe-area-inset-bottom))}.fewnav .side a+a{left:50%}.fewnav .side a.on{background:#3a5647}.onenav .side a{display:none}.fewnav main{padding-bottom:96px}.onenav main{padding-bottom:40px}.fewnav~.toast{bottom:72px}}@media (max-width: 640px){.ing-list thead{display:none}.ing-list tr{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px;border-bottom:1px solid var(--line);align-items:center}.ing-list td{border:0;padding:0}.ing-list td:nth-child(1){font-size:15.5px}.ing-list td:nth-child(2){grid-column:1;color:var(--mute);font-size:13px}.ing-list td:nth-child(2) br{display:none}.ing-list td:nth-child(2) small{margin-left:6px}.ing-list td:nth-child(3){grid-column:2;grid-row:1 / span 3}.ing-list td:nth-child(6){grid-column:1;font-size:13px;color:var(--mute)}.ing-list td:nth-child(4),.ing-list td:nth-child(5),.ing-list td:nth-child(7){display:none}.ing-list td:nth-child(3) .row{flex-direction:column;align-items:flex-end;gap:4px}.toolbar input[type=search],.toolbar .search{max-width:none}.tabs{flex-wrap:wrap}}.picker-pop li b{font-weight:600;color:var(--brand)}.picker-pop li.sep{cursor:default;color:var(--warn);font-size:12.5px;padding:6px 8px 2px;border-top:1px solid var(--line);border-radius:0;margin-top:4px}.picker-pop li.sep:hover{background:none}label.confirm,.ask label,label.check{pointer-events:none;cursor:default}label.confirm input,.ask label input,label.check input{pointer-events:auto;cursor:pointer;width:20px;height:20px;flex:none;accent-color:var(--brand)}.bill{padding:12px}.bill+.bill{margin-top:12px}.bill-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.bill-head input[type=date]{width:150px;flex:none}.bill-head input:not([type]){flex:1;min-width:160px}.bill-no{border-radius:99px;padding:3px 12px;font-size:13px}.bill-no.on{background:var(--ink);color:#fff;border-color:var(--ink)}.prow-headings,.prow-main{display:grid;grid-template-columns:22px minmax(130px,2fr) minmax(128px,1.1fr) minmax(138px,1.1fr) 100px 56px;gap:6px;align-items:center}.prow-headings{font-size:12.5px;color:var(--mute);margin-top:10px;padding:0 2px}.prow{border-top:1px solid var(--line);padding:6px 2px}.prow.ok{background:#f4faf6}.prow.unsure:not(.ok){background:#fffbef}.prow-tick input{width:20px;height:20px;accent-color:var(--brand);cursor:pointer;display:block}.prow-ing .picker-btn{padding:6px 10px}.prow-ing .picker-btn small{display:none}.prow-qty{display:flex;gap:4px;align-items:center;min-width:0}.prow-qty select{padding:7px 4px}.prow-unit{white-space:nowrap;color:var(--mute);font-size:13px}.prow-res{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-variant-numeric:tabular-nums;font-size:13.5px}.prow-btn{display:flex;justify-content:flex-end}.prow-btn button.icon{padding:4px 5px}.prow-sub{display:flex;gap:4px 12px;flex-wrap:wrap;font-size:12.5px;color:var(--mute);padding:3px 0 0 28px}.prow-more{margin:8px 0 4px 28px;padding:10px 12px;border-radius:10px;background:var(--bg);display:flex;flex-direction:column;gap:8px}.prow-more .note,.prow-more p{margin:0}.prow-more label.confirm,.prow-more .ask{margin-top:0}.thumbs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}.thumbs button{position:relative;padding:0;width:54px;height:54px;overflow:hidden;border-width:2px}.thumbs button.on{border-color:var(--brand)}.thumbs img{width:100%;height:100%;object-fit:cover;display:block}.thumbs span{position:absolute;left:2px;top:2px;background:var(--ink);color:#fff;border-radius:99px;font-size:11px;padding:0 6px}.savebar{position:sticky;bottom:0;margin-top:12px;z-index:5;box-shadow:0 -4px 16px #0000000f}.grid.c2.receipt-grid{grid-template-columns:minmax(240px,.6fr) 1.4fr}@media (max-width: 860px){.grid.c2.receipt-grid{grid-template-columns:1fr}.receipt-img{max-height:42vh}.fewnav .savebar{bottom:52px}}@media (max-width: 640px){.prow-more{margin-left:0}.bill-head input[type=date]{width:auto;flex:1}}.prow-qty input{min-width:54px;flex:1 1 54px}.prow-qty select{flex:0 1 auto;max-width:62%;min-width:0!important;text-overflow:ellipsis}@media (max-width: 640px){.bill-head input[type=date]{flex:1 1 140px}.bill-head input:not([type]){flex:1 1 100%;order:5}}.vatline{display:inline-flex;gap:5px;align-items:center;font-size:12.5px;color:var(--mute);white-space:nowrap}.vatline input{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}.vatline b{color:var(--ink)}.bill-foot{margin-top:8px;padding:8px 10px;border-radius:10px;background:var(--bg)}.bill-foot.off{background:var(--bad-bg)}.bill-sums{display:flex;gap:6px 18px;flex-wrap:wrap;font-variant-numeric:tabular-nums}.bill-sums small{color:var(--mute)}.prow-headings .r{text-align:right}.prow-each{display:inline-flex;align-items:center;gap:3px}.prow-each input{width:84px}.prow-each small{color:var(--mute);white-space:nowrap}.bill{container-type:inline-size}.prow-main>*{min-width:0}.prow-res{min-width:0}.prow-each{min-width:0;flex:1 1 auto}.prow-each input{width:auto;flex:1 1 60px;min-width:60px}.prow-price input{width:100%}@container (max-width: 600px){.prow-headings{display:none}.prow-main{grid-template-columns:22px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 56px;grid-template-areas:"tick ing ing ing btn" ". qty res price price"}.prow-tick{grid-area:tick}.prow-ing{grid-area:ing}.prow-qty{grid-area:qty}.prow-price{grid-area:price}.prow-res{grid-area:res}.prow-btn{grid-area:btn}.prow-res .badge,.prow-res .vatline{flex-basis:100%}}@container (max-width: 420px){.prow-main{grid-template-columns:22px minmax(0,1fr) minmax(0,1fr) 56px;grid-template-areas:"tick ing ing btn" ". qty qty qty" ". res price price"}}.menu-btn{display:none}@media (max-width: 860px){.manynav .side{position:sticky;top:0;z-index:12;flex-wrap:wrap;align-items:center;padding:8px 10px;gap:4px}.manynav .side .logo{width:auto;flex:1;padding:0 4px}.manynav .side .logo small{display:none}.manynav .menu-btn{display:inline-flex;gap:8px;align-items:center;background:#3a5647;color:#fff;border-color:#48604f;padding:7px 12px}.manynav .side a,.manynav .side .who{display:none}.manynav.navopen .side a{display:flex;width:100%;padding:12px}.manynav.navopen .side .who{display:flex;width:100%;margin:6px 0 0;justify-content:space-between;padding:8px 12px;border-top:1px solid #3a5647}.drawer>header,.drawer>footer{padding:10px 12px}.drawer>footer{flex-wrap:wrap}.drawer-body{padding:12px}.head{align-items:flex-start}h1{font-size:20px}.picker-pop{position:fixed;left:8px;right:8px;bottom:8px;top:auto;width:auto;z-index:60;box-shadow:0 0 0 100vmax #141e1959,0 10px 30px #0003}.picker-pop ul{max-height:52vh}}@media (max-width: 640px){.grid.c2,.grid.c3{grid-template-columns:1fr}.grid.c4{grid-template-columns:1fr 1fr}.card{padding:12px}.stat-value{font-size:21px}.toolbar select{flex:1}.tabs button{padding:5px 11px}.sentence input,.sentence input.txt{width:auto;flex:1 1 70px;min-width:60px}.kv{gap:4px 10px}table.cards{min-width:0!important;table-layout:auto!important;display:block}table.cards thead{display:none}table.cards tbody{display:block}table.cards tr{display:block;padding:10px 12px;border-bottom:1px solid var(--line)}table.cards tr:last-child{border-bottom:0}table.cards td{display:flex;justify-content:space-between;align-items:center;gap:12px;border:0!important;padding:3px 0;text-align:right;width:auto!important;min-width:0!important;white-space:normal;background:none!important}table.cards td:before{content:attr(data-label);color:var(--mute);font-size:13px;text-align:left;flex:0 0 auto;max-width:45%;font-weight:400}table.cards td[data-label=""]:before{content:none}table.cards td:empty{display:none}table.cards td:first-child{font-size:15.5px;font-weight:500;text-align:left;justify-content:flex-start;flex-wrap:wrap;gap:4px 8px;padding-bottom:5px}table.cards td:first-child:before{content:none}table.cards td>input,table.cards td>select,table.cards td>textarea,table.cards td>.picker,table.cards td>.row,table.cards td>div{flex:1 1 55%;min-width:0;max-width:62%}table.cards td:first-child>*{max-width:none;flex:1 1 100%}table.cards td input,table.cards td select{width:100%!important}table.cards td .row{justify-content:flex-end}table.cards td br{display:none}table.cards td small{margin-left:6px}.table-wrap{overflow:visible}th{position:static}table.cards.ing-list tr{display:grid}table.cards.ing-list td{display:block;text-align:left}table.cards.ing-list td:before{content:none}table.cards.ing-list td:nth-child(4),table.cards.ing-list td:nth-child(5),table.cards.ing-list td:nth-child(7){display:none}table.cards.ing-list td>div{max-width:none}}@media (max-width: 640px){table.cards td:has(.picker),table.cards td:has(textarea),table.cards td:has(.linkinfo){flex-direction:column;align-items:stretch;text-align:left;gap:3px}table.cards td:has(.picker)>*,table.cards td:has(textarea)>*,table.cards td:has(.linkinfo)>*{max-width:none;flex:0 0 auto}}.picker-pop li.create{color:var(--brand);font-weight:500;border-top:1px solid var(--line);border-radius:0;margin-top:4px}.prow-more.newing{border:1px solid #bfe0cc;background:#f4faf6}
