@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Sarabun:wght@300;400;500;600;700&display=swap";
:root{--font-family:"Outfit", "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--bg-main:#ffffff8c;--bg-card:#ffffffb3;--bg-card-hover:#ffffffd9;--bg-input:#f1f5f9d9;--border-color:#0000000f;--border-color-glow:#6366f159;--color-primary:#6366f1;--color-primary-glow:#6366f126;--color-income:#10b981;--color-income-glow:#10b98126;--color-expense:#f43f5e;--color-expense-glow:#f43f5e26;--color-warning:#f59e0b;--color-warning-glow:#f59e0b26;--text-primary:#1e293b;--text-secondary:#475569;--text-muted:#94a3b8;--text-dark:#fff;--shadow-premium:0 10px 40px #6366f10d, 0 2px 10px #00000005;--shadow-neon:0 0 25px #6366f140;--shadow-inset:inset 0 2px 4px #0000000d}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{font-family:var(--font-family);color:var(--text-primary);background-color:#f1f5f9;background-image:radial-gradient(at 10% 20%,#f43f5e26 0,#0000 50%),radial-gradient(at 90% 10%,#6366f12e 0,#0000 50%),radial-gradient(at 50% 80%,#10b9811f 0,#0000 50%);background-attachment:fixed;justify-content:center;align-items:center;min-height:100vh;margin:0;display:flex;overflow-x:hidden}.app-container{background-color:var(--bg-main);border:1px solid var(--border-color);width:100%;max-width:440px;height:100vh;max-height:900px;box-shadow:var(--shadow-premium), 0 0 40px #00b4d80d;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:40px;flex-direction:column;display:flex;position:relative;overflow:hidden}@media (max-width:1024px){body{align-items:flex-start}.app-container{border:none;border-radius:0;max-width:100%;height:100vh;max-height:100vh}}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#fff3}.app-header{border-bottom:1px solid var(--border-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:10;background:#ffffffd9;justify-content:space-between;align-items:center;padding:24px 20px 12px;display:flex}.logo-section{align-items:center;gap:10px;display:flex}.logo-icon{background:linear-gradient(135deg, var(--color-primary), var(--color-income));border-radius:12px;justify-content:center;align-items:center;width:38px;height:38px;font-size:20px;font-weight:700;display:flex;box-shadow:0 4px 15px #00b4d84d}.logo-text{letter-spacing:.5px;background:linear-gradient(to right, #0f172a, var(--color-primary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:20px;font-weight:800}.header-actions{align-items:center;gap:12px;display:flex}.action-btn{border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;background:#0000000a;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:16px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex}.action-btn:hover{background:#00000014;border-color:#00000026;transform:scale(1.05)}.app-content{flex-direction:column;flex:1;gap:20px;padding:16px 10px 100px;display:flex;overflow-y:auto}.bottom-navbar{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-top:1px solid var(--border-color);z-index:20;background:#ffffffd9;justify-content:space-around;align-items:center;width:100%;height:76px;padding:0 10px;display:flex;position:absolute;bottom:0;left:0}.nav-item{color:var(--text-muted);cursor:pointer;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:5px;height:100%;font-size:11px;font-weight:500;transition:all .25s;display:flex}.nav-icon{font-size:20px;transition:transform .3s cubic-bezier(.175,.885,.32,1.275)}.nav-item.active{color:var(--color-primary);font-weight:700}.nav-item.active .nav-icon{filter:drop-shadow(0 0 6px var(--color-primary-glow));transform:translateY(-4px)scale(1.15)}.add-floating-btn{background:linear-gradient(135deg, var(--color-primary), #4f46e5);color:#fff;cursor:pointer;z-index:30;border:4px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:58px;height:58px;font-size:24px;font-weight:700;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;bottom:38px;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #6366f166}.add-floating-btn:hover{transform:translate(-50%)scale(1.08)rotate(90deg);box-shadow:0 6px 25px #00b4d899}.glass-card{background:var(--bg-card);border:1px solid var(--border-color);box-shadow:var(--shadow-premium);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:24px;padding:12px;transition:all .3s}.glass-card:hover{background:var(--bg-card-hover);border-color:#ffffff1f}.dashboard-balance{text-align:center;flex-direction:column;gap:8px;padding:24px 10px;display:flex}.balance-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;font-size:13px;font-weight:600}.balance-amount{letter-spacing:-.5px;background:linear-gradient(90deg,#fff,#0cb4d1);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:38px;font-weight:800}.summary-row{grid-template-columns:1fr 1fr;gap:12px;display:grid}.summary-card{border-radius:18px;flex-direction:column;gap:6px;padding:16px;display:flex}.summary-card.income{background:linear-gradient(135deg,#2ec4b61a,#2ec4b605);border:1px solid #2ec4b633}.summary-card.expense{background:linear-gradient(135deg,#e71d361a,#e71d3605);border:1px solid #e71d3633}.summary-label{align-items:center;gap:6px;font-size:12px;font-weight:600;display:flex}.summary-card.income .summary-label{color:var(--color-income)}.summary-card.expense .summary-label{color:var(--color-expense)}.summary-val{font-size:18px;font-weight:700}.section-title{color:var(--text-primary);justify-content:space-between;align-items:center;margin-bottom:12px;font-size:16px;font-weight:700;display:flex}.section-link{color:var(--color-primary);cursor:pointer;font-size:12px}.transaction-list{flex-direction:column;gap:10px;display:flex}.transaction-item{background:#ffffff73;border:1px solid #00000008;border-radius:16px;justify-content:space-between;align-items:center;padding:12px 14px;transition:all .2s;display:flex}.transaction-item:hover{background:#ffffffb3;border-color:#0000000f;transform:translate(2px)}.item-left{flex:1;align-items:center;gap:6px;display:flex}.item-icon{background:#0000000a;border-radius:12px;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;display:flex}.item-details{flex-direction:column;gap:3px;max-width:280px;display:flex}.item-title{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:600;overflow:hidden}.item-meta{color:var(--text-muted);align-items:center;gap:4px;font-size:11px;display:flex}.item-tag{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;background:#00b4d81a;border-radius:4px;max-width:90px;padding:1px 6px;font-size:9px;font-weight:600;overflow:hidden}.item-right{flex-direction:column;align-items:flex-end;gap:4px;display:flex}.item-amount{font-size:15px;font-weight:700}.item-amount.income{color:var(--color-income)}.item-amount.expense{color:var(--color-expense)}.item-delete{color:#0003;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin:-10px;padding:10px;font-size:14px;transition:color .2s,transform .2s;display:flex}.item-delete:hover{color:var(--color-expense);transform:scale(1.2)}.item-delete svg{pointer-events:none}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#0f172a4d;justify-content:center;align-items:center;width:100%;height:100%;padding:20px;animation:.25s ease-out fadeIn;display:flex;position:absolute;top:0;left:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#fff;border:1px solid #00000014;border-radius:24px;flex-direction:column;gap:18px;width:100%;max-width:400px;max-height:90%;padding:24px 20px 32px;animation:.35s cubic-bezier(.34,1.56,.64,1) modalPopIn;display:flex;overflow-y:auto;box-shadow:0 20px 60px #00000026}@keyframes modalPopIn{0%{opacity:0;transform:scale(.9)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}.modal-header{justify-content:space-between;align-items:center;display:flex}.modal-title{font-size:18px;font-weight:700}.modal-close{border:1px solid var(--border-color);color:var(--text-primary);cursor:pointer;background:#ffffff0d;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:14px;display:flex}.form-group{flex-direction:column;gap:6px;display:flex}.form-label{color:var(--text-secondary);font-size:12px;font-weight:600}.type-selector{background:var(--bg-input);border:1px solid var(--border-color);border-radius:12px;grid-template-columns:1fr 1fr;padding:4px;display:grid}.type-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:8px 12px;font-size:13px;font-weight:600;transition:all .25s}.type-btn.active.income{background:var(--color-income);color:var(--text-dark);box-shadow:0 4px 12px var(--color-income-glow)}.type-btn.active.expense{background:var(--color-expense);color:var(--text-primary);box-shadow:0 4px 12px var(--color-expense-glow)}.form-input{background:var(--bg-input);border:1px solid var(--border-color);color:var(--text-primary);font-size:14px;font-family:var(--font-family);border-radius:12px;padding:12px 14px;transition:border-color .2s}.form-input:focus{border-color:var(--color-primary);outline:none}.form-input.amount{text-align:center;letter-spacing:.5px;font-size:26px;font-weight:700}.category-grid{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.category-item{border:1px solid var(--border-color);cursor:pointer;background:#ffffff05;border-radius:12px;flex-direction:column;align-items:center;gap:6px;padding:8px 4px;transition:all .2s;display:flex}.category-item:hover{background:#ffffff0d}.category-item.active{border-color:var(--color-primary);background:#00b4d81a}.category-icon-wrapper{background:#ffffff0d;border-radius:10px;justify-content:center;align-items:center;width:38px;height:38px;font-size:18px;transition:transform .2s;display:flex}.category-item.active .category-icon-wrapper{transform:scale(1.1)}.category-name{color:var(--text-muted);font-size:10px;font-weight:500}.category-item.active .category-name{color:var(--text-primary);font-weight:600}.submit-btn{background:linear-gradient(135deg, var(--color-primary), #0077b6);color:#fff;cursor:pointer;text-align:center;border:none;border-radius:12px;padding:14px;font-size:15px;font-weight:700;transition:all .2s;box-shadow:0 4px 15px #00b4d833}.submit-btn:hover{box-shadow:0 6px 20px #00b4d866}.filter-tabs{background:#0f172a0d;border:1px solid #0000000a;border-radius:12px;grid-template-columns:1fr 1fr;padding:4px;display:grid}.filter-tab{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:8px;padding:8px;font-size:12px;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1)}.filter-tab.active{color:var(--color-primary);background:#fff;box-shadow:0 2px 8px #0000000f}.search-box{background:var(--bg-input);border:1px solid var(--border-color);border-radius:12px;align-items:center;gap:8px;padding:10px 14px;display:flex}.search-input{color:var(--text-primary);font-size:13px;font-family:var(--font-family);background:0 0;border:none;flex:1}.search-input:focus{outline:none}.search-icon{color:var(--text-muted);font-size:14px}.month-navigator{justify-content:space-between;align-items:center;padding:8px 4px;display:flex}.month-nav-btn{color:var(--color-primary);cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;padding:4px 8px;font-size:14px;font-weight:600;display:flex}.month-nav-btn:hover{background:#ffffff08}.month-label{font-size:14px;font-weight:700}.trips-container{flex-direction:column;gap:16px;display:flex}.trip-card{flex-direction:column;gap:4px;display:flex}.trip-card-header{justify-content:space-between;align-items:flex-start;display:flex}.trip-name{font-size:16px;font-weight:700}.trip-dates{color:var(--text-muted);margin-top:1px;font-size:11px}.trip-progress-container{flex-direction:column;gap:4px;display:flex}.trip-progress-bar-bg{background:#ffffff0d;border:1px solid #ffffff05;border-radius:4px;height:8px;overflow:hidden}.trip-progress-bar-fill{background:linear-gradient(to right, var(--color-income), var(--color-primary));border-radius:4px;height:100%;transition:width .5s ease-out}.trip-progress-bar-fill.overbudget{background:linear-gradient(to right, var(--color-expense), #f05)}.trip-budget-stats{justify-content:space-between;font-size:12px;display:flex}.trip-budget-spent{font-weight:600}.trip-budget-total{color:var(--text-muted)}.trip-card-actions{border-top:1px solid #ffffff08;justify-content:space-between;align-items:center;padding-top:2px;display:flex}.trip-status-tag{border-radius:4px;padding:2px 8px;font-size:10px;font-weight:600}.trip-status-tag.active{color:var(--color-income);background:#2ec4b61a}.trip-status-tag.over{color:var(--color-expense);background:#e71d361a}.trip-action-btn{color:var(--text-secondary);cursor:pointer;background:#ffffff0d;border:1px solid #ffffff14;border-radius:20px;align-items:center;gap:4px;padding:6px 12px;font-size:11px;font-weight:600;transition:all .2s;display:inline-flex}.trip-action-btn:hover{background:#ffffff1a;transform:translateY(-1px)}.trip-action-btn.primary{color:var(--color-primary);background:#6366f11f;border:1px solid #6366f126}.trip-action-btn.primary:hover{background:#6366f133}.add-trip-btn-container{z-index:5;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#f1f5f9d9;border-bottom:1px solid #0000000d;margin:0 -10px 10px;padding:12px 10px;position:sticky;top:-16px}.btn-secondary{border:1px dashed var(--border-color);width:100%;color:var(--text-secondary);cursor:pointer;background:#ffffff08;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:12px;font-size:13px;font-weight:600;transition:all .2s;display:flex}.btn-secondary:hover{border-color:var(--color-primary);background:#ffffff0f}.analytics-summary{flex-direction:column;gap:16px;display:flex}.chart-container{justify-content:center;align-items:center;height:200px;margin:10px 0;display:flex;position:relative}.donut-chart-mock{background:conic-gradient(var(--color-expense) 0% 40%, var(--color-warning) 40% 70%, var(--color-primary) 70% 90%, #8e9aaf 90% 100%);border-radius:50%;justify-content:center;align-items:center;width:130px;height:130px;display:flex;box-shadow:0 4px 15px #0000004d}.donut-center-hole{background:#fff;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:90px;height:90px;display:flex}.donut-center-title{color:var(--text-muted);text-transform:uppercase;font-size:9px;font-weight:600}.donut-center-value{font-size:15px;font-weight:700}.chart-legend{grid-template-columns:1fr 1fr;gap:10px;display:grid}.legend-item{align-items:center;gap:8px;font-size:11px;display:flex}.legend-color{border-radius:3px;width:10px;height:10px}.legend-text{color:var(--text-muted);flex:1}.legend-value{font-weight:600}.category-progress-list{flex-direction:column;gap:12px;display:flex}.cat-progress-item{flex-direction:column;gap:5px;display:flex}.cat-progress-meta{justify-content:space-between;font-size:12px;display:flex}.cat-progress-name{align-items:center;gap:6px;font-weight:500;display:flex}.cat-progress-val{font-weight:700}.cat-progress-bar-bg{background:#ffffff08;border-radius:3px;height:6px}.cat-progress-bar-fill{border-radius:3px;height:100%}.empty-state{text-align:center;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:40px 10px;display:flex}.empty-state-icon{opacity:.6;font-size:44px}.empty-state-title{color:var(--text-primary);font-size:14px;font-weight:600}.empty-state-desc{max-width:200px;font-size:11px}.toast-msg{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;z-index:200;pointer-events:none;background:#00b4d8f2;border-radius:12px;padding:8px 16px;font-size:12px;font-weight:600;animation:2.5s forwards fadeInOut;position:absolute;top:80px;left:50%;transform:translate(-50%);box-shadow:0 4px 15px #00b4d84d}@keyframes fadeInOut{0%{opacity:0;transform:translate(-50%,-10px)}10%{opacity:1;transform:translate(-50%)}90%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-10px)}}.settings-section{flex-direction:column;gap:12px;display:flex}.settings-btn-group{grid-template-columns:1fr 1fr;gap:10px;display:grid}.calendar-overlay-input::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0}