@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap";.auth-wrapper{display:flex;height:100vh;font-family:Inter,sans-serif;overflow:hidden}@media (max-width: 768px){.auth-wrapper{flex-direction:column;height:auto;overflow:visible}}.auth-left{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#fff;padding:2rem 3rem;overflow-y:auto}@media (max-width: 768px){.auth-left{order:2;padding:1.5rem;min-height:auto;justify-content:flex-start}}.auth-left .logo{width:300px;margin-bottom:1rem}@media (max-width: 768px){.auth-left .logo{width:200px;margin-bottom:.5rem}}.auth-left h1{font-size:2rem;color:#007bb5;margin-bottom:0}@media (max-width: 768px){.auth-left h1{font-size:1.5rem;text-align:center}}.auth-left p{color:#64748b;margin-bottom:2rem}@media (max-width: 768px){.auth-left p{text-align:center;margin-bottom:1.5rem;font-size:.9rem}}.auth-left form{width:100%;max-width:350px;display:flex;flex-direction:column;gap:1rem}.auth-left form .MuiInputBase-root{background:#f1f5f9;border-radius:8px}.auth-left form .form-extras{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:#64748b}.auth-left form .form-extras input[type=checkbox]{margin-right:.5rem}.auth-left form .form-extras .link-btn{background:none;border:none;color:#007bb5;cursor:pointer;text-decoration:underline;font-size:.85rem}.auth-left form .primary-btn{background:#38b6ff;color:#fff;font-weight:600;border:none;border-radius:8px;padding:.75rem;cursor:pointer;transition:background .3s ease}.auth-left form .primary-btn:hover:enabled{background:#007bb5}.auth-left form .primary-btn:disabled{background:#94a3b8}.auth-left form .auth-toggle{font-size:.85rem;text-align:center}.auth-left form .auth-toggle button{background:none;border:none;color:#007bb5;cursor:pointer;text-decoration:underline}.auth-right{flex:1;display:flex;justify-content:center;align-items:center;border-top-left-radius:30px;border-bottom-left-radius:30px;overflow:hidden}.auth-right .illustration{width:100%;height:100%;border-radius:16px;border:8px solid white}.transaction-form-overlay{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background:#00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:1rem}.transaction-form-overlay .transaction-form-modal{background:#fff;border-radius:20px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;width:100%;max-width:750px;max-height:90vh;display:flex;flex-direction:column;font-family:Inter,sans-serif}.transaction-form-overlay .transaction-form-modal .form-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:1px solid #e5e7eb;flex-shrink:0}.transaction-form-overlay .transaction-form-modal .form-header h2{font-size:1.5rem;font-weight:600;color:#111827;margin:0}.transaction-form-overlay .transaction-form-modal .form-header .close-btn{background:none;border:none;color:#6b7280;cursor:pointer;padding:.5rem;border-radius:8px;transition:all .3s ease}.transaction-form-overlay .transaction-form-modal .form-header .close-btn:hover{background:#ef44441a;color:#ef4444}.transaction-form-overlay .transaction-form-modal .transaction-form{padding:2rem;flex:1;overflow-y:auto;display:flex;flex-direction:column}.transaction-form-overlay .transaction-form-modal .transaction-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}@media (max-width: 640px){.transaction-form-overlay .transaction-form-modal .transaction-form .form-row{grid-template-columns:1fr}}.transaction-form-overlay .transaction-form-modal .transaction-form .form-group{margin-bottom:1rem}.transaction-form-overlay .transaction-form-modal .transaction-form .form-group.full-width{grid-column:1/-1}.transaction-form-overlay .transaction-form-modal .transaction-form .form-group label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;color:#111827;margin-bottom:.5rem}.transaction-form-overlay .transaction-form-modal .transaction-form .form-group label svg{color:#38b6ff}.transaction-form-overlay .transaction-form-modal .transaction-form .form-group input,.transaction-form-overlay .transaction-form-modal .transaction-form .form-group select,.transaction-form-overlay .transaction-form-modal .transaction-form .form-group textarea{width:100%;padding:.75rem 1rem;border:1px solid #e5e7eb;border-radius:12px;font-size:.875rem;font-family:Inter,sans-serif;transition:all .3s ease;background:#fff}.transaction-form-overlay .transaction-form-modal .transaction-form .form-group input:focus,.transaction-form-overlay .transaction-form-modal .transaction-form .form-group select:focus,.transaction-form-overlay .transaction-form-modal .transaction-form .form-group textarea:focus{outline:none;border-color:#38b6ff;box-shadow:0 0 0 3px #38b6ff1a}.transaction-form-overlay .transaction-form-modal .transaction-form .form-group input::placeholder,.transaction-form-overlay .transaction-form-modal .transaction-form .form-group select::placeholder,.transaction-form-overlay .transaction-form-modal .transaction-form .form-group textarea::placeholder{color:#9ca3af}.transaction-form-overlay .transaction-form-modal .transaction-form .form-group textarea{resize:vertical;min-height:80px}.transaction-form-overlay .transaction-form-modal .transaction-form .form-group select{cursor:pointer}.transaction-form-overlay .transaction-form-modal .transaction-form .error-message{background:#ef44441a;color:#ef4444;padding:.75rem 1rem;border-radius:8px;font-size:.875rem;margin-bottom:1rem;border:1px solid rgba(239,68,68,.2)}.transaction-form-overlay .transaction-form-modal .transaction-form .form-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:auto;padding-top:1rem;border-top:1px solid #e5e7eb;flex-shrink:0}.transaction-form-overlay .transaction-form-modal .transaction-form .form-actions button{padding:.75rem 1.5rem;border-radius:12px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.5rem}.transaction-form-overlay .transaction-form-modal .transaction-form .form-actions button:disabled{opacity:.6;cursor:not-allowed}.transaction-form-overlay .transaction-form-modal .transaction-form .form-actions .cancel-btn{background:transparent;color:#6b7280;border:1px solid #e5e7eb}.transaction-form-overlay .transaction-form-modal .transaction-form .form-actions .cancel-btn:hover:not(:disabled){background:#f9fafb;color:#111827}.transaction-form-overlay .transaction-form-modal .transaction-form .form-actions .save-btn{background:#38b6ff;color:#fff;border:none}.transaction-form-overlay .transaction-form-modal .transaction-form .form-actions .save-btn:hover:not(:disabled){background:#007bb5;transform:translateY(-1px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@media (max-width: 640px){.transaction-form-overlay{padding:0;align-items:flex-end}.transaction-form-overlay .transaction-form-modal{width:100%;max-width:100%;margin:0;border-radius:20px 20px 0 0;max-height:90vh;overflow-y:auto}.transaction-form-overlay .transaction-form-modal .form-header{padding:1rem 1.5rem;position:sticky;top:0;background:#fff;z-index:10;border-bottom:1px solid #e5e7eb}.transaction-form-overlay .transaction-form-modal .form-header h2{font-size:1.25rem}.transaction-form-overlay .transaction-form-modal .form-header .close-btn{min-width:40px;min-height:40px}.transaction-form-overlay .transaction-form-modal .transaction-form{padding:1.5rem}.transaction-form-overlay .transaction-form-modal .transaction-form .form-group{margin-bottom:1.25rem}.transaction-form-overlay .transaction-form-modal .transaction-form .form-group label{font-size:.875rem;margin-bottom:.5rem}.transaction-form-overlay .transaction-form-modal .transaction-form .form-group input,.transaction-form-overlay .transaction-form-modal .transaction-form .form-group select,.transaction-form-overlay .transaction-form-modal .transaction-form .form-group textarea{padding:.75rem;font-size:16px;border-radius:12px}.transaction-form-overlay .transaction-form-modal .transaction-form .form-group textarea{min-height:80px}.transaction-form-overlay .transaction-form-modal .transaction-form .form-row{flex-direction:column;gap:1.25rem}.transaction-form-overlay .transaction-form-modal .transaction-form .form-row .form-group{width:100%}.transaction-form-overlay .transaction-form-modal .transaction-form .form-actions{flex-direction:column;gap:.75rem;margin-top:2rem;padding-top:1rem;border-top:1px solid #e5e7eb}.transaction-form-overlay .transaction-form-modal .transaction-form .form-actions button{width:100%;justify-content:center;padding:.875rem;font-size:.9rem;min-height:48px}.transaction-form-overlay .transaction-form-modal .transaction-form .form-actions .cancel-btn{order:2}.transaction-form-overlay .transaction-form-modal .transaction-form .form-actions .submit-btn{order:1}}@media (max-width: 480px){.transaction-form-overlay .transaction-form-modal .form-header{padding:.875rem 1.25rem}.transaction-form-overlay .transaction-form-modal .form-header h2{font-size:1.125rem}.transaction-form-overlay .transaction-form-modal .transaction-form{padding:1.25rem}.transaction-form-overlay .transaction-form-modal .transaction-form .form-group{margin-bottom:1rem}.transaction-form-overlay .transaction-form-modal .transaction-form .form-group input,.transaction-form-overlay .transaction-form-modal .transaction-form .form-group select,.transaction-form-overlay .transaction-form-modal .transaction-form .form-group textarea{padding:.625rem}.transaction-form-overlay .transaction-form-modal .transaction-form .form-actions button{padding:.75rem;font-size:.875rem}}.notifications-overlay{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background:#00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:1rem}.notifications-overlay .notifications-dialog{background:#fff;border-radius:20px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;width:100%;max-width:700px;max-height:85vh;min-height:600px;display:flex;flex-direction:column;font-family:Inter,sans-serif}.notifications-overlay .notifications-dialog .dialog-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:1px solid #e5e7eb}.notifications-overlay .notifications-dialog .dialog-header .header-left{display:flex;align-items:center;gap:.75rem}.notifications-overlay .notifications-dialog .dialog-header .header-left svg{color:#38b6ff}.notifications-overlay .notifications-dialog .dialog-header .header-left h2{font-size:1.25rem;font-weight:600;color:#111827;margin:0}.notifications-overlay .notifications-dialog .dialog-header .header-left .unread-badge{background:#ef4444;color:#fff;font-size:.75rem;font-weight:600;padding:.25rem .5rem;border-radius:12px;min-width:20px;text-align:center}.notifications-overlay .notifications-dialog .dialog-header .header-actions{display:flex;align-items:center;gap:.5rem}.notifications-overlay .notifications-dialog .dialog-header .header-actions button{background:none;border:none;color:#6b7280;cursor:pointer;padding:.5rem;border-radius:8px;transition:all .3s ease;display:flex;align-items:center;gap:.375rem;font-size:.875rem}.notifications-overlay .notifications-dialog .dialog-header .header-actions button:hover{background:#f9fafb;color:#111827}.notifications-overlay .notifications-dialog .dialog-header .header-actions button.mark-all-read-btn:hover{background:#10b9811a;color:#10b981}.notifications-overlay .notifications-dialog .dialog-header .header-actions button.clear-old-btn:hover,.notifications-overlay .notifications-dialog .dialog-header .header-actions button.close-btn:hover{background:#ef44441a;color:#ef4444}.notifications-overlay .notifications-dialog .notifications-content{flex:1;overflow-y:auto}.notifications-overlay .notifications-dialog .notifications-content .loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;color:#6b7280}.notifications-overlay .notifications-dialog .notifications-content .loading-state .loader{width:32px;height:32px;border:3px solid #e5e7eb;border-top:3px solid #38b6ff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}.notifications-overlay .notifications-dialog .notifications-content .loading-state p{margin:0;font-size:.875rem}.notifications-overlay .notifications-dialog .notifications-content .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 2rem;text-align:center;color:#6b7280}.notifications-overlay .notifications-dialog .notifications-content .empty-state svg{margin-bottom:1rem;opacity:.5}.notifications-overlay .notifications-dialog .notifications-content .empty-state h3{font-size:1.125rem;font-weight:600;color:#111827;margin:0 0 .5rem}.notifications-overlay .notifications-dialog .notifications-content .empty-state p{margin:0;font-size:.875rem}.notifications-overlay .notifications-dialog .notifications-content .notifications-list{padding:1rem 0}.notifications-overlay .notifications-dialog .notifications-content .notifications-list .notification-item{display:flex;gap:1rem;padding:1rem 2rem;border-bottom:1px solid rgba(229,231,235,.5);cursor:pointer;transition:all .3s ease;position:relative}.notifications-overlay .notifications-dialog .notifications-content .notifications-list .notification-item:last-child{border-bottom:none}.notifications-overlay .notifications-dialog .notifications-content .notifications-list .notification-item:hover{background:#f9fafb}.notifications-overlay .notifications-dialog .notifications-content .notifications-list .notification-item.unread{background:#38b6ff05;border-left:3px solid #38b6ff}.notifications-overlay .notifications-dialog .notifications-content .notifications-list .notification-item.unread:hover{background:#38b6ff0d}.notifications-overlay .notifications-dialog .notifications-content .notifications-list .notification-item .notification-icon{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:#38b6ff1a;display:flex;align-items:center;justify-content:center;margin-top:.25rem}.notifications-overlay .notifications-dialog .notifications-content .notifications-list .notification-item .notification-content{flex:1;min-width:0}.notifications-overlay .notifications-dialog .notifications-content .notifications-list .notification-item .notification-content .notification-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem}.notifications-overlay .notifications-dialog .notifications-content .notifications-list .notification-item .notification-content .notification-header h4{font-size:.875rem;font-weight:600;color:#111827;margin:0;line-height:1.4}.notifications-overlay .notifications-dialog .notifications-content .notifications-list .notification-item .notification-content .notification-header .notification-time{font-size:.75rem;color:#9ca3af;flex-shrink:0;margin-left:1rem}.notifications-overlay .notifications-dialog .notifications-content .notifications-list .notification-item .notification-content p{font-size:.875rem;color:#6b7280;margin:0 0 .75rem;line-height:1.5}.notifications-overlay .notifications-dialog .notifications-content .notifications-list .notification-item .notification-content .notification-meta{display:flex;align-items:center;justify-content:space-between}.notifications-overlay .notifications-dialog .notifications-content .notifications-list .notification-item .notification-content .notification-meta .notification-type{font-size:.75rem;font-weight:500;padding:.25rem .5rem;border-radius:6px;text-transform:capitalize}.notifications-overlay .notifications-dialog .notifications-content .notifications-list .notification-item .notification-content .notification-meta .notification-type.system{background:#38b6ff1a;color:#38b6ff}.notifications-overlay .notifications-dialog .notifications-content .notifications-list .notification-item .notification-content .notification-meta .notification-type.budget{background:#ef44441a;color:#ef4444}.notifications-overlay .notifications-dialog .notifications-content .notifications-list .notification-item .notification-content .notification-meta .notification-type.auth{background:#f59e0b1a;color:#f59e0b}.notifications-overlay .notifications-dialog .notifications-content .notifications-list .notification-item .notification-content .notification-meta .notification-type.promo{background:#10b9811a;color:#10b981}.notifications-overlay .notifications-dialog .notifications-content .notifications-list .notification-item .notification-content .notification-meta .unread-indicator{color:#38b6ff;font-size:1.5rem;line-height:1}@media (max-width: 640px){.notifications-overlay{padding:.5rem}.notifications-overlay .notifications-dialog{max-height:90vh}.notifications-overlay .notifications-dialog .dialog-header{padding:1rem 1.5rem}.notifications-overlay .notifications-dialog .dialog-header .header-left h2{font-size:1.125rem}.notifications-overlay .notifications-dialog .dialog-header .header-actions button{padding:.375rem;font-size:.75rem}.notifications-overlay .notifications-dialog .dialog-header .header-actions button span{display:none}.notifications-overlay .notifications-dialog .notifications-content .notifications-list .notification-item{padding:1rem 1.5rem;gap:.75rem}.notifications-overlay .notifications-dialog .notifications-content .notifications-list .notification-item .notification-icon{width:32px;height:32px}.notifications-overlay .notifications-dialog .notifications-content .notifications-list .notification-item .notification-content .notification-header{flex-direction:column;align-items:flex-start;gap:.25rem}.notifications-overlay .notifications-dialog .notifications-content .notifications-list .notification-item .notification-content .notification-header .notification-time{margin-left:0}}.search-autocomplete{position:relative;width:100%;max-width:400px;font-family:Inter,sans-serif}.search-autocomplete .search-input-container{position:relative;display:flex;align-items:center;background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:.75rem 1rem;transition:all .3s ease}.search-autocomplete .search-input-container:focus-within{border-color:#38b6ff;box-shadow:0 0 0 3px #38b6ff1a}.search-autocomplete .search-input-container svg{color:#6b7280;margin-right:.75rem;flex-shrink:0}.search-autocomplete .search-input-container input{flex:1;border:none;outline:none;font-size:.875rem;color:#111827;background:transparent;font-family:Inter,sans-serif}.search-autocomplete .search-input-container input::placeholder{color:#9ca3af}.search-autocomplete .search-input-container .search-loading{margin-left:.5rem}.search-autocomplete .search-input-container .search-loading .spinner{width:16px;height:16px;border:2px solid #e5e7eb;border-top:2px solid #38b6ff;border-radius:50%;animation:spin 1s linear infinite}.search-autocomplete .search-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;z-index:9998;margin-top:.5rem;max-height:400px;overflow:hidden}.search-autocomplete .search-dropdown.no-results .no-results-message{padding:1rem;text-align:center;color:#6b7280;font-size:.875rem}.search-autocomplete .search-dropdown .search-results-header{padding:.75rem 1rem;border-bottom:1px solid #e5e7eb;background:#f9fafb;font-size:.75rem;font-weight:500;color:#6b7280;text-transform:uppercase;letter-spacing:.05em}.search-autocomplete .search-dropdown .search-results{max-height:320px;overflow-y:auto}.search-autocomplete .search-dropdown .search-results .search-result-item{display:flex;align-items:center;padding:1rem;border-bottom:1px solid rgba(229,231,235,.5);cursor:pointer;transition:all .2s ease}.search-autocomplete .search-dropdown .search-results .search-result-item:last-child{border-bottom:none}.search-autocomplete .search-dropdown .search-results .search-result-item:hover{background:#f9fafb;transform:translate(4px)}.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-icon{margin-right:1rem;flex-shrink:0}.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-icon .icon-wrapper{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-icon .icon-wrapper.debit{background:linear-gradient(135deg,#ef4444,#dc2626)}.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-icon .icon-wrapper.credit{background:linear-gradient(135deg,#10b981,#059669)}.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-details{flex:1;min-width:0}.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-details .transaction-title{font-size:.875rem;font-weight:600;color:#111827;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-details .transaction-meta{font-size:.75rem;color:#6b7280;margin-bottom:.25rem}.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-details .transaction-description{font-size:.75rem;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-amount{font-size:.875rem;font-weight:600;margin-left:1rem;flex-shrink:0}.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-amount.debit{color:#ef4444}.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-amount.credit{color:#10b981}@media (max-width: 768px){.search-autocomplete{flex:1;max-width:none;min-width:0}.search-autocomplete .search-input{padding:.625rem .875rem;font-size:16px;border-radius:12px}.search-autocomplete .search-dropdown{left:0;right:0;width:auto;margin:0 -1rem;border-radius:0 0 16px 16px;max-height:60vh}.search-autocomplete .search-dropdown .search-results{max-height:50vh}.search-autocomplete .search-dropdown .search-results .search-result-item{padding:.875rem 1rem;min-height:60px}.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-icon{margin-right:.75rem;flex-shrink:0}.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-icon .icon-wrapper{width:36px;height:36px}.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-details{flex:1;min-width:0}.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-details .transaction-title{font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-details .transaction-meta{font-size:.75rem;margin-top:.125rem}.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-details .transaction-description{font-size:.7rem;margin-top:.125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-amount{font-size:.875rem;margin-left:.75rem;flex-shrink:0;text-align:right;min-width:fit-content}.search-autocomplete .search-dropdown .search-results .no-results{padding:1.5rem 1rem;font-size:.875rem}.search-autocomplete .search-dropdown .search-results .loading{padding:1.5rem 1rem}}@media (max-width: 480px){.search-autocomplete .search-input{padding:.5rem .75rem;font-size:16px}.search-autocomplete .search-dropdown .search-results .search-result-item{padding:.75rem .875rem}.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-icon .icon-wrapper{width:32px;height:32px}.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-details .transaction-title{font-size:.8rem}.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-details .transaction-meta,.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-details .transaction-description{font-size:.7rem}.search-autocomplete .search-dropdown .search-results .search-result-item .transaction-amount{font-size:.8rem}}.transaction-detail-overlay{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background:#00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:1rem}.transaction-detail-overlay .transaction-detail-modal{background:#fff;border-radius:20px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;width:100%;max-width:600px;max-height:90vh;display:flex;flex-direction:column;font-family:Inter,sans-serif}.transaction-detail-overlay .transaction-detail-modal .detail-header{display:flex;justify-content:space-between;align-items:flex-start;padding:2rem 2rem 1rem;border-bottom:1px solid #e5e7eb;flex-shrink:0}.transaction-detail-overlay .transaction-detail-modal .detail-header .header-content{display:flex;align-items:flex-start;gap:1rem;flex:1}.transaction-detail-overlay .transaction-detail-modal .detail-header .header-content .transaction-type-icon .icon-wrapper{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff}.transaction-detail-overlay .transaction-detail-modal .detail-header .header-content .transaction-type-icon .icon-wrapper.debit{background:linear-gradient(135deg,#ef4444,#dc2626)}.transaction-detail-overlay .transaction-detail-modal .detail-header .header-content .transaction-type-icon .icon-wrapper.credit{background:linear-gradient(135deg,#10b981,#059669)}.transaction-detail-overlay .transaction-detail-modal .detail-header .header-content .header-info{flex:1}.transaction-detail-overlay .transaction-detail-modal .detail-header .header-content .header-info h2{font-size:1.5rem;font-weight:600;color:#111827;margin:0 0 .5rem;line-height:1.3}.transaction-detail-overlay .transaction-detail-modal .detail-header .header-content .header-info .transaction-amount{font-size:1.25rem;font-weight:700}.transaction-detail-overlay .transaction-detail-modal .detail-header .header-content .header-info .transaction-amount.debit{color:#ef4444}.transaction-detail-overlay .transaction-detail-modal .detail-header .header-content .header-info .transaction-amount.credit{color:#10b981}.transaction-detail-overlay .transaction-detail-modal .detail-header .close-btn{background:none;border:none;color:#6b7280;cursor:pointer;padding:.5rem;border-radius:8px;transition:all .3s ease;flex-shrink:0}.transaction-detail-overlay .transaction-detail-modal .detail-header .close-btn:hover{background:#ef44441a;color:#ef4444}.transaction-detail-overlay .transaction-detail-modal .detail-content{padding:2rem;flex:1;overflow-y:auto}.transaction-detail-overlay .transaction-detail-modal .detail-content .detail-section .detail-item{display:flex;justify-content:space-between;align-items:flex-start;padding:1rem 0;border-bottom:1px solid rgba(229,231,235,.5)}.transaction-detail-overlay .transaction-detail-modal .detail-content .detail-section .detail-item:last-child{border-bottom:none}.transaction-detail-overlay .transaction-detail-modal .detail-content .detail-section .detail-item .detail-label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;color:#6b7280;min-width:120px}.transaction-detail-overlay .transaction-detail-modal .detail-content .detail-section .detail-item .detail-label svg{color:#38b6ff}.transaction-detail-overlay .transaction-detail-modal .detail-content .detail-section .detail-item .detail-value{font-size:.875rem;color:#111827;font-weight:500;text-align:right;flex:1}.transaction-detail-overlay .transaction-detail-modal .detail-content .detail-section .detail-item .detail-value .category-tag{background:#38b6ff1a;color:#38b6ff;padding:.25rem .75rem;border-radius:20px;font-size:.75rem;font-weight:600;border:1px solid rgba(56,182,255,.2)}.transaction-detail-overlay .transaction-detail-modal .detail-content .detail-section .detail-item .detail-value .type-badge{padding:.25rem .75rem;border-radius:20px;font-size:.75rem;font-weight:600}.transaction-detail-overlay .transaction-detail-modal .detail-content .detail-section .detail-item .detail-value .type-badge.debit{background:#ef44441a;color:#ef4444;border:1px solid rgba(239,68,68,.2)}.transaction-detail-overlay .transaction-detail-modal .detail-content .detail-section .detail-item .detail-value .type-badge.credit{background:#10b9811a;color:#10b981;border:1px solid rgba(16,185,129,.2)}.transaction-detail-overlay .transaction-detail-modal .detail-content .detail-section .detail-item .detail-value .autopay-badge{background:#f59e0b1a;color:#f59e0b;padding:.25rem .75rem;border-radius:20px;font-size:.75rem;font-weight:600;border:1px solid rgba(245,158,11,.2)}.transaction-detail-overlay .transaction-detail-modal .detail-content .error-message{display:flex;align-items:center;gap:.5rem;background:#ef44441a;color:#ef4444;padding:.75rem 1rem;border-radius:8px;font-size:.875rem;margin:1rem 0;border:1px solid rgba(239,68,68,.2)}.transaction-detail-overlay .transaction-detail-modal .detail-content .detail-actions{display:flex;gap:1rem;margin-top:2rem;padding-top:1rem;border-top:1px solid #e5e7eb}.transaction-detail-overlay .transaction-detail-modal .detail-content .detail-actions button{flex:1;padding:.75rem 1rem;border-radius:12px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;gap:.5rem}.transaction-detail-overlay .transaction-detail-modal .detail-content .detail-actions button:disabled{opacity:.6;cursor:not-allowed}.transaction-detail-overlay .transaction-detail-modal .detail-content .detail-actions .edit-btn{background:#38b6ff;color:#fff;border:none}.transaction-detail-overlay .transaction-detail-modal .detail-content .detail-actions .edit-btn:hover:not(:disabled){background:#007bb5;transform:translateY(-1px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transaction-detail-overlay .transaction-detail-modal .detail-content .detail-actions .delete-btn{background:transparent;color:#ef4444;border:1px solid rgba(239,68,68,.3)}.transaction-detail-overlay .transaction-detail-modal .detail-content .detail-actions .delete-btn:hover:not(:disabled){background:#ef44441a;border-color:#ef4444}.delete-confirm-overlay{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10000;padding:1rem}.delete-confirm-overlay .delete-confirm-modal{background:#fff;border-radius:16px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;width:100%;max-width:400px;font-family:Inter,sans-serif}.delete-confirm-overlay .delete-confirm-modal .confirm-header{display:flex;align-items:center;gap:1rem;padding:1.5rem 1.5rem 1rem}.delete-confirm-overlay .delete-confirm-modal .confirm-header .warning-icon{width:40px;height:40px;border-radius:50%;background:#f59e0b1a;display:flex;align-items:center;justify-content:center;color:#f59e0b;flex-shrink:0}.delete-confirm-overlay .delete-confirm-modal .confirm-header h3{font-size:1.125rem;font-weight:600;color:#111827;margin:0}.delete-confirm-overlay .delete-confirm-modal .confirm-content{padding:0 1.5rem 1rem}.delete-confirm-overlay .delete-confirm-modal .confirm-content p{color:#6b7280;font-size:.875rem;margin:0 0 1rem;line-height:1.5}.delete-confirm-overlay .delete-confirm-modal .confirm-content .transaction-preview{background:#f9fafb;padding:1rem;border-radius:8px;display:flex;justify-content:space-between;align-items:center;margin:1rem 0}.delete-confirm-overlay .delete-confirm-modal .confirm-content .transaction-preview strong{color:#111827;font-size:.875rem}.delete-confirm-overlay .delete-confirm-modal .confirm-content .transaction-preview span{font-weight:600;font-size:.875rem}.delete-confirm-overlay .delete-confirm-modal .confirm-content .transaction-preview span.debit{color:#ef4444}.delete-confirm-overlay .delete-confirm-modal .confirm-content .transaction-preview span.credit{color:#10b981}.delete-confirm-overlay .delete-confirm-modal .confirm-content .warning-text{color:#f59e0b;font-size:.75rem;font-weight:500}.delete-confirm-overlay .delete-confirm-modal .confirm-actions{display:flex;gap:.75rem;padding:1rem 1.5rem 1.5rem}.delete-confirm-overlay .delete-confirm-modal .confirm-actions button{flex:1;padding:.75rem 1rem;border-radius:8px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .3s ease}.delete-confirm-overlay .delete-confirm-modal .confirm-actions button:disabled{opacity:.6;cursor:not-allowed}.delete-confirm-overlay .delete-confirm-modal .confirm-actions .cancel-btn{background:transparent;color:#6b7280;border:1px solid #e5e7eb}.delete-confirm-overlay .delete-confirm-modal .confirm-actions .cancel-btn:hover:not(:disabled){background:#f9fafb;color:#111827}.delete-confirm-overlay .delete-confirm-modal .confirm-actions .confirm-delete-btn{background:#ef4444;color:#fff;border:none}.delete-confirm-overlay .delete-confirm-modal .confirm-actions .confirm-delete-btn:hover:not(:disabled){background:#dc2626;transform:translateY(-1px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@media (max-width: 640px){.transaction-detail-overlay{padding:.5rem}.transaction-detail-overlay .transaction-detail-modal{max-width:100%;max-height:95vh}.transaction-detail-overlay .transaction-detail-modal .detail-header{padding:1.5rem 1.5rem 1rem}.transaction-detail-overlay .transaction-detail-modal .detail-header .header-content{gap:.75rem}.transaction-detail-overlay .transaction-detail-modal .detail-header .header-content .transaction-type-icon .icon-wrapper{width:40px;height:40px}.transaction-detail-overlay .transaction-detail-modal .detail-header .header-content .header-info h2{font-size:1.25rem}.transaction-detail-overlay .transaction-detail-modal .detail-header .header-content .header-info .transaction-amount{font-size:1.125rem}.transaction-detail-overlay .transaction-detail-modal .detail-content{padding:1.5rem}.transaction-detail-overlay .transaction-detail-modal .detail-content .detail-section .detail-item{flex-direction:column;align-items:flex-start;gap:.5rem}.transaction-detail-overlay .transaction-detail-modal .detail-content .detail-section .detail-item .detail-label{min-width:auto}.transaction-detail-overlay .transaction-detail-modal .detail-content .detail-section .detail-item .detail-value{text-align:left}.transaction-detail-overlay .transaction-detail-modal .detail-content .detail-actions{flex-direction:column}.transaction-detail-overlay .transaction-detail-modal .detail-content .detail-actions button{width:100%}.delete-confirm-overlay{padding:1rem}.delete-confirm-overlay .delete-confirm-modal .confirm-actions{flex-direction:column}.delete-confirm-overlay .delete-confirm-modal .confirm-actions button{width:100%}}.navbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem;margin-top:1rem;gap:2rem}.navbar .navbar-left{flex:1;display:flex;align-items:center;gap:1rem}.navbar .navbar-left .navbar-content h1{font-size:2rem;font-weight:700;color:#111827;margin:0 0 .5rem;background:linear-gradient(135deg,#111827,#6b7280);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.navbar .navbar-left .navbar-content p{color:#6b7280;font-size:1rem;margin:0}.navbar .navbar-right{display:flex;align-items:center;gap:1rem}.navbar .navbar-right .notification-btn{position:relative;padding:.75rem;background:#fff;border:1px solid #e5e7eb;border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 1px 2px #0000000d;color:#6b7280}.navbar .navbar-right .notification-btn:hover{background:#38b6ff;color:#fff;transform:translateY(-2px);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.navbar .navbar-right .notification-btn .notification-badge{position:absolute;top:-4px;right:-4px;background:#ef4444;color:#fff;font-size:.625rem;font-weight:600;padding:.125rem .375rem;border-radius:10px;min-width:18px;text-align:center}.navbar .navbar-right .add-transaction-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background:linear-gradient(135deg,#38b6ff,#007bb5);color:#fff;border:none;border-radius:12px;font-weight:600;font-size:.875rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.navbar .navbar-right .add-transaction-btn:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@media (max-width: 768px){.navbar{flex-direction:column;align-items:stretch;gap:1rem;margin-bottom:1.5rem;margin-top:.5rem}.navbar .navbar-left .navbar-content h1{font-size:1.5rem;margin-bottom:.25rem}.navbar .navbar-left .navbar-content p{font-size:.875rem}.navbar .navbar-right{justify-content:flex-start;gap:.75rem}.navbar .navbar-right .notification-btn{display:none}.navbar .navbar-right .add-transaction-btn{padding:.75rem 1.25rem;font-size:.875rem;min-height:48px;border-radius:14px;box-shadow:0 4px 15px #38b6ff4d}.navbar .navbar-right .add-transaction-btn:hover{transform:translateY(-3px);box-shadow:0 8px 25px #38b6ff66}}@media (max-width: 480px){.navbar{gap:.75rem;margin-bottom:1rem}.navbar .navbar-left .navbar-content h1{font-size:1.375rem}.navbar .navbar-left .navbar-content p{font-size:.8rem}.navbar .navbar-right{flex-direction:column;gap:.5rem}.navbar .navbar-right .add-transaction-btn{order:-1;width:100%;padding:.75rem;font-size:.875rem}.navbar .navbar-right .notification-btn{align-self:flex-end;position:absolute;top:0;right:0}}.dialog-title{background:linear-gradient(135deg,#f8fafc,#e2e8f0);border-bottom:1px solid #e2e8f0}.dialog-title .title-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:linear-gradient(135deg,#38b6ff,#007bb5);border-radius:12px;color:#fff}.dialog-content{padding:24px!important}.dialog-content .current-value{background:#f1f5f9;padding:12px 16px;border-radius:8px;border-left:4px solid #38b6ff}.dialog-actions{padding:16px 24px!important;gap:12px}.dialog-actions .save-button{background:linear-gradient(135deg,#38b6ff,#007bb5)!important;color:#fff!important;font-weight:600!important;padding:8px 24px!important;border-radius:8px!important;text-transform:none!important}.dialog-actions .save-button:hover{background:linear-gradient(135deg,#007bb5,#005a8a)!important;transform:translateY(-1px);box-shadow:0 4px 12px #38b6ff4d!important}.dialog-actions .save-button:disabled{background:#94a3b8!important;transform:none!important;box-shadow:none!important}@media (max-width: 600px){.dialog-content{padding:16px!important}.dialog-actions{padding:12px 16px!important;flex-direction:column}.dialog-actions button{width:100%}}@keyframes slideInLeft{0%{transform:translate(-100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeInUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes shimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}.dashboard-container{display:flex;min-height:100vh;font-family:Inter,sans-serif;background:linear-gradient(135deg,#f9fafb,#eef2f7);position:relative;overflow-x:hidden}.dashboard-container:before,.dashboard-container:after{content:"";position:fixed;border-radius:50%;filter:blur(120px);opacity:.1;z-index:0;animation:float 6s ease-in-out infinite}.dashboard-container:before{top:-10%;left:-5%;width:400px;height:400px;background:#38b6ff;animation-delay:0s}.dashboard-container:after{bottom:-10%;right:-5%;width:350px;height:350px;background:#007bb5;animation-delay:3s}.dashboard-container>*{position:relative;z-index:1}.main-content{flex:1;padding:0 2rem 2rem;min-height:100vh;background:transparent}.main-content .summary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-bottom:2rem}.main-content .summary-cards .summary-card{background:#fff;border-radius:20px;padding:1.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);position:relative;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1)}.main-content .summary-cards .summary-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s}.main-content .summary-cards .summary-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.main-content .summary-cards .summary-card:hover:before{left:100%}.main-content .summary-cards .summary-card .card-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:#fff}.main-content .summary-cards .summary-card .card-content h3{font-size:.875rem;font-weight:600;color:#6b7280;margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.5px}.main-content .summary-cards .summary-card .card-content .amount{font-size:1.875rem;font-weight:700;color:#111827;margin:0 0 .5rem}.main-content .summary-cards .summary-card .card-content .change{font-size:.75rem;font-weight:500;padding:.25rem .5rem;border-radius:6px}.main-content .summary-cards .summary-card .card-content .change.positive{background:#10b9811a;color:#10b981}.main-content .summary-cards .summary-card .card-content .change.negative{background:#ef44441a;color:#ef4444}.main-content .summary-cards .summary-card .card-content .budget-details{font-size:.75rem;color:#9ca3af;margin-bottom:.75rem;display:block}.main-content .summary-cards .summary-card .card-content .progress-bar{width:100%;height:6px;background:#e5e7eb80;border-radius:3px;overflow:hidden}.main-content .summary-cards .summary-card .card-content .progress-bar .progress-fill{height:100%;background:linear-gradient(135deg,#38b6ff,#007bb5);border-radius:3px;transition:width 1s ease-out}.main-content .summary-cards .summary-card.debit .card-icon{background:linear-gradient(135deg,#ef4444,#dc2626)}.main-content .summary-cards .summary-card.credit .card-icon{background:linear-gradient(135deg,#10b981,#059669)}.main-content .summary-cards .summary-card.balance .card-icon{background:linear-gradient(135deg,#38b6ff,#007bb5)}.main-content .summary-cards .summary-card.budget .card-icon{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.main-content .summary-cards .summary-card .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.main-content .summary-cards .summary-card .card-header h3{margin:0}.main-content .summary-cards .summary-card .card-header .edit-btn{background:#38b6ff1a;border:none;border-radius:8px;padding:.5rem;color:#38b6ff;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.main-content .summary-cards .summary-card .card-header .edit-btn:hover{background:#38b6ff;color:#fff;transform:scale(1.1)}.main-content .summary-cards .summary-card .no-budget .set-budget-text{font-size:1.5rem;font-weight:600;color:#6b7280;margin:0 0 .5rem}.main-content .summary-cards .summary-card .no-budget .set-budget-desc{font-size:.875rem;color:#9ca3af;line-height:1.4}.main-content .charts-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:1.5rem;margin-bottom:2rem}.main-content .charts-section .chart-card{background:#fff;border-radius:20px;padding:1.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:all .4s cubic-bezier(.4,0,.2,1)}.main-content .charts-section .chart-card:hover{transform:translateY(-5px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.main-content .charts-section .chart-card .chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.main-content .charts-section .chart-card .chart-header h3{font-size:1.125rem;font-weight:600;color:#111827;margin:0}.main-content .charts-section .chart-card .chart-header .chart-filter-btn{padding:.5rem;background:#38b6ff1a;border:none;border-radius:8px;color:#38b6ff;cursor:pointer;transition:all .3s ease}.main-content .charts-section .chart-card .chart-header .chart-filter-btn:hover{background:#38b6ff;color:#fff;transform:scale(1.1)}.main-content .charts-section .chart-card .chart-header .chart-period{display:flex;gap:.5rem}.main-content .charts-section .chart-card .chart-header .chart-period .period-btn{padding:.375rem .75rem;font-size:.75rem;font-weight:500;border-radius:6px;cursor:pointer;transition:all .3s ease;color:#9ca3af}.main-content .charts-section .chart-card .chart-header .chart-period .period-btn.active{background:#38b6ff;color:#fff}.main-content .charts-section .chart-card .chart-header .chart-period .period-btn:not(.active):hover{background:#38b6ff1a;color:#38b6ff}.main-content .recent-transactions{background:#fff;border-radius:20px;padding:1.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.main-content .recent-transactions .section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.main-content .recent-transactions .section-header h3{font-size:1.125rem;font-weight:600;color:#111827;margin:0}.main-content .recent-transactions .section-header .view-all-btn{padding:.5rem 1rem;background:#38b6ff1a;color:#38b6ff;border:none;border-radius:8px;font-weight:500;font-size:.875rem;cursor:pointer;transition:all .3s ease}.main-content .recent-transactions .section-header .view-all-btn:hover{background:#38b6ff;color:#fff;transform:translateY(-1px)}.main-content .recent-transactions .transactions-list .transaction-item{display:flex;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid rgba(229,231,235,.5);transition:all .3s ease;cursor:pointer}.main-content .recent-transactions .transactions-list .transaction-item:last-child{border-bottom:none}.main-content .recent-transactions .transactions-list .transaction-item:hover{background:#38b6ff05;border-radius:12px;padding-left:1rem;padding-right:1rem}.main-content .recent-transactions .transactions-list .transaction-item .transaction-icon .icon-wrapper{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff}.main-content .recent-transactions .transactions-list .transaction-item .transaction-icon .icon-wrapper.debit{background:linear-gradient(135deg,#ef4444,#dc2626)}.main-content .recent-transactions .transactions-list .transaction-item .transaction-icon .icon-wrapper.credit{background:linear-gradient(135deg,#10b981,#059669)}.main-content .recent-transactions .transactions-list .transaction-item .transaction-details{flex:1}.main-content .recent-transactions .transactions-list .transaction-item .transaction-details h4{font-size:.875rem;font-weight:600;color:#111827;margin:0 0 .25rem}.main-content .recent-transactions .transactions-list .transaction-item .transaction-details p{font-size:.75rem;color:#9ca3af;margin:0}.main-content .recent-transactions .transactions-list .transaction-item .transaction-amount{font-size:.875rem;font-weight:600}.main-content .recent-transactions .transactions-list .transaction-item .transaction-amount.debit{color:#ef4444}.main-content .recent-transactions .transactions-list .transaction-item .transaction-amount.credit{color:#10b981}.loading{display:flex;align-items:center;justify-content:center;height:100vh;font-size:1.125rem;color:#6b7280;background:linear-gradient(135deg,#f9fafb,#eef2f7)}.loading:after{content:"";width:40px;height:40px;border:4px solid rgba(56,182,255,.1);border-top:4px solid #38b6ff;border-radius:50%;animation:spin 1s linear infinite;margin-left:1rem}@media (max-width: 1200px){.main-content .summary-cards{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.main-content .charts-section{grid-template-columns:1fr}}@media (max-width: 768px){.main-content{margin-left:0;padding:1rem}.main-content .summary-cards{grid-template-columns:1fr;gap:1rem;margin-bottom:1.5rem}.main-content .summary-cards .summary-card{padding:1.25rem;border-radius:16px}.main-content .summary-cards .summary-card .card-icon{width:40px;height:40px;margin-bottom:.75rem}.main-content .summary-cards .summary-card .card-content .amount{font-size:1.5rem}.main-content .charts-section{grid-template-columns:1fr;gap:1rem;margin-bottom:1.5rem}.main-content .charts-section .chart-card{padding:1.25rem;border-radius:16px}.main-content .charts-section .chart-card .chart-header{margin-bottom:1rem;flex-direction:column;align-items:flex-start;gap:.75rem}.main-content .charts-section .chart-card .chart-header h3{font-size:1rem}.main-content .charts-section .chart-card .chart-header .chart-period{align-self:stretch;justify-content:space-between}.main-content .charts-section .chart-card .chart-header .chart-period .period-btn{flex:1;text-align:center;padding:.5rem;font-size:.7rem}.main-content .recent-transactions{padding:1.25rem;border-radius:16px}.main-content .recent-transactions .section-header{margin-bottom:1rem;flex-direction:column;align-items:flex-start;gap:.75rem}.main-content .recent-transactions .section-header h3{font-size:1rem}.main-content .recent-transactions .section-header .view-all-btn{align-self:stretch;text-align:center}.main-content .recent-transactions .transactions-list .transaction-item{padding:.75rem 0;gap:.75rem}.main-content .recent-transactions .transactions-list .transaction-item .transaction-icon{width:36px;height:36px;min-width:36px}.main-content .recent-transactions .transactions-list .transaction-item .transaction-details .transaction-title{font-size:.875rem}.main-content .recent-transactions .transactions-list .transaction-item .transaction-details .transaction-meta{font-size:.75rem}.main-content .recent-transactions .transactions-list .transaction-item .transaction-amount{font-size:.875rem;text-align:right}}@media (max-width: 480px){.main-content{padding:.75rem}.main-content .summary-cards{gap:.75rem}.main-content .summary-cards .summary-card{padding:1rem}.main-content .summary-cards .summary-card .card-content .amount{font-size:1.375rem}.main-content .summary-cards .summary-card .card-content h3{font-size:.8rem}.main-content .charts-section{gap:.75rem}.main-content .charts-section .chart-card{padding:1rem}.main-content .charts-section .chart-card .chart-header .chart-period .period-btn{padding:.375rem .25rem;font-size:.65rem}.main-content .recent-transactions{padding:1rem}.main-content .recent-transactions .transactions-list .transaction-item .transaction-details{min-width:0;flex:1}.main-content .recent-transactions .transactions-list .transaction-item .transaction-details .transaction-title{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.main-content .recent-transactions .transactions-list .transaction-item .transaction-details .transaction-meta{font-size:.7rem}.main-content .recent-transactions .transactions-list .transaction-item .transaction-amount{font-size:.8rem;min-width:fit-content}}.payment-container{display:flex;min-height:100vh;font-family:Inter,sans-serif;background:linear-gradient(135deg,#f9fafb,#eef2f7);position:relative;overflow-x:hidden}.payment-container:before,.payment-container:after{content:"";position:fixed;border-radius:50%;filter:blur(120px);opacity:.1;z-index:0}.payment-container:before{top:-20%;left:-20%;width:600px;height:600px;background:#38b6ff}.payment-container:after{bottom:-20%;right:-20%;width:600px;height:600px;background:#007bb5}.payment-container .main-content{flex:1;padding:2rem;position:relative;z-index:1;overflow-y:auto;max-height:100vh}.payment-container .main-content .page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid #e5e7eb}.payment-container .main-content .page-header .header-content h1{display:flex;align-items:center;gap:.75rem;font-size:2rem;font-weight:700;color:#111827;margin:0 0 .5rem}.payment-container .main-content .page-header .header-content h1 .header-icon{color:#38b6ff}.payment-container .main-content .page-header .header-content p{color:#6b7280;font-size:1.1rem;margin:0}.payment-container .main-content .page-header .header-actions{display:flex;gap:1rem;align-items:center}.payment-container .tier-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem;margin-bottom:3rem}.payment-container .tier-card{background:#fff;border:2px solid #e5e7eb;border-radius:20px;padding:2rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;cursor:pointer;text-align:left;transition:all .3s ease;position:relative;overflow:hidden}.payment-container .tier-card:hover{transform:translateY(-8px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;border-color:#38b6ff}.payment-container .tier-card.selected{background:linear-gradient(135deg,#38b6ff,#007bb5);border-color:#38b6ff;box-shadow:0 0 30px #38b6ff66}.payment-container .tier-card.selected .tier-header h2,.payment-container .tier-card.selected .tier-price .currency,.payment-container .tier-card.selected .tier-price .amount,.payment-container .tier-card.selected .tier-price .period,.payment-container .tier-card.selected .tier-features li{color:#fff}.payment-container .tier-card.selected .tier-icon{background:#fff3;color:#fff!important;border:1px solid #ffffff;transition:all .3s ease}.payment-container .tier-card.selected .feature-check{color:#fff}.payment-container .tier-card.current:not(.selected){border-color:#10b981;box-shadow:0 0 20px #10b98133}.payment-container .tier-card .current-bookmark{position:absolute;top:-2px;right:15px;background:#10b981;color:#fff;padding:.6rem 1.2rem .8rem;font-size:.85rem;font-weight:600;z-index:2;border-radius:4px 4px 0 0;box-shadow:0 2px 8px #10b9814d}.payment-container .tier-card .current-bookmark:before{content:"";position:absolute;bottom:-10px;left:0;right:0;height:10px;background:#10b981;clip-path:polygon(0 0,100% 0,85% 100%,50% 70%,15% 100%)}.payment-container .tier-card .current-bookmark:after{content:"";position:absolute;bottom:-12px;left:2px;right:2px;height:8px;background:#10b98133;clip-path:polygon(0 0,100% 0,83% 100%,50% 70%,17% 100%);z-index:-1}.payment-container .tier-card.selected .current-bookmark{background:#fffffff2;color:#38b6ff;box-shadow:0 2px 8px #fff6}.payment-container .tier-card.selected .current-bookmark:before{background:#fffffff2}.payment-container .tier-card.selected .current-bookmark:after{background:#fff3}.payment-container .tier-card .tier-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.payment-container .tier-card .tier-header .tier-icon{width:48px;height:48px;border-radius:12px;background:#38b6ff1a;display:flex;align-items:center;justify-content:center;color:#38b6ff;transition:all .3s ease}.payment-container .tier-card .tier-header h2{font-size:1.5rem;font-weight:700;color:#111827;margin:0;flex:1;text-transform:capitalize}.payment-container .tier-card .tier-price{margin-bottom:2rem;display:flex;align-items:baseline;gap:.25rem}.payment-container .tier-card .tier-price .currency{font-size:1.25rem;font-weight:600;color:#6b7280}.payment-container .tier-card .tier-price .amount{font-size:3rem;font-weight:800;color:#111827;line-height:1}.payment-container .tier-card .tier-price .period{font-size:1rem;color:#6b7280;font-weight:500}.payment-container .tier-card .tier-features{list-style:none;padding:0;margin:0}.payment-container .tier-card .tier-features li{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem;font-size:.95rem;color:#6b7280;line-height:1.5}.payment-container .tier-card .tier-features li .feature-check{color:#10b981;flex-shrink:0}.payment-container .tier-card .tier-features li:last-child{margin-bottom:0}.payment-container .primary-button{background:linear-gradient(135deg,#38b6ff,#007bb5);color:#fff;border:none;padding:.875rem 2rem;border-radius:12px;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.payment-container .primary-button:hover:enabled{transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.payment-container .primary-button:disabled{background:#9ca3af;cursor:not-allowed;transform:none;box-shadow:0 1px 2px #0000000d}.payment-container .secondary-button{background:transparent;border:2px solid #38b6ff;color:#38b6ff;padding:.75rem 1.5rem;border-radius:12px;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .3s ease}.payment-container .secondary-button:hover{background:#38b6ff;color:#fff;transform:translateY(-2px);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.payment-container .subscription-details{background:#fff;border:1px solid #e5e7eb;border-radius:20px;padding:2rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;margin-top:2rem}.payment-container .subscription-details h3{font-size:1.5rem;font-weight:700;color:#111827;margin:0 0 1.5rem;padding-bottom:1rem;border-bottom:1px solid #e5e7eb}.payment-container .subscription-details .details-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.payment-container .subscription-details .details-grid .detail-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#38b6ff0d;border-radius:12px;border-left:4px solid #38b6ff}.payment-container .subscription-details .details-grid .detail-item .label{font-weight:600;color:#111827;font-size:.95rem}.payment-container .subscription-details .details-grid .detail-item .value{color:#6b7280;font-weight:500;text-align:right}.payment-container .subscription-details .details-grid .detail-item .value.plan-badge{background:#38b6ff;color:#fff;padding:.25rem .75rem;border-radius:20px;font-size:.85rem;font-weight:600;text-transform:capitalize}@media (max-width: 1024px){.payment-container .main-content{padding:1.5rem}.payment-container .page-header{flex-direction:column;gap:1.5rem;align-items:flex-start}.payment-container .page-header .header-actions{width:100%;justify-content:flex-start}.payment-container .tier-options{grid-template-columns:1fr}}@media (max-width: 768px){.payment-container .main-content{padding:1rem}.payment-container .page-header .header-content h1{font-size:1.75rem}.payment-container .page-header .header-actions{flex-direction:column;gap:.75rem}.payment-container .page-header .header-actions button{width:100%}.payment-container .tier-card{padding:1.5rem}.payment-container .tier-card .tier-price .amount{font-size:2.5rem}.payment-container .subscription-details{padding:1.5rem}.payment-container .subscription-details .details-grid{grid-template-columns:1fr;gap:1rem}}.loader-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:80vh;font-family:Inter,sans-serif}.loader-container .loader{border:4px solid #e5e7eb;border-top:4px solid #38b6ff;border-radius:50%;width:48px;height:48px;animation:spin 1s linear infinite;margin-bottom:1.5rem}.loader-container p{font-size:1.1rem;color:#6b7280;font-weight:500}.process-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;font-family:Inter,sans-serif}.process-dialog-overlay .process-dialog{background:#fff;border-radius:20px;padding:3rem 2.5rem;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;text-align:center;min-width:400px;max-width:500px;border:1px solid #e5e7eb}.process-dialog-overlay .process-dialog .process-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.process-dialog-overlay .process-dialog .process-content .process-loader .spinner{width:60px;height:60px;border:4px solid #e5e7eb;border-top:4px solid #38b6ff;border-radius:50%;animation:spin 1s linear infinite}.process-dialog-overlay .process-dialog .process-content h3{font-size:1.5rem;font-weight:700;color:#111827;margin:0}.process-dialog-overlay .process-dialog .process-content .process-step{font-size:1.1rem;color:#6b7280;font-weight:500;margin:0;min-height:1.5rem;display:flex;align-items:center;justify-content:center}@media (max-width: 768px){.process-dialog-overlay{padding:1rem}.process-dialog-overlay .process-dialog{min-width:auto;width:100%;max-width:350px;padding:2rem 1.5rem}.process-dialog-overlay .process-dialog .process-content{gap:1rem}.process-dialog-overlay .process-dialog .process-content .process-loader .spinner{width:50px;height:50px}.process-dialog-overlay .process-dialog .process-content h3{font-size:1.25rem}.process-dialog-overlay .process-dialog .process-content .process-step{font-size:1rem}}.transactions-page{padding:0 2rem 2rem;font-family:Inter,sans-serif}.transactions-page .transactions-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem;gap:2rem}.transactions-page .transactions-header .header-left h1{font-size:2rem;font-weight:700;color:#111827;margin:0 0 .5rem}.transactions-page .transactions-header .header-left p{color:#6b7280;font-size:1rem;margin:0}.transactions-page .transactions-header .header-controls{display:flex;gap:1rem}.transactions-page .transactions-header .header-controls .filter-group,.transactions-page .transactions-header .header-controls .sort-group{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 2px #0000000d}.transactions-page .transactions-header .header-controls .filter-group svg,.transactions-page .transactions-header .header-controls .sort-group svg{color:#9ca3af}.transactions-page .transactions-header .header-controls .filter-group select,.transactions-page .transactions-header .header-controls .sort-group select{border:none;background:transparent;font-size:.875rem;color:#111827;cursor:pointer}.transactions-page .transactions-header .header-controls .filter-group select:focus,.transactions-page .transactions-header .header-controls .sort-group select:focus{outline:none}.transactions-page .transactions-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-bottom:2rem}.transactions-page .transactions-stats .stat-card{background:#fff;padding:1.5rem;border-radius:16px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;text-align:center}.transactions-page .transactions-stats .stat-card h3{font-size:.875rem;font-weight:600;color:#6b7280;margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.5px}.transactions-page .transactions-stats .stat-card .stat-number{font-size:1.5rem;font-weight:700;color:#111827;margin:0}.transactions-page .transactions-stats .stat-card .stat-number.expense{color:#ef4444}.transactions-page .transactions-stats .stat-card .stat-number.income{color:#10b981}.transactions-page .transactions-list{background:#fff;border-radius:20px;padding:1.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.transactions-page .transactions-list .no-transactions{text-align:center;padding:3rem;color:#9ca3af}.transactions-page .transactions-list .transaction-card{display:flex;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid rgba(229,231,235,.5);transition:all .3s ease;cursor:pointer}.transactions-page .transactions-list .transaction-card:last-child{border-bottom:none}.transactions-page .transactions-list .transaction-card:hover{background:#38b6ff05;border-radius:12px;padding-left:1rem;padding-right:1rem}.transactions-page .transactions-list .transaction-card .transaction-icon .icon-wrapper{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff}.transactions-page .transactions-list .transaction-card .transaction-icon .icon-wrapper.debit{background:linear-gradient(135deg,#ef4444,#dc2626)}.transactions-page .transactions-list .transaction-card .transaction-icon .icon-wrapper.credit{background:linear-gradient(135deg,#10b981,#059669)}.transactions-page .transactions-list .transaction-card .transaction-details{flex:1}.transactions-page .transactions-list .transaction-card .transaction-details h4{font-size:1rem;font-weight:600;color:#111827;margin:0 0 .25rem}.transactions-page .transactions-list .transaction-card .transaction-details .transaction-meta{display:flex;gap:1rem;font-size:.875rem;color:#9ca3af;margin:0}.transactions-page .transactions-list .transaction-card .transaction-details .transaction-meta .category{background:#38b6ff1a;color:#38b6ff;padding:.125rem .5rem;border-radius:6px;font-weight:500}.transactions-page .transactions-list .transaction-card .transaction-amount{font-size:1rem;font-weight:700}.transactions-page .transactions-list .transaction-card .transaction-amount.debit{color:#ef4444}.transactions-page .transactions-list .transaction-card .transaction-amount.credit{color:#10b981}.transactions-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:60vh;font-family:Inter,sans-serif}.transactions-loading .loader{width:40px;height:40px;border:4px solid rgba(56,182,255,.1);border-top:4px solid #38b6ff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}.transactions-loading p{color:#6b7280;font-size:1rem}@media (max-width: 768px){.transactions-page{padding:1rem}.transactions-page .transactions-header{flex-direction:column;gap:1rem;align-items:stretch}.transactions-page .transactions-header .header-left h1{font-size:1.5rem}.transactions-page .transactions-header .header-left p{font-size:.875rem}.transactions-page .transactions-header .header-controls{flex-wrap:wrap;gap:.75rem;justify-content:stretch}.transactions-page .transactions-header .header-controls .filter-group,.transactions-page .transactions-header .header-controls .sort-group{flex:1;min-width:140px;padding:.625rem .875rem}.transactions-page .transactions-header .header-controls .filter-group select,.transactions-page .transactions-header .header-controls .sort-group select{font-size:.8rem}.transactions-page .transactions-stats{grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1.5rem}.transactions-page .transactions-stats .stat-card{padding:1.25rem}.transactions-page .transactions-stats .stat-card h3{font-size:.8rem}.transactions-page .transactions-stats .stat-card .stat-value{font-size:1.25rem}.transactions-page .transactions-stats .stat-card .stat-change{font-size:.7rem}.transactions-page .transactions-container .transactions-table{display:none}.transactions-page .transactions-container .transactions-cards{display:block}}@media (max-width: 480px){.transactions-page{padding:.75rem}.transactions-page .transactions-header .header-left h1{font-size:1.375rem}.transactions-page .transactions-header .header-controls .filter-group,.transactions-page .transactions-header .header-controls .sort-group{min-width:120px;padding:.5rem .75rem}.transactions-page .transactions-header .header-controls .filter-group select,.transactions-page .transactions-header .header-controls .sort-group select{font-size:.75rem}.transactions-page .transactions-stats{grid-template-columns:1fr;gap:.75rem}.transactions-page .transactions-stats .stat-card{padding:1rem;text-align:left}.transactions-page .transactions-stats .stat-card .stat-value{font-size:1.125rem}}.monthly-summary-page{padding:0 2rem 2rem;font-family:Inter,sans-serif}.monthly-summary-page .monthly-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem;gap:2rem}.monthly-summary-page .monthly-header .header-left h1{font-size:2rem;font-weight:700;color:#111827;margin:0 0 .5rem}.monthly-summary-page .monthly-header .header-left p{color:#6b7280;font-size:1rem;margin:0}.monthly-summary-page .monthly-header .month-selector{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 2px #0000000d}.monthly-summary-page .monthly-header .month-selector svg{color:#9ca3af}.monthly-summary-page .monthly-header .month-selector select{border:none;background:transparent;font-size:.875rem;color:#111827;cursor:pointer;margin-left:.5rem}.monthly-summary-page .monthly-header .month-selector select:focus{outline:none}.monthly-summary-page .monthly-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-bottom:2rem}.monthly-summary-page .monthly-stats .stat-card{background:#fff;border-radius:20px;padding:1.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;display:flex;align-items:center;gap:1rem;transition:all .3s ease}.monthly-summary-page .monthly-stats .stat-card:hover{transform:translateY(-5px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.monthly-summary-page .monthly-stats .stat-card .stat-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff}.monthly-summary-page .monthly-stats .stat-card .stat-content{flex:1}.monthly-summary-page .monthly-stats .stat-card .stat-content .stat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.monthly-summary-page .monthly-stats .stat-card .stat-content .stat-header h3{font-size:.875rem;font-weight:600;color:#6b7280;margin:0;text-transform:uppercase;letter-spacing:.5px}.monthly-summary-page .monthly-stats .stat-card .stat-content .stat-header .edit-income-btn{background:#38b6ff1a;border:none;border-radius:6px;padding:.375rem;color:#38b6ff;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.monthly-summary-page .monthly-stats .stat-card .stat-content .stat-header .edit-income-btn:hover{background:#38b6ff;color:#fff;transform:scale(1.1)}.monthly-summary-page .monthly-stats .stat-card .stat-content h3{font-size:.875rem;font-weight:600;color:#6b7280;margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.5px}.monthly-summary-page .monthly-stats .stat-card .stat-content .stat-number{font-size:1.5rem;font-weight:700;color:#111827;margin:0 0 .25rem}.monthly-summary-page .monthly-stats .stat-card .stat-content .stat-change{font-size:.75rem;font-weight:500;padding:.125rem .5rem;border-radius:6px}.monthly-summary-page .monthly-stats .stat-card .stat-content .stat-change.positive{background:#10b9811a;color:#10b981}.monthly-summary-page .monthly-stats .stat-card .stat-content .stat-change.negative{background:#ef44441a;color:#ef4444}.monthly-summary-page .monthly-stats .stat-card.income .stat-icon{background:linear-gradient(135deg,#10b981,#059669)}.monthly-summary-page .monthly-stats .stat-card.expenses .stat-icon{background:linear-gradient(135deg,#ef4444,#dc2626)}.monthly-summary-page .monthly-stats .stat-card.net .stat-icon{background:linear-gradient(135deg,#38b6ff,#007bb5)}.monthly-summary-page .charts-section{display:grid;grid-template-columns:1fr;gap:1.5rem}.monthly-summary-page .charts-section .chart-card{background:#fff;border-radius:20px;padding:1.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;transition:all .3s ease}.monthly-summary-page .charts-section .chart-card:hover{transform:translateY(-5px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.monthly-summary-page .charts-section .chart-card h3{font-size:1.125rem;font-weight:600;color:#111827;margin:0 0 1.5rem}@media (min-width: 1200px){.monthly-summary-page .charts-section{grid-template-columns:2fr 1fr}}.monthly-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:60vh;font-family:Inter,sans-serif}.monthly-loading .loader{width:40px;height:40px;border:4px solid rgba(56,182,255,.1);border-top:4px solid #38b6ff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}.monthly-loading p{color:#6b7280;font-size:1rem}@media (max-width: 768px){.monthly-summary-page{padding:1rem}.monthly-summary-page .monthly-header{flex-direction:column;gap:1rem;align-items:stretch}.monthly-summary-page .monthly-header .header-left h1{font-size:1.5rem}.monthly-summary-page .monthly-header .header-left p{font-size:.875rem}.monthly-summary-page .monthly-header .month-selector{align-self:stretch}.monthly-summary-page .monthly-header .month-selector select{width:100%;padding:.75rem;font-size:.875rem}.monthly-summary-page .monthly-stats{grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1.5rem}.monthly-summary-page .monthly-stats .stat-card{padding:1.25rem}.monthly-summary-page .monthly-stats .stat-card h3{font-size:.8rem}.monthly-summary-page .monthly-stats .stat-card .stat-value{font-size:1.25rem}.monthly-summary-page .monthly-stats .stat-card .stat-change{font-size:.7rem}.monthly-summary-page .charts-section{grid-template-columns:1fr;gap:1rem}.monthly-summary-page .charts-section .chart-card{padding:1.25rem}.monthly-summary-page .charts-section .chart-card .chart-header{margin-bottom:1rem}.monthly-summary-page .charts-section .chart-card .chart-header h3{font-size:1rem}}@media (max-width: 480px){.monthly-summary-page{padding:.75rem}.monthly-summary-page .monthly-header .header-left h1{font-size:1.375rem}.monthly-summary-page .monthly-stats{grid-template-columns:1fr;gap:.75rem}.monthly-summary-page .monthly-stats .stat-card{padding:1rem;text-align:left}.monthly-summary-page .monthly-stats .stat-card .stat-value{font-size:1.125rem}.monthly-summary-page .charts-section{gap:.75rem}.monthly-summary-page .charts-section .chart-card{padding:1rem}}.category-trends-page{padding:0 2rem 2rem;font-family:Inter,sans-serif;background:#f9fafb;min-height:100vh}.category-trends-page .page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:2rem;flex-wrap:wrap;gap:1rem}.category-trends-page .page-header .header-content h1{font-size:2rem;font-weight:700;color:#111827;margin:0 0 .5rem}.category-trends-page .page-header .header-content p{color:#6b7280;font-size:1rem;margin:0}.category-trends-page .page-header .header-controls{display:flex;gap:1rem;align-items:center}.category-trends-page .page-header .header-controls .period-selector,.category-trends-page .page-header .header-controls .view-selector{display:flex;align-items:center;gap:.5rem;background:#fff;padding:.5rem 1rem;border-radius:12px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.category-trends-page .page-header .header-controls .period-selector svg,.category-trends-page .page-header .header-controls .view-selector svg{color:#38b6ff}.category-trends-page .page-header .header-controls .period-selector select,.category-trends-page .page-header .header-controls .view-selector select{border:none;background:transparent;font-size:.875rem;font-weight:500;color:#111827;cursor:pointer;outline:none}.category-trends-page .page-header .header-controls .period-selector select:focus,.category-trends-page .page-header .header-controls .view-selector select:focus{outline:none}.category-trends-page .insights-section{margin-bottom:2rem}.category-trends-page .insights-section .insights-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.category-trends-page .insights-section .insights-grid .insight-card{background:#fff;border-radius:20px;padding:1.5rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;display:flex;align-items:flex-start;gap:1rem;transition:transform .2s ease,box-shadow .2s ease}.category-trends-page .insights-section .insights-grid .insight-card:hover{transform:translateY(-2px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.category-trends-page .insights-section .insights-grid .insight-card .insight-icon{background:linear-gradient(135deg,#38b6ff,#007bb5);border-radius:12px;padding:.75rem;color:#fff;flex-shrink:0}.category-trends-page .insights-section .insights-grid .insight-card .insight-icon.highest{background:linear-gradient(135deg,#10b981,#059669)}.category-trends-page .insights-section .insights-grid .insight-card .insight-icon.lowest{background:linear-gradient(135deg,#f59e0b,#d97706)}.category-trends-page .insights-section .insights-grid .insight-card .insight-icon.frequent{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.category-trends-page .insights-section .insights-grid .insight-card .insight-icon.recommendation{background:linear-gradient(135deg,#ef4444,#dc2626)}.category-trends-page .insights-section .insights-grid .insight-card .insight-content{flex:1}.category-trends-page .insights-section .insights-grid .insight-card .insight-content h3{font-size:.875rem;font-weight:600;color:#6b7280;margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.05em}.category-trends-page .insights-section .insights-grid .insight-card .insight-content .insight-value{font-size:1.25rem;font-weight:700;color:#111827;margin:0 0 .25rem}.category-trends-page .insights-section .insights-grid .insight-card .insight-content .insight-detail{font-size:.875rem;color:#6b7280}.category-trends-page .insights-section .insights-grid .insight-card .insight-content .insight-text{font-size:.875rem;color:#111827;line-height:1.5;margin:0}.category-trends-page .insights-section .insights-grid .insight-card.highest .insight-icon{background:linear-gradient(135deg,#10b981,#059669)}.category-trends-page .insights-section .insights-grid .insight-card.lowest .insight-icon{background:linear-gradient(135deg,#f59e0b,#d97706)}.category-trends-page .insights-section .insights-grid .insight-card.frequent .insight-icon{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}.category-trends-page .insights-section .insights-grid .insight-card.recommendation .insight-icon{background:linear-gradient(135deg,#ef4444,#dc2626)}.category-trends-page .charts-section{display:grid;gap:2rem}.category-trends-page .charts-section .chart-card{background:#fff;border-radius:20px;padding:2rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;transition:transform .2s ease,box-shadow .2s ease}.category-trends-page .charts-section .chart-card:hover{transform:translateY(-2px);box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.category-trends-page .charts-section .chart-card h3{font-size:1.25rem;font-weight:600;color:#111827;margin:0 0 1.5rem}.category-trends-page .charts-section .chart-card.category-distribution .chart-container{display:flex;align-items:center;gap:2rem}.category-trends-page .charts-section .chart-card.category-distribution .chart-container .category-legend{flex:1;max-height:300px;overflow-y:auto}.category-trends-page .charts-section .chart-card.category-distribution .chart-container .category-legend .legend-item{display:flex;align-items:center;gap:.75rem;padding:.5rem 0;border-bottom:1px solid #f3f4f6}.category-trends-page .charts-section .chart-card.category-distribution .chart-container .category-legend .legend-item:last-child{border-bottom:none}.category-trends-page .charts-section .chart-card.category-distribution .chart-container .category-legend .legend-item .legend-color{width:12px;height:12px;border-radius:50%;flex-shrink:0}.category-trends-page .charts-section .chart-card.category-distribution .chart-container .category-legend .legend-item .legend-content{flex:1}.category-trends-page .charts-section .chart-card.category-distribution .chart-container .category-legend .legend-item .legend-content .legend-name{display:block;font-weight:500;color:#111827;font-size:.875rem}.category-trends-page .charts-section .chart-card.category-distribution .chart-container .category-legend .legend-item .legend-content .legend-value{display:block;font-size:.75rem;color:#6b7280;margin-top:.125rem}@media (max-width: 768px){.category-trends-page{padding:0 1rem 1rem}.category-trends-page .page-header,.category-trends-page .page-header .header-controls{flex-direction:column;align-items:stretch}.category-trends-page .page-header .header-controls .period-selector,.category-trends-page .page-header .header-controls .view-selector{justify-content:center}.category-trends-page .insights-section .insights-grid{grid-template-columns:1fr}.category-trends-page .charts-section .chart-card{padding:1rem}.category-trends-page .charts-section .chart-card.category-distribution .chart-container{flex-direction:column;gap:1rem}}@media (max-width: 480px){.category-trends-page .page-header .header-content h1{font-size:1.5rem}.category-trends-page .insight-card{padding:1rem}.category-trends-page .insight-card .insight-content .insight-value{font-size:1rem}}.profile-overlay{position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;background:#00000080;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:1rem}.profile-overlay .profile-dialog{background:#fff;border-radius:20px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;width:100%;max-width:900px;max-height:90vh;overflow-y:auto;font-family:Inter,sans-serif}.profile-overlay .profile-dialog.open{transform:translate(0)}.profile-overlay .profile-dialog .dialog-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:1px solid #e5e7eb}.profile-overlay .profile-dialog .dialog-header h2{font-size:1.5rem;font-weight:600;color:#111827;margin:0}.profile-overlay .profile-dialog .dialog-header .close-btn{background:none;border:none;color:#6b7280;cursor:pointer;padding:.5rem;border-radius:8px;transition:all .3s ease}.profile-overlay .profile-dialog .dialog-header .close-btn:hover{background:#ef44441a;color:#ef4444}.profile-overlay .profile-dialog .profile-content{padding:2rem}.profile-overlay .profile-dialog .profile-content .profile-avatar-section{display:flex;align-items:center;gap:1.5rem;margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid #e5e7eb}.profile-overlay .profile-dialog .profile-content .profile-avatar-section .avatar-container{position:relative}.profile-overlay .profile-dialog .profile-content .profile-avatar-section .avatar-container .avatar-image,.profile-overlay .profile-dialog .profile-content .profile-avatar-section .avatar-container .avatar-placeholder{width:80px;height:80px;border-radius:50%;object-fit:cover}.profile-overlay .profile-dialog .profile-content .profile-avatar-section .avatar-container .avatar-placeholder{background:#f9fafb;display:flex;align-items:center;justify-content:center;color:#6b7280;border:2px solid #e5e7eb}.profile-overlay .profile-dialog .profile-content .profile-avatar-section .avatar-container .avatar-edit-btn{position:absolute;bottom:0;right:0;width:28px;height:28px;border-radius:50%;background:#38b6ff;color:#fff;border:2px solid #ffffff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s ease}.profile-overlay .profile-dialog .profile-content .profile-avatar-section .avatar-container .avatar-edit-btn:hover{background:#007bb5;transform:scale(1.1)}.profile-overlay .profile-dialog .profile-content .profile-avatar-section .user-info{flex:1}.profile-overlay .profile-dialog .profile-content .profile-avatar-section .user-info h3{font-size:1.5rem;font-weight:600;color:#111827;margin:0 0 .5rem}.profile-overlay .profile-dialog .profile-content .profile-avatar-section .user-info .tier-badge-container .tier-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:12px;font-size:.875rem;font-weight:600;background:#38b6ff1a;border:1px solid rgba(56,182,255,.2)}.profile-overlay .profile-dialog .profile-content .profile-avatar-section .user-info .tier-badge-container .tier-badge.free{background:#6b72801a;border-color:#6b728033}.profile-overlay .profile-dialog .profile-content .profile-avatar-section .user-info .tier-badge-container .tier-badge.plus{background:#10b9811a;border-color:#10b98133}.profile-overlay .profile-dialog .profile-content .profile-avatar-section .user-info .tier-badge-container .tier-badge.premium{background:#38b6ff1a;border-color:#38b6ff33}.profile-overlay .profile-dialog .profile-content .profile-form .form-section{margin-bottom:2rem}.profile-overlay .profile-dialog .profile-content .profile-form .form-section h4{font-size:1.125rem;font-weight:600;color:#111827;margin:0 0 1rem}.profile-overlay .profile-dialog .profile-content .profile-form .form-section .form-group{margin-bottom:1rem}.profile-overlay .profile-dialog .profile-content .profile-form .form-section .form-group label{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;color:#111827;margin-bottom:.5rem}.profile-overlay .profile-dialog .profile-content .profile-form .form-section .form-group label svg{color:#38b6ff}.profile-overlay .profile-dialog .profile-content .profile-form .form-section .form-group input{width:100%;padding:.75rem 1rem;border:1px solid #e5e7eb;border-radius:12px;font-size:.875rem;font-family:Inter,sans-serif;transition:all .3s ease;background:#fff}.profile-overlay .profile-dialog .profile-content .profile-form .form-section .form-group input:focus{outline:none;border-color:#38b6ff;box-shadow:0 0 0 3px #38b6ff1a}.profile-overlay .profile-dialog .profile-content .profile-form .form-section .form-group input::placeholder{color:#9ca3af}.profile-overlay .profile-dialog .profile-content .profile-form .form-section .account-details .detail-item{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid rgba(229,231,235,.5)}.profile-overlay .profile-dialog .profile-content .profile-form .form-section .account-details .detail-item:last-child{border-bottom:none}.profile-overlay .profile-dialog .profile-content .profile-form .form-section .account-details .detail-item .label{font-size:.875rem;color:#6b7280;font-weight:500}.profile-overlay .profile-dialog .profile-content .profile-form .form-section .account-details .detail-item .value{font-size:.875rem;color:#111827;font-weight:500}.profile-overlay .profile-dialog .profile-content .profile-form .error-message{background:#ef44441a;color:#ef4444;padding:.75rem 1rem;border-radius:8px;font-size:.875rem;margin-bottom:1rem;border:1px solid rgba(239,68,68,.2)}.profile-overlay .profile-dialog .profile-content .profile-form .success-message{background:#10b9811a;color:#10b981;padding:.75rem 1rem;border-radius:8px;font-size:.875rem;margin-bottom:1rem;border:1px solid rgba(16,185,129,.2)}.profile-overlay .profile-dialog .profile-content .profile-form .form-actions{display:flex;gap:1rem;justify-content:flex-end;margin-top:2rem;padding-top:1rem;border-top:1px solid #e5e7eb}.profile-overlay .profile-dialog .profile-content .profile-form .form-actions button{padding:.75rem 1.5rem;border-radius:12px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.5rem}.profile-overlay .profile-dialog .profile-content .profile-form .form-actions button:disabled{opacity:.6;cursor:not-allowed}.profile-overlay .profile-dialog .profile-content .profile-form .form-actions .cancel-btn{background:transparent;color:#6b7280;border:1px solid #e5e7eb}.profile-overlay .profile-dialog .profile-content .profile-form .form-actions .cancel-btn:hover:not(:disabled){background:#f9fafb;color:#111827}.profile-overlay .profile-dialog .profile-content .profile-form .form-actions .save-btn{background:#38b6ff;color:#fff;border:none}.profile-overlay .profile-dialog .profile-content .profile-form .form-actions .save-btn:hover:not(:disabled){background:#007bb5;transform:translateY(-1px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}@media (max-width: 640px){.profile-overlay{padding:.5rem}.profile-overlay .profile-dialog{max-width:100%;border-radius:16px;max-height:95vh}.profile-overlay .profile-dialog .dialog-header{padding:1rem 1.5rem}.profile-overlay .profile-dialog .dialog-header h2{font-size:1.25rem}.profile-overlay .profile-dialog .profile-content{padding:1.5rem}.profile-overlay .profile-dialog .profile-content .profile-avatar-section{flex-direction:column;text-align:center;gap:1rem}.profile-overlay .profile-dialog .profile-content .profile-avatar-section .user-info h3{font-size:1.25rem}.profile-overlay .profile-dialog .profile-content .profile-form .form-actions{flex-direction:column}.profile-overlay .profile-dialog .profile-content .profile-form .form-actions button{width:100%;justify-content:center}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.sidebar{width:280px;background:linear-gradient(180deg,#fff,#fffffff2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-right:1px solid rgba(229,231,235,.5);display:flex;flex-direction:column;position:fixed;height:100vh;left:0;top:0;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;z-index:100}.sidebar .sidebar-header{padding:2rem 1.5rem 1.5rem;border-bottom:1px solid #e5e7eb}.sidebar .sidebar-header .logo-container{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:1rem}.sidebar .sidebar-header .logo-container .logo-icon{width:120px;height:40px;display:flex;align-items:center;justify-content:center;animation:pulse 3s ease-in-out infinite}.sidebar .sidebar-header .logo-container .logo-icon .logo-image{width:100%;height:auto;object-fit:contain}.sidebar .sidebar-header .user-badge{display:flex;justify-content:center}.sidebar .sidebar-header .user-badge .tier-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .875rem;border-radius:12px;font-size:.8rem;font-weight:600;text-transform:capitalize;letter-spacing:.25px;transition:all .3s ease}.sidebar .sidebar-header .user-badge .tier-badge.free{background:#6b72801a;color:#6b7280;border:1px solid rgba(107,114,128,.2)}.sidebar .sidebar-header .user-badge .tier-badge.plus{background:#10b9811a;color:#10b981;border:1px solid rgba(16,185,129,.2)}.sidebar .sidebar-header .user-badge .tier-badge.premium{background:linear-gradient(135deg,#38b6ff,#007bb5);color:#fff;box-shadow:0 1px 2px #0000000d;border:1px solid transparent}.sidebar .sidebar-nav{flex:1;padding:1rem 0;overflow-y:auto}.sidebar .sidebar-nav .nav-item{position:relative;margin:.25rem 1rem;border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden}.sidebar .sidebar-nav .nav-item .nav-item-content{display:flex;align-items:center;gap:.75rem;padding:.875rem 1rem;color:#6b7280;font-weight:500;font-size:.875rem;position:relative;z-index:2;transition:all .3s ease}.sidebar .sidebar-nav .nav-item .active-indicator{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#38b6ff,#007bb5);border-radius:12px;z-index:1}.sidebar .sidebar-nav .nav-item.active .nav-item-content{color:#fff;font-weight:600}.sidebar .sidebar-nav .nav-item:not(.active):hover{background:#38b6ff0d;transform:translate(4px)}.sidebar .sidebar-nav .nav-item:not(.active):hover .nav-item-content{color:#38b6ff}.sidebar .sidebar-nav .nav-item.special .nav-item-content{background:linear-gradient(135deg,#f59e0b1a,#f59e0b0d);color:#f59e0b;border:1px solid rgba(245,158,11,.2);border-radius:12px;font-weight:600}.sidebar .sidebar-nav .nav-item.special:hover .nav-item-content{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;transform:scale(1.02)}.sidebar .sidebar-nav .nav-item.danger .nav-item-content{color:#ef4444}.sidebar .sidebar-nav .nav-item.danger:hover{background:#ef44440d}.sidebar .sidebar-nav .nav-item.danger:hover .nav-item-content{color:#ef4444}.sidebar .sidebar-footer{padding:1.5rem;border-top:1px solid #e5e7eb}.sidebar .sidebar-footer .user-info{display:flex;align-items:center;gap:.75rem}.sidebar .sidebar-footer .user-info .user-avatar{width:36px;height:36px;background:linear-gradient(135deg,#38b6ff,#007bb5);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600}.sidebar .sidebar-footer .user-info .user-details{flex:1;min-width:0}.sidebar .sidebar-footer .user-info .user-details .user-name{display:block;font-weight:600;color:#111827;font-size:.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar .sidebar-footer .user-info .user-details .user-email{display:block;font-size:.75rem;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 768px){.sidebar{position:fixed;left:-320px;transform:none;transition:left .3s cubic-bezier(.4,0,.2,1),visibility .3s;z-index:1003;width:280px;max-width:85vw;visibility:hidden}.sidebar.mobile-open{left:0;visibility:visible}}@media (max-width: 480px){.sidebar{width:100vw;max-width:320px}.sidebar .sidebar-header{padding:1.5rem 1rem 1rem}.sidebar .sidebar-header .logo-container .logo-icon{width:100px;height:32px}.sidebar .sidebar-nav{padding:.5rem 0}.sidebar .sidebar-nav .nav-item{margin:.125rem .75rem}.sidebar .sidebar-nav .nav-item .nav-item-content{padding:.75rem .875rem;font-size:.8rem}.sidebar .sidebar-footer{padding:1rem}.sidebar .sidebar-footer .user-info .user-avatar{width:32px;height:32px}.sidebar .sidebar-footer .user-info .user-details .user-name{font-size:.8rem}.sidebar .sidebar-footer .user-info .user-details .user-email{font-size:.7rem}}.mobile-notification-btn{position:relative;padding:.625rem;background:linear-gradient(135deg,#38b6ff1a,#38b6ff0d);border:1px solid rgba(56,182,255,.2);border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#38b6ff;min-width:40px;min-height:40px;display:flex;align-items:center;justify-content:center}.mobile-notification-btn:hover{background:linear-gradient(135deg,#38b6ff,#2ea3e6);border-color:#38b6ff;color:#fff;transform:translateY(-2px);box-shadow:0 6px 20px #38b6ff4d}.mobile-notification-btn:active{transform:translateY(0)}.mobile-notification-btn .mobile-notification-badge{position:absolute;top:-3px;right:-3px;background:#ef4444;color:#fff;font-size:.6rem;font-weight:600;padding:.125rem .3rem;border-radius:8px;min-width:16px;text-align:center;box-shadow:0 2px 8px #ef44444d;border:1.5px solid #ffffff}.layout-container{display:flex;min-height:100vh;background:#f9fafb;font-family:Inter,sans-serif}.layout-main{flex:1;margin-left:280px;min-height:100vh;background:transparent}.layout-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;font-family:Inter,sans-serif}.layout-loading .loader{width:40px;height:40px;border:4px solid rgba(56,182,255,.1);border-top:4px solid #38b6ff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}.layout-loading p{color:#6b7280;font-size:1rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.mobile-navbar{display:none;position:fixed;top:0;left:0;right:0;height:4rem;background:linear-gradient(180deg,#fffffffa,#fffffff2);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid rgba(229,231,235,.3);z-index:1001;align-items:center;justify-content:space-between;padding:0 1rem;box-shadow:0 2px 15px #00000014;gap:1rem}.mobile-navbar .mobile-logo{position:absolute;left:50%;transform:translate(-50%);pointer-events:none}.mobile-navbar .mobile-logo .mobile-logo-image{height:28px;width:auto;object-fit:contain}.mobile-navbar .mobile-navbar-right{display:flex;align-items:center;gap:.5rem;margin-left:auto}.mobile-menu-toggle{display:none;background:linear-gradient(135deg,#38b6ff1a,#38b6ff0d);border:1px solid rgba(56,182,255,.2);border-radius:12px;padding:.625rem;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;min-width:40px;min-height:40px;align-items:center;justify-content:center}.mobile-menu-toggle:hover{background:linear-gradient(135deg,#38b6ff,#2ea3e6);border-color:#38b6ff;transform:translateY(-2px);box-shadow:0 6px 20px #38b6ff4d}.mobile-menu-toggle:hover span{background:#fff}.mobile-menu-toggle:active{transform:translateY(0)}.mobile-menu-toggle span{display:block;width:18px;height:2px;background:#38b6ff;margin:2.5px 0;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:1px}.mobile-menu-toggle.active{background:linear-gradient(135deg,#ef4444,#dc2626);border-color:#ef4444}.mobile-menu-toggle.active span{background:#fff}.mobile-menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}.mobile-menu-toggle.active span:nth-child(2){opacity:0;transform:scale(0)}.mobile-menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}.mobile-menu-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:#0006;z-index:1002;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@media (max-width: 768px){.layout-main{margin-left:0;padding-top:4rem}.mobile-navbar{display:flex}.mobile-menu-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center}.mobile-menu-overlay{display:block}}@keyframes spin{to{transform:rotate(360deg)}}.autopays-page{padding:2rem;font-family:Inter,sans-serif}.autopays-page .autopays-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.autopays-page .autopays-header .header-content{display:flex;align-items:center;gap:1rem}.autopays-page .autopays-header .header-content svg{color:#38b6ff}.autopays-page .autopays-header .header-content h1{font-size:2rem;font-weight:700;color:#111827;margin:0}.autopays-page .autopays-header .header-content p{color:#6b7280;margin:.25rem 0 0;font-size:.875rem}.autopays-page .autopays-header .add-autopay-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#38b6ff;color:#fff;border:none;border-radius:12px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .3s ease}.autopays-page .autopays-header .add-autopay-btn:hover{background:#007bb5;transform:translateY(-1px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.autopays-page .error-message{display:flex;align-items:center;gap:.75rem;padding:1rem 1.5rem;background:#ef44441a;color:#ef4444;border:1px solid rgba(239,68,68,.2);border-radius:12px;font-size:.875rem;margin-bottom:1.5rem}.autopays-page .upgrade-notice{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 2rem;background:#fff;border-radius:20px;border:1px solid #e5e7eb;box-shadow:0 1px 2px #0000000d}.autopays-page .upgrade-notice svg{color:#f59e0b;margin-bottom:1rem}.autopays-page .upgrade-notice h2{font-size:1.5rem;font-weight:600;color:#111827;margin:0 0 .5rem}.autopays-page .upgrade-notice p{color:#6b7280;margin:0 0 2rem;font-size:1rem}.autopays-page .upgrade-notice .upgrade-btn{padding:.75rem 2rem;background:#38b6ff;color:#fff;border:none;border-radius:12px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .3s ease}.autopays-page .upgrade-notice .upgrade-btn:hover{background:#007bb5;transform:translateY(-1px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.autopays-page .autopays-content .loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;color:#6b7280}.autopays-page .autopays-content .loading-state .loader{width:32px;height:32px;border:3px solid #e5e7eb;border-top:3px solid #38b6ff;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:1rem}.autopays-page .autopays-content .loading-state p{margin:0;font-size:.875rem}.autopays-page .autopays-content .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 2rem;background:#fff;border-radius:20px;border:1px solid #e5e7eb;box-shadow:0 1px 2px #0000000d}.autopays-page .autopays-content .empty-state svg{color:#9ca3af;margin-bottom:1rem;opacity:.5}.autopays-page .autopays-content .empty-state h3{font-size:1.25rem;font-weight:600;color:#111827;margin:0 0 .5rem}.autopays-page .autopays-content .empty-state p{color:#6b7280;margin:0 0 2rem;font-size:.875rem}.autopays-page .autopays-content .empty-state .setup-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#38b6ff;color:#fff;border:none;border-radius:12px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .3s ease}.autopays-page .autopays-content .empty-state .setup-btn:hover{background:#007bb5;transform:translateY(-1px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.autopays-page .autopays-content .autopays-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1.5rem}.autopays-page .autopays-content .autopays-grid .autopay-card{background:#fff;border-radius:16px;border:1px solid #e5e7eb;box-shadow:0 1px 2px #0000000d;overflow:hidden;transition:all .3s ease}.autopays-page .autopays-content .autopays-grid .autopay-card:hover{transform:translateY(-2px);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.autopays-page .autopays-content .autopays-grid .autopay-card.debit{border-left:4px solid #ef4444}.autopays-page .autopays-content .autopays-grid .autopay-card.credit{border-left:4px solid #10b981}.autopays-page .autopays-content .autopays-grid .autopay-card .card-header{display:flex;justify-content:space-between;align-items:flex-start;padding:1.5rem 1.5rem 1rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-header .transaction-info{flex:1}.autopays-page .autopays-content .autopays-grid .autopay-card .card-header .transaction-info h3{font-size:1.125rem;font-weight:600;color:#111827;margin:0 0 .25rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-header .transaction-info p{font-size:.875rem;color:#6b7280;margin:0;line-height:1.4}.autopays-page .autopays-content .autopays-grid .autopay-card .card-header .card-actions{display:flex;gap:.5rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-header .card-actions button{width:32px;height:32px;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.autopays-page .autopays-content .autopays-grid .autopay-card .card-header .card-actions button.edit-btn{background:#38b6ff1a;color:#38b6ff}.autopays-page .autopays-content .autopays-grid .autopay-card .card-header .card-actions button.edit-btn:hover{background:#38b6ff33}.autopays-page .autopays-content .autopays-grid .autopay-card .card-header .card-actions button.delete-btn{background:#ef44441a;color:#ef4444}.autopays-page .autopays-content .autopays-grid .autopay-card .card-header .card-actions button.delete-btn:hover{background:#ef444433}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body{padding:0 1.5rem 1.5rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .amount-section{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .amount-section .amount{display:flex;align-items:center;gap:.5rem;font-size:1.25rem;font-weight:600;color:#111827}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .amount-section .amount svg{color:#10b981}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .amount-section .type-badge{padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:500;background:#6b72801a;color:#6b7280}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .schedule-section{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .schedule-section .schedule-item{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:#6b7280}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .schedule-section .schedule-item svg{color:#38b6ff}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .category-section{display:flex;justify-content:space-between;align-items:center}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .category-section .category-tag{padding:.25rem .75rem;background:#38b6ff1a;color:#38b6ff;border-radius:12px;font-size:.75rem;font-weight:500}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .category-section .upcoming-indicator{display:flex;align-items:center;gap:.375rem;color:#f59e0b;font-size:.75rem;font-weight:500}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .category-section .upcoming-indicator svg{color:#f59e0b}@media (max-width: 768px){.autopays-page{padding:1rem}.autopays-page .autopays-header{flex-direction:column;align-items:flex-start;gap:1rem;margin-bottom:1.5rem}.autopays-page .autopays-header .header-content h1{font-size:1.5rem}.autopays-page .autopays-header .header-content p{font-size:.875rem}.autopays-page .autopays-header .add-autopay-btn{width:100%;justify-content:center;padding:.75rem;font-size:.875rem}.autopays-page .autopays-content .autopays-grid{grid-template-columns:1fr;gap:1rem}.autopays-page .autopays-content .autopays-grid .autopay-card{border-radius:16px}.autopays-page .autopays-content .autopays-grid .autopay-card .card-header{padding:1rem;flex-direction:column;align-items:flex-start;gap:.75rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-header .transaction-info{width:100%}.autopays-page .autopays-content .autopays-grid .autopay-card .card-header .transaction-info h3{font-size:1rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-header .transaction-info .transaction-meta{font-size:.8rem;margin-top:.25rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-header .card-actions{width:100%;justify-content:space-between}.autopays-page .autopays-content .autopays-grid .autopay-card .card-header .card-actions .action-btn{padding:.5rem;min-width:40px;min-height:40px}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body{padding:0 1rem 1rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .autopay-details{gap:.75rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .autopay-details .detail-item{padding:.75rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .autopay-details .detail-item .detail-label{font-size:.8rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .autopay-details .detail-item .detail-value{font-size:.875rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .amount-section{margin-top:.75rem;padding:.75rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .amount-section .amount{font-size:1.125rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .amount-section .next-payment{font-size:.8rem}.autopays-page .autopays-content .empty-state{padding:2rem 1rem}.autopays-page .autopays-content .empty-state h3{font-size:1.125rem}.autopays-page .autopays-content .empty-state p{font-size:.875rem}.autopays-page .autopays-content .empty-state .add-first-btn{padding:.75rem 1.5rem;font-size:.875rem}}@media (max-width: 480px){.autopays-page{padding:.75rem}.autopays-page .autopays-header .header-content h1{font-size:1.375rem}.autopays-page .autopays-content .autopays-grid{gap:.75rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-header{padding:.875rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-header .transaction-info h3{font-size:.9rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-header .card-actions .action-btn{padding:.375rem;min-width:36px;min-height:36px}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body{padding:0 .875rem .875rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .autopay-details .detail-item{padding:.625rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .autopay-details .detail-item .detail-label{font-size:.75rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .autopay-details .detail-item .detail-value{font-size:.8rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .amount-section{padding:.625rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .amount-section .amount{font-size:1rem}.autopays-page .autopays-content .autopays-grid .autopay-card .card-body .amount-section .next-payment{font-size:.75rem}}.settings-page{padding:2rem;max-width:800px;margin:0 auto;font-family:Inter,sans-serif}.settings-page .settings-header{margin-bottom:2rem}.settings-page .settings-header .header-content{display:flex;align-items:center;gap:1rem}.settings-page .settings-header .header-content svg{color:#38b6ff}.settings-page .settings-header .header-content h1{font-size:2rem;font-weight:700;color:#111827;margin:0}.settings-page .settings-header .header-content p{color:#6b7280;margin:.25rem 0 0;font-size:.875rem}.settings-page .settings-content{display:flex;flex-direction:column;gap:1.5rem}.settings-page .settings-content .settings-section{background:#fff;border-radius:16px;border:1px solid #e5e7eb;overflow:hidden;box-shadow:0 1px 2px #0000000d}.settings-page .settings-content .settings-section .section-header{display:flex;align-items:center;gap:.75rem;padding:1.5rem 1.5rem 1rem;border-bottom:1px solid #e5e7eb}.settings-page .settings-content .settings-section .section-header svg{color:#38b6ff}.settings-page .settings-content .settings-section .section-header h2{font-size:1.25rem;font-weight:600;color:#111827;margin:0}.settings-page .settings-content .settings-section .section-content{padding:1rem 1.5rem 1.5rem}.settings-page .settings-content .settings-section .section-content .setting-item{display:flex;justify-content:space-between;align-items:center;padding:1rem 0;border-bottom:1px solid rgba(229,231,235,.5)}.settings-page .settings-content .settings-section .section-content .setting-item:last-child{border-bottom:none;padding-bottom:0}.settings-page .settings-content .settings-section .section-content .setting-item .setting-info{flex:1}.settings-page .settings-content .settings-section .section-content .setting-item .setting-info h3{font-size:1rem;font-weight:500;color:#111827;margin:0 0 .25rem}.settings-page .settings-content .settings-section .section-content .setting-item .setting-info p{font-size:.875rem;color:#6b7280;margin:0}.settings-page .settings-content .settings-section .section-content .setting-item .setting-select{padding:.5rem .75rem;border:1px solid #e5e7eb;border-radius:8px;font-size:.875rem;color:#111827;background:#fff;cursor:pointer;transition:all .3s ease}.settings-page .settings-content .settings-section .section-content .setting-item .setting-select:focus{outline:none;border-color:#38b6ff;box-shadow:0 0 0 3px #38b6ff1a}.settings-page .settings-content .settings-section .section-content .setting-item .toggle-switch{position:relative;display:inline-block;width:48px;height:24px}.settings-page .settings-content .settings-section .section-content .setting-item .toggle-switch input{opacity:0;width:0;height:0}.settings-page .settings-content .settings-section .section-content .setting-item .toggle-switch input:checked+.toggle-slider{background-color:#38b6ff}.settings-page .settings-content .settings-section .section-content .setting-item .toggle-switch input:checked+.toggle-slider:before{transform:translate(24px)}.settings-page .settings-content .settings-section .section-content .setting-item .toggle-switch .toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.3s;border-radius:24px}.settings-page .settings-content .settings-section .section-content .setting-item .toggle-switch .toggle-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.3s;border-radius:50%}.settings-page .settings-content .settings-section .section-content .setting-item .setting-status{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:8px;font-size:.875rem;font-weight:500}.settings-page .settings-content .settings-section .section-content .setting-item .setting-status.disabled{background:#ef44441a;color:#ef4444}.settings-page .settings-content .settings-section .section-content .account-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}.settings-page .settings-content .settings-section .section-content .account-info-grid .info-item{display:flex;flex-direction:column;gap:.25rem}.settings-page .settings-content .settings-section .section-content .account-info-grid .info-item .label{font-size:.75rem;font-weight:500;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}.settings-page .settings-content .settings-section .section-content .account-info-grid .info-item .value{font-size:.875rem;font-weight:500;color:#111827}.settings-page .settings-content .settings-section .section-content .account-info-grid .info-item .value.plan-free{color:#6b7280}.settings-page .settings-content .settings-section .section-content .account-info-grid .info-item .value.plan-plus{color:#10b981}.settings-page .settings-content .settings-section .section-content .account-info-grid .info-item .value.plan-premium{color:#38b6ff}.settings-page .settings-content .settings-section .section-content .account-actions{margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(229,231,235,.5)}.settings-page .settings-content .settings-section .section-content .account-actions .manage-payment-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;background:#fff;color:#38b6ff;border:1px solid #38b6ff;border-radius:12px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .3s ease}.settings-page .settings-content .settings-section .section-content .account-actions .manage-payment-btn:hover{background:#38b6ff;color:#fff;transform:translateY(-1px);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.settings-page .settings-content .settings-section .section-content .account-actions .manage-payment-btn svg{transition:all .3s ease}.settings-page .settings-content .message{display:flex;align-items:center;gap:.75rem;padding:1rem 1.5rem;border-radius:12px;font-size:.875rem;font-weight:500}.settings-page .settings-content .message.success{background:#10b9811a;color:#10b981;border:1px solid rgba(16,185,129,.2)}.settings-page .settings-content .message.error{background:#ef44441a;color:#ef4444;border:1px solid rgba(239,68,68,.2)}.settings-page .settings-content .settings-actions{display:flex;justify-content:flex-end;padding-top:1rem}.settings-page .settings-content .settings-actions .save-btn{display:flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:#38b6ff;color:#fff;border:none;border-radius:12px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .3s ease}.settings-page .settings-content .settings-actions .save-btn:hover:not(:disabled){background:#007bb5;transform:translateY(-1px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.settings-page .settings-content .settings-actions .save-btn:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 768px){.settings-page{padding:1rem}.settings-page .settings-header{margin-bottom:1.5rem}.settings-page .settings-header .header-content h1{font-size:1.5rem}.settings-page .settings-header .header-content p{font-size:.875rem}.settings-page .settings-content{gap:1rem}.settings-page .settings-content .settings-section{border-radius:16px}.settings-page .settings-content .settings-section .section-header{padding:1rem}.settings-page .settings-content .settings-section .section-header h2{font-size:1.125rem}.settings-page .settings-content .settings-section .section-header p{font-size:.8rem}.settings-page .settings-content .settings-section .section-content{padding:1rem}.settings-page .settings-content .settings-section .section-content .setting-item{flex-direction:column;align-items:flex-start;gap:1rem;padding:1rem 0}.settings-page .settings-content .settings-section .section-content .setting-item .setting-info{width:100%}.settings-page .settings-content .settings-section .section-content .setting-item .setting-info h3{font-size:.9rem}.settings-page .settings-content .settings-section .section-content .setting-item .setting-info p{font-size:.8rem}.settings-page .settings-content .settings-section .section-content .setting-item .setting-control{width:100%}.settings-page .settings-content .settings-section .section-content .setting-item .setting-control input,.settings-page .settings-content .settings-section .section-content .setting-item .setting-control select,.settings-page .settings-content .settings-section .section-content .setting-item .setting-control textarea{width:100%;padding:.75rem;font-size:.875rem}.settings-page .settings-content .settings-section .section-content .setting-item .setting-control .toggle-switch{align-self:flex-start}.settings-page .settings-content .settings-section .section-content .account-info-grid{grid-template-columns:1fr;gap:1rem}.settings-page .settings-content .settings-section .section-content .account-info-grid .info-item{padding:1rem}.settings-page .settings-content .settings-section .section-content .account-info-grid .info-item .info-label{font-size:.8rem}.settings-page .settings-content .settings-section .section-content .account-info-grid .info-item .info-value{font-size:.875rem}.settings-page .settings-content .settings-section .section-content .account-actions{flex-direction:column;gap:.75rem}.settings-page .settings-content .settings-section .section-content .account-actions .manage-payment-btn{width:100%;justify-content:center;padding:.75rem;font-size:.875rem}.settings-page .settings-content .settings-actions{margin-top:1rem}.settings-page .settings-content .settings-actions .save-btn{width:100%;justify-content:center;padding:.875rem;font-size:.9rem}}@media (max-width: 480px){.settings-page{padding:.75rem}.settings-page .settings-header .header-content h1{font-size:1.375rem}.settings-page .settings-content .settings-section .section-header{padding:.875rem}.settings-page .settings-content .settings-section .section-header h2{font-size:1rem}.settings-page .settings-content .settings-section .section-content{padding:.875rem}.settings-page .settings-content .settings-section .section-content .setting-item{padding:.75rem 0}.settings-page .settings-content .settings-section .section-content .setting-item .setting-control input,.settings-page .settings-content .settings-section .section-content .setting-item .setting-control select,.settings-page .settings-content .settings-section .section-content .setting-item .setting-control textarea{padding:.625rem;font-size:.8rem}.settings-page .settings-content .settings-section .section-content .account-info-grid .info-item{padding:.75rem}}