:root{--bg-main: #F7F9F8;--bg-surface: #FFFFFF;--bg-island: #0F3D2E;--bg-island-light: #164C3A;--primary-900: #0F3D2E;--primary-700: #1B5A43;--primary-100: #E8F1ED;--primary-cta: #0F3D2E;--primary-cta-text: #FFFFFF;--pill-active-bg: #0F3D2E;--pill-active-text: #FFFFFF;--text-main: #17211C;--text-muted: #66736D;--text-on-island: #FFFFFF;--text-on-island-muted: #A3C7B9;--color-income: #2D8B63;--color-income-bg: #EAF6F0;--color-expense: #C86557;--color-expense-bg: #FAECE9;--color-savings: #2D8B63;--color-savings-bg: #EAF6F0;--color-warning: #B97B1F;--color-warning-bg: #FEF6E7;--color-wants: #EA580C;--color-wants-bg: #FFF7ED;--color-needs: #0284C7;--color-needs-bg: #F0F9FF;--color-divider: #D8E2DD;--color-border: #E3EBE7;--radius-card: 20px;--radius-button: 16px;--radius-chip: 12px;--shadow-sm: 0 2px 8px rgba(15, 61, 46, .04);--shadow-md: 0 8px 24px rgba(15, 61, 46, .08);--shadow-float: 0 12px 32px rgba(15, 61, 46, .16);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--tab-bar-height: 64px}[data-theme=dark]{--bg-main: #0B1410;--bg-surface: #14231C;--bg-island: #123326;--bg-island-light: #1A4433;--primary-900: #FFFFFF;--primary-700: #4EE49B;--primary-100: #1B2F26;--primary-cta: #4EE49B;--primary-cta-text: #081610;--pill-active-bg: #FFFFFF;--pill-active-text: #0B241B;--text-main: #FFFFFF;--text-muted: #9BB3A8;--text-on-island: #FFFFFF;--text-on-island-muted: #A3C7B9;--color-income: #4EE49B;--color-income-bg: #143525;--color-expense: #FF7062;--color-expense-bg: #3A1B17;--color-savings: #4EE49B;--color-savings-bg: #143525;--color-warning: #FBBF24;--color-warning-bg: #332711;--color-wants: #FB923C;--color-wants-bg: #382014;--color-needs: #38BDF8;--color-needs-bg: #122B3B;--color-divider: #243B30;--color-border: #243B30;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);--shadow-md: 0 8px 24px rgba(0, 0, 0, .5);--shadow-float: 0 12px 32px rgba(0, 0, 0, .7)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--bg-main);color:var(--text-main);line-height:1.45;font-size:15px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;user-select:none;overflow-x:hidden}input,select,textarea{font-family:inherit;background-color:var(--bg-surface);color:var(--text-main);border-color:var(--color-border)}input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:.7}.app-container{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background-color:var(--bg-main);position:relative;padding-bottom:calc(var(--tab-bar-height) + var(--safe-bottom) + 20px)}.content-area{flex:1;padding:16px;padding-top:max(16px,var(--safe-top))}.tabular-nums{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}.dark-island{background:linear-gradient(145deg,var(--bg-island),var(--bg-island-light));color:var(--text-on-island);border-radius:var(--radius-card);padding:22px 20px;position:relative;overflow:hidden;box-shadow:var(--shadow-md)}.dark-island:after{content:"";position:absolute;top:-40px;right:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,#ffffff14,#fff0 70%);pointer-events:none}.surface-card{background-color:var(--bg-surface);border-radius:var(--radius-card);padding:18px;border:1px solid var(--color-border);box-shadow:var(--shadow-sm);margin-bottom:14px}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:480px;background-color:var(--bg-surface)!important;background:var(--bg-surface)!important;border-top:1px solid var(--color-divider);display:flex;justify-content:space-around;align-items:center;height:var(--tab-bar-height);padding-bottom:var(--safe-bottom);z-index:100;box-shadow:0 -4px 16px #0000000a}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;height:100%;background-color:transparent!important;background:transparent!important;border:none!important;outline:none;color:var(--text-muted);font-size:11px;font-weight:600;cursor:pointer;transition:color .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1);position:relative;-moz-appearance:none;appearance:none;-webkit-appearance:none}.nav-item svg{transition:transform .22s cubic-bezier(.34,1.56,.64,1),color .18s ease;will-change:transform}.nav-item span{transition:color .18s ease,transform .18s ease;will-change:transform;margin-top:2px}.nav-item:before{content:"";position:absolute;top:0;width:0;height:3px;background-color:var(--primary-700);border-radius:0 0 3px 3px;transition:width .24s cubic-bezier(.16,1,.3,1)}.nav-item:hover{background-color:transparent!important;background:transparent!important;color:var(--text-main)}.nav-item:active{background-color:transparent!important;background:transparent!important;transform:scale(.94)}.nav-item:focus{background-color:transparent!important;background:transparent!important;outline:none}.nav-item:disabled{background-color:transparent!important;background:transparent!important;opacity:.4;cursor:not-allowed}.nav-item.active{background-color:transparent!important;background:transparent!important;color:var(--primary-700)}.nav-item.active svg{transform:translateY(-2px) scale(1.12);color:var(--primary-700)}.nav-item.active span{font-weight:700;color:var(--primary-700)}.nav-item.active:before{width:28px}.nav-add-btn{width:48px;height:48px;border-radius:50%;background-color:var(--primary-cta);color:var(--primary-cta-text);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-float);transform:translateY(-8px);border:3px solid var(--bg-surface);cursor:pointer;transition:transform .15s ease}.nav-add-btn:active{transform:translateY(-8px) scale(.92)}.btn-primary{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;background-color:var(--primary-cta);color:var(--primary-cta-text);border:none;border-radius:var(--radius-button);font-size:16px;font-weight:700;cursor:pointer;transition:opacity .15s,transform .15s}.btn-primary:active{opacity:.9;transform:scale(.98)}.btn-secondary{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;background-color:var(--primary-100);color:var(--text-main);border:1px solid var(--color-border);border-radius:var(--radius-button);font-size:15px;font-weight:600;cursor:pointer;transition:background-color .15s}.btn-secondary:active{background-color:var(--color-border)}.btn-danger{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;background-color:var(--color-expense-bg);color:var(--color-expense);border:1px solid var(--color-expense);border-radius:var(--radius-button);font-size:15px;font-weight:600;cursor:pointer}.segmented-control{display:flex;background-color:var(--primary-100);padding:4px;border-radius:14px;gap:4px;margin-bottom:16px;border:1px solid var(--color-border)}.segment-item{flex:1;padding:10px 4px;text-align:center;font-size:14px;font-weight:600;border-radius:10px;color:var(--text-muted);cursor:pointer;transition:all .15s ease;border:none;background:transparent}.segment-item.active{background-color:var(--pill-active-bg);color:var(--pill-active-text);font-weight:800;box-shadow:var(--shadow-sm)}.pill-btn{display:inline-flex;align-items:center;justify-content:center;padding:7px 16px;border-radius:20px;border:1px solid var(--color-border);background-color:var(--bg-surface);color:var(--text-muted);font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer;transition:all .15s ease}.pill-btn:hover{color:var(--text-main)}.pill-btn.active{border-color:transparent;background-color:var(--pill-active-bg);color:var(--pill-active-text);font-weight:800;box-shadow:var(--shadow-sm)}.amount-display-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 0 16px}.amount-input-box{display:flex;align-items:baseline;justify-content:center;gap:6px;width:100%}.amount-input{font-size:38px;font-weight:800;border:none;background:transparent;text-align:center;color:var(--text-main);outline:none;font-variant-numeric:tabular-nums;max-width:280px}.amount-currency-label{font-size:20px;font-weight:700;color:var(--text-muted)}.presets-scroll-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}.preset-chip{padding:10px 4px;background-color:var(--bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-chip);font-size:13px;font-weight:700;color:var(--text-main);text-align:center;cursor:pointer;transition:all .15s}.preset-chip:active{background-color:var(--primary-100);border-color:var(--primary-700);color:var(--primary-900);transform:scale(.96)}.category-select-btn{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background-color:var(--bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-button);cursor:pointer;margin-bottom:16px}.category-badge-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;z-index:200;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s ease}.bottom-sheet{width:100%;max-width:480px;background-color:var(--bg-surface);border-radius:24px 24px 0 0;padding:20px;padding-bottom:max(20px,var(--safe-bottom));max-height:85vh;overflow-y:auto;animation:slideUp .25s cubic-bezier(.16,1,.3,1)}.sheet-handle{width:40px;height:5px;background-color:var(--color-divider);border-radius:3px;margin:0 auto 16px}.toast-container{position:fixed;bottom:calc(var(--tab-bar-height) + var(--safe-bottom) + 12px);left:50%;transform:translate(-50%);z-index:300;width:calc(100% - 32px);max-width:440px;pointer-events:none}.toast{background-color:#17211c;color:#fff;padding:12px 18px;border-radius:14px;box-shadow:var(--shadow-float);display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:600;animation:toastIn .25s ease;pointer-events:auto}.toast-action-btn{background:transparent;color:#55e4a2;border:none;font-weight:700;font-size:13px;cursor:pointer;padding:4px 8px}.chart-container{padding:16px 0 8px}.chart-bars-row{display:flex;justify-content:space-between;align-items:flex-end;height:160px;padding:0 4px;border-bottom:1px solid var(--color-divider);margin-bottom:8px}.chart-day-col{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;cursor:pointer;position:relative}.chart-bars-group{display:flex;gap:3px;align-items:flex-end;width:100%;justify-content:center;height:100%}.chart-bar{width:12px;border-radius:4px 4px 0 0;transition:height .3s ease;min-height:4px}.chart-bar.income{background-color:var(--color-income)}.chart-bar.expense{background-color:var(--color-expense)}.chart-day-label{font-size:11px;font-weight:600;color:var(--text-muted);margin-top:6px}.chart-tooltip{position:absolute;bottom:105%;background-color:#17211c;color:#fff;padding:6px 10px;border-radius:8px;font-size:11px;white-space:nowrap;z-index:10;box-shadow:var(--shadow-md)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pageEnter{0%{opacity:0;transform:translateY(8px) scale(.995)}to{opacity:1;transform:translateY(0) scale(1)}}.page-view{animation:pageEnter .22s cubic-bezier(.16,1,.3,1) forwards;will-change:opacity,transform}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{background:linear-gradient(90deg,var(--color-border) 25%,var(--primary-100) 50%,var(--color-border) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite ease-in-out;border-radius:8px}.skeleton-card{background-color:var(--bg-surface);border-radius:var(--radius-card);padding:16px;border:1px solid var(--color-border);margin-bottom:12px}.skeleton-row{display:flex;align-items:center;gap:12px;padding:10px 0}.skeleton-avatar{width:36px;height:36px;border-radius:10px;flex-shrink:0}.skeleton-line{height:14px;border-radius:6px}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes toastIn{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@media (prefers-reduced-motion: reduce){*,:before,:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.page-view{animation:none!important}}
