:root{color-scheme:light;--ink:#16302f;--sub:#6a7a79;--green:#103f3b;--green2:#1a5d54;--mint:#e8f5ee;--bg:#f7f9f7;--white:#fff;--border:#e3eae6;--warn:#d07b32;--red:#b85355;--shadow:0 15px 40px rgba(26,65,57,.065)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);font-family:system-ui,-apple-system,"Noto Sans Thai","Sarabun",sans-serif;color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #71baac;outline-offset:2px}.app-shell{width:min(100%,510px);min-height:100dvh;margin:0 auto;background:#fbfcfb;position:relative;padding:0 20px 120px;box-shadow:0 0 100px rgba(0,0,0,.045)}.splash{padding:35vh 0;text-align:center;color:var(--sub)}.splash-icon{font-weight:800;font-size:48px;color:var(--green)}
.topbar{padding:27px 0 23px;display:flex;align-items:center;justify-content:space-between;gap:12px}.eyebrow{font-size:12px;letter-spacing:.04em;color:var(--sub);font-weight:650}.topbar h1{font-size:24px;letter-spacing:-.05em;margin:2px 0 0}.top-actions{display:flex;align-items:center;gap:9px}.round-btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);background:white;width:42px;height:42px;border-radius:50%;color:var(--ink);font-size:20px}.round-btn:hover{background:var(--mint)}.main{display:grid;gap:18px}.hero{background:linear-gradient(145deg,#123d3a,#1d5a52);color:white;border-radius:25px;padding:24px;min-height:177px;position:relative;overflow:hidden}.hero:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.10);border-radius:50%;width:230px;height:230px;right:-75px;top:-120px}.hero small{color:#bee0d5;font-size:13px}.hero-value{font-size:34px;line-height:1.4;font-weight:800;letter-spacing:-.03em;margin:9px 0 19px;font-variant-numeric:tabular-nums}.hero-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #ffffff25;padding-top:14px;font-size:12px;color:#d5e9e1}.hero-row strong{color:white;font-size:13px}.hero-pills{display:flex;align-items:center;gap:7px}.hero-pill{padding:5px 9px;border-radius:30px;background:#ffffff17;color:#e5f5ef;font-size:11px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}.section-title h2,.sub-title{font-size:17px;margin:0;letter-spacing:-.02em}.text-btn{background:transparent;border:0;color:var(--green2);font-weight:700;font-size:13px;padding:6px}.two-up{display:grid;grid-template-columns:1fr 1fr;gap:12px}.metric{border:1px solid var(--border);border-radius:20px;background:white;padding:17px 15px;min-height:110px;box-shadow:var(--shadow)}.metric-label{color:var(--sub);font-size:12px;display:flex;gap:7px;align-items:center}.metric-val{font-size:20px;font-weight:790;margin:12px 0 0;letter-spacing:-.025em;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.metric-val.up{color:#247560}.metric-val.down{color:#b75a51}.card{border:1px solid var(--border);background:white;border-radius:21px;padding:18px;box-shadow:var(--shadow)}.muted{color:var(--sub)}.small{font-size:12px}.empty{text-align:center;padding:25px 10px;color:var(--sub);font-size:13px}.empty .emoji{font-size:28px;margin-bottom:6px}.pill{background:var(--mint);padding:6px 10px;border-radius:50px;font-size:11px;font-weight:700;color:#236d5f;white-space:nowrap}.hint{background:#f0f5f2;border-radius:14px;padding:12px;font-size:12px;line-height:1.7;color:#526d65}.footnote{color:#70827e;font-size:11px;line-height:1.65}
.tx-row{display:flex;align-items:center;gap:11px;padding:13px 0;border-bottom:1px solid #edf0ed}.tx-row:last-child{border:0}.tx-icon{background:#f0f5f1;border-radius:14px;width:44px;height:44px;display:grid;place-items:center;font-size:20px;flex:none}.tx-desc{flex:1;min-width:0}.tx-desc strong{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tx-desc small{font-size:11px;color:var(--sub)}.tx-amt{text-align:right;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}.tx-amt.income{color:#21816a}.tx-amt.expense{color:#a4514d}.tx-amt.transfer{color:var(--ink)}.action-link{display:block;border:0;background:transparent;text-align:left;width:100%;padding:0;color:inherit}.bottom-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,510px);padding:10px 18px calc(11px + env(safe-area-inset-bottom));background:#ffffffed;backdrop-filter:blur(18px);border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 1fr 74px 1fr 1fr;gap:3px;z-index:30}.nav-btn{border:0;background:transparent;color:#80908b;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:6px 0;font-size:11px;border-radius:14px}.nav-btn.active{color:var(--green);font-weight:800}.nav-btn span:first-child{font-size:23px;line-height:1.2}.add-nav{width:60px;height:60px;justify-self:center;align-self:start;transform:translateY(-22px);border:0;border-radius:20px;background:var(--green);color:#fff;font-size:32px;box-shadow:0 11px 24px #103f3b44}.add-nav:active{transform:translateY(-19px) scale(.97)}
.tab-banner{display:flex;gap:12px;align-items:flex-start}.tab-banner-icon{display:grid;place-items:center;background:#f1f6f3;width:47px;height:47px;border-radius:14px;font-size:24px}.filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}.chip{border:1px solid var(--border);background:white;border-radius:50px;padding:8px 12px;white-space:nowrap;font-size:12px;font-weight:650;color:#52736d}.chip.active{border-color:var(--green);background:var(--green);color:white}.account-row{display:flex;justify-content:space-between;gap:10px;padding:13px 0;border-bottom:1px solid var(--border);align-items:center}.account-row:last-child{border:0}.account-name{font-size:13px;font-weight:720}.account-val{font-size:14px;font-weight:790;white-space:nowrap}.bar-bg{height:9px;border-radius:50px;background:#edf1ed;overflow:hidden}.bar-fill{height:100%;background:#76a899;border-radius:50px;min-width:0}.bar-row{margin:11px 0}.bar-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:7px;gap:8px}
.overlay{position:fixed;inset:0;background:#0b211d70;z-index:50;display:flex;align-items:flex-end;justify-content:center;overscroll-behavior:contain}.sheet{background:#fff;border-radius:28px 28px 0 0;width:min(100%,510px);padding:0 21px calc(22px + env(safe-area-inset-bottom));max-height:94dvh;overflow:auto;box-shadow:0 -20px 80px #0b211d2a}.grab{height:5px;width:44px;background:#d6e0dc;border-radius:12px;margin:13px auto 16px}.sheet-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}.sheet-header h2{font-size:20px;margin:0}.close{border:0;background:#f0f4f1;border-radius:50%;width:34px;height:34px;font-size:20px;color:#566e65}.type-switch{display:grid;grid-template-columns:repeat(3,1fr);background:#f0f5f2;border-radius:14px;padding:4px;gap:3px}.type-switch button{border:0;background:transparent;padding:10px;border-radius:11px;color:var(--sub);font-size:13px;font-weight:700}.type-switch button.selected{background:#fff;color:var(--green);box-shadow:0 2px 8px #213f3020}.amount-field{text-align:center;font-size:43px;font-weight:800;color:var(--ink);border:0;background:transparent;width:100%;padding:20px 4px 13px;letter-spacing:-.04em;min-width:0}.amount-field::placeholder{color:#bdcfc6}.field-label{display:block;font-size:12px;color:#667d75;font-weight:700;margin-bottom:7px}.form-input{border:1px solid var(--border);border-radius:13px;padding:11px 12px;width:100%;background:white;color:var(--ink);font-size:14px;min-height:45px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form-group{margin-bottom:15px}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.category{border:1px solid var(--border);border-radius:13px;background:#fff;padding:11px 7px;text-align:center;font-size:11px;font-weight:650;min-height:59px}.category strong{display:block;font-size:19px;line-height:1.3;font-weight:500}.category.selected{background:var(--mint);border-color:#65aa98;color:#15594d}.btn-primary{width:100%;border:0;border-radius:15px;background:var(--green);color:#fff;padding:14px;font-weight:780;min-height:51px}.btn-secondary{width:100%;border:1px solid var(--border);border-radius:15px;background:#fff;color:var(--green);padding:12px;font-weight:730;min-height:46px}.btn-danger{color:var(--red);border-color:#eacfcf}.simple-toggle{border:0;background:transparent;color:#247160;font-size:13px;font-weight:730;padding:8px 0;text-align:left}.form-footer{position:sticky;bottom:0;background:white;padding:12px 0 0}.switch-foot{display:flex;gap:8px;align-items:center}.switch-foot input{accent-color:var(--green)}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid var(--border)}.setting-row:last-child{border:0}.setting-row strong{font-size:13px}.setting-row small{display:block;color:var(--sub);font-size:11px;margin-top:3px}.setting-row button{border-radius:11px;border:1px solid var(--border);background:white;padding:8px 11px;font-weight:650;color:var(--green);white-space:nowrap;font-size:12px}.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:#1c3833;color:white;border-radius:12px;z-index:100;padding:12px 15px;min-width:240px;max-width:calc(100% - 36px);text-align:center;font-size:13px;box-shadow:0 6px 25px #0a261f30}.kbd{background:#e8f0ec;color:#356859;font-size:11px;border-radius:6px;padding:3px 6px}.month-box{padding:7px 12px;background:#f0f5f1;border-radius:12px;font-size:12px;font-weight:700;display:flex;gap:4px;align-items:center}.month-box select{border:0;background:transparent;max-width:130px;color:var(--green);font-weight:700}.warning{border-radius:13px;background:#fff5ec;border:1px solid #f1dbc6;padding:12px;color:#98642f;font-size:12px;line-height:1.65}.danger-text{color:#a34d4d}
@media (min-width:620px){body{background:#e8eeea}.app-shell{margin:20px auto;min-height:calc(100dvh - 40px);border-radius:24px;overflow:hidden}.bottom-bar{bottom:0;border-radius:20px 20px 0 0}.overlay{align-items:center}.sheet{border-radius:24px;max-height:90dvh;padding-bottom:24px}}@media (max-width:355px){.app-shell{padding-left:14px;padding-right:14px}.hero-value{font-size:29px}.metric-val{font-size:18px}.bottom-bar{padding-left:10px;padding-right:10px}.sheet{padding-left:15px;padding-right:15px}}

.backup-banner{width:100%;text-align:left;border:1px solid #c5d8ce;background:#edf4ee;color:#224d42;border-radius:14px;padding:12px;font:inherit;font-size:13px}.import-list{max-height:45vh;overflow:auto}.import-row{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-bottom:1px solid #dfe8e2}.import-row small{color:#65776e;overflow-wrap:anywhere}.import-row input{margin-top:5px;min-width:20px;min-height:20px}.sheet .btn-secondary{margin-top:10px}.sheet a{color:#20584b}.sheet .form-group{margin-top:18px}