:root{--ink:#1d2b24;--green:#244e3e;--cream:#f5f3ee;--card:#fff;--muted:#7b8279;--gold:#9a6b1f;--goldbg:#faf0dc;
--mint:#e8f1ec;--blue:#395365;--bluebg:#eaf0f3;--red:#a33a2b;--redbg:#f8e6e2;--line:#e9e6df;--cash:#1f5a3f;--trf:#2c5d8f;--rcpt:#6a3f8f}
*{box-sizing:border-box}html,body{margin:0;background:var(--cream);color:var(--ink);font-family:"Noto Sans Thai",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:480px;margin:0 auto;padding:18px 16px 96px}
a{color:inherit;text-decoration:none}button{font:inherit}
.center{text-align:center;margin-top:30vh}
.ttl{display:flex;justify-content:space-between;align-items:center;margin-top:6px}.ttl h1{margin:0;font-size:28px;letter-spacing:-.3px}
h1{font-size:26px;margin:14px 0 2px}.sub{color:var(--muted);font-size:13px;margin-bottom:12px}
.tag{background:#e3efe8;color:var(--green);font-size:11px;font-weight:800;padding:5px 12px;border-radius:99px;letter-spacing:.5px;white-space:nowrap}
.tag-red{background:var(--redbg);color:var(--red)}.tag-gray{background:#ebe9e3;color:#6b6f68}
.subrow{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin:6px 0 14px;flex-wrap:wrap}
.refresh{border:0;background:#e3efe8;color:var(--green);font-size:12px;font-weight:700;border-radius:99px;padding:4px 10px;margin-left:6px;cursor:pointer}.refresh:disabled{opacity:.6}
.rmsg{font-size:12px;margin:-6px 0 10px}.rmsg.bad{color:var(--red);font-weight:700}
.chips,.days{display:flex;gap:6px;margin-bottom:14px;align-items:center}
.chips>a,.chips>button,.days>a,.days>button{flex:1;text-align:center;padding:7px 0;border-radius:99px;background:#e9e7e0;font-size:12px;color:#5c635b;white-space:nowrap;border:0;cursor:pointer}
.days>a,.days>button{flex:none;padding:6px 12px;font-size:13px}
.chips .on,.days .on{background:var(--green)!important;color:#fff!important;font-weight:700}
.pickwrap{position:relative;flex:1}.days .pickwrap{flex:none}
.pickwrap>button{width:100%;text-align:center;padding:7px 0;border-radius:99px;background:#e9e7e0;font-size:12px;color:#5c635b;white-space:nowrap;border:0;cursor:pointer}
.days .pickwrap>button{padding:6px 12px;font-size:13px}
.cal{position:absolute;right:0;top:38px;z-index:20;background:#fff;border-radius:18px;box-shadow:0 10px 30px #0002;padding:12px;width:290px}
.ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.ch button{border:0;background:#eeece6;border-radius:10px;width:34px;height:32px;font-size:18px;cursor:pointer}
.cg{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}.cg i{font-style:normal;font-size:11px;color:var(--muted);padding:4px 0}
.cg a,.cg span{padding:7px 0;border-radius:10px;font-size:14px}.cg a:hover{background:var(--mint)}.cg a.today{font-weight:800;color:var(--green)}.cg a.sel{background:var(--green);color:#fff}.cg .dis{color:#c9c9c4}
.hero{background:var(--green);color:#fff;border-radius:24px;padding:20px 22px}.hero small{opacity:.85}
.hrow{display:flex;justify-content:space-between;align-items:baseline;margin:8px 0 14px}.big{font-size:44px;font-weight:800;letter-spacing:-.5px}.unit{font-size:14px;opacity:.9;margin-right:30px}
.hero .foot{border-top:1px solid #ffffff33;padding-top:8px;font-size:13px;opacity:.9}
.strip{display:flex;align-items:center;gap:10px;background:#ebe9e3;border-radius:18px;padding:15px 18px;margin-top:12px;font-size:17px}.strip svg{width:20px;height:20px;stroke:#7d837b;fill:none;stroke-width:1.7}
.card{background:var(--card);border-radius:20px;padding:16px 18px;margin-top:12px;box-shadow:0 2px 8px #0000000a}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ihead{display:flex;align-items:center;gap:12px;font-weight:700;font-size:14px}.ibox{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none}
.ibox svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ibox.mint{background:#e6efe9;color:var(--green)}.ibox.gold{background:#f2dfb7;color:var(--gold);border-radius:50%}
.amt{font-size:30px;font-weight:800;color:var(--green);margin:6px 0 12px 50px}
.split{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:12px;font-size:14px;gap:8px;flex-wrap:wrap}
.c-cash{color:var(--cash);font-weight:700}.c-trf{color:var(--trf);font-weight:700}.c-rcpt{color:var(--rcpt);font-weight:700}
.owe{display:flex;align-items:center;gap:12px;background:var(--goldbg)}.otxt{flex:1;display:flex;flex-direction:column;color:var(--gold)}.otxt b{font-size:14px}.otxt small{font-size:11px;margin-top:2px}.oamt{font-size:24px;font-weight:800;color:var(--gold)}
.note{font-size:12px;color:var(--muted);margin-top:12px;line-height:1.6}
.banner{background:var(--redbg);color:var(--red);border-radius:14px;padding:10px 14px;font-size:13px;margin:0 0 12px;font-weight:700}.banner.gray{background:#ebe9e3;color:#5c635b}
.search{width:100%;padding:11px 14px;border-radius:14px;border:1px solid var(--line);background:#efede7;font:inherit;font-size:14px}
.filters{display:flex;gap:6px;overflow-x:auto;margin:8px 0 4px}.filters a{padding:6px 12px;border-radius:99px;background:#fff;font-size:13px;white-space:nowrap;border:1px solid var(--line)}
.filters a.on{background:var(--green);color:#fff;border-color:var(--green)}.filters a.on.f-cash{background:var(--cash)}.filters a.on.f-transfer{background:var(--trf)}.filters a.on.f-owed{background:var(--gold);border-color:var(--gold)}
.pills{display:flex;flex-wrap:wrap;gap:6px}.pills.sum{margin:6px 0 2px}
.pill{display:inline-block;padding:3px 10px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.p-cash{background:#e3efe8;color:var(--cash)}.p-trf{background:#e2ecf7;color:var(--trf)}.p-rcpt{background:#efe7f6;color:var(--rcpt)}.p-owed{background:var(--goldbg);color:var(--gold)}.p-cancel{background:#eee;color:#888;text-decoration:line-through}.p-paid{background:var(--mint);color:var(--green)}
.bill .name{font-weight:700;font-size:16px}.bill .bamt{font-weight:800;font-size:17px}.bill .meta{font-size:12px;color:var(--muted);margin:4px 0 8px}.bill.cancel{opacity:.55}
table{width:100%;border-collapse:collapse;font-size:14px}td{padding:8px 0;border-bottom:1px solid var(--line);vertical-align:top}td.r{text-align:right;white-space:nowrap}
.back{font-size:14px;color:var(--green);font-weight:700}
nav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);display:flex;justify-content:center;padding-bottom:env(safe-area-inset-bottom)}
nav[hidden]{display:none}
nav .in{display:flex;max-width:480px;width:100%}nav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 0 12px;font-size:12px;color:var(--muted)}
nav a.on{color:var(--green);font-weight:800}.nb{width:46px;height:30px;border-radius:99px;display:grid;place-items:center}nav a.on .nb{background:#e3efe8}
.nb svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.login{margin-top:22vh;text-align:center}.login h1{font-size:30px}.gbtn{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 18px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px #0000000f;margin-top:18px}
.who{font-size:12px;color:var(--muted);text-align:center;margin-top:24px}.who button{border:0;background:none;color:var(--green);font-weight:700;cursor:pointer;text-decoration:underline}
.gold{color:var(--gold)}.red{color:var(--red)}

/* ── "coming soon" ── */
nav a.soon{opacity:.55}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:99px;font-size:14px;font-weight:700;z-index:50;box-shadow:0 8px 24px #0003;white-space:nowrap}
.toast[hidden]{display:none}
body.desk .toast{bottom:32px}

/* ── Desktop ≥1024px (board UI-02, green / cream / gold theme) ── */
body.desk .wrap{max-width:none;padding:0}
.dk{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.dk>aside{background:var(--green);color:#fff;padding:22px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh}
.dk .brand{display:flex;align-items:center;gap:10px;padding:0 8px}.dk .brand b{display:block;font-size:18px}.dk .brand small{opacity:.75;font-size:12px}
.dk .logo{width:34px;height:34px;border-radius:50%;background:#f2dfb7;color:var(--green);display:grid;place-items:center;font-weight:800}
.dk .side{display:flex;flex-direction:column;gap:2px}
.dk .side a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;font-size:14px;color:#ffffffcc}
.dk .side a svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.dk .side a.on{background:#ffffff1f;color:#fff;font-weight:700}.dk .side a:hover{background:#ffffff14}
.dk .side a.soon{color:#ffffff80}.dk .side a em{margin-left:auto;font-style:normal;font-size:10px;background:#ffffff1a;padding:2px 7px;border-radius:99px}
.dk .sidefoot{margin-top:auto;font-size:11px;color:#ffffffa0;line-height:1.7;padding:0 8px}
.dk .sidefoot button{border:0;background:#ffffff1f;color:#fff;border-radius:99px;padding:4px 12px;font-size:12px;margin-top:6px;cursor:pointer}
.dk .who2{word-break:break-all}
.dk main{padding:26px 32px 40px;min-width:0}
.dhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}.dhead h1{margin:0;font-size:28px;letter-spacing:-.3px}
.dhead .sub{margin:4px 0 0}.dstat{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);white-space:nowrap}
.dctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:16px 0}
.dctl .chips{margin:0;flex:0 1 auto}.dctl .chips>a,.dctl .pickwrap>button{flex:none;padding:7px 14px;font-size:13px}.dctl .pickwrap{flex:none}
.dsel{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:5px 10px;font-size:13px;color:var(--muted)}
.dsel select{border:0;background:transparent;font:inherit;color:var(--ink);font-weight:700;cursor:pointer}
.dsearch{flex:1;min-width:220px;padding:8px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;font:inherit;font-size:13px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.kpis.k3{grid-template-columns:repeat(3,1fr);margin:14px 0 10px}
.kpi{background:#fff;border-radius:18px;padding:16px 18px;box-shadow:0 2px 8px #0000000a;display:flex;flex-direction:column;gap:4px}
.kpi small{color:var(--muted);font-size:13px}.kpi b{font-size:28px;font-weight:800;letter-spacing:-.3px}.kpi span{font-size:12px;color:var(--muted)}.kpi i{font-style:normal;font-weight:700}
.kpi.hero2{background:var(--green);color:#fff}.kpi.hero2 small,.kpi.hero2 span{color:#ffffffc0}
.kpi.owe2{background:var(--goldbg)}.kpi.owe2 b,.kpi.owe2 small{color:var(--gold)}
.dgrid{display:grid;grid-template-columns:1fr 330px;gap:16px;margin-top:16px;align-items:start}
.rail{display:flex;flex-direction:column;gap:16px}
.panel{background:#fff;border-radius:18px;padding:16px 18px;box-shadow:0 2px 8px #0000000a;min-width:0}
.ph{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px;font-size:15px}.ph a{color:var(--green);font-weight:700}
.mut{color:var(--muted);font-size:12px}
.tblwrap{overflow-x:auto}
table.dt{width:100%;border-collapse:collapse;font-size:13px}
.dt th{text-align:left;color:var(--muted);font-weight:600;font-size:12px;padding:8px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.dt td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.dt th.r,.dt td.r{text-align:right;white-space:nowrap}.dt td.b{font-weight:800}.dt .mono{font-variant-numeric:tabular-nums;white-space:nowrap}
.dt tbody tr[data-bill]{cursor:pointer}.dt tbody tr[data-bill]:hover{background:#faf8f3}.dt tr.sel{background:var(--mint)!important}
.dt tr.cancel td{opacity:.5}.dt .pills{gap:4px}.dt .pill{font-size:11px;padding:2px 8px}
.dt.items td{padding:7px 4px}
.erow{display:block;padding:8px 0;border-bottom:1px solid var(--line)}.erow:last-child{border:0}.erow .row{font-size:14px}
.bar{height:6px;background:#efede7;border-radius:99px;margin-top:6px;overflow:hidden}.bar i{display:block;height:100%;background:var(--green);border-radius:99px}
.prow{padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}.prow b{font-size:16px}
.split2{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,44%);gap:16px;align-items:start}
.detail{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto}.detail h2{margin:0;font-size:20px}
.detail .x{font-size:18px;color:var(--muted);padding:4px 8px;border-radius:10px}.detail .x:hover{background:#efede7}
.detail .row{font-size:14px;padding:3px 0}
.pills.sum{margin:0 0 12px}
@media (max-width:1280px){.kpis{grid-template-columns:repeat(2,1fr)}.dgrid{grid-template-columns:1fr}.split2{grid-template-columns:1fr}.detail{position:static;max-height:none}}
.cg a.inr{background:var(--mint);border-radius:0}
.calhint{font-size:11px;color:var(--muted);text-align:center;margin-top:8px;line-height:1.5}
/* bill popup (desktop) */
.modal{position:fixed;inset:0;background:#1d2b2499;display:flex;align-items:flex-start;justify-content:center;padding:5vh 24px;z-index:40;overflow:auto;animation:fade .15s ease}
.mbox{width:min(760px,100%)}
.mbox .detail{position:static;max-height:none;box-shadow:0 20px 50px #0004;border-radius:22px;padding:22px 24px}
.mbox .x{font-size:14px;font-weight:700;background:#efede7;color:var(--ink)!important;padding:6px 14px!important;border-radius:99px!important;white-space:nowrap}
body.noscroll{overflow:hidden}
@keyframes fade{from{opacity:0}to{opacity:1}}