:root{--bg:#f6f7f9;--card:#ffffff;--line:#e5e9ef;--line-soft:#f1f5f9;--soft:#f8fafc;--soft2:#eef1f5;--bar-dim:#dbe4ee;--text:#0f172a;--muted:#64748b;--faint:#94a3b8;--green:#10b981;--teal:#14b8a6;--sky:#0ea5e9;--indigo:#6366f1;--violet:#8b5cf6;--amber:#f59e0b;--rose:#f43f5e;--slate:#94a3b8;--orange:#f97316;--r:16px;--shadow:0 1px 2px rgba(15,23,42,.04),0 4px 16px rgba(15,23,42,.05)}[data-theme=dark]{--bg:#0b1220;--card:#101a2d;--line:#22304a;--line-soft:#1b2740;--soft:#16213a;--soft2:#1a2438;--bar-dim:#2a3a58;--text:#e6edf7;--muted:#9fb0c8;--faint:#6b7f9e;--shadow:0 1px 2px rgba(0,0,0,.2),0 6px 20px rgba(0,0,0,.25)}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}body{font-family:-apple-system,SF Pro Text,SF Pro Thai,Noto Sans Thai,Thonburi,system-ui,sans-serif;background:var(--bg);color:var(--text);font-size:14.5px;line-height:1.45;transition:background .2s,color .2s}button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}input,select,textarea{font:inherit;color:inherit}.app{display:flex;min-height:100vh}.sidebar{width:225px;background:#0f172a;color:#cbd5e1;padding:20px 14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh}.logo{font-weight:700;font-size:17px;color:#fff;padding:4px 10px 16px;letter-spacing:.2px}.logo small{display:block;font-weight:400;font-size:11px;color:#64748b;margin-top:2px}.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;color:#cbd5e1;font-weight:500;width:100%;text-align:left;transition:.15s}.nav-item:hover{background:#1e293b;color:#fff}.nav-item.active{background:var(--green);color:#fff;box-shadow:0 4px 14px #10b98159}.nav-item .ic{font-size:16px;width:22px;text-align:center}.sidebar-foot{margin-top:auto;font-size:11px;color:#475569;padding:10px 12px;line-height:1.6}.content{flex:1;min-width:0;padding:22px 26px 40px}.topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}.topbar h1{font-size:21px;font-weight:700}.topbar .sub{font-size:12.5px;color:var(--muted);margin-top:1px}.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{padding:6px 13px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--muted);transition:.15s;white-space:nowrap}.chip:hover{border-color:var(--faint)}.chip.active{background:var(--text);border-color:var(--text);color:var(--bg)}.monthpicker{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px 10px;font-weight:600;font-size:13px}.monthpicker button{color:var(--muted);font-size:15px;line-height:1;padding:0 2px}.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--indigo));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}.page{display:none}.page.active{display:block;animation:fadein .18s ease}@keyframes fadein{0%{opacity:0;transform:translateY(4px)}to{opacity:1}}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px}.card h3{font-size:14.5px;font-weight:700;margin-bottom:2px}.card .cap{font-size:12px;color:var(--muted)}.grid{display:grid;gap:14px}.kpis{grid-template-columns:repeat(auto-fit,minmax(215px,1fr));margin-bottom:14px}.kpi{display:flex;gap:12px;align-items:flex-start}.kpi .icon{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px;flex:none}.t-green{background:#10b98129}.t-red{background:#f43f5e29}.t-blue{background:#0ea5e929}.t-amber{background:#f59e0b33}.t-violet{background:#8b5cf633}.t-teal{background:#14b8a629}.t-indigo{background:#6366f12e}.kpi .label{font-size:12px;color:var(--muted);font-weight:500}.kpi .value{font-size:20px;font-weight:800;letter-spacing:-.3px;margin:1px 0 2px}.kpi .delta{font-size:11.5px;font-weight:600}.up{color:var(--green)}.down{color:var(--rose)}.dim{color:var(--faint)}.two-col{grid-template-columns:1.6fr 1fr}.three-col{grid-template-columns:1fr 1fr 1fr}@media(max-width:1050px){.two-col,.three-col{grid-template-columns:1fr}}.mb{margin-bottom:14px}.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.footnote{font-size:11.5px;color:var(--faint);margin-top:14px;text-align:center}.bars{display:flex;align-items:flex-end;gap:2.5%;height:175px;margin-top:14px}.bcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}.bar{width:100%;max-width:34px;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#34d399,var(--green));transition:.15s}.bar.dim2{background:var(--bar-dim)}.bar:hover{filter:brightness(1.12)}.barlabel{font-size:10.5px;color:var(--faint)}.barval{font-size:10px;color:var(--muted);font-weight:600}.scol{flex:1;display:flex;flex-direction:column;height:100%;justify-content:flex-end;gap:2px}.seg{width:100%;border-radius:3px}.scolwrap{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;flex:1;justify-content:flex-end}.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--muted)}.legend .dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}.donut-wrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap}.donut{width:168px;height:168px;border-radius:50%;position:relative;flex:none;margin:auto}.donut:after{content:"";position:absolute;top:26%;right:26%;bottom:26%;left:26%;background:var(--card);border-radius:50%}.donut .center{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1}.donut .center b{font-size:17px}.donut .center span{font-size:10.5px;color:var(--muted)}.dlegend{flex:1;min-width:200px;display:flex;flex-direction:column;gap:8px}.dlegend .li{display:flex;align-items:center;gap:8px;font-size:12.5px}.dlegend .li .nm{color:var(--muted);flex:1}.dlegend .li b{font-size:12.5px}.dlegend .pct{color:var(--faint);font-size:11px;width:34px;text-align:right}.txlist{display:flex;flex-direction:column}.tx{display:flex;align-items:center;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line-soft)}.tx:last-child{border-bottom:0}.tx .ic{width:38px;height:38px;border-radius:11px;background:var(--soft2);display:flex;align-items:center;justify-content:center;font-size:17px;flex:none}.tx .body{flex:1;min-width:0}.tx .t1{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tx .t2{font-size:11.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tx .amt{font-weight:700;font-size:13.5px;white-space:nowrap}.wbadge{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;margin-left:6px;vertical-align:1px}.w-Cash{background:#0ea5e926;color:#0284c7}.w-Credit{background:#f43f5e24;color:#e11d48}.w-Home{background:#f59e0b2e;color:#b45309}.w-Pahm{background:#8b5cf629;color:#7c3aed}[data-theme=dark] .w-Cash{color:#7dd3fc}[data-theme=dark] .w-Credit{color:#fda4af}[data-theme=dark] .w-Home{color:#fcd34d}[data-theme=dark] .w-Pahm{color:#c4b5fd}.dayhead{font-size:12px;font-weight:700;color:var(--muted);margin:14px 2px 4px;display:flex;justify-content:space-between}.st{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:8px;white-space:nowrap}.st-paid{background:#10b98126;color:#059669}.st-part{background:#f59e0b2e;color:#b45309}.st-wait{background:var(--soft2);color:var(--muted)}.st-late{background:#f43f5e24;color:#e11d48}[data-theme=dark] .st-paid{color:#6ee7b7}[data-theme=dark] .st-part{color:#fcd34d}[data-theme=dark] .st-late{color:#fda4af}.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;font-weight:600;font-size:13px;transition:.15s}.btn-primary{background:var(--green);color:#fff;box-shadow:0 3px 10px #10b9814d}.btn-primary:hover{filter:brightness(1.05)}.btn-ghost{background:var(--card);border:1px solid var(--line);color:var(--text)}.btn-ghost:hover{border-color:var(--faint)}.btn-danger{background:#f43f5e1a;color:var(--rose);border:1px solid rgba(244,63,94,.3)}.btn-sm{padding:5px 10px;font-size:12px;border-radius:8px}.tabs{display:flex;gap:6px;background:var(--soft2);padding:4px;border-radius:11px;width:fit-content;max-width:100%;overflow-x:auto}.tab{padding:7px 14px;border-radius:8px;font-weight:600;font-size:13px;color:var(--muted);white-space:nowrap}.tab.active{background:var(--card);color:var(--text);box-shadow:0 1px 4px #0f172a1a}.hist{display:flex;flex-direction:column;gap:8px;margin-top:12px}.hrow{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--soft);border-radius:11px;flex-wrap:wrap}.hrow .m{width:86px;flex:none;font-weight:700;font-size:12.5px}.hrow .exp{flex:1;min-width:150px;font-size:12px;color:var(--muted)}.hrow .exp b{color:var(--text);font-size:12.5px}.hrow .amt{font-weight:800;font-size:13.5px;white-space:nowrap}.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:10px}.dtable{width:100%;min-width:680px;border-collapse:collapse;font-size:13px}.dtable th{font-size:10.5px;color:var(--faint);text-align:left;font-weight:800;padding:8px 10px;border-bottom:1.5px solid var(--line);white-space:nowrap;letter-spacing:.4px;text-transform:uppercase}.dtable th.num{text-align:right}.dtable td{padding:11px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle}.dtable .num{text-align:right;font-weight:700;white-space:nowrap}.dtable .sub{font-size:10.5px;color:var(--faint);font-weight:500;margin-top:1px}.dtable tr.group-row td{background:var(--soft);font-weight:800;font-size:12.5px;border-bottom:1px solid var(--line);border-top:1px solid var(--line)}.dtable tbody tr:first-child td{border-top:0}.dtable tr.total-row td{background:var(--soft);font-weight:800;border-top:2px solid var(--line);border-bottom:0}.dtable tr:last-child td{border-bottom:0}.gdot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:-1px}.mini{display:flex;height:12px;border-radius:99px;overflow:hidden;width:78px;background:var(--soft2)}.mini i{height:100%}.dtable td.mcell{padding:6px 8px;text-align:center;font-weight:700;font-size:12px;white-space:nowrap}.dtable td.mcell .got{display:block;font-size:9.5px;font-weight:600;opacity:.85}.cell-ok{background:#10b98124;color:#059669}.cell-part{background:#f59e0b29;color:#b45309}.cell-late{background:#f43f5e1f;color:#e11d48}.cell-wait{background:var(--soft2);color:var(--muted)}.cell-none{color:var(--faint);font-weight:400}[data-theme=dark] .cell-ok{color:#6ee7b7}[data-theme=dark] .cell-part{color:#fcd34d}[data-theme=dark] .cell-late{color:#fda4af}.dtable th.mh{font-size:10px;text-align:center}.setgrid{display:grid;grid-template-columns:330px 1fr;gap:14px}@media(max-width:960px){.setgrid{grid-template-columns:1fr}}.gcard{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:9px;background:var(--card)}.gcard .gn{font-weight:700;font-size:13.5px;display:flex;align-items:center;gap:8px}.gcard .gm{font-size:11.5px;color:var(--faint);margin-top:2px}.gcats{display:flex;flex-wrap:wrap;gap:4px;margin-top:7px}.mcat{display:inline-flex;align-items:center;gap:5px;padding:3px 5px 3px 9px;border-radius:8px;background:var(--soft);font-size:11.5px;color:var(--text);max-width:100%}.mcat .mcx{border:0;background:transparent;color:var(--muted);cursor:pointer;padding:1px 4px;border-radius:6px;font-size:11px;line-height:1.3}.mcat .mcx:hover{background:var(--soft2);color:var(--text)}.kind{font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.3px}.k-exp{background:#10b98126;color:#059669}.k-tr{background:#f43f5e24;color:#e11d48}[data-theme=dark] .k-exp{color:#6ee7b7}[data-theme=dark] .k-tr{color:#fda4af}.catchips{display:flex;flex-wrap:wrap;gap:8px}.catchip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:9px;background:var(--card);border:1px solid var(--line);font-size:12.5px;font-weight:500}.catchip .cdot{width:8px;height:8px;border-radius:50%}.catchip.un{border:1.5px dashed var(--amber);background:#f59e0b14}.catchip.sel{outline:2px solid var(--green);outline-offset:1px}.progress{height:8px;border-radius:99px;background:var(--soft2);overflow:hidden;margin:8px 0 4px}.progress i{display:block;height:100%;border-radius:99px;background:var(--green)}.hbar{display:flex;height:14px;border-radius:99px;overflow:hidden;margin:8px 0}.hbar i{height:100%}.insight{margin-top:14px;padding:12px;background:var(--soft);border-radius:12px;font-size:12.5px;color:var(--muted)}.inp{width:100%;background:var(--soft);border:1px solid var(--line);border-radius:11px;padding:9px 13px;font-size:13.5px;outline:none;transition:.15s}.inp:focus{border-color:var(--green)}label.fld{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:12px 0 5px}.frow{display:flex;gap:10px;flex-wrap:wrap}.frow>*{flex:1;min-width:140px}.modal-mask{position:fixed;top:0;right:0;bottom:0;left:0;background:#0f172a80;z-index:70;display:flex;align-items:center;justify-content:center;padding:16px}.modal{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px;width:100%;max-width:480px;max-height:88vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.modal h3{margin-bottom:4px}.empty{padding:36px 16px;text-align:center;color:var(--faint)}.empty .big{font-size:34px;margin-bottom:8px}.bottomnav,.moresheet{display:none}@media(max-width:860px){.sidebar{display:none}.content{padding:16px 14px 96px}.topbar h1{font-size:18px}.bottomnav{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--card);border-top:1px solid var(--line);padding:8px 6px calc(8px + env(safe-area-inset-bottom));z-index:50;justify-content:space-around}.bnav{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:600;color:var(--faint);padding:4px 10px;border-radius:10px}.bnav .ic{font-size:19px}.bnav.active{color:var(--green)}.moresheet{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:60}.moresheet.open{display:block}.moresheet .mask{position:absolute;top:0;right:0;bottom:0;left:0;background:#0f172a73}.moresheet .sheet{position:absolute;left:0;right:0;bottom:0;background:var(--card);border-radius:20px 20px 0 0;padding:18px}.bars{height:140px}}