@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap');
:root{font-family:'IBM Plex Sans Thai',system-ui,sans-serif;color:#202225;background:#f3f4f6;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #7aa8ff;outline-offset:2px}h1,h2,h3,p{margin-top:0}.shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:276px;background:#fff;border-right:1px solid #e0e2e5;padding:20px 16px;display:flex;flex-direction:column;overflow-y:auto;z-index:2}.brand{display:flex;align-items:center;gap:10px;margin-bottom:20px}.brand-icon{display:grid;place-items:center;width:40px;height:40px;background:#1b1d20;color:white;border-radius:11px;font-size:23px}.brand strong{display:block;font-size:17px;line-height:1.15}.brand small{display:block;color:#797e84;font-size:12px}.sidebar-total{border:1px solid #dfe1e4;border-radius:12px;background:#f8f9fa;padding:14px 16px;margin-bottom:16px}.sidebar-total span{display:block;font-size:12px;color:#777d83}.sidebar-total strong{display:block;font-size:21px;white-space:nowrap}.main-nav{display:grid;gap:4px;margin-bottom:20px}.nav-item,.person-all,.person-row,.account-row,.side-add{width:100%;border:0;background:transparent;text-align:left;color:inherit}.nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;font-weight:600}.nav-item span{font-size:19px;width:22px;text-align:center}.nav-item.active,.person-all.chosen,.person-row.chosen,.account-row.chosen{background:#f0f1f2}.side-heading{color:#8b9095;text-transform:uppercase;font-size:11px;letter-spacing:.07em;font-weight:700;padding:0 12px 8px}.person-all{padding:9px 12px;border-radius:8px;font-size:14px}.person-list{padding:9px 0}.person-group{margin:4px 0 12px}.person-row,.account-row{display:flex;align-items:center;gap:8px;border-radius:8px;padding:7px 9px;font-size:13px}.person-row{font-weight:700}.person-row span,.account-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.person-row b,.account-row b{font-size:12px;font-weight:600;white-space:nowrap;color:#60656a}.account-row{padding-left:28px}.dot{flex:none;width:8px;height:8px;background:#23a677;border-radius:100%}.dot.credit{background:#df5360}.dot.investment{background:#4788df}.side-add{padding:8px 28px;font-size:13px;font-weight:600}.side-add:hover,.nav-item:hover,.person-row:hover,.account-row:hover{background:#f0f1f2}.main{margin-left:276px;padding:25px 32px 80px;max-width:1600px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;color:#7a8085;text-transform:uppercase;margin-bottom:2px}.topbar h1{font-size:27px;letter-spacing:-.035em;margin:0}.top-actions{display:flex;gap:8px}.primary,.secondary,.icon-button{border-radius:9px;padding:9px 14px;font-weight:700;min-height:42px}.primary{border:1px solid #181a1d;background:#181a1d;color:white}.secondary{border:1px solid #d9dcdf;background:white;color:#25282b}.icon-button{display:grid;place-items:center;width:42px;padding:0;border:1px solid #d9dcdf;background:white;color:#222;font-size:21px}.primary:hover{background:#383b40}.secondary:hover,.icon-button:hover{background:#f2f3f4}.source-note{padding:10px 13px;background:#eef3f8;color:#536272;border-radius:9px;font-size:12px;line-height:1.5;margin-bottom:18px}.notice{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#e9f7ef;color:#24664a;border:1px solid #b7e5cb;border-radius:8px;padding:9px 12px;margin:0 0 14px}.notice button{background:transparent;border:0;font-size:22px;color:inherit}.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}.month-control{display:flex;align-items:center;gap:8px;color:#62686d;font-weight:600;font-size:14px}.month-control input{border:1px solid #d9dcdf;background:#fff;padding:8px 10px;border-radius:8px;min-height:42px;color:#232629}.muted{color:#798087;font-size:13px}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:18px}.metrics article,.panel,.budget-card,.budget-intro,.reserve-card{background:white;border:1px solid #e0e2e5;border-radius:12px}.metrics article{padding:19px}.metrics span{display:block;font-size:13px;color:#858a8f;margin-bottom:6px}.metrics strong{font-size:25px;letter-spacing:-.03em;overflow-wrap:anywhere}.negative{color:#d64853!important}.positive{color:#109668!important}.overview-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:18px;align-items:start}.panel{padding:18px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.panel-head h2,.settings-panel h2{font-size:17px;margin:0}.text-button{border:0;background:transparent;color:#3d69a2;font-weight:700;padding:4px;font-size:13px}.lower{margin-top:18px}.empty{padding:24px 8px;text-align:center;color:#8a8f94;font-size:14px}.transaction-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #e8e9eb}.transaction-mark{display:grid;place-items:center;width:27px;height:27px;flex:none;border-radius:50%;background:#eaf7f0;color:#219667;font-weight:700}.transaction-mark.expense{background:#fff0f1;color:#d85a64}.transaction-mark.transfer{background:#eef2ff;color:#5d76bd}.transaction-copy{flex:1;min-width:0;display:grid;gap:1px}.transaction-copy strong{font-size:14px}.transaction-copy small,.transaction-copy time{color:#7b8187;font-size:12px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transaction-row>b{font-size:15px;white-space:nowrap}.row-action{border:0;background:transparent;color:#8d9297;font-size:20px;line-height:1;padding:4px}.row-action:hover{color:#1c1e20}.category-row{display:grid;grid-template-columns:1fr auto;gap:5px;margin:12px 0;font-size:14px}.category-row b{font-size:13px}.bar{grid-column:1/-1;height:5px;border-radius:99px;background:#edf0f2;overflow:hidden}.bar i{display:block;height:100%;background:#202326;border-radius:99px}.segmented{display:flex;border:1px solid #d8dcdf;background:white;border-radius:9px;padding:3px}.segmented button{border:0;background:transparent;border-radius:6px;padding:7px 15px;font-weight:700;color:#6e7378}.segmented button.active{background:#1c1e21;color:white}.budget-toolbar .secondary{margin-left:auto}.budget-intro{display:flex;justify-content:space-between;gap:22px;padding:24px 26px;background:linear-gradient(115deg,#fff,#f9fafb);margin-bottom:16px}.budget-intro h2{font-size:22px;margin:0 0 6px}.budget-intro p:last-child{font-size:13px;color:#758087;line-height:1.5;margin:0;max-width:540px}.budget-total{text-align:right;min-width:220px}.budget-total span,.budget-total small{display:block;color:#747c83;font-size:13px}.budget-total strong{display:block;font-size:29px;line-height:1.3;white-space:nowrap}.reserve-card{display:flex;align-items:center;gap:14px;padding:15px 19px;background:#edf5fb;border-color:#d3e7f7;margin-bottom:16px}.reserve-card>span{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#d8eaf7;color:#3d7aa6;font-size:22px}.reserve-card>div{flex:1}.reserve-card strong,.reserve-card small{display:block}.reserve-card strong{font-size:14px}.reserve-card small{font-size:12px;color:#6c8191}.reserve-card b{white-space:nowrap;font-size:16px;color:#2b688f}.budget-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.budget-card{padding:18px}.budget-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;min-height:68px}.budget-card-head span{font-size:11px;color:#8c9297}.budget-card h3{font-size:15px;line-height:1.35;margin:4px 0 10px;overflow-wrap:anywhere}.budget-figures{display:flex;align-items:baseline;gap:7px;margin-bottom:12px}.budget-figures strong{font-size:22px;white-space:nowrap}.budget-figures span{font-size:12px;color:#8b9196}.progress{height:8px;border-radius:99px;background:#ebedef;overflow:hidden}.progress i{display:block;height:100%;background:#202427;border-radius:99px}.progress i.over{background:#e45b64}.budget-foot{display:flex;justify-content:space-between;color:#797f84;font-size:12px;margin-top:8px}.wide{grid-column:1/-1}.account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.manage-account{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid #eceef0}.manage-account>div{flex:1;min-width:0}.manage-account strong,.manage-account small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.manage-account strong{font-size:14px}.manage-account small{color:#8c9297;font-size:12px}.manage-account>b{white-space:nowrap;font-size:13px}.settings-panel{max-width:700px;padding:24px}.settings-panel p{font-size:14px;line-height:1.55;color:#697077;margin:12px 0 20px}.settings-actions{display:flex;gap:10px;flex-wrap:wrap}.file-label{display:inline-flex;align-items:center;cursor:pointer}.file-label input{display:none}.settings-panel .small-note{font-size:12px;margin-bottom:0}.modal-backdrop{position:fixed;inset:0;background:#0e1115a8;z-index:10;display:grid;place-items:center;padding:16px}.dialog{width:min(100%,560px);max-height:min(90vh,800px);overflow:auto;background:white;border-radius:15px;padding:22px;box-shadow:0 24px 80px #0003}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.dialog-head h2{font-size:20px;margin:0}.dialog-head .icon-button{border:0}.dialog form>label,.form-grid>label{display:grid;gap:5px;font-size:13px;color:#555c62;font-weight:600}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.dialog input,.dialog select{width:100%;border:1px solid #d6d9dc;background:white;border-radius:8px;padding:10px;color:#202427;min-height:42px}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}.dialog-actions .danger-text{margin-right:auto;border:0;background:none;color:#d14954;font-weight:700}.form-hint{font-size:12px;color:#7d858b;margin:12px 0 0}.mobile-nav{display:none}[hidden]{display:none!important}
:root[data-theme="dark"]{color:#e8eaec;background:#131619}:root[data-theme="dark"] .sidebar,:root[data-theme="dark"] .panel,:root[data-theme="dark"] .metrics article,:root[data-theme="dark"] .budget-card,:root[data-theme="dark"] .budget-intro,:root[data-theme="dark"] .dialog,:root[data-theme="dark"] .segmented,:root[data-theme="dark"] .secondary,:root[data-theme="dark"] .icon-button,:root[data-theme="dark"] .month-control input,:root[data-theme="dark"] .dialog input,:root[data-theme="dark"] .dialog select{background:#1d2125;color:#e8eaec;border-color:#383d42}:root[data-theme="dark"] .sidebar-total{background:#24282c;border-color:#383d42}:root[data-theme="dark"] .source-note{background:#21303a;color:#b4c9d6}:root[data-theme="dark"] .reserve-card{background:#1d3444;border-color:#35536a}:root[data-theme="dark"] .reserve-card strong{color:#e8eaec}:root[data-theme="dark"] .nav-item.active,:root[data-theme="dark"] .person-all.chosen,:root[data-theme="dark"] .person-row.chosen,:root[data-theme="dark"] .account-row.chosen,:root[data-theme="dark"] .nav-item:hover,:root[data-theme="dark"] .person-row:hover,:root[data-theme="dark"] .account-row:hover{background:#30363b}:root[data-theme="dark"] .transaction-row,:root[data-theme="dark"] .manage-account{border-color:#343a3f}:root[data-theme="dark"] .progress,:root[data-theme="dark"] .bar{background:#353b40}:root[data-theme="dark"] .progress i,:root[data-theme="dark"] .bar i{background:#b7c0c8}:root[data-theme="dark"] .segmented button.active{background:#e7e9eb;color:#202326}
.account-adjustment{font-size:12px;color:#9a6970;line-height:1.5;padding:8px 0 0;border-top:1px solid #eceef0}.account-adjustment:last-child{margin-bottom:0}
@media(max-width:1180px){.budget-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.overview-grid{grid-template-columns:1fr}.main{padding:23px 22px 80px}}@media(max-width:760px){.sidebar{display:none}.main{margin:0;padding:18px 16px 90px}.topbar h1{font-size:22px}.top-actions .primary{font-size:13px;padding:8px 10px}.source-note{font-size:11px}.metrics{gap:8px}.metrics article{padding:13px}.metrics span{font-size:11px;min-height:32px}.metrics strong{font-size:18px}.mobile-nav{position:fixed;inset:auto 0 0;background:#fff;border-top:1px solid #e1e4e6;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);padding:5px 4px max(5px,env(safe-area-inset-bottom))}.mobile-nav button{display:grid;justify-items:center;gap:1px;border:0;background:transparent;color:#858b90;font-size:11px;padding:5px}.mobile-nav button span{font-size:21px}.mobile-nav button.active{color:#16191b;font-weight:700}.budget-intro{display:block;padding:18px}.budget-intro h2{font-size:19px}.budget-total{text-align:left;margin-top:14px}.budget-total strong{font-size:26px}.account-grid{grid-template-columns:1fr}:root[data-theme="dark"] .mobile-nav{background:#1d2125;border-color:#383d42}:root[data-theme="dark"] .mobile-nav button.active{color:white}}@media(max-width:520px){.budget-grid{grid-template-columns:1fr}.budget-toolbar .secondary{margin-left:0}.toolbar{gap:8px}.reserve-card{padding:12px;gap:9px}.reserve-card b{font-size:13px}.transaction-row{gap:7px}.transaction-row>b{font-size:13px}.row-action{font-size:17px;padding:2px}.dialog{padding:18px}.form-grid{grid-template-columns:1fr}}