:root{--navy:#1f3a5f;--teal:#2a7f8e;--teal-soft:#e3f3f1;--mint:#5fd3c4;--orange:#e8711e;--orange-deep:#c2410c;--orange-soft:#fff1e6;--ink:#17202b;--muted:#5b6b7b;--faint:#9aa7b3;--line:#d6dee5;--line-soft:#e3e9ee;--bg:#f3f6f8;--card:#fff;--warn-bg:#fff4e5;--warn-line:#f5c77e;--warn-ink:#7c3a00;--green:#1d7a4f;--red:#b91c1c;--radius:16px;--radius-sm:12px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body,#root{height:100%;margin:0}body{color:var(--ink);background:var(--bg);overscroll-behavior-y:none;font-family:Sarabun,system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.35}button,input{font-family:inherit;font-size:inherit;color:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.screen{flex-direction:column;height:100%;display:flex;overflow:hidden}.scroll{-webkit-overflow-scrolling:touch;flex-direction:column;flex:1;gap:16px;padding:16px;display:flex;overflow-y:auto}.topbar{background:var(--card);border-bottom:1px solid var(--line-soft);padding:calc(var(--safe-top) + 12px) 16px 12px;flex-direction:column;gap:12px;display:flex}.topbar-row{align-items:center;gap:10px;display:flex}.topbar-title{font-size:20px;font-weight:700}.topbar-sub{color:var(--muted);font-size:13px}.hero{background:var(--navy);color:#fff;padding:calc(var(--safe-top) + 14px) 20px 18px;flex-direction:column;gap:14px;display:flex}.bottombar{background:var(--card);border-top:1px solid var(--line-soft);padding:10px 8px calc(var(--safe-bottom) + 10px);grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;display:grid}.bottombar a{color:var(--muted);flex-direction:column;align-items:center;gap:4px;padding:6px 0;font-size:11px;display:flex}.bottombar a.active{color:var(--teal);font-weight:600}.footer-actions{background:var(--card);border-top:1px solid var(--line-soft);padding:12px 16px calc(var(--safe-bottom) + 14px);flex-direction:column;gap:8px;display:flex}.iconbtn{background:var(--bg);border:0;border-radius:20px;flex:none;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.btn{border-radius:var(--radius-sm);border:0;justify-content:center;align-items:center;gap:8px;height:54px;font-size:16px;font-weight:700;display:flex}.btn-primary{background:var(--teal);color:#fff}.btn-navy{background:var(--navy);color:#fff}.btn-ghost{background:var(--card);border:1px solid var(--line);color:var(--muted);font-size:15px;font-weight:600}.btn-danger{background:var(--card);color:var(--red);border:1px solid #f3c4c4;font-size:15px;font-weight:600}.btn:disabled{opacity:.45}.btn-google{border:1px solid var(--line);color:var(--ink);background:#fff;justify-content:center;align-items:center;gap:10px;font-size:16px;font-weight:700;display:flex;box-shadow:0 1px 2px #0000000f}.divider{color:var(--muted);align-items:center;gap:10px;font-size:12px;display:flex}.divider:before,.divider:after{content:"";background:var(--line);flex:1;height:1px}.chip{border:1px solid var(--line);background:var(--card);white-space:nowrap;border-radius:20px;padding:8px 14px;font-size:13px}.chip.active{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:600}.chips{scrollbar-width:none;gap:8px;display:flex;overflow-x:auto}.chips::-webkit-scrollbar{display:none}.card{background:var(--card);border-radius:var(--radius);flex-direction:column;gap:10px;padding:14px;display:flex}.search{background:var(--bg);border-radius:var(--radius-sm);align-items:center;gap:8px;padding:10px 12px;display:flex}.search input{background:0 0;border:0;outline:none;flex:1;min-width:0}.segment{border-radius:var(--radius-sm);background:#eef2f5;gap:4px;padding:4px;display:flex}.segment button{color:var(--muted);background:0 0;border:0;border-radius:9px;flex:1;padding:10px;font-size:14px;font-weight:500}.segment button.active{background:var(--card);color:var(--navy);font-weight:600;box-shadow:0 1px 2px #17202b14}.section-title{font-size:15px;font-weight:600}.section-title.income{color:var(--teal)}.section-title.expense{color:var(--orange-deep)}.hint{color:var(--muted);text-align:center;font-size:12px}.badge{border-radius:11px;justify-content:center;align-items:center;width:22px;height:22px;display:flex}.badge.done.income{background:var(--teal)}.badge.done.expense{background:var(--orange)}.badge.empty{border:2px solid var(--line)}.pill{color:var(--teal);background:var(--teal-soft);border-radius:20px;padding:6px 12px;font-size:13px}.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.tile{background:var(--card);border-radius:var(--radius);border:2px solid var(--card);flex-direction:column;gap:10px;padding:14px;display:flex;box-shadow:0 1px 2px #17202b0f}.tile.done.income{border-color:var(--teal)}.tile.done.expense{border-color:var(--orange)}.tile-head{justify-content:space-between;align-items:center;display:flex}.tile-name{font-size:16px;font-weight:600}.tile-amount{color:var(--navy);font-size:20px;font-weight:700}.tile-amount.empty{color:var(--faint)}.tile-sub{color:var(--muted);font-size:12px}.roomgrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;display:grid}.room{border-radius:var(--radius-sm);background:var(--card);border:1px solid var(--line);flex-direction:column;justify-content:center;align-items:center;gap:1px;height:56px;padding:0;font-size:15px;font-weight:600;display:flex}.room.done{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:700}.room.done.expense{background:var(--orange);border-color:var(--orange)}.room small{opacity:.9;font-size:11px;font-weight:500}.room{position:relative}.xn{background:#ffffff47;border-radius:8px;padding:2px 4px;font-size:10px;font-weight:700;line-height:1;position:absolute;top:3px;right:4px}.item{position:relative}.item .xn{top:8px;right:8px}.itemgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.item{background:var(--card);border:1px solid var(--line);text-align:left;border-radius:14px;flex-direction:column;gap:8px;min-height:96px;padding:12px 10px;display:flex}.item.done{background:var(--teal);border-color:var(--teal);color:#fff}.item.done.expense{background:var(--orange);border-color:var(--orange)}.item-name{font-size:13px;font-weight:600;line-height:1.25}.item-amount{margin-top:auto;font-size:14px;font-weight:700}.item-amount.empty{color:var(--faint);font-weight:600}.keypad{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.key{border-radius:var(--radius-sm);background:var(--bg);border:0;justify-content:center;align-items:center;height:58px;font-size:24px;font-weight:600;display:flex}.key:active{background:#e3e9ee}.amount-display{color:var(--navy);letter-spacing:-1px;font-size:56px;font-weight:700;line-height:1}.field{flex-direction:column;gap:6px;display:flex}.field label{color:var(--muted);font-size:13px}.field input,.field textarea{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);outline:none;padding:12px;font-size:16px}.field input:focus,.field textarea:focus{border-color:var(--teal)}.list{background:var(--card);border-radius:var(--radius);overflow:hidden}.list-head{border-bottom:1px solid #eef2f5;justify-content:space-between;padding:12px 14px;font-size:14px;font-weight:600;display:flex}.list-row{border-bottom:1px solid var(--bg);text-align:left;background:0 0;border-top:0;border-left:0;border-right:0;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:10px 14px;font-size:14px;display:flex}.list-row:last-child{border-bottom:0}.row{border-bottom:1px solid var(--bg);align-items:center;gap:10px;padding:10px 14px;font-size:14px;display:flex}.row:last-child{border-bottom:0}.select{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);width:100%;padding:12px;font-size:16px}.list-row .amt{white-space:nowrap;font-weight:600}.list-row .sub{color:var(--muted);font-size:12px}.warn{background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn-ink);border-radius:14px;align-items:flex-start;gap:10px;padding:12px 14px;font-size:13px;display:flex}.toast{left:16px;right:16px;bottom:calc(var(--safe-bottom) + 90px);background:var(--ink);color:#fff;text-align:center;z-index:50;border-radius:12px;padding:12px 16px;font-size:14px;position:fixed;box-shadow:0 6px 20px #0003}.offline{background:var(--warn-bg);color:var(--warn-ink);text-align:center;padding:6px;font-size:12px}.kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.kpi{background:var(--card);border-radius:14px;flex-direction:column;gap:4px;padding:12px;display:flex}.kpi .k-label{color:var(--muted);font-size:12px}.kpi .k-value{font-size:18px;font-weight:700}.kpi .k-sub{color:var(--muted);font-size:11px}.bar-row{align-items:center;gap:10px;font-size:13px;display:flex}.bar-row .bar-label{white-space:nowrap;text-overflow:ellipsis;flex:none;width:96px;overflow:hidden}.bar-row .bar-track{background:#eef2f5;border-radius:7px;flex:1;height:14px;overflow:hidden}.bar-row .bar-fill{background:var(--teal);border-radius:7px;height:14px}.bar-row .bar-fill.expense{background:var(--orange)}.bar-row .bar-val{text-align:right;flex:none;width:70px;font-weight:600}table.data{border-collapse:collapse;width:100%;font-size:13px}table.data th{text-align:left;color:var(--muted);border-bottom:1px solid var(--line-soft);padding:8px 6px;font-weight:600}table.data td{border-bottom:1px solid var(--bg);padding:8px 6px}table.data td.num,table.data th.num{text-align:right;white-space:nowrap}.center{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;padding:24px;display:flex}.login{flex-direction:column;gap:14px;width:100%;max-width:400px;display:flex}.spinner{border:3px solid var(--line);border-top-color:var(--teal);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width>=700px){#root{max-width:480px;box-shadow:0 0 0 1px var(--line-soft);background:var(--bg);margin:0 auto}}