: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-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:4px;display:grid}.bottombar a{color:var(--muted);white-space:nowrap;flex-direction:column;align-items:center;gap:3px;padding:6px 0;font-size:10px;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.selected,.item.selected{box-shadow:0 0 0 3px var(--navy)}.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-sm{border-width:2px;width:14px;height:14px}.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)}}.channels{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.channel{border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:12px;flex-direction:column;align-items:center;gap:2px;min-width:72px;padding:8px 12px;font-size:13px;font-weight:600;display:flex}.channel small{opacity:.75;font-size:10px;font-weight:500}.channel.active{background:var(--navy);color:#fff;border-color:var(--navy)}.channel.active small{opacity:.85}.channel.ota.active{background:var(--teal);border-color:var(--teal)}.toggle{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;font-size:14px;display:flex}.toggle .chips{flex:none}.expect{color:var(--muted);align-items:center;gap:6px;font-size:12px;display:flex}@media (width>=760px){body{font-size:14px}.app{grid-template-columns:220px minmax(0,1fr);height:100%;display:grid}.main{min-width:0;height:100%;overflow:hidden}.sidebar{background:var(--navy);color:#fff;padding:calc(var(--safe-top) + 16px) 12px 16px;flex-direction:column;gap:16px;display:flex}.sidebar-brand{align-items:center;gap:10px;padding:0 6px;display:flex}.sidebar-logo{background:var(--teal);border-radius:10px;flex:none;justify-content:center;align-items:center;width:36px;height:36px;font-size:18px;font-weight:700;display:flex}.sidebar-nav{flex-direction:column;gap:2px;display:flex}.sidebar-nav a{color:#ffffffbf;border-radius:10px;align-items:center;gap:12px;padding:10px 12px;font-size:14px;font-weight:500;display:flex}.sidebar-nav a.active{color:#fff;background:#ffffff24;font-weight:600}.sidebar-foot{border-top:1px solid #ffffff26;flex-direction:column;gap:2px;margin-top:auto;padding:12px 6px 0;font-size:13px;display:flex}.sidebar-signout{color:#fff;background:#ffffff1a;border:0;border-radius:8px;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;font-size:13px;display:flex}.scroll{gap:14px;padding:16px 20px}.topbar{gap:10px;padding:10px 20px}.topbar-title{font-size:18px}.hero{gap:10px;padding:12px 20px}.footer-actions{padding:10px 20px 12px}.card{border-radius:12px;gap:8px;padding:12px 14px}.list{border-radius:12px}.list-row{padding:7px 12px;font-size:13px}.list-head{padding:9px 12px;font-size:13px}.row{padding:7px 12px;font-size:13px}.chip{padding:6px 12px;font-size:12px}.btn{border-radius:10px;height:44px;font-size:14px}.iconbtn{width:34px;height:34px}.search{padding:7px 10px}.field input,.field textarea{border-radius:8px;padding:9px 10px;font-size:14px}.field label{font-size:12px}.select{padding:8px 10px;font-size:14px}table.data{font-size:13px}table.data th,table.data td{padding:6px}.kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.kpi .k-value{font-size:22px}.bar-row{font-size:12px}.bar-row .bar-label{width:140px}.tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.tile{border-radius:12px;gap:4px;padding:10px 12px}.tile-head{margin-bottom:2px}.tile-name{font-size:13px}.tile-amount{font-size:18px}.tile-sub{font-size:11px}.badge{width:18px;height:18px}.section-title{text-transform:none;letter-spacing:.2px;font-size:13px}.roomgrid{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px}.room{border-radius:8px;height:46px;font-size:13px}.room small{font-size:10px}.itemgrid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}.item{border-radius:10px;gap:4px;min-height:64px;padding:8px 10px}.item-name{font-size:12px}.item-amount{font-size:13px}.split{grid-template-columns:minmax(0,1fr) 380px;height:100%;display:grid}.split>.pane{border-left:1px solid var(--line-soft);background:var(--card);min-width:0;height:100%;overflow:hidden}.split>.pane.empty{color:var(--faint);text-align:center;justify-content:center;align-items:center;padding:24px;font-size:14px;display:flex}.pane .screen .footer-actions,.pane .screen .topbar{padding-left:16px;padding-right:16px}.pane .screen .scroll{gap:6px;padding:14px 16px}.amount-display{font-size:40px}.keypad{gap:6px}.key{border-radius:8px;height:44px;font-size:20px}.channels{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;display:grid}.channel{border-radius:8px;min-width:0;padding:6px 4px;font-size:12px}.channel small{font-size:9px}.pill{padding:4px 10px;font-size:12px}.login-screen{flex-direction:row}.login-hero{flex:1;justify-content:center;height:100%;padding:40px!important}.login-hero>div:first-child{border-radius:26px;width:88px;height:88px;font-size:40px}.login-screen .center{flex:1;justify-content:center}.login{max-width:380px}.two-col{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:14px;display:grid}.home-wide{grid-template-columns:minmax(0,1fr) 340px;height:100%;display:grid}.home-wide>.pane{border-left:1px solid var(--line-soft);background:var(--card);flex-direction:column;min-width:0;height:100%;display:flex;overflow:hidden}.home-wide>.pane .topbar{padding:10px 16px}.home-wide>.pane .scroll{gap:10px;padding:12px 16px}.report-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:14px;display:grid}.toast{max-width:420px;bottom:20px;left:auto;right:20px}.r-stack{flex-direction:column;gap:14px;display:flex}.r-row{align-items:start;gap:14px;display:grid}.r-2-1{grid-template-columns:2fr 1fr}.r-1-1{grid-template-columns:1fr 1fr}}@media (width<=759px){.r-stack{flex-direction:column;gap:16px;display:flex}}@media (width>=760px){@media (width>=760px) and (width<=999px){.app{grid-template-columns:68px minmax(0,1fr)}.sidebar{padding-left:8px;padding-right:8px}.sidebar-brand>div,.sidebar-nav a span,.sidebar-foot>div,.sidebar-signout span{display:none}.sidebar-nav a{justify-content:center;padding:12px 0}.sidebar-signout{justify-content:center}.split{grid-template-columns:minmax(0,1fr) 340px}.home-wide{grid-template-columns:minmax(0,1fr) 280px}.r-2-1,.r-1-1{grid-template-columns:1fr}}@media (width>=1100px){.split{grid-template-columns:minmax(0,1fr) 400px}.report-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.lock-screen{background:var(--bg)}.lock-screen .key{background:var(--card);border:1px solid var(--line)}#print-host{display:none}@media print{@page{size:A4;margin:12mm}body{background:#fff}#root{display:none!important}#print-host{color:#000;font-size:12px;display:block}#print-host .print-title{margin-bottom:10px;font-size:18px;font-weight:700}#print-host .card,#print-host .list{page-break-inside:avoid;border:1px solid #ddd;border-radius:6px;margin-bottom:10px}#print-host .list-row,#print-host .row{border-bottom:1px solid #eee}#print-host .kpis{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}#print-host .r-row,#print-host .two-col{grid-template-columns:1fr 1fr;gap:10px;display:grid}#print-host button.list-row{background:0 0}#print-host .hint{color:#555}}.menu{z-index:30;background:var(--card);border:1px solid var(--line);border-radius:12px;flex-direction:column;min-width:220px;padding:6px;display:flex;position:absolute;top:40px;right:0;box-shadow:0 8px 24px #17202b24}.menu button{text-align:left;background:0 0;border:0;border-radius:8px;align-items:center;gap:10px;padding:10px 12px;font-size:14px;display:flex}.menu button:hover{background:var(--bg)}}