:root{--color-surface-page: #f6f7f4;--color-surface-raised: #ffffff;--color-surface-muted: #eef0eb;--color-surface-row: #f8faf8;--color-text-primary: #0f172a;--color-text-secondary: #64748b;--color-text-inverse: #ffffff;--color-border-subtle: #e2e8f0;--color-border-strong: #cbd5e1;--color-accent: #0d9488;--color-accent-hover: #0f766e;--color-accent-muted: rgba(13, 148, 136, .12);--color-ring-focus: rgba(13, 148, 136, .25);--color-danger: #dc2626;--color-danger-muted: rgba(220, 38, 38, .12);--color-warning: #d97706;--color-success: #15803d;--chart-1: #0d9488;--chart-2: #0369a1;--chart-3: #6366f1;--chart-4: #b45309;--chart-5: #7c3aed;--chart-6: #be185d;--shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);--shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);--shadow-md: 0 8px 24px rgba(15, 23, 42, .08);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--font-sans: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;--font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;--text-xs: .75rem;--text-sm: .875rem;--text-base: .875rem;--text-md: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);--leading-tight: 1.25;--leading-normal: 1.5;--duration-fast: .12s;--ease-standard: cubic-bezier(.4, 0, .2, 1);--nav-rail-collapsed: 60px;--nav-rail-expanded: 220px;--bp-tablet: 768px;--bp-mobile: 640px}@media (prefers-color-scheme: dark){:root{--color-surface-page: #0b1120;--color-surface-raised: #111827;--color-surface-muted: #1e293b;--color-surface-row: #1e293b;--color-text-primary: #e5e7eb;--color-text-secondary: #94a3b8;--color-text-inverse: #0f172a;--color-border-subtle: rgba(148, 163, 184, .25);--color-border-strong: rgba(148, 163, 184, .4);--color-accent-muted: rgba(13, 148, 136, .2);--color-ring-focus: rgba(13, 148, 136, .35);--color-danger-muted: rgba(220, 38, 38, .2);--shadow-xs: 0 1px 2px rgba(0, 0, 0, .25);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);--shadow-md: 0 8px 32px rgba(0, 0, 0, .35);--chart-1: #2dd4bf;--chart-2: #38bdf8;--chart-3: #a5b4fc;--chart-4: #fb923c;--chart-5: #c084fc;--chart-6: #f472b6}}@media (prefers-reduced-motion: reduce){:root{--duration-fast: 0ms}}.tabular-nums{font-variant-numeric:tabular-nums lining-nums}.card{background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-xs)}.label{display:block;font-size:var(--text-xs);font-weight:500;color:var(--color-text-secondary);margin-bottom:var(--space-1)}.input,textarea.input{width:100%;box-sizing:border-box;font-family:var(--font-sans);font-size:var(--text-sm);color:var(--color-text-primary);background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--space-3) var(--space-3);outline:none;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}.input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-ring-focus)}.input:disabled{opacity:.65;cursor:not-allowed}.input.invalid,.input[aria-invalid=true]{border-color:var(--color-danger);box-shadow:0 0 0 3px var(--color-danger-muted)}.btn{font-family:var(--font-sans);font-size:var(--text-sm);font-weight:600;line-height:var(--leading-tight);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);cursor:pointer;border:1px solid transparent;transition:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn--primary{background:var(--color-accent);color:#fff;border-color:var(--color-accent);box-shadow:var(--shadow-xs)}.btn--primary:hover:not(:disabled){background:var(--color-accent-hover);border-color:var(--color-accent-hover)}.btn--primary:active:not(:disabled){transform:scale(.98)}.btn--ghost{background:transparent;color:var(--color-text-primary);border-color:var(--color-border-subtle)}.btn--ghost:hover:not(:disabled){background:var(--color-surface-muted)}.btn--danger-ghost{background:transparent;color:var(--color-danger);border-color:var(--color-border-subtle)}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:var(--radius-md);border:1px solid var(--color-border-subtle);background:var(--color-surface-raised);color:var(--color-text-primary);cursor:pointer;transition:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}.icon-btn:hover{background:var(--color-surface-muted)}.badge{display:inline-flex;align-items:center;padding:2px var(--space-2);font-size:var(--text-xs);font-weight:600;border-radius:var(--radius-sm);background:var(--color-surface-muted);color:var(--color-text-secondary)}.divider{height:1px;background:var(--color-border-subtle);border:none;margin:var(--space-3) 0}*,*:before,*:after{box-sizing:border-box}:root{font-family:var(--font-sans);line-height:var(--leading-normal);font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--color-text-primary);background-color:var(--color-surface-page)}a{font-weight:500;color:var(--color-accent);text-decoration:none}a:hover{color:var(--color-accent-hover)}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;background:var(--color-surface-page)}.app-loading{color:var(--color-text-secondary);font-size:var(--text-sm)}h1,h2,h3,h4{font-family:var(--font-sans);color:var(--color-text-primary);line-height:var(--leading-tight)}button{font-family:var(--font-sans)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}@media (max-width: 480px){button:not(.nav-item):not(.right-nav-toggle):not(.icon-btn){min-height:44px}input:not([type=checkbox]):not([type=radio]){min-height:44px}}#root{width:100%;margin:0;padding:0;text-align:initial;overflow-x:hidden}.expense-page{min-height:100vh;box-sizing:border-box;max-width:100%;background:var(--color-surface-page);color:var(--color-text-primary);padding:clamp(var(--space-4),2vw,var(--space-6)) clamp(var(--space-3),3vw,var(--space-8)) var(--space-8)}@media (max-width: 640px){.expense-page{padding:var(--space-4) var(--space-3) var(--space-8)}}.page-header{display:flex;flex-direction:column;gap:var(--space-4);margin:0 0 var(--space-6)}.page-header h2{font-size:var(--text-2xl);font-weight:700;letter-spacing:-.02em;margin:0;color:var(--color-text-primary)}.controls{display:flex;align-items:flex-end;flex-wrap:wrap;gap:var(--space-3);background:var(--color-surface-muted);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-3);box-shadow:var(--shadow-xs)}@media (max-width: 640px){.controls{flex-direction:column;align-items:stretch}.save-button{margin-left:0;width:100%}}.control{display:flex;flex-direction:column;gap:var(--space-2)}.control label{font-size:var(--text-xs);font-weight:500;color:var(--color-text-secondary)}.control select{appearance:none;font-family:var(--font-sans);font-size:var(--text-sm);background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);color:var(--color-text-primary);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);outline:none;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}.control select:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-ring-focus)}.control.grow{flex:1}.save-button{margin-left:auto}.save-button.btn--primary{box-shadow:var(--shadow-xs)}.page-content{display:grid;grid-template-columns:1fr 320px;gap:var(--space-4)}@media (max-width: 768px){.page-content{grid-template-columns:1fr}}.calculator{position:sticky;top:var(--space-4);align-self:start;height:fit-content;background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-xs)}.calculator.disabled{opacity:.6}.calculator.enabled{opacity:1}.calc-selected{font-size:var(--text-xs);color:var(--color-text-secondary);margin-bottom:var(--space-3)}.calculator-input{width:100%;box-sizing:border-box;font-family:var(--font-sans);font-size:var(--text-sm);font-variant-numeric:tabular-nums;background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);color:var(--color-text-primary);padding:var(--space-3);border-radius:var(--radius-md);outline:none;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}.calculator-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-ring-focus)}.calc-hint{margin:var(--space-2) 0 0;font-size:var(--text-xs);color:var(--color-text-secondary)}.summary-card{margin-top:var(--space-4);background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-xs)}.summary-grid{display:grid;gap:var(--space-2)}.summary-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);background:var(--color-surface-muted);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--space-3);font-size:var(--text-sm);font-variant-numeric:tabular-nums}.summary-row strong{font-weight:600;color:var(--color-text-primary)}.summary-row.grand{background:var(--color-accent-muted);border-color:var(--color-accent)}.summary-row.over-cap{border-color:var(--color-danger);background:var(--color-danger-muted)}.summary-divider{height:1px;background:var(--color-border-subtle);margin:var(--space-2) 0}.categories-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:var(--space-4);width:100%;margin:0}@media (max-width: 640px){.categories-grid{grid-template-columns:1fr}}.category-card{background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-xs);min-width:0}.category-title{font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 var(--space-3);color:var(--color-text-secondary)}.expense-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}.expense-table-scroll .expense-table{min-width:280px}@media (max-width: 768px){.expense-table-scroll{overflow-x:visible;max-width:100%}.expense-table-scroll .expense-table{min-width:0;table-layout:fixed}.expense-table .item-col{word-wrap:break-word;overflow-wrap:break-word;word-break:break-word}.expense-table .amount-col,.expense-table td:last-child{min-width:72px;width:36%}}.expense-table{width:100%;border-collapse:separate;border-spacing:0 var(--space-2)}.expense-table thead th{text-align:left;font-size:var(--text-xs);font-weight:600;color:var(--color-text-secondary);padding:0 var(--space-2) var(--space-2)}.expense-table tbody tr{background:var(--color-surface-row);outline:1px solid var(--color-border-subtle);border-radius:var(--radius-md)}.expense-table tbody tr.selected{outline-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-ring-focus)}.expense-table tbody tr td{padding:var(--space-2) var(--space-2);vertical-align:middle}.expense-table tbody tr td:first-child{border-radius:var(--radius-md) 0 0 var(--radius-md)}.expense-table tbody tr td:last-child{border-radius:0 var(--radius-md) var(--radius-md) 0}.item-col{width:64%}.amount-col{width:36%;text-align:right}.amount-input{width:100%;box-sizing:border-box;font-family:var(--font-sans);font-size:var(--text-sm);font-variant-numeric:tabular-nums;background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);color:var(--color-text-primary);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);outline:none;text-align:right;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}.amount-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-ring-focus)}.name-input{width:100%;box-sizing:border-box;font-family:var(--font-sans);font-size:var(--text-sm);background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);color:var(--color-text-primary);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);outline:none;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}.name-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-ring-focus)}.month-input{font-family:var(--font-sans);font-size:var(--text-sm);background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);color:var(--color-text-primary);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);outline:none;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}.month-input:focus{border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-ring-focus)}.add-row-button{margin-top:var(--space-3);background:transparent;color:var(--color-accent);border:1px dashed var(--color-accent);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);cursor:pointer;font-size:var(--text-sm);font-weight:600;width:100%;transition:background-color var(--duration-fast) var(--ease-standard)}.add-row-button:hover{background:var(--color-accent-muted)}.caps-loading{padding:var(--space-3);color:var(--color-text-secondary);font-size:var(--text-sm)}.analytics-content{display:grid;grid-template-columns:1fr;gap:var(--space-4)}.analytics-overview{grid-column:1 / -1}.analytics-grid{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}@media (max-width: 768px){.analytics-grid{grid-template-columns:1fr}}.analytics-card-inner{display:grid;grid-template-columns:320px 1fr;gap:var(--space-4);align-items:start}.analytics-card-inner>*{min-width:0}@media (max-width: 768px){.analytics-card-inner{grid-template-columns:1fr}}.analytics-content .category-card{overflow:hidden}.legend-list{min-width:0;overflow:auto;max-height:240px}.legend-list .summary-row{overflow:hidden;align-items:center}.legend-list .summary-row span{min-width:0}.legend-list .summary-row .legend-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.legend-swatch{flex-shrink:0;width:12px;height:12px;border-radius:var(--radius-sm);border:1px solid var(--color-border-subtle)}.legend-pct{color:var(--color-text-secondary);font-size:var(--text-sm);flex-shrink:0}.monthly-line-chart svg{display:block}@media (max-width: 768px){.monthly-line-chart svg{height:260px}}.auth-page{min-height:100vh;display:grid;place-items:center;background:var(--color-surface-page);color:var(--color-text-primary);padding:var(--space-6) var(--space-4) var(--space-8)}@media (max-width: 480px){.auth-page{padding:var(--space-4) var(--space-3) var(--space-8)}}.auth-card{width:100%;max-width:380px;background:var(--color-surface-raised);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-4) var(--space-5);box-shadow:var(--shadow-sm)}.auth-header{margin:0 0 var(--space-4)}.auth-brand{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}.auth-brand .auth-logo{width:40px;height:40px;flex-shrink:0;object-fit:contain}.auth-brand-text{display:flex;flex-direction:column;gap:2px}.auth-brand-name{font-size:var(--text-md);font-weight:700;color:var(--color-text-primary);letter-spacing:-.02em}.auth-brand-tagline{font-size:var(--text-xs);color:var(--color-text-secondary)}.auth-header h2{margin:0 0 var(--space-2);font-size:var(--text-xl);font-weight:700;letter-spacing:-.02em}@media (max-width: 480px){.auth-header h2{font-size:var(--text-lg)}}.auth-header p{margin:0;color:var(--color-text-secondary);font-size:var(--text-sm)}.auth-form{display:grid;gap:var(--space-3)}.auth-form .btn--primary{width:100%;margin-top:var(--space-1)}.server-message{border-radius:var(--radius-md);padding:var(--space-3);font-size:var(--text-sm);border:1px solid var(--color-border-subtle);background:var(--color-surface-muted)}.server-message.error{border-color:var(--color-danger);background:var(--color-danger-muted)}.server-message.success{border-color:var(--color-success);background:var(--color-accent-muted)}.form-field{display:grid;gap:var(--space-2)}.form-field label{font-size:var(--text-xs);font-weight:500;color:var(--color-text-secondary)}.field-error{color:var(--color-danger);font-size:var(--text-xs)}.password-row{display:grid;grid-template-columns:1fr 44px;gap:var(--space-2);align-items:center}.password-row .input{min-width:0}.show-button{background:var(--color-surface-muted);color:var(--color-text-primary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);height:44px;width:44px;min-height:44px;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color var(--duration-fast) var(--ease-standard)}.show-button:hover:not(:disabled){background:var(--color-surface-page)}.show-button svg{display:block}.app-shell{display:block;width:100%}.app-main{min-width:0;width:100%;max-width:100vw;box-sizing:border-box;padding-left:var(--nav-rail-collapsed);overflow-x:hidden;background:var(--color-surface-page)}.app-shell.nav-open .app-main{padding-left:var(--nav-rail-expanded)}@media (max-width: 768px){.app-main,.app-shell.nav-open .app-main{padding-left:0}.app-shell.nav-open{overflow:hidden}.app-main--authed{padding-top:56px}}.mobile-app-bar{display:none}@media (max-width: 768px){.mobile-app-bar{display:flex;align-items:center;gap:var(--space-3);position:fixed;top:0;left:0;right:0;height:56px;padding:0 var(--space-3) 0 var(--space-2);background:var(--color-surface-raised);border-bottom:1px solid var(--color-border-subtle);box-shadow:var(--shadow-xs);z-index:24}.mobile-app-bar-text{display:flex;flex-direction:column;gap:2px;min-width:0}.mobile-app-bar-eyebrow{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-secondary)}.mobile-app-bar-title{font-size:var(--text-md);font-weight:600;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.nav-backdrop{display:none;position:fixed;inset:0;background:#0f172a59;z-index:28}@media (max-width: 768px){.app-shell.nav-open .nav-backdrop{display:block}}.right-nav{position:fixed;left:0;top:0;bottom:0;width:var(--nav-rail-collapsed);transition:width var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard);background:var(--color-surface-raised);border-right:1px solid var(--color-border-subtle);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;z-index:30}@media (min-width: 769px){.right-nav{transform:none}.right-nav.open{width:var(--nav-rail-expanded)}}@media (max-width: 768px){.right-nav{width:min(var(--nav-rail-expanded),88vw);transform:translate(-100%);transition:transform .2s var(--ease-standard),box-shadow .2s var(--ease-standard)}.right-nav.open{transform:translate(0);box-shadow:var(--shadow-md)}}.right-nav-toggle{margin:var(--space-2);align-self:flex-start;background:var(--color-surface-muted);color:var(--color-text-primary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--space-2);min-height:36px;cursor:pointer}.right-nav-toggle:hover{background:var(--color-surface-page)}.right-nav-content{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2)}.right-nav.closed .nav-item{grid-template-columns:1fr;justify-items:center;padding:var(--space-2) 0}.right-nav.closed .nav-label{display:none}.right-nav.open .nav-item{grid-template-columns:40px 1fr;justify-items:start}.nav-item{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:var(--space-2);text-decoration:none;color:var(--color-text-primary);padding:var(--space-2);border-radius:var(--radius-md);border:none;background:transparent;cursor:pointer;width:100%;min-height:44px;font-size:var(--text-sm);font-weight:500}.nav-item:hover{background:var(--color-accent-muted)}.nav-item.active{font-weight:600}.nav-icon{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);color:var(--color-text-secondary)}.nav-item:hover .nav-icon,.nav-item.active .nav-icon{border-color:var(--color-accent);color:var(--color-accent);background:var(--color-accent-muted)}.nav-item:focus{outline:none}.nav-item:focus-visible .nav-icon{outline:2px solid var(--color-accent);outline-offset:2px}.nav-label{font-weight:600;text-align:left}.nav-icon svg{display:block}@media (prefers-color-scheme: dark){.nav-backdrop{background:#00000073}}