@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}:root{--color-text-primary:#37352f;--color-text-secondary:#37352fa6;--color-black:#010101}.login-container{align-items:center;background-color:#f7f6f3;background-color:var(--color-bg-secondary);display:flex;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;justify-content:center;min-height:100vh;padding:24px;padding:var(--spacing-xl)}.login-card{animation:slideUp .3s ease-out;background:#fff;background:var(--color-bg-primary);border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:12px;border-radius:var(--radius-lg);box-shadow:0 4px 8px #00000014;box-shadow:var(--shadow-lg);max-width:400px;padding:32px;padding:var(--spacing-2xl);width:100%}@keyframes slideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.login-header h1{color:#37352f;color:var(--color-text-primary);font-size:24px;font-weight:700;line-height:1.2}.login-header p{color:#37352fa6;color:var(--color-text-secondary);font-size:14px;font-weight:400;line-height:1.4;margin:0}.error-message{background-color:#e03e3e0d;border:1px solid #e03e3e33;border-radius:6px;border-radius:var(--radius-md);color:#e03e3e;color:var(--color-red);font-size:13px;font-weight:500;margin-bottom:16px;margin-bottom:var(--spacing-lg);padding:12px;padding:var(--spacing-md);text-align:center}.login-form{display:flex;flex-direction:column;gap:16px;gap:var(--spacing-lg)}.form-group label{align-items:center;color:#37352f;display:flex;gap:4px;gap:var(--spacing-xs)}.form-group label svg{color:#37352f66;color:var(--color-text-tertiary);height:14px;width:14px}.form-group input{background:#fff;background:var(--color-bg-primary);border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:6px;border-radius:var(--radius-md);color:#37352f;color:var(--color-text-primary);font-family:inherit;font-size:14px;padding:12px 16px;padding:var(--spacing-md) var(--spacing-lg);transition:all .1s ease}.form-group input:focus{border-color:#2383e2;border-color:var(--color-blue);box-shadow:0 0 0 1px #2383e2;box-shadow:0 0 0 1px var(--color-blue);outline:none}.form-group input::placeholder{color:#37352f66;color:var(--color-text-tertiary);font-weight:400}.password-input{align-items:center;display:flex;position:relative}.password-input input{flex:1 1;padding-right:44px}.password-toggle{align-items:center;background:none;border:none;border-radius:3px;border-radius:var(--radius-sm);color:#37352f66;color:var(--color-text-tertiary);cursor:pointer;display:flex;justify-content:center;padding:4px;padding:var(--spacing-xs);position:absolute;right:12px;right:var(--spacing-md);transition:all .1s ease}.password-toggle:hover{background-color:#f2f1ee99;background-color:var(--color-bg-tertiary);color:#37352fa6;color:var(--color-text-secondary)}.login-button{align-items:center;background:#003087;background:var(--primary-blue);border:none;border-radius:12px;color:#fff;cursor:pointer;display:flex;font-family:inherit;font-size:14px;font-weight:500;gap:8px;gap:var(--spacing-sm);justify-content:center;margin-top:8px;margin-top:var(--spacing-sm);padding:15px;transition:all .1s ease}.login-button:hover:not(:disabled){background:#002c7a;background:var(--primary-blue-hover);border-color:#002c7a;border-color:var(--primary-blue-hover);box-shadow:0 4px 8px #00000014;box-shadow:var(--shadow-lg);transform:translateY(-2px)}.login-button:active:not(:disabled){transform:translateY(0)}.login-footer{border-top:1px solid #e3e2e080;border-top:1px solid var(--color-border);margin-top:24px;margin-top:var(--spacing-xl);padding-top:24px;padding-top:var(--spacing-xl);text-align:center}.login-footer p{color:#37352fa6;color:var(--color-text-secondary);font-size:13px;font-weight:400;margin:0}.switch-mode{background:none;border:none;border-radius:3px;border-radius:var(--radius-sm);color:#2383e2;color:var(--color-blue);cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;margin-left:4px;margin-left:var(--spacing-xs);padding:2px 4px;transition:all .1s ease}.switch-mode:hover:not(:disabled){background-color:#2383e20d;color:#1a73d1;color:var(--color-blue-hover)}.demo-info{background-color:#f2f1ee99;background-color:var(--color-bg-tertiary);border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:6px;border-radius:var(--radius-md);margin-top:16px;margin-top:var(--spacing-lg);padding:16px;padding:var(--spacing-lg);text-align:center}.demo-info p{color:#37352fa6;color:var(--color-text-secondary);font-size:13px;line-height:1.4;margin:0}.demo-info p:first-child{color:#37352f;color:var(--color-text-primary);font-weight:600;margin-bottom:8px;margin-bottom:var(--spacing-sm)}.demo-button{background:#2383e2;background:var(--color-blue);border:none;border-radius:6px;border-radius:var(--radius-md);color:#fff;cursor:pointer;font-family:inherit;font-size:13px;font-weight:500;margin-top:8px;margin-top:var(--spacing-sm);padding:8px 16px;padding:var(--spacing-sm) var(--spacing-lg);transition:all .1s ease}.demo-button:hover:not(:disabled){background:#1a73d1;background:var(--color-blue-hover);box-shadow:0 1px 2px #0000000a;box-shadow:var(--shadow-sm);transform:translateY(-1px)}.demo-button:disabled{cursor:not-allowed;opacity:.5;transform:none}.spinner{animation:spin 1s linear infinite}.login-button:disabled,.switch-mode:disabled{cursor:not-allowed;opacity:.5;transform:none}.form-group input:disabled{background-color:#f2f1ee99;background-color:var(--color-bg-tertiary);border-color:#e3e2e080;border-color:var(--color-border);cursor:not-allowed;opacity:.5}.demo-button:focus,.login-button:focus,.password-toggle:focus,.switch-mode:focus{outline:2px solid #2383e2;outline:2px solid var(--color-blue);outline-offset:2px}@media (max-width:480px){.login-container{padding:16px;padding:var(--spacing-lg)}.login-card{max-width:100%;padding:24px;padding:var(--spacing-xl)}.login-header h1{font-size:20px}.login-header p{font-size:13px}}@media (max-width:360px){.login-container{padding:12px;padding:var(--spacing-md)}.login-card{padding:16px;padding:var(--spacing-lg)}.login-header h1{font-size:18px}}.form-group input:invalid{border-color:#e03e3e;border-color:var(--color-red)}.demo-info{display:none}.form-group input:invalid:focus{border-color:#e03e3e;border-color:var(--color-red);box-shadow:0 0 0 1px #e03e3e;box-shadow:0 0 0 1px var(--color-red)}*{transition:color .1s ease,background-color .1s ease,border-color .1s ease,transform .1s ease,box-shadow .1s ease}.demo-info,.error-message,.login-card{transition:none}.google-login-button{align-items:center;background:#fff;background:var(--color-bg-primary);border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:6px;border-radius:var(--radius-md);color:#37352f;color:var(--color-text-primary);cursor:pointer;display:flex;font-family:inherit;font-size:14px;font-weight:500;gap:12px;gap:var(--spacing-md);justify-content:center;margin-top:16px;margin-top:var(--spacing-lg);padding:12px 16px;padding:var(--spacing-md) var(--spacing-lg);transition:all .1s ease;width:100%}.google-login-button:hover:not(:disabled){background:#f2f1ee99;background:var(--color-bg-tertiary);border-color:#e3e2e0;border-color:var(--color-border-hover);box-shadow:0 1px 2px #0000000a;box-shadow:var(--shadow-sm);transform:translateY(-1px)}.google-login-button:disabled{cursor:not-allowed;opacity:.5;transform:none}.logo-container{margin-bottom:24px;margin-bottom:var(--spacing-xl);text-align:center}.login-logo{height:60px;max-width:200px;object-fit:contain;width:auto}.login-header{margin-bottom:32px;margin-bottom:var(--spacing-2xl);text-align:center}.login-header h1{margin-bottom:8px;margin-bottom:var(--spacing-sm);margin-top:16px;margin-top:var(--spacing-lg)}.google-icon{flex-shrink:0}.login-form{margin-bottom:0}.google-login-button:focus{outline:2px solid #2383e2;outline:2px solid var(--color-blue);outline-offset:2px}:root{--primary-blue:#003087;--primary-blue-hover:#002c7a;--secondary-blue:#0070ba;--secondary-blue-hover:#005ea6;--light-blue:#009cde;--yellow:#ffc439;--yellow-hover:#ffb800;--color-text-primary:#1a1a19;--color-text-secondary:#0a0a0aa6;--color-text-tertiary:#37352f66;--color-bg-primary:#fff;--color-bg-secondary:#f7f6f3;--color-bg-tertiary:#f2f1ee99;--color-border:#e3e2e080;--color-border-hover:#e3e2e0;--color-blue:#2383e2;--color-blue-hover:#1a73d1;--color-red:#e03e3e;--color-red-hover:#d33d3d;--color-green:#0f7b6c;--color-orange:#d9730d;--color-purple:#9065b0;--color-pink:#ad1a72;--color-yellow:#dfab01;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:12px;--spacing-lg:16px;--spacing-xl:24px;--spacing-2xl:32px;--radius-sm:3px;--radius-md:6px;--radius-lg:12px;--shadow-sm:0 1px 2px #0000000a;--shadow-md:0 2px 4px #0000000f;--shadow-lg:0 4px 8px #00000014}*{box-sizing:border-box;margin:0;padding:0}body{color:#1a1a19;color:var(--color-text-primary);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:14px;line-height:1.5}.app-container,body{background-color:#fff;background-color:var(--color-bg-primary)}.app-container{min-height:100vh}.content-wrapper{margin:0 auto;max-width:1200px;padding:32px;padding:var(--spacing-2xl)}.header{margin-bottom:32px;margin-bottom:var(--spacing-2xl);padding:32px 0;padding:var(--spacing-2xl) 0}.header-content{align-items:flex-start;display:flex;gap:24px;gap:var(--spacing-xl);justify-content:space-between;margin-bottom:24px;margin-bottom:var(--spacing-xl)}.header h1{color:#1a1a19;color:var(--color-text-primary);font-size:32px;font-weight:700;line-height:1.2;margin:0}.header p{color:#0a0a0aa6;color:var(--color-text-secondary);font-size:16px;font-weight:400;margin:8px 0 0;margin:var(--spacing-sm) 0 0 0}.user-info{gap:12px;gap:var(--spacing-md)}.user-details,.user-info{align-items:center;display:flex}.user-details{border-radius:6px;border-radius:var(--radius-md);color:#010101;font-size:14px;font-weight:400;gap:8px;gap:var(--spacing-sm);padding:8px 12px;padding:var(--spacing-sm) var(--spacing-md)}.user-details svg{color:#010101;height:16px;width:16px}.btn-bell-on svg{filter:drop-shadow(0 0 2px rgba(16,185,129,.9))}.btn-bell-on{color:#10b981}.logout-button{align-items:center;background:#0000;border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:6px;border-radius:var(--radius-md);color:#0a0a0aa6;color:var(--color-text-secondary);cursor:pointer;display:flex;font-size:14px;font-weight:400;gap:4px;gap:var(--spacing-xs);padding:8px 12px;padding:var(--spacing-sm) var(--spacing-md);transition:all .1s ease}.logout-button:hover{background-color:#f2f1ee99;background-color:var(--color-bg-tertiary);border-color:#e3e2e0;border-color:var(--color-border-hover)}.savings-overview{background:#fff;border-radius:12px;border-radius:var(--radius-lg);margin-bottom:24px;margin-bottom:var(--spacing-xl);padding:16px;padding:var(--spacing-lg)}.savings-bar-container h4{color:#1a1a19;color:var(--color-text-primary);font-size:14px;font-weight:600;margin:0 0 12px;margin:0 0 var(--spacing-md) 0}.savings-bar{background:#f2f1ee99;background:var(--color-bg-tertiary);border-radius:3px;border-radius:var(--radius-sm);display:flex;height:6px;margin-bottom:12px;margin-bottom:var(--spacing-md);overflow:hidden}.savings-segment{transition:all .2s ease}.savings-legend{display:flex;flex-wrap:wrap;gap:16px;gap:var(--spacing-lg)}.savings-legend-item{align-items:center;color:#010101;display:flex;font-size:13px;font-weight:400;gap:8px;gap:var(--spacing-sm)}.savings-legend-color{border-radius:2px;height:10px;width:10px}.monthly-income-display{background:#f2f1ee99;background:var(--color-bg-tertiary);border-radius:6px;border-radius:var(--radius-md);color:#010101;font-size:16px;font-weight:500;margin-top:16px;margin-top:var(--spacing-lg);padding:12px;padding:var(--spacing-md);text-align:center}.main-grid{grid-gap:32px;grid-gap:var(--spacing-2xl);display:grid;gap:32px;gap:var(--spacing-2xl);grid-template-columns:320px 1fr}@media (max-width:1024px){.main-grid{gap:24px;gap:var(--spacing-xl);grid-template-columns:1fr}}.sidebar{display:flex;flex-direction:column;gap:16px;gap:var(--spacing-lg)}.card{background:#fff;background:var(--color-bg-primary);border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:12px;border-radius:var(--radius-lg);padding:16px;padding:var(--spacing-lg);transition:all .1s ease}.card:hover{border-color:#e3e2e0;border-color:var(--color-border-hover)}.card h3,h3{align-items:center;color:#1a1a19;color:var(--color-text-primary);display:flex;font-size:16px;font-weight:600;gap:8px;gap:var(--spacing-sm);margin-bottom:16px;margin-bottom:var(--spacing-lg)}.card h3 svg{color:#37352f66;color:var(--color-text-tertiary);height:16px;width:16px}.totals-container{display:flex;flex-direction:column;gap:12px;gap:var(--spacing-md)}.total-item{align-items:center;background-color:#f2f1ee99;background-color:var(--color-bg-tertiary);border:1px solid #0000;border-radius:6px;border-radius:var(--radius-md);display:flex;justify-content:space-between;padding:12px;padding:var(--spacing-md);transition:all .1s ease}.total-item:hover{background-color:#f7f6f3;background-color:var(--color-bg-secondary);border-color:#e3e2e080;border-color:var(--color-border)}.total-info{align-items:center;color:#0a0a0aa6;color:var(--color-text-secondary);display:flex;font-size:14px;font-weight:400;gap:8px;gap:var(--spacing-sm)}.total-info svg{height:16px;width:16px}.total-amount{color:#010101;font-size:16px;font-weight:600}.next-payment-card{background:#002c7a;background:var(--primary-blue-hover);border:none;color:#fff}.next-payment-card h3{color:#ffffffe6}.next-payment{align-items:center;display:flex;gap:16px;gap:var(--spacing-lg);justify-content:space-between}.next-payment-info h4{color:#fff;font-size:16px;font-weight:600;margin-bottom:8px;margin-bottom:var(--spacing-sm)}.next-payment-amount{color:#fff;font-size:20px;font-weight:700;margin-bottom:4px;margin-bottom:var(--spacing-xs)}.next-payment-date{color:#ffffffb3;font-size:13px;margin-bottom:8px;margin-bottom:var(--spacing-sm)}.next-payment-method,.next-payment-type{align-items:center;color:#ffffffb3;display:flex;font-size:13px;gap:4px;gap:var(--spacing-xs);margin-bottom:4px;margin-bottom:var(--spacing-xs)}.next-payment-indicator{border:2px solid #ffffff4d;border-radius:50%;flex-shrink:0;height:12px;width:12px}.btn-primary{align-items:center;background-color:#2383e2;background-color:var(--color-blue);border:none;border-radius:6px;border-radius:var(--radius-md);color:#fff;cursor:pointer;display:flex;font-size:14px;font-weight:500;gap:8px;gap:var(--spacing-sm);justify-content:center;padding:8px 16px;padding:var(--spacing-sm) var(--spacing-lg);transition:all .1s ease}.btn-primary:hover{background-color:#1a73d1;background-color:var(--color-blue-hover)}.btn-secondary{background-color:initial;border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:6px;border-radius:var(--radius-md);color:#1a1a19;color:var(--color-text-primary);cursor:pointer;font-size:14px;font-weight:500;padding:8px 16px;padding:var(--spacing-sm) var(--spacing-lg);transition:all .1s ease}.btn-secondary:hover{background-color:#f2f1ee99;background-color:var(--color-bg-tertiary);border-color:#e3e2e0;border-color:var(--color-border-hover)}.btn-add{padding:12px 16px;padding:var(--spacing-md) var(--spacing-lg);width:100%}.btn-icon{background:#0000;border:none;border-radius:3px;border-radius:var(--radius-sm);color:#37352f66;color:var(--color-text-tertiary);cursor:pointer;padding:4px;padding:var(--spacing-xs);transition:all .1s ease}.btn-edit:hover{color:#2383e2;color:var(--color-blue)}.btn-delete:hover,.btn-edit:hover{background-color:#f2f1ee99;background-color:var(--color-bg-tertiary)}.btn-delete:hover{color:#e03e3e;color:var(--color-red)}.card-header-with-action{align-items:center;display:flex;justify-content:space-between;margin-bottom:16px;margin-bottom:var(--spacing-lg)}.btn-add-small{align-items:center;background:#0000;border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:3px;border-radius:var(--radius-sm);color:#37352f66;color:var(--color-text-tertiary);cursor:pointer;display:flex;justify-content:center;padding:4px;padding:var(--spacing-xs);transition:all .1s ease}.btn-add-small:hover{background:#f2f1ee99;background:var(--color-bg-tertiary);border-color:#e3e2e0;border-color:var(--color-border-hover);color:#0a0a0aa6;color:var(--color-text-secondary)}.income-section,.savings-section{margin-bottom:16px;margin-bottom:var(--spacing-lg)}.income-section h4,.savings-section h4{color:#1a1a19;color:var(--color-text-primary);font-size:14px;font-weight:600;margin:0 0 8px;margin:0 0 var(--spacing-sm) 0}.income-inputs{display:flex;gap:8px;gap:var(--spacing-sm)}.currency-select,.income-input{background:#fff;background:var(--color-bg-primary);border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:6px;border-radius:var(--radius-md);color:#1a1a19;color:var(--color-text-primary);font-size:14px;padding:8px 12px;padding:var(--spacing-sm) var(--spacing-md);transition:all .1s ease}.income-input{flex:1 1}.currency-select{min-width:140px}.currency-select:focus,.income-input:focus{border-color:#2383e2;border-color:var(--color-blue);box-shadow:0 0 0 1px #2383e2;box-shadow:0 0 0 1px var(--color-blue);outline:none}.savings-list{display:flex;flex-direction:column;gap:8px;gap:var(--spacing-sm)}.saving-item{align-items:center;background:#f9f9f9;border:1px solid #0000;border-radius:6px;border-radius:var(--radius-md);display:flex;justify-content:space-between;padding:12px;padding:var(--spacing-md);transition:all .1s ease}.saving-item:hover{background:#f7f6f3;background:var(--color-bg-secondary);border-color:#e3e2e080;border-color:var(--color-border)}.saving-info{align-items:center;display:flex;gap:12px;gap:var(--spacing-md)}.saving-color{border-radius:3px;border-radius:var(--radius-sm);height:12px;width:12px}.saving-amount{color:#1a1a19;color:var(--color-text-primary);font-size:14px;font-weight:500}.saving-actions{display:flex;gap:4px;gap:var(--spacing-xs)}.filters-container{gap:16px;gap:var(--spacing-lg)}.filter-group,.filters-container{display:flex;flex-direction:column}.filter-group{gap:8px;gap:var(--spacing-sm)}.filter-group label{color:#1a1a19;color:var(--color-text-primary);font-size:13px;font-weight:500}.filter-group select,.form-group input,.form-group select,.form-group textarea{background:#fff;background:var(--color-bg-primary);border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:6px;border-radius:var(--radius-md);color:#1a1a19;color:var(--color-text-primary);font-family:inherit;font-size:14px;padding:8px 12px;padding:var(--spacing-sm) var(--spacing-md);transition:all .1s ease}.filter-group select:focus,.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#2383e2;border-color:var(--color-blue);box-shadow:0 0 0 1px #2383e2;box-shadow:0 0 0 1px var(--color-blue);outline:none}.payments-list{display:flex;flex-direction:column;gap:8px;gap:var(--spacing-sm);max-height:400px;overflow-y:auto}.payments-list::-webkit-scrollbar{width:6px}.payments-list::-webkit-scrollbar-track{background:#0000}.payments-list::-webkit-scrollbar-thumb{background:#e3e2e080;background:var(--color-border);border-radius:3px}.payments-list::-webkit-scrollbar-thumb:hover{background:#e3e2e0;background:var(--color-border-hover)}.payment-item{align-items:center;background:#fff;background:var(--color-bg-primary);border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:6px;border-radius:var(--radius-md);display:flex;justify-content:space-between;padding:12px;padding:var(--spacing-md);transition:all .1s ease}.payment-item:hover{background-color:#f2f1ee99;background-color:var(--color-bg-tertiary);border-color:#e3e2e0;border-color:var(--color-border-hover)}.payment-info{flex:1 1}.payment-name{color:#1a1a19;color:var(--color-text-primary);font-size:14px;font-weight:500}.payment-details,.payment-name{margin-bottom:4px;margin-bottom:var(--spacing-xs)}.payment-details{color:#0a0a0aa6;color:var(--color-text-secondary);font-size:13px}.payment-category{display:flex;flex-direction:column;gap:4px;gap:var(--spacing-xs)}.payment-category-main{color:#0a0a0aa6;color:var(--color-text-secondary);font-size:13px}.payment-category-main,.payment-method-info{align-items:center;display:flex;gap:4px;gap:var(--spacing-xs)}.payment-method-info{color:#37352f66;color:var(--color-text-tertiary);font-size:12px}.category-dot{border-radius:50%;height:8px;width:8px}.payment-actions{display:flex;gap:4px;gap:var(--spacing-xs)}.empty-state{color:#37352f66;color:var(--color-text-tertiary);font-size:14px;padding:32px 0;padding:var(--spacing-2xl) 0;text-align:center}.timeline-container{display:flex;flex-direction:column}.timeline-content{position:relative}.empty-timeline{color:#37352f66;color:var(--color-text-tertiary);padding:32px 0;padding:var(--spacing-2xl) 0;text-align:center}.empty-timeline svg{color:#e3e2e0;color:var(--color-border-hover);margin-bottom:16px;margin-bottom:var(--spacing-lg)}.empty-subtitle{font-size:13px;margin-top:8px;margin-top:var(--spacing-sm)}.timeline{position:relative}.timeline-line{background-color:#e3e2e080;background-color:var(--color-border);bottom:0;left:20px;position:absolute;top:0;width:1px}.timeline-item{align-items:flex-start;display:flex;margin-bottom:24px;margin-bottom:var(--spacing-xl);position:relative}.timeline-dot-container{flex-shrink:0;margin-left:16px;margin-top:16px;margin-top:var(--spacing-lg);position:relative}.timeline-dot{border:3px solid #fff;border:3px solid var(--color-bg-primary);border-radius:50%;box-shadow:0 1px 2px #0000000a;box-shadow:var(--shadow-sm);height:8px;position:relative;transition:all .2s ease;width:8px;z-index:10}.timeline-dot.next-payment{animation:pulse 2s infinite;box-shadow:0 0 0 3px #2383e233;height:10px;width:10px}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.next-payment-label{background-color:#010101;border-radius:3px;border-radius:var(--radius-sm);color:#fff;font-size:11px;font-weight:500;left:50%;padding:4px 8px;padding:var(--spacing-xs) var(--spacing-sm);position:absolute;top:-24px;transform:translateX(-50%);white-space:nowrap}.timeline-card{background:#fff;background:var(--color-bg-primary);border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:12px;border-radius:var(--radius-lg);flex:1 1;margin-left:16px;margin-left:var(--spacing-lg);padding:16px;padding:var(--spacing-lg);transition:all .1s ease}.timeline-card:hover{border-color:#e3e2e0;border-color:var(--color-border-hover);box-shadow:0 2px 4px #0000000f;box-shadow:var(--shadow-md)}.timeline-card.overdue{background-color:#e03e3e0d;border-color:#e03e3e33}.timeline-card.next{border-color:#002c7a;border-color:var(--primary-blue-hover)}.timeline-card-content{align-items:flex-start;display:flex;justify-content:space-between;width:100%}.timeline-header{align-items:center;display:flex;flex-wrap:wrap;gap:8px;gap:var(--spacing-sm);margin-bottom:12px;margin-bottom:var(--spacing-md)}.timeline-header h4{color:#1a1a19;color:var(--color-text-primary);font-size:14px;font-weight:600;margin:0}.app-header{grid-gap:24px;grid-gap:var(--spacing-xl);align-items:center;background:#fff;background:var(--color-bg-primary);border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:12px;border-radius:var(--radius-lg);box-shadow:0 1px 2px #0000000a;box-shadow:var(--shadow-sm);display:grid;gap:24px;gap:var(--spacing-xl);grid-template-columns:auto 1fr auto;margin-bottom:24px;margin-bottom:var(--spacing-xl);padding:14px 18px}.brand{align-items:center;display:flex;gap:12px;gap:var(--spacing-md);min-width:0}.brand-mark svg{display:block}.brand-text{display:flex;flex-direction:column;line-height:1.1}.brand-name{color:#010101;font-size:18px;letter-spacing:-.01em}.brand-sub{color:#0a0a0aa6;color:var(--color-text-secondary);font-size:12px}.header-stats{display:inline-flex;justify-self:center}.stat-pill{background:#f2f1ee99;background:var(--color-bg-tertiary);border-radius:999px;display:inline-flex;gap:8px;padding:8px 12px}.stat-value{font-size:14px;font-weight:700}.header-right{justify-self:end}.btn-ghost,.header-right{align-items:center;display:inline-flex;gap:8px}.btn-ghost{background:#002c7a;background:var(--primary-blue-hover);border:0;border-radius:10px;color:#fff;cursor:pointer;font-weight:500;padding:12px;transition:all .12s ease}.app-header{backdrop-filter:saturate(120%) blur(10px);-webkit-backdrop-filter:saturate(120%) blur(10px);background:color-mix(in srgb,#fff 92%,#0000);background:color-mix(in srgb,var(--color-bg-primary) 92%,#0000);background:#ffffffe0;position:-webkit-sticky;position:sticky;top:calc(env(safe-area-inset-top));top:calc(var(--safe-area-inset-top, 0px));z-index:50}.app-header.is-stuck{border-color:#e3e2e0;border-color:var(--color-border-hover);box-shadow:0 6px 20px #0000000f,0 1px 0 0 #00000008}.login-logo{width:150px}.header-stats{grid-gap:12px;grid-gap:var(--spacing-md);backdrop-filter:saturate(120%) blur(2px);-webkit-backdrop-filter:saturate(120%) blur(2px);background:#f9f9f9;border-radius:12px;border-radius:var(--radius-lg);box-shadow:0 1px 2px #0000000a;box-shadow:var(--shadow-sm);display:grid;gap:12px;gap:var(--spacing-md);grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin:0 0 32px;margin:0 0 var(--spacing-2xl) 0;padding:16px;padding:var(--spacing-lg);transition:all .2s ease}.header-stats:hover{border-color:#e3e2e0;border-color:var(--color-border-hover);box-shadow:0 2px 4px #0000000f;box-shadow:var(--shadow-md)}.stat-pill{align-items:center;background:#fff;background:var(--color-bg-primary);border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:6px;border-radius:var(--radius-md);display:flex;flex-direction:column;gap:6px;justify-content:center;min-height:80px;overflow:hidden;padding:16px 12px;padding:var(--spacing-lg) var(--spacing-md);position:relative;transition:all .2s ease}.stat-pill:hover{border-color:#2383e2;border-color:var(--color-blue);box-shadow:0 4px 12px #2383e214,0 2px 4px #0000000a;transform:translateY(-1px)}.stat-pill:before{background:linear-gradient(90deg,#2383e2,#0f7b6c);background:linear-gradient(90deg,var(--color-blue) 0,var(--color-green) 100%);border-radius:6px 6px 0 0;border-radius:var(--radius-md) var(--radius-md) 0 0;content:"";height:3px;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .2s ease}.stat-pill:hover:before{opacity:1}.stat-label{color:#0a0a0aa6;color:var(--color-text-secondary);font-size:12px;font-weight:600;letter-spacing:.05em;line-height:1.2;text-align:center;text-transform:uppercase}.stat-value{font-feature-settings:"tnum";color:#010101;font-size:18px;font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0;text-align:center}.stat-pill:first-child .stat-value{color:#2383e2;color:var(--color-blue)}.stat-pill:nth-child(2) .stat-value{color:#9065b0;color:var(--color-purple)}.stat-pill:nth-child(3) .stat-value{color:#0f7b6c;color:var(--color-green)}.stat-pill:nth-child(4) .stat-value{color:#d9730d;color:var(--color-orange)}.stat-pill.loading .stat-value{opacity:.5;position:relative}.stat-pill.loading .stat-value:after{animation:spin 1s linear infinite;border:2px solid #e3e2e080;border-top-color:#2383e2;border:2px solid var(--color-border);border-radius:50%;border-top-color:var(--color-blue);content:"";height:12px;position:absolute;right:-20px;top:50%;transform:translateY(-50%);width:12px}@media (max-width:1024px){.header-stats{gap:8px;gap:var(--spacing-sm);grid-template-columns:repeat(2,1fr);padding:12px;padding:var(--spacing-md)}.stat-pill{min-height:70px;padding:12px 8px;padding:var(--spacing-md) var(--spacing-sm)}.stat-value{font-size:16px}.stat-label{font-size:11px}}@media (max-width:768px){.header-stats{gap:8px;gap:var(--spacing-sm);grid-template-columns:1fr 1fr;margin-bottom:24px;margin-bottom:var(--spacing-xl)}.stat-pill{gap:4px;min-height:65px;padding:8px;padding:var(--spacing-sm)}.stat-value{font-size:15px}.stat-label{font-size:10px;line-height:1.3}}@media (max-width:480px){.header-stats{gap:4px;gap:var(--spacing-xs);grid-template-columns:1fr;padding:8px;padding:var(--spacing-sm)}.stat-pill{align-items:center;flex-direction:row;gap:8px;gap:var(--spacing-sm);justify-content:space-between;min-height:50px;padding:8px 12px;padding:var(--spacing-sm) var(--spacing-md);text-align:left}.stat-label{color:#1a1a19;color:var(--color-text-primary);flex:1 1;font-size:12px;font-weight:500;letter-spacing:0;text-align:left;text-transform:none}.stat-value{flex-shrink:0;font-size:16px;text-align:right}.stat-pill:before{border-radius:0 6px 6px 0;border-radius:0 var(--radius-md) var(--radius-md) 0;bottom:0;height:100%;left:0;right:auto;top:0;width:3px}}@media (max-width:360px){.stat-pill{min-height:44px;padding:10px 8px;padding:10px var(--spacing-sm)}.stat-label{font-size:11px}.stat-value{font-size:14px}}.stat-pill:focus{border-color:#2383e2;border-color:var(--color-blue);outline:2px solid #2383e2;outline:2px solid var(--color-blue);outline-offset:2px}.header-stats{animation:fadeInUp .4s ease-out}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.stat-pill.positive .stat-value{color:#0f7b6c;color:var(--color-green)}.stat-pill.warning .stat-value{color:#d9730d;color:var(--color-orange)}.stat-pill.danger .stat-value{color:#e03e3e;color:var(--color-red)}.stat-pill[data-tooltip]{cursor:help;position:relative}.stat-pill[data-tooltip]:hover:after{animation:tooltipFadeIn .2s ease-out forwards;background:#010101;border-radius:3px;border-radius:var(--radius-sm);bottom:100%;color:#fff;content:attr(data-tooltip);font-size:11px;left:50%;margin-bottom:4px;margin-bottom:var(--spacing-xs);opacity:0;padding:4px 8px;padding:var(--spacing-xs) var(--spacing-sm);position:absolute;transform:translateX(-50%);white-space:nowrap;z-index:100}@keyframes tooltipFadeIn{to{opacity:1}}@media (prefers-color-scheme:dark){.header-stats{background:linear-gradient(135deg,#2383e214,#10b9810d)}.stat-pill:before{opacity:.7}.stat-pill:hover:before{opacity:1}}@media (prefers-reduced-motion:reduce){.header-stats,.stat-pill,.stat-pill:before{animation:none;transition:none}.stat-pill:hover{transform:none}}@media (prefers-contrast:high){.header-stats{background:#fff;background:var(--color-bg-primary);border:2px solid #1a1a19;border:2px solid var(--color-text-primary)}.stat-pill{border:2px solid #0a0a0aa6;border:2px solid var(--color-text-secondary)}.stat-pill:hover{border-color:#1a1a19;border-color:var(--color-text-primary)}}@supports (padding:max(0px)){.app-header{top:max(0px,env(safe-area-inset-top))}}@media (max-width:768px){.app-header{backdrop-filter:saturate(120%) blur(8px);-webkit-backdrop-filter:saturate(120%) blur(8px)}}.btn-ghost:hover{background:#002c7a;background:var(--primary-blue-hover);border-color:#002c7a;border-color:var(--primary-blue-hover);box-shadow:0 4px 8px #00000014;box-shadow:var(--shadow-lg);transform:translateY(-2px)}.icon-btn{align-items:center;background:#0000;border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:10px;color:#0a0a0aa6;color:var(--color-text-secondary);cursor:pointer;display:inline-flex;height:36px;justify-content:center;transition:all .12s ease;width:36px}.icon-btn:hover{background:#f2f1ee99;background:var(--color-bg-tertiary);border-color:#e3e2e0;border-color:var(--color-border-hover);color:#010101}.user-badge{align-items:center;background:#f9f9f9;border-radius:999px;color:#010101;display:inline-flex;gap:6px;max-width:220px;overflow:hidden;padding:8px 12px;text-overflow:ellipsis;white-space:nowrap}@media (max-width:768px){.app-header{gap:12px;gap:var(--spacing-md);grid-template-columns:1fr auto;padding:12px}.header-stats{gap:8px;grid-column:1/-1;justify-self:start}.brand-name{font-size:16px}.brand-sub{font-size:11px}.user-badge{display:none}}@media (max-width:480px){.stat-pill{padding:6px 10px}.stat-value{font-size:13px}.icon-btn{height:34px;width:34px}}.category-badge,.payment-method-badge,.payment-type-badge{background-color:#f2f1ee99;background-color:var(--color-bg-tertiary);border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:12px;color:#0a0a0aa6;color:var(--color-text-secondary);font-size:11px;font-weight:500;padding:2px 8px;padding:2px var(--spacing-sm)}.payment-method-badge span,.payment-type-badge span{margin-left:6px}.category-badge{color:#fff}.income-input{width:140px}.overdue-badge{background-color:#e03e3e1a;border:1px solid #e03e3e33;border-radius:12px;color:#e03e3e;color:var(--color-red);font-size:11px;font-weight:500;padding:2px 8px;padding:2px var(--spacing-sm)}.timeline-details{align-items:center;color:#0a0a0aa6;color:var(--color-text-secondary);display:flex;flex-wrap:wrap;font-size:13px;gap:16px;gap:var(--spacing-lg);margin-bottom:8px;margin-bottom:var(--spacing-sm)}.timeline-details .amount{color:#010101;font-size:16px;font-weight:600}.timeline-details .date{background:#f2f1ee99;background:var(--color-bg-tertiary);border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:12px;color:#0a0a0aa6;color:var(--color-text-secondary);font-weight:500;padding:4px 8px;padding:var(--spacing-xs) var(--spacing-sm)}.payment-description{background-color:#f7f6f3;background-color:var(--color-bg-secondary);border-left:3px solid #e3e2e0;border-left:3px solid var(--color-border-hover);border-radius:6px;border-radius:var(--radius-md);margin-top:12px;margin-top:var(--spacing-md);padding:12px;padding:var(--spacing-md)}.payment-description p{color:#0a0a0aa6;color:var(--color-text-secondary);font-size:13px;line-height:1.5;margin:0}.timeline-actions{align-self:flex-end;display:flex;flex-shrink:0;gap:4px;gap:var(--spacing-xs);margin-left:16px;margin-left:var(--spacing-lg);opacity:0;transform:translateY(4px);transition:all .15s ease;visibility:hidden}.timeline-card:hover .timeline-actions{transform:translateY(0)}.modal-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#0f0f0f99;bottom:0;display:flex;justify-content:center;left:0;padding:24px;padding:var(--spacing-xl);position:fixed;right:0;top:0;z-index:50}.modal{background:#fff;background:var(--color-bg-primary);border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:12px;border-radius:var(--radius-lg);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:90vh;max-width:600px;overflow-y:auto;width:100%}.modal-content{padding:32px;padding:var(--spacing-2xl)}.modal-content h3{color:#1a1a19;color:var(--color-text-primary);font-size:18px;font-weight:600;margin-bottom:24px;margin-bottom:var(--spacing-xl)}.form-container{display:flex;flex-direction:column}.form-container,.form-row{gap:16px;gap:var(--spacing-lg)}.form-row{grid-gap:16px;grid-gap:var(--spacing-lg);display:grid;grid-template-columns:1fr 1fr}.form-group{display:flex;flex-direction:column;gap:8px;gap:var(--spacing-sm)}.form-group label{color:#1a1a19;color:var(--color-text-primary);font-size:13px;font-weight:500}.form-group input::placeholder,.form-group textarea::placeholder{color:#37352f66;color:var(--color-text-tertiary)}.form-group textarea{min-height:80px;resize:vertical}.character-count{color:#37352f66;color:var(--color-text-tertiary);font-size:12px;text-align:right}.color-picker{display:flex;gap:8px;gap:var(--spacing-sm)}.color-option{border:2px solid #0000;border-radius:50%;cursor:pointer;height:28px;transition:all .1s ease;width:28px}.color-option:hover{transform:scale(1.1)}.color-option.selected{border-color:#1a1a19;border-color:var(--color-text-primary);box-shadow:0 0 0 2px #fff,0 0 0 4px #1a1a19;box-shadow:0 0 0 2px var(--color-bg-primary),0 0 0 4px var(--color-text-primary);transform:scale(1.15)}.form-actions{border-top:1px solid #e3e2e080;border-top:1px solid var(--color-border);display:flex;gap:12px;gap:var(--spacing-md);margin-top:16px;margin-top:var(--spacing-lg);padding-top:16px;padding-top:var(--spacing-lg)}.form-actions .btn-primary,.form-actions .btn-secondary{flex:1 1}.months-checkbox-grid{grid-gap:8px;grid-gap:var(--spacing-sm);background-color:#f7f6f3;background-color:var(--color-bg-secondary);border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:6px;border-radius:var(--radius-md);display:grid;gap:8px;gap:var(--spacing-sm);grid-template-columns:repeat(3,1fr);margin:12px 0;margin:var(--spacing-md) 0;padding:16px;padding:var(--spacing-lg)}.month-checkbox-item{align-items:center;border-radius:3px;border-radius:var(--radius-sm);cursor:pointer;display:flex;font-size:13px;gap:8px;gap:var(--spacing-sm);padding:8px;padding:var(--spacing-sm);transition:all .1s ease;-webkit-user-select:none;user-select:none}.month-checkbox-item:hover{background-color:#f2f1ee99;background-color:var(--color-bg-tertiary)}.month-checkbox-item input[type=checkbox]{accent-color:#2383e2;accent-color:var(--color-blue);cursor:pointer;height:16px;margin:0;width:16px}.month-checkbox-item span{color:#1a1a19;color:var(--color-text-primary);font-weight:400}.form-helper-text{color:#0a0a0aa6;color:var(--color-text-secondary);font-size:12px;line-height:1.4}.alert-overlay,.confirmation-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#0f0f0f99;z-index:1001}.alert-modal,.confirmation-modal{background:#fff;background:var(--color-bg-primary);border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:12px;border-radius:var(--radius-lg);box-shadow:0 20px 25px -5px #0000001a;max-width:400px;opacity:0;transform:scale(.95);transition:all .15s ease;width:90%}.alert-overlay .alert-modal,.confirmation-overlay .confirmation-modal{opacity:1;transform:scale(1)}.alert-content,.confirmation-content{padding:32px;padding:var(--spacing-2xl);position:relative;text-align:center}.close-button{align-items:center;background:none;border:none;border-radius:3px;border-radius:var(--radius-sm);color:#37352f66;color:var(--color-text-tertiary);cursor:pointer;display:flex;justify-content:center;padding:4px;padding:var(--spacing-xs);position:absolute;right:16px;right:var(--spacing-lg);top:16px;top:var(--spacing-lg);transition:all .1s ease}.close-button:hover{background-color:#f2f1ee99;background-color:var(--color-bg-tertiary);color:#0a0a0aa6;color:var(--color-text-secondary)}.alert-icon,.confirmation-icon{align-items:center;border-radius:50%;color:#fff;display:inline-flex;height:48px;justify-content:center;margin:0 auto 16px;margin:0 auto var(--spacing-lg);width:48px}.alert-icon.error,.confirmation-icon.danger{background-color:#e03e3e;background-color:var(--color-red)}.alert-icon.warning,.confirmation-icon.warning{background-color:#d9730d;background-color:var(--color-orange)}.alert-icon.success{background-color:#0f7b6c;background-color:var(--color-green)}.alert-content h3,.confirmation-content h3{color:#1a1a19;color:var(--color-text-primary);font-size:16px;font-weight:600;line-height:1.4;margin:0 0 12px;margin:0 0 var(--spacing-md) 0}.alert-content p,.confirmation-content p{color:#0a0a0aa6;color:var(--color-text-secondary);font-size:14px;line-height:1.5;margin:0 0 24px;margin:0 0 var(--spacing-xl) 0}.confirmation-actions{gap:12px;gap:var(--spacing-md)}.alert-actions,.confirmation-actions{display:flex;justify-content:center}.btn-confirm{background-color:#e03e3e;background-color:var(--color-red);border:none;border-radius:6px;border-radius:var(--radius-md);color:#fff;cursor:pointer;font-size:14px;font-weight:500;min-width:80px;padding:8px 24px;padding:var(--spacing-sm) var(--spacing-xl);transition:all .1s ease}.btn-confirm:hover{background-color:#d33d3d;background-color:var(--color-red-hover)}.btn-cancel{background-color:initial;border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:6px;border-radius:var(--radius-md);color:#1a1a19;color:var(--color-text-primary);cursor:pointer;font-size:14px;font-weight:500;min-width:80px;padding:8px 24px;padding:var(--spacing-sm) var(--spacing-xl);transition:all .1s ease}.btn-cancel:hover{background-color:#f2f1ee99;background-color:var(--color-bg-tertiary);border-color:#e3e2e0;border-color:var(--color-border-hover)}.alert-actions .btn-primary{background-color:#2383e2;background-color:var(--color-blue);border:none;border-radius:6px;border-radius:var(--radius-md);color:#fff;cursor:pointer;font-size:14px;font-weight:500;min-width:80px;padding:8px 24px;padding:var(--spacing-sm) var(--spacing-xl);transition:all .1s ease}.alert-actions .btn-primary:hover{background-color:#1a73d1;background-color:var(--color-blue-hover)}.price-loading{animation:spin 1s linear infinite;color:#37352f66;color:var(--color-text-tertiary);font-size:12px;margin-left:8px;margin-left:var(--spacing-sm)}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (max-width:768px){.content-wrapper{padding:16px;padding:var(--spacing-lg)}.header h1{font-size:24px}.header p{font-size:14px}.header-content{align-items:stretch;flex-direction:column;gap:16px;gap:var(--spacing-lg)}.user-info{justify-content:space-between}.main-grid{gap:16px;gap:var(--spacing-lg)}.form-row,.main-grid{grid-template-columns:1fr}.months-checkbox-grid{grid-template-columns:repeat(2,1fr)}.color-picker{justify-content:center}.timeline-card-content{align-items:flex-start;flex-direction:column}.timeline-actions{align-self:flex-end;margin-left:0;margin-top:12px;margin-top:var(--spacing-md)}.timeline-details{gap:12px;gap:var(--spacing-md)}.timeline-header{margin-bottom:12px;margin-bottom:var(--spacing-md)}.next-payment{align-items:left;flex-direction:column;text-align:left}.next-payment,.savings-legend{gap:12px;gap:var(--spacing-md)}.confirmation-actions{flex-direction:column}.alert-actions .btn-primary,.btn-cancel,.btn-confirm{width:100%}}@media (max-width:480px){.content-wrapper{padding:12px;padding:var(--spacing-md)}.modal{margin:16px;margin:var(--spacing-lg);max-width:95%}.alert-content,.confirmation-content,.modal-content{padding:16px;padding:var(--spacing-lg)}.months-checkbox-grid{grid-template-columns:1fr}.savings-legend{flex-direction:column;gap:8px;gap:var(--spacing-sm)}.next-payment{align-items:left!important}}.btn-cancel:focus,.btn-confirm:focus,.btn-icon:focus,.btn-primary:focus,.btn-secondary:focus,.close-button:focus{outline:2px solid #2383e2;outline:2px solid var(--color-blue);outline-offset:2px}::-webkit-scrollbar{height:6px;width:6px}::-webkit-scrollbar-track{background:#0000}::-webkit-scrollbar-thumb{background:#e3e2e080;background:var(--color-border);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#e3e2e0;background:var(--color-border-hover)}.payment-item:focus-within,.saving-item:focus-within,.timeline-card:focus-within{border-color:#2383e2;border-color:var(--color-blue);box-shadow:0 0 0 1px #2383e2;box-shadow:0 0 0 1px var(--color-blue)}:root{--mobile-padding:16px;--mobile-gap:12px;--mobile-header-height:60px;--safe-area-inset-top:env(safe-area-inset-top);--safe-area-inset-bottom:env(safe-area-inset-bottom);--safe-area-inset-left:env(safe-area-inset-left);--safe-area-inset-right:env(safe-area-inset-right)}input[type=date],input[type=email],input[type=number],input[type=password],input[type=text],select,textarea{font-size:16px}@media (max-width:480px){.app-container{min-height:100vh;min-height:calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));padding-left:env(safe-area-inset-left);padding-left:var(--safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-right:var(--safe-area-inset-right)}.content-wrapper{max-width:100%;overflow-x:hidden;padding:16px;padding:var(--mobile-padding)}.header{margin-bottom:16px;margin-bottom:var(--spacing-lg);padding:16px 0;padding:var(--spacing-lg) 0}.header h1{font-size:20px;line-height:1.3;word-break:break-word}.header p{font-size:14px;margin-top:4px;margin-top:var(--spacing-xs)}.header-content{align-items:stretch;flex-direction:column;gap:12px;gap:var(--spacing-md)}.user-info{flex-direction:column;gap:8px;gap:var(--spacing-sm)}.logout-button,.user-details{font-size:13px;justify-content:center;padding:8px;padding:var(--spacing-sm)}.logout-button{align-self:stretch}.savings-overview{margin-bottom:16px;margin-bottom:var(--spacing-lg);padding:12px;padding:var(--spacing-md)}.savings-bar-container h4{font-size:13px}.savings-bar,.savings-bar-container h4{margin-bottom:8px;margin-bottom:var(--spacing-sm)}.savings-bar{height:8px}.savings-legend{flex-direction:column;gap:8px;gap:var(--spacing-sm)}.savings-legend-item{font-size:12px;justify-content:flex-start}.monthly-income-display{font-size:14px;padding:8px;padding:var(--spacing-sm)}.main-grid{gap:16px;gap:var(--spacing-lg);grid-template-columns:1fr}.card{border-radius:6px;border-radius:var(--radius-md);margin:0;padding:12px;padding:var(--spacing-md)}.card h3{font-size:15px;margin-bottom:12px;margin-bottom:var(--spacing-md)}.total-item{align-items:stretch;flex-direction:column;gap:4px;gap:var(--spacing-xs);padding:8px;padding:var(--spacing-sm);text-align:center}.total-info{font-size:13px;justify-content:center}.total-amount{font-size:16px;font-weight:700}.next-payment{flex-direction:column;gap:12px;gap:var(--spacing-md);text-align:center}.next-payment-info h4{font-size:15px}.next-payment-amount{font-size:18px}.next-payment-date,.next-payment-method,.next-payment-type{font-size:12px}.income-inputs{flex-direction:column;gap:8px;gap:var(--spacing-sm)}.currency-select{min-width:100%}.saving-item{align-items:stretch;flex-direction:column;padding:8px;padding:var(--spacing-sm)}.saving-info,.saving-item{gap:8px;gap:var(--spacing-sm)}.saving-info{justify-content:flex-start}.saving-actions{gap:12px;gap:var(--spacing-md);justify-content:center}.btn-add{font-size:15px;font-weight:600;padding:12px;padding:var(--spacing-md)}.filters-container{gap:12px;gap:var(--spacing-md)}.filter-group select{font-size:14px;padding:8px;padding:var(--spacing-sm)}.payments-list{max-height:300px}.payment-item,.payments-list{gap:8px;gap:var(--spacing-sm)}.payment-item{align-items:stretch;flex-direction:column;padding:8px;padding:var(--spacing-sm)}.payment-info{text-align:left}.payment-name{font-size:14px;font-weight:600}.payment-details{font-size:12px}.payment-category{gap:2px}.payment-category-main,.payment-method-info{font-size:11px}.payment-actions{gap:12px;gap:var(--spacing-md);justify-content:center}.timeline-line{left:12px}.timeline-dot-container{margin-left:8px;margin-top:12px;margin-top:var(--spacing-md)}.timeline-dot{border-width:2px;height:6px;width:6px}.timeline-dot.next-payment{height:8px;width:8px}.next-payment-label{font-size:10px;padding:2px 4px;padding:2px var(--spacing-xs);top:-20px}.timeline-card{margin-left:8px;margin-left:var(--spacing-sm);padding:12px;padding:var(--spacing-md)}.timeline-card-content{flex-direction:column;gap:8px;gap:var(--spacing-sm)}.timeline-header{align-items:stretch;flex-direction:column;gap:4px;gap:var(--spacing-xs);margin-bottom:8px;margin-bottom:var(--spacing-sm)}.timeline-header h4{font-size:14px;margin-bottom:4px;margin-bottom:var(--spacing-xs)}.category-badge,.overdue-badge,.payment-method-badge,.payment-type-badge{align-self:flex-start;font-size:10px;padding:2px 4px;padding:2px var(--spacing-xs)}.timeline-details{align-items:stretch;flex-direction:column;gap:4px;gap:var(--spacing-xs)}.timeline-details .amount{font-size:16px;font-weight:700;text-align:center}.timeline-details .date{align-self:center;font-size:12px}.timeline-actions{align-self:center;margin-left:0;margin-top:8px;margin-top:var(--spacing-sm);opacity:1;transform:none;visibility:visible}.modal-overlay{align-items:flex-start;padding:12px;padding:var(--spacing-md);padding-top:calc(32px + env(safe-area-inset-top));padding-top:calc(var(--spacing-2xl) + var(--safe-area-inset-top))}.modal{margin:0;max-height:calc(90vh - env(safe-area-inset-top));max-height:calc(90vh - var(--safe-area-inset-top));max-width:100%}.modal-content{padding:16px;padding:var(--spacing-lg)}.modal-content h3{font-size:16px;margin-bottom:16px;margin-bottom:var(--spacing-lg)}.form-container,.form-row{gap:12px;gap:var(--spacing-md)}.form-row{grid-template-columns:1fr}.form-group{gap:4px;gap:var(--spacing-xs)}.form-group label{font-size:13px}.form-group input,.form-group select,.form-group textarea{border-radius:3px;border-radius:var(--radius-sm);font-size:16px;padding:8px;padding:var(--spacing-sm)}.password-input input{padding-right:40px}.password-toggle{right:8px;right:var(--spacing-sm)}.color-picker{flex-wrap:wrap;gap:8px;gap:var(--spacing-sm);justify-content:center}.color-option{height:32px;width:32px}.months-checkbox-grid{gap:4px;gap:var(--spacing-xs);grid-template-columns:1fr;padding:12px;padding:var(--spacing-md)}.month-checkbox-item{font-size:14px;padding:4px;padding:var(--spacing-xs)}.month-checkbox-item input[type=checkbox]{height:18px;width:18px}.form-actions{flex-direction:column;gap:8px;gap:var(--spacing-sm);margin-top:12px;margin-top:var(--spacing-md);padding-top:12px;padding-top:var(--spacing-md)}.form-actions .btn-primary,.form-actions .btn-secondary{font-size:16px;font-weight:600;padding:12px;padding:var(--spacing-md);width:100%}.character-count{font-size:11px}.alert-modal,.confirmation-modal{margin:12px;margin:var(--spacing-md);max-width:calc(100% - 16px);max-width:calc(100% - var(--spacing-lg))}.alert-content,.confirmation-content{padding:16px;padding:var(--spacing-lg)}.alert-icon,.confirmation-icon{height:40px;margin-bottom:12px;margin-bottom:var(--spacing-md);width:40px}.alert-content h3,.confirmation-content h3{font-size:15px;margin-bottom:8px;margin-bottom:var(--spacing-sm)}.alert-content p,.confirmation-content p{font-size:13px;margin-bottom:16px;margin-bottom:var(--spacing-lg)}.confirmation-actions{flex-direction:column;gap:8px;gap:var(--spacing-sm)}.alert-actions .btn-primary,.btn-cancel,.btn-confirm{font-size:15px;padding:12px;padding:var(--spacing-md);width:100%}.empty-state,.empty-timeline{font-size:13px;padding:16px 0;padding:var(--spacing-lg) 0}.empty-timeline svg{height:40px;margin-bottom:12px;margin-bottom:var(--spacing-md);width:40px}.empty-subtitle{font-size:12px}.payments-list::-webkit-scrollbar{width:3px}.btn-icon{align-items:center;display:flex;justify-content:center;min-height:44px;min-width:44px}.payment-item:focus-within,.saving-item:focus-within,.timeline-card:focus-within{outline:2px solid #2383e2;outline:2px solid var(--color-blue);outline-offset:1px}}@media (max-width:360px){:root{--mobile-padding:12px;--mobile-gap:8px}.content-wrapper{padding:16px;padding:var(--mobile-padding)}.header h1{font-size:18px}.card{padding:8px;padding:var(--spacing-sm)}.savings-legend{gap:4px;gap:var(--spacing-xs)}.savings-legend-item{font-size:11px}.total-amount{font-size:14px}.next-payment-amount{font-size:16px}.timeline-card{padding:8px;padding:var(--spacing-sm)}.modal-content{padding:12px;padding:var(--spacing-md)}.form-group input,.form-group select,.form-group textarea{padding:10px}.color-option{height:28px;width:28px}.months-checkbox-grid{padding:8px;padding:var(--spacing-sm)}}@media (max-width:896px) and (orientation:landscape){.modal-overlay{align-items:center;padding:8px;padding:var(--spacing-sm)}.modal{max-height:85vh}.timeline-actions{opacity:1;transform:none;visibility:visible}}.app-container,.card,.content-wrapper,.header,.main-grid,.modal,.modal-content,.sidebar,.timeline-container{word-wrap:break-word;-webkit-overflow-scrolling:touch;overflow-wrap:break-word;word-break:break-word}@supports (-webkit-touch-callout:none){.form-group input,.form-group select,.form-group textarea{-webkit-appearance:none;border-radius:3px;border-radius:var(--radius-sm)}.form-group select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;background-size:16px 12px;padding-right:32px}}@media (hover:none) and (pointer:coarse){.btn-icon,.close-button,.password-toggle{min-height:44px;min-width:44px}.timeline-actions,.timeline-card:hover .timeline-actions{opacity:1;transform:none;visibility:visible}}.savings-header{align-items:center;display:flex;flex-wrap:wrap;gap:8px;gap:var(--spacing-sm);justify-content:space-between;margin-bottom:12px;margin-bottom:var(--spacing-md)}.total-net-worth{align-items:center;display:flex;gap:4px;gap:var(--spacing-xs)}.net-worth-label{color:#0a0a0aa6;color:var(--color-text-secondary);font-size:13px;font-weight:500}.net-worth-amount{color:#010101;font-size:18px;font-weight:700}@media (max-width:480px){.savings-header{align-items:stretch;flex-direction:column}.total-net-worth{justify-content:center;padding:8px;padding:var(--spacing-sm)}.net-worth-label{font-size:11px}.net-worth-amount{font-size:16px}}.timeline-card{border-left:4px solid #e3e2e080;border-left:4px solid var(--accent,var(--color-border))}.timeline-card-content.layout-3col{grid-gap:16px;grid-gap:var(--spacing-lg);align-items:start;display:grid;gap:16px;gap:var(--spacing-lg);grid-template-columns:130px 1fr 180px}.col-center,.col-left,.col-right{min-width:0}.date-block{align-items:center;background:#fff;border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:6px;border-radius:var(--radius-md);display:grid;grid-template-rows:auto auto auto;justify-items:center;padding:10px 8px;width:110px}.date-block .day{font-feature-settings:"tnum";color:#010101;font-size:18px;font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.02em;line-height:1}.date-block .month,.date-block .weekday{color:#0a0a0aa6;color:var(--color-text-secondary);font-size:12px;letter-spacing:.04em;text-transform:uppercase}.status-chip{background:#f2f1ee99;background:var(--color-bg-tertiary);border:1px solid #e3e2e080;border:1px solid var(--color-border);border-radius:999px;color:#010101;font-size:12px;font-weight:600;margin-top:8px;padding:4px 8px;white-space:nowrap}.status-chip.is-overdue{background:#e03e3e14;border-color:#e03e3e40;color:#e03e3e;color:var(--color-red)}.status-chip.is-upcoming{background:none;border:0}.title-row{align-items:center;display:flex;gap:8px;gap:var(--spacing-sm);min-width:0}.title-row h4{font-size:17px;font-weight:700;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chips-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.desc{-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#0a0a0aa6;color:var(--color-text-secondary);display:-webkit-box;font-size:13px;margin-top:8px;overflow:hidden}.col-right{align-items:flex-end;display:flex;flex-direction:column;gap:6px;text-align:right}.amount-lg{font-feature-settings:"tnum";color:#010101;font-size:18px;font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:-.01em}.freq{color:#0a0a0aa6;color:var(--color-text-secondary);font-size:12px}.timeline-card:hover .timeline-actions{opacity:1;transform:none;visibility:visible}.col-right .timeline-actions{display:flex;gap:4px;gap:var(--spacing-xs);opacity:0;transform:translateY(4px);transition:all .15s ease;visibility:hidden}.next-payment-label{display:none}.timeline-details,.timeline-header{display:none!important}@media (max-width:1024px){.timeline-card-content.layout-3col{grid-template-columns:120px 1fr 160px}}@media (max-width:768px){.timeline-card-content.layout-3col{gap:12px;gap:var(--spacing-md);grid-template-columns:1fr}.col-center,.col-left,.col-right{align-items:flex-start;text-align:left}.col-right .timeline-actions{opacity:1;transform:none;visibility:visible}.date-block{gap:8px;grid-template-columns:auto auto 1fr;grid-template-rows:auto;justify-items:start;width:100%}.date-block .day{font-size:16px}.date-block .month,.date-block .weekday{font-size:11px}.status-chip{align-self:flex-start}}
/*# sourceMappingURL=main.e3c9b589.css.map*/