:root{--color-primary: #00C896;--color-primary-dark: #00A87E;--color-primary-light: #E6FBF5;--color-primary-pale: #F0FDF9;--color-neutral-900: #0D0D0D;--color-neutral-700: #333333;--color-neutral-500: #666666;--color-neutral-400: #999999;--color-neutral-200: #D9D9D9;--color-neutral-100: #F5F5F5;--color-white: #FFFFFF;--color-success: #00C896;--color-warning: #FFB020;--color-error: #FF4D4F;--color-info: #1890FF;--color-success-pale: #F0FDF9;--color-warning-pale: #FFF8ED;--color-error-pale: #FFF2F2;--color-info-pale: #EFF6FF;--color-category-food: #FF6B6B;--color-category-food-pale: #FFF0F0;--color-category-transport: #4ECDC4;--color-category-transport-pale:#F0FAFA;--color-category-shopping: #45B7D1;--color-category-shopping-pale: #EFF9FC;--color-category-entertainment: #96CEB4;--color-category-entertainment-pale: #F2FAF6;--color-category-medical: #FF8B94;--color-category-medical-pale: #FFF1F2;--color-category-education: #F0B429;--color-category-education-pale:#FFFBEB;--color-category-housing: #74B9FF;--color-category-housing-pale: #EFF7FF;--color-category-other: #DDA0DD;--color-category-other-pale: #FAF0FA;--font-family-sans: "Noto Sans TC", "Apple SD Gothic Neo", "Microsoft JhengHei", sans-serif;--font-family-number: "DM Sans", "SF Pro Display", -apple-system, sans-serif;--font-family-mono: "JetBrains Mono", "Fira Code", monospace;--font-size-display: 48px;--font-size-h1: 32px;--font-size-h2: 24px;--font-size-h3: 20px;--font-size-h4: 18px;--font-size-body-l: 16px;--font-size-body-m: 14px;--font-size-body-s: 12px;--font-size-caption: 11px;--font-size-number-xl: 40px;--font-size-number-l: 28px;--font-size-number-m: 20px;--line-height-display: 56px;--line-height-h1: 40px;--line-height-h2: 32px;--line-height-h3: 28px;--line-height-h4: 26px;--line-height-body-l: 24px;--line-height-body-m: 20px;--line-height-body-s: 16px;--line-height-caption: 14px;--font-weight-bold: 700;--font-weight-semibold: 600;--font-weight-medium: 500;--font-weight-regular: 400;--letter-spacing-tight: -.02em;--letter-spacing-normal: 0;--letter-spacing-wide: .04em;--letter-spacing-number: -.03em;--spacing-1: 4px;--spacing-2: 8px;--spacing-3: 12px;--spacing-4: 16px;--spacing-5: 20px;--spacing-6: 24px;--spacing-8: 32px;--spacing-10: 40px;--spacing-12: 48px;--spacing-16: 64px;--page-padding-mobile: 20px;--page-padding-tablet: 32px;--page-padding-desktop: 48px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 9999px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .06);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .1);--shadow-primary: 0 4px 16px rgba(0, 200, 150, .3);--shadow-error: 0 4px 16px rgba(255, 77, 79, .25);--shadow-none: none;--shadow-focus-primary: 0 0 0 3px rgba(0, 200, 150, .2);--shadow-focus-error: 0 0 0 3px rgba(255, 77, 79, .15);--border-width-thin: 1px;--border-width-medium: 1.5px;--border-width-thick: 2px;--border-color-default: var(--color-neutral-200);--border-color-focus: var(--color-primary);--border-color-error: var(--color-error);--duration-instant: .1s;--duration-fast: .2s;--duration-normal: .3s;--duration-slow: .4s;--duration-enter: .6s;--duration-number: .8s;--duration-progress: 1s;--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--ease-spring: cubic-bezier(.34, 1.56, .64, 1);--ease-spring-soft:cubic-bezier(.25, 1.3, .5, 1);--height-button-lg: 52px;--height-button-md: 44px;--height-button-sm: 36px;--height-input: 52px;--height-bottom-nav: 72px;--height-top-bar: 56px;--height-fab: 56px;--height-transaction: 64px;--max-width-content: 1280px;--max-width-card: 480px;--breakpoint-mobile: 375px;--breakpoint-tablet: 768px;--breakpoint-desktop: 1280px;--z-base: 0;--z-card: 10;--z-sticky: 100;--z-overlay: 200;--z-drawer: 300;--z-modal: 400;--z-toast: 500;--z-tooltip: 600}@media(prefers-color-scheme:dark){:root{--color-neutral-900: #FFFFFF;--color-neutral-700: #E5E5E5;--color-neutral-500: #AAAAAA;--color-neutral-400: #777777;--color-neutral-200: #333333;--color-neutral-100: #1A1A1A;--color-white: #0D0D0D;--color-primary-pale: rgba(0, 200, 150, .08);--color-primary-light: rgba(0, 200, 150, .15)}}.font-number{font-family:var(--font-family-number);letter-spacing:var(--letter-spacing-number);font-variant-numeric:tabular-nums}.amount-positive{color:var(--color-success);font-family:var(--font-family-number);letter-spacing:var(--letter-spacing-number)}.amount-negative{color:var(--color-error);font-family:var(--font-family-number);letter-spacing:var(--letter-spacing-number)}.card{background:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--spacing-4)}.card-elevated{background:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);padding:var(--spacing-5)}.btn-primary{background:var(--color-primary);color:var(--color-white);border-radius:var(--radius-full);height:var(--height-button-lg);font-size:var(--font-size-body-l);font-weight:var(--font-weight-semibold);box-shadow:var(--shadow-primary);transition:transform var(--duration-fast) var(--ease-out),background var(--duration-fast) var(--ease-out)}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}@keyframes progressFill{0%{width:0}to{width:var(--progress-value, 0%)}}.progress-bar{animation:progressFill var(--duration-progress) var(--ease-out) forwards}@keyframes countUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.number-animate{animation:countUp var(--duration-number) var(--ease-out) forwards}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.bottom-sheet{animation:slideUp var(--duration-slow) var(--ease-spring)}@keyframes confettiPop{0%{transform:scale(0) rotate(0);opacity:0}50%{transform:scale(1.3) rotate(180deg);opacity:1}to{transform:scale(1) rotate(360deg);opacity:1}}.success-icon{animation:confettiPop var(--duration-enter) var(--ease-spring) forwards}@keyframes toastIn{0%{transform:translateY(-16px);opacity:0}to{transform:translateY(0);opacity:1}}.toast{animation:toastIn var(--duration-normal) var(--ease-spring)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family-sans);color:var(--color-neutral-700);background:var(--color-neutral-100);line-height:var(--line-height-body-m);min-height:100vh;overflow-x:hidden}#app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--color-white);position:relative;display:flex;flex-direction:column;box-shadow:0 0 40px #0000000f}.top-bar{height:var(--height-top-bar);display:flex;align-items:center;justify-content:space-between;padding:0 var(--page-padding-mobile);background:var(--color-white);position:sticky;top:0;z-index:var(--z-sticky);border-bottom:1px solid var(--color-neutral-100)}.page-title{font-size:var(--font-size-h3);font-weight:var(--font-weight-semibold);color:var(--color-neutral-900);letter-spacing:var(--letter-spacing-tight)}#top-bar-actions{display:flex;gap:var(--spacing-2)}.page-container{flex:1;padding:var(--spacing-5) var(--page-padding-mobile);padding-bottom:calc(var(--height-bottom-nav) + var(--spacing-5));overflow-y:auto;-webkit-overflow-scrolling:touch}.page-container.no-padding{padding:0;padding-bottom:var(--height-bottom-nav)}.tab-bar{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:480px;height:var(--height-bottom-nav);background:var(--color-white);display:flex;align-items:center;justify-content:space-around;border-top:1px solid var(--color-neutral-100);z-index:var(--z-sticky);padding-bottom:env(safe-area-inset-bottom,0)}.tab-item{display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:none;cursor:pointer;padding:var(--spacing-2) var(--spacing-3);color:var(--color-neutral-400);transition:color var(--duration-fast) var(--ease-out);-webkit-tap-highlight-color:transparent}.tab-item.active{color:var(--color-primary)}.tab-icon{width:22px;height:22px}.tab-label{font-size:11px;font-weight:var(--font-weight-medium);letter-spacing:.02em}.tab-item-add{position:relative;top:-8px}.tab-add-btn{width:48px;height:48px;border-radius:var(--radius-full);background:var(--color-primary);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-primary);transition:transform var(--duration-fast) var(--ease-spring),background var(--duration-fast) var(--ease-out)}.tab-add-btn svg{width:22px;height:22px;color:#fff}.tab-item-add:active .tab-add-btn{transform:scale(.92)}.tab-item-add .tab-label{margin-top:2px}.section-card{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--spacing-5);box-shadow:var(--shadow-sm);border:1px solid var(--color-neutral-100)}.section-title{font-size:var(--font-size-body-s);font-weight:var(--font-weight-semibold);color:var(--color-neutral-400);text-transform:uppercase;letter-spacing:var(--letter-spacing-wide);margin-bottom:var(--spacing-4)}.amount-display{font-family:var(--font-family-number);letter-spacing:var(--letter-spacing-number);font-variant-numeric:tabular-nums}.amount-xl{font-size:var(--font-size-number-xl);font-weight:var(--font-weight-bold);line-height:1.2}.amount-lg{font-size:var(--font-size-number-l);font-weight:var(--font-weight-semibold)}.amount-md{font-size:var(--font-size-number-m);font-weight:var(--font-weight-medium)}.progress-track{width:100%;height:8px;background:var(--color-neutral-100);border-radius:var(--radius-full);overflow:hidden}.progress-fill{height:100%;border-radius:var(--radius-full);background:var(--color-primary);transition:width var(--duration-progress) var(--ease-out)}.progress-fill.warning{background:var(--color-warning)}.progress-fill.danger{background:var(--color-error)}.transaction-item{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-3) 0;border-bottom:1px solid var(--color-neutral-100);cursor:pointer;transition:background var(--duration-fast) var(--ease-out)}.transaction-item:last-child{border-bottom:none}.transaction-item:active{background:var(--color-neutral-100);border-radius:var(--radius-md)}.transaction-icon{width:42px;height:42px;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}.transaction-info{flex:1;min-width:0}.transaction-category{font-size:var(--font-size-body-m);font-weight:var(--font-weight-medium);color:var(--color-neutral-900)}.transaction-note{font-size:var(--font-size-body-s);color:var(--color-neutral-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transaction-amount{font-family:var(--font-family-number);font-size:var(--font-size-number-m);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-number);text-align:right}.transaction-amount.expense{color:var(--color-neutral-900)}.transaction-amount.income{color:var(--color-success)}.category-tag{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-3);border-radius:var(--radius-full);font-size:var(--font-size-body-s);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);border:1.5px solid transparent}.category-tag.selected{border-color:currentColor;transform:scale(1.05)}.category-tag:active{transform:scale(.95)}.keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--color-neutral-100);border-radius:var(--radius-xl);overflow:hidden}.keypad-btn{background:var(--color-white);border:none;height:56px;font-family:var(--font-family-number);font-size:var(--font-size-h3);font-weight:var(--font-weight-medium);color:var(--color-neutral-900);cursor:pointer;transition:background var(--duration-instant) var(--ease-out);display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}.keypad-btn:active{background:var(--color-neutral-100)}.keypad-btn.action{color:var(--color-primary);font-weight:var(--font-weight-semibold)}.keypad-btn.submit{background:var(--color-primary);color:#fff;font-weight:var(--font-weight-bold)}.keypad-btn.submit:active{background:var(--color-primary-dark)}.keypad-btn.delete{color:var(--color-neutral-400)}.input-field{width:100%;height:var(--height-input);padding:0 var(--spacing-4);border:var(--border-width-thin) solid var(--border-color-default);border-radius:var(--radius-md);font-family:var(--font-family-sans);font-size:var(--font-size-body-l);color:var(--color-neutral-900);background:var(--color-white);transition:border-color var(--duration-fast) var(--ease-out),box-shadow var(--duration-fast) var(--ease-out)}.input-field::placeholder{color:var(--color-neutral-400)}.input-field:focus{outline:none;border-color:var(--color-primary);box-shadow:var(--shadow-focus-primary)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);border:none;cursor:pointer;font-family:var(--font-family-sans);font-weight:var(--font-weight-semibold);transition:all var(--duration-fast) var(--ease-out);-webkit-tap-highlight-color:transparent}.btn-primary{background:var(--color-primary);color:#fff;border-radius:var(--radius-full);height:var(--height-button-lg);padding:0 var(--spacing-8);font-size:var(--font-size-body-l);box-shadow:var(--shadow-primary)}.btn-primary:hover{background:var(--color-primary-dark);transform:scale(1.02)}.btn-primary:active{transform:scale(.96)}.btn-secondary{background:var(--color-neutral-100);color:var(--color-neutral-700);border-radius:var(--radius-full);height:var(--height-button-md);padding:0 var(--spacing-5);font-size:var(--font-size-body-m)}.btn-secondary:active{background:var(--color-neutral-200)}.btn-ghost{background:transparent;color:var(--color-primary);border-radius:var(--radius-md);height:var(--height-button-sm);padding:0 var(--spacing-3);font-size:var(--font-size-body-m)}.btn-ghost:active{background:var(--color-primary-pale)}.btn-block{width:100%}.btn-danger{background:var(--color-error);color:#fff;border-radius:var(--radius-full);height:var(--height-button-md);padding:0 var(--spacing-5);font-size:var(--font-size-body-m);box-shadow:var(--shadow-error)}.toast-container{position:fixed;top:var(--spacing-5);left:50%;transform:translate(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--spacing-2);pointer-events:none;max-width:420px;width:90%}.toast-item{padding:var(--spacing-3) var(--spacing-4);border-radius:var(--radius-lg);font-size:var(--font-size-body-m);font-weight:var(--font-weight-medium);box-shadow:var(--shadow-md);animation:toastIn var(--duration-normal) var(--ease-spring);pointer-events:auto}.toast-success{background:var(--color-primary);color:#fff}.toast-warning{background:var(--color-warning);color:var(--color-neutral-900)}.toast-error{background:var(--color-error);color:#fff}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;z-index:var(--z-modal);display:flex;align-items:flex-end;justify-content:center;transition:opacity var(--duration-normal) var(--ease-out)}.modal-overlay.hidden{display:none}.modal-content{background:var(--color-white);border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;width:100%;max-width:480px;max-height:85vh;overflow-y:auto;padding:var(--spacing-6);animation:slideUp var(--duration-slow) var(--ease-spring)}.modal-handle{width:40px;height:4px;background:var(--color-neutral-200);border-radius:var(--radius-full);margin:0 auto var(--spacing-5)}.modal-title{font-size:var(--font-size-h3);font-weight:var(--font-weight-semibold);color:var(--color-neutral-900);margin-bottom:var(--spacing-5)}.segment-tabs{display:flex;background:var(--color-neutral-100);border-radius:var(--radius-full);padding:3px;gap:2px}.segment-tab{flex:1;padding:var(--spacing-2) var(--spacing-3);border:none;background:transparent;border-radius:var(--radius-full);font-size:var(--font-size-body-s);font-weight:var(--font-weight-medium);color:var(--color-neutral-400);cursor:pointer;transition:all var(--duration-fast) var(--ease-out);font-family:var(--font-family-sans)}.segment-tab.active{background:var(--color-white);color:var(--color-neutral-900);box-shadow:var(--shadow-sm)}.date-group-header{font-size:var(--font-size-body-s);font-weight:var(--font-weight-semibold);color:var(--color-neutral-400);padding:var(--spacing-4) 0 var(--spacing-2);display:flex;justify-content:space-between;align-items:center}.date-group-total{font-family:var(--font-family-number);color:var(--color-neutral-500);font-size:var(--font-size-body-s)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-16) var(--spacing-6);text-align:center}.empty-state-icon{font-size:48px;margin-bottom:var(--spacing-4)}.empty-state-text{font-size:var(--font-size-body-l);color:var(--color-neutral-400);margin-bottom:var(--spacing-5)}.success-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#fffffff2;z-index:var(--z-modal)}.success-content{text-align:center}.success-check{width:80px;height:80px;border-radius:50%;background:var(--color-primary-light);display:flex;align-items:center;justify-content:center;margin:0 auto var(--spacing-4);animation:confettiPop var(--duration-enter) var(--ease-spring) forwards}.success-check svg{width:40px;height:40px;color:var(--color-primary)}.success-text{font-size:var(--font-size-h3);font-weight:var(--font-weight-semibold);color:var(--color-neutral-900)}.success-amount{font-family:var(--font-family-number);font-size:var(--font-size-number-l);font-weight:var(--font-weight-bold);color:var(--color-primary);margin-top:var(--spacing-2)}.chart-container{position:relative;width:100%;aspect-ratio:1;max-height:260px;margin:0 auto}.chart-container-bar,.chart-container-line{position:relative;width:100%;height:200px}.settings-list{list-style:none}.settings-item{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-4) 0;border-bottom:1px solid var(--color-neutral-100);cursor:pointer;transition:background var(--duration-fast)}.settings-item:last-child{border-bottom:none}.settings-item:active{background:var(--color-neutral-100)}.settings-item-left{display:flex;align-items:center;gap:var(--spacing-3)}.settings-item-icon{width:36px;height:36px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:18px}.settings-item-label{font-size:var(--font-size-body-l);color:var(--color-neutral-900)}.settings-item-arrow{color:var(--color-neutral-400);font-size:18px}.budget-card{background:var(--color-white);border:1px solid var(--color-neutral-100);border-radius:var(--radius-lg);padding:var(--spacing-4);margin-bottom:var(--spacing-3)}.budget-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-2)}.budget-card-category{display:flex;align-items:center;gap:var(--spacing-2);font-size:var(--font-size-body-m);font-weight:var(--font-weight-medium)}.budget-card-amount{font-family:var(--font-family-number);font-size:var(--font-size-body-m);color:var(--color-neutral-500)}.budget-card-remaining{font-family:var(--font-family-number);font-size:var(--font-size-body-s);color:var(--color-neutral-400);margin-top:var(--spacing-2);text-align:right}.fade-in{animation:fadeIn var(--duration-normal) var(--ease-out)}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.gap-sm{gap:var(--spacing-2)}.gap-md{gap:var(--spacing-3)}.gap-lg{gap:var(--spacing-5)}.mt-sm{margin-top:var(--spacing-2)}.mt-md{margin-top:var(--spacing-4)}.mt-lg{margin-top:var(--spacing-6)}.mb-sm{margin-bottom:var(--spacing-2)}.mb-md{margin-bottom:var(--spacing-4)}.mb-lg{margin-bottom:var(--spacing-6)}.text-center{text-align:center}.flex{display:flex}.flex-between{display:flex;justify-content:space-between;align-items:center}.flex-col{display:flex;flex-direction:column}::-webkit-scrollbar{width:0;background:transparent}