@import"https://fonts.googleapis.com/css2?family=Poppins:wght@100..900&display=swap";:root{--primary-color: #7c3aed;--primary-light: #ede9fe;--text-color: #1e293b;--text-light: #64748b;--bg-color: #f8fafc;--white: #ffffff;--border-color: #e2e8f0;--error-color: #dc2626;--success-color: #16a34a}*{margin:0;padding:0;box-sizing:border-box}html{font-family:Poppins,sans-serif;font-size:16px}body{background-color:var(--bg-color);color:var(--text-color);min-height:100vh;overflow-x:hidden}.app-container{min-height:100vh;display:flex;flex-direction:column}.input-box{width:100%;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}.input-box label{font-size:.875rem;font-weight:500;color:var(--text-color)}.input-box input,.input-box select,.input-box textarea{width:100%;font-size:.875rem;color:var(--text-color);background-color:var(--white);border-radius:.375rem;padding:.75rem 1rem;border:1px solid var(--border-color);outline:none;transition:all .2s ease}.input-box input:focus,.input-box select:focus,.input-box textarea:focus{border-color:var(--primary-color);box-shadow:0 0 0 2px #7c3aed33}.input-box .error{font-size:.75rem;color:var(--error-color)}.btn{display:inline-flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:500;border-radius:.375rem;padding:.625rem 1.25rem;cursor:pointer;transition:all .2s ease;border:none;outline:none}.btn-primary{border-radius:1vh;height:1.3rem;background-color:var(--primary-color);color:var(--white)}.btn-primary-subtitle{font-size:12px}.btn-primary:hover{background-color:#6d28d9}.btn-outline{background-color:transparent;color:var(--primary-color);border:1px solid var(--primary-color)}.btn-outline:hover{background-color:var(--primary-light)}.card{background-color:var(--white);border-radius:.75rem;box-shadow:0 1px 3px #0000001a;padding:1.5rem;margin-bottom:1.5rem;border:1px solid var(--border-color)}.card-title{font-size:1.125rem;font-weight:600;margin-bottom:1rem;color:var(--text-color)}.toast{font-size:.875rem;padding:.75rem 1rem;border-radius:.5rem;max-width:100%}@media (min-width: 640px){.container{max-width:640px;margin:0 auto}}@media (min-width: 768px){.container{max-width:768px}.input-box{flex-direction:row;align-items:center}.input-box label{width:30%}.input-box input,.input-box select,.input-box textarea{width:70%}}@media (min-width: 1024px){.container{max-width:1024px}}@media (min-width: 1280px){.container{max-width:1280px}}.text-center{text-align:center}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-4{gap:1rem}.signup-container{max-width:480px;width:100%;height:90vh;margin:0 auto;padding:2rem;background-color:var(--white);border-radius:12px;box-shadow:0 4px 20px #00000014;border:1px solid var(--border-color)}.signup-title{font-family:poppins;font-size:1.75rem;font-weight:600;color:var(--text-color);margin-bottom:.5rem;text-align:center}.signup-subtitle{height:fit-content;font-size:.9375rem;color:var(--text-light);text-align:center;margin-bottom:2vh}.signup-grid{display:grid;grid-template-columns:1fr}.signup-error{color:var(--error-color);font-size:.875rem;margin:.75rem 0;padding:.5rem;background-color:#dc26260d;border-radius:6px;text-align:center;border-left:3px solid var(--error-color)}.signup-link{color:var(--primary-color);font-weight:500;text-decoration:none;transition:color .2s ease}.signup-link:hover{color:#6d28d9;text-decoration:underline}.profile-photo-selector{display:flex;flex-direction:column;align-items:center;margin-bottom:1.5rem}.profile-photo-preview{width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--primary-light);margin-bottom:1rem}.profile-photo-upload{display:flex;flex-direction:column;align-items:center;gap:.5rem}.photo-upload-btn{background-color:var(--primary-light);color:var(--primary-color);border:none;padding:.5rem 1rem;border-radius:6px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s ease}.photo-upload-btn:hover{background-color:#e9d5ff}.photo-remove-btn{background-color:transparent;color:var(--error-color);border:none;font-size:.8125rem;cursor:pointer;transition:color .2s ease}.photo-remove-btn:hover{text-decoration:underline}@media (max-width: 640px){.signup-container{padding:1.5rem;border-radius:0;box-shadow:none;border:none}.signup-title{font-size:1.5rem}.signup-subtitle{font-size:.875rem}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.signup-container{animation:fadeIn .3s ease-out forwards}.password-strength{display:flex;align-items:center;gap:.5rem;margin-top:.25rem}.password-strength-meter{flex-grow:1;height:4px;background-color:var(--border-color);border-radius:2px;overflow:hidden}.password-strength-meter-fill{height:100%;width:0%;background-color:var(--error-color);transition:width .3s ease,background-color .3s ease}.password-strength-text{font-size:.75rem;color:var(--text-light)}.profile-photo-wrapper{display:flex;justify-content:center;margin-bottom:1.5rem;gap:1rem}.photo-placeholder{width:3rem;height:3rem;display:flex;align-items:center;justify-content:center;background-color:#ede9fe;border-radius:9999px;position:relative}.photo-icon{font-size:2.25rem;color:#7c3aed}.upload-btn{width:3vw;height:3vh;display:flex;align-items:center;justify-content:center;background-color:#7c3aed;color:#fff;border-radius:9999px;position:absolute;bottom:-.25rem;right:-.25rem;cursor:pointer}.photo-preview-wrapper{position:relative}.photo-preview{width:5rem;height:5rem;border-radius:9999px;object-fit:cover}.remove-btn{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;background-color:#ef4444;color:#fff;border-radius:9999px;position:absolute;bottom:-.25rem;right:-.25rem;cursor:pointer}.auth-container{display:flex;width:100vw;height:100vh;overflow:hidden}.auth-left{width:100%;height:100%;padding:2rem 3rem}@media (min-width: 768px){.auth-left{width:60%}}.auth-title{font-size:1.125rem;font-weight:500;color:#000}.auth-right{display:none}@media (min-width: 768px){.auth-right{display:flex;width:40%;height:100vh;padding:2rem;position:relative;background-color:#f3e8ff;background-size:cover;background-repeat:no-repeat;background-position:center;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}}.shape{position:absolute;z-index:12;border-radius:10px}.shape-one{width:8rem;height:8rem;top:0;left:0;background-color:#9333ea}.shape-two{width:10rem;height:10rem;top:35%;right:-20px;border:25px solid #c026d3;border-radius:35px}.shape-three{width:10rem;height:10rem;bottom:0;left:0;background-color:#8b5cf6;border-radius:30px}.auth-stats{position:relative;z-index:50;margin-bottom:15rem;margin-left:-5rem}.auth-image{width:26rem;box-shadow:0 10px 25px #60a5fa26;z-index:20;bottom:-13px;position:relative;border-radius:8px}@media (min-width: 1024px){.auth-image{width:90%}}.stats-card{display:flex;gap:1.5rem;background-color:#fff;padding:.5rem;border-radius:.5rem;box-shadow:0 4px 10px #8b5cf61a;border:1px solid rgba(229,231,235,.5)}.stats-icon{width:2rem;height:3rem;font-size:1.625rem;display:flex;align-items:center;justify-content:center;border-radius:9999px;box-shadow:0 2px 5px #0000001a}.stats-label{font-size:.75rem;color:#6b7280;margin-bottom:.25rem}.stats-value{font-size:1.25rem}.input-container{margin-bottom:1.25rem;width:100%}.input-label{display:block;font-size:.875rem;font-weight:500;color:#1e293b;margin-bottom:.5rem}.input-box{display:flex;align-items:center;border:1px solid #e2e8f0;border-radius:.5rem;padding:.75rem 1rem;gap:.75rem;background-color:#fff;transition:all .2s ease;box-shadow:0 1px 2px #0000000d}.input-box:focus-within{border-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed1a}.input-box.error{border-color:#ef4444}.input-field{width:100%;background:transparent;outline:none;border:none;font-size:.9375rem;color:#1e293b}.input-field::placeholder{color:#94a3b8;opacity:1}.input-icon{color:#94a3b8;cursor:pointer;transition:color .2s ease;flex-shrink:0}.input-icon:hover{color:#7c3aed}.error-message{font-size:.75rem;color:#ef4444;margin-top:.5rem}.password-strength{height:.25rem;background-color:#e2e8f0;border-radius:.125rem;margin-top:.5rem;overflow:hidden}.password-strength-bar{height:100%;width:0%;background-color:#ef4444;transition:width .3s ease,background-color .3s ease}@media (max-width: 768px){.input-box{padding:.625rem .875rem}.input-field{font-size:.875rem}}@media (max-width: 480px){.input-label{font-size:.8125rem}.input-box{padding:.5rem .75rem}}.login-container{width:70%;height:75%;display:flex;flex-direction:column;justify-content:center;padding-top:150px;margin:0 auto}.login-title{font-family:poppins;font-size:1.5rem;font-weight:600;color:#000}.login-subtitle{font-size:.75rem;color:#475569;margin-top:5px;margin-bottom:24px}.login-form{display:flex;flex-direction:column}.login-error{color:red;font-size:.75rem;padding-bottom:10px}.login-button{background-color:#9333ea;color:#fff;padding:10px;margin-top:10px;border:none;border-radius:6px;cursor:pointer;font-weight:700}.login-button:hover{background-color:#9333ea}.signup-link{font-size:.85rem;margin-top:16px}.signup-anchor{color:#9333ea;font-weight:500;text-decoration:underline}.side-menu-wrapper{width:16rem;height:calc(100vh - 61px);background:linear-gradient(to bottom,#fff,#f5f9ff);border-right:1px solid #e1e8f5;padding:1.5rem 1rem;position:sticky;top:61px;z-index:20}.user-section{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;margin:1rem 0 2rem;padding-bottom:1rem;border-bottom:1px solid #e1e8f5}.user-avatar{width:6rem;height:6rem;background:linear-gradient(135deg,#7ac6d2,#b5fccd);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:1.5rem}.user-name{color:#3a59d1;font-weight:600;font-size:1.1rem;line-height:1.5rem}.menu-button{width:100%;display:flex;justify-content:flex-start;align-items:center;gap:.75rem;font-size:.95rem;padding:.85rem 1.5rem;border-radius:.6rem;margin-bottom:.5rem;transition:all .2s ease;background-color:transparent;color:#4a5d8a;border:none;cursor:pointer}.menu-button:hover{background-color:#f0f5ff;color:#3a59d1}.menu-button.active{background:linear-gradient(to right,#3a59d1,#3d90d7);color:#fff;font-weight:500;box-shadow:0 2px 8px #3a59d133}.menu-button.active:hover{background:linear-gradient(to right,#2e49b8,#3580c2)}.menu-icon{font-size:1.3rem;width:1.5rem;display:flex;align-items:center;justify-content:center;color:inherit}.avatar{display:flex;align-items:center;justify-content:center;border-radius:9999px;background-color:#d1d5db}.navbar-container{display:flex;align-items:center;gap:1rem;background:#fff;border-bottom:1px solid #e1e8f5;padding:1.25rem 2rem;position:sticky;top:0;z-index:30;box-shadow:0 2px 10px #3a59d114}.menu-button-n{width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;color:#3a59d1;background-color:#f0f5ff;border-radius:8px;border:1px solid #d6e0f7;cursor:pointer;transition:all .2s ease}.menu-button:hover{background-color:#e1e8f5;color:#2e49b8}.icon{font-size:1.4rem}.title{font-size:1.25rem;font-weight:600;color:#3a59d1;margin:0;flex-grow:1}.side-menu-container{position:fixed;top:76px;left:0;background:linear-gradient(to bottom,#fff,#f5f9ff);height:calc(100vh - 76px);z-index:25;border-right:1px solid #e1e8f5}.infoCard{display:flex;gap:1.25rem;background-color:#fff;padding:1.5rem;border-radius:1rem;box-shadow:0 4px 12px #0000000d;border:1px solid rgba(203,213,225,.5);transition:transform .2s ease,box-shadow .2s ease;width:100%;max-width:320px;margin:0 auto}.infoCard:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0000001a}.iconWrapper{width:3.5rem;height:3.5rem;display:flex;align-items:center;justify-content:center;font-size:1.625rem;color:#fff;border-radius:50%;box-shadow:0 4px 8px #00000026;flex-shrink:0}.infoText{display:flex;flex-direction:column;justify-content:center;flex-grow:1}.label{font-size:.875rem;color:#64748b;margin-bottom:.5rem;font-weight:500;line-height:1.2}.value{font-size:1.5rem;color:#1e293b;font-weight:600;line-height:1.2}.bg-primary{background-color:#6366f1}.bg-orange-500{background-color:#f97316}.bg-red-500{background-color:#ef4444}@media (max-width: 768px){.infoCard{padding:1.25rem;gap:1rem}.iconWrapper{width:3rem;height:3rem;font-size:1.5rem}.value{font-size:1.375rem}}@media (max-width: 480px){.infoCard{flex-direction:column;align-items:center;text-align:center;padding:1rem}.infoText{align-items:center}.label{margin-bottom:.25rem}.value{font-size:1.25rem}}.wrapper{width:100%;max-width:1200px;margin:1.25rem auto;padding:0 1rem;background-color:#f8faff;border-radius:12px;box-shadow:0 4px 12px #3a59d114}.cardGrid{display:grid;grid-template-columns:repeat(1,1fr);gap:1.5rem;margin-bottom:2rem}.cardGrid>div{background:#fff;border:1px solid #f4f7fa;border-radius:8px;padding:1.5rem;transition:all .3s ease}.cardGrid>div:hover{transform:translateY(-4px);box-shadow:0 6px 16px #3a59d11f;border-color:#f8f9fb}.recentGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-bottom:2rem;min-height:100px;background:linear-gradient(to right,#f6fbff,#f0f9ff);border-radius:12px;padding:1.5rem;border:1px solid #f2f5f5}.recentGrid>div{background-color:#fff;border-radius:8px;padding:1.25rem;box-shadow:0 2px 6px #3a59d10d}@media (min-width: 768px){.cardGrid{grid-template-columns:repeat(3,1fr)}.recentGrid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 1024px){.recentGrid{grid-template-columns:repeat(2,1fr)}.recentGrid>div:nth-child(1),.recentGrid>div:nth-child(2){grid-column:span 1;border-right:2px solid #f1f6f3;padding-right:1.5rem}.recentGrid>div:nth-child(3){grid-column:span 2;background-color:#f6fcff;border-top:2px solid #edf1ee;margin-top:1rem;padding-top:1.5rem;position:relative}.recentGrid>div:nth-child(3):before{content:"";position:absolute;top:-2px;left:0;right:0;height:2px;background:linear-gradient(to right,#f4f4f8,#edf1f3)}}.pie-chart-container{width:100%;height:100%;min-height:300px}.custom-pie-label{text-anchor:middle;fill:#64748b;font-size:14px;font-weight:500}.custom-pie-total{text-anchor:middle;fill:#1e293b;font-size:24px;font-weight:600}.recharts-legend-item-text{font-size:14px!important;color:#334155!important}@media (max-width: 768px){.custom-pie-total{font-size:20px}.recharts-legend-item-text{font-size:12px!important}}@media (max-width: 480px){.custom-pie-total{font-size:18px}.custom-pie-label{font-size:12px}}.recent-income-chart-card{background-color:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 12px #0000000d;border:1px solid rgba(229,231,235,.5);margin-bottom:1.5rem;height:100%}.recent-income-chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.recent-income-chart-title{font-size:1.125rem;font-weight:600;color:#1e293b}.chart-container{height:300px;position:relative;display:flex;align-items:center;justify-content:center}.no-data-message{text-align:center;color:#64748b;font-size:.875rem}@media (max-width: 768px){.recent-income-chart-card{padding:1.25rem}.chart-container{height:250px}}@media (max-width: 480px){.recent-income-chart-card{padding:1rem}.chart-container{height:200px}.recent-income-chart-title{font-size:1rem}}.transaction-card{display:flex;align-items:center;gap:1rem;padding:.75rem;border-radius:8px;background-color:#fff;transition:all .2s ease;position:relative;width:100%;margin-bottom:.5rem}.transaction-card:hover{background-color:#f8fafc;transform:translateY(-2px);box-shadow:0 2px 8px #0000000d}.transaction-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background-color:#f1f5f9;border-radius:50%;font-size:1.25rem;color:#64748b;flex-shrink:0}.icon-img{width:24px;height:24px;object-fit:contain}.transaction-details{flex:1;display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-width:0}.transaction-title{font-size:.9375rem;font-weight:500;color:#1e293b;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transaction-date{font-size:.75rem;color:#94a3b8;margin-top:.25rem;white-space:nowrap}.amount-chip{display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;border-radius:6px;font-size:.875rem;font-weight:500;flex-shrink:0}.income-amount{background-color:#ecfdf5;color:#10b981}.expense-amount{background-color:#fef2f2;color:#ef4444}.delete-btn{background:none;border:none;color:#94a3b8;cursor:pointer;transition:color .2s ease;flex-shrink:0;padding:.25rem}.delete-btn:hover{color:#ef4444}.view-receipt-btn{display:inline-block;margin-top:.5rem;padding:.375rem .75rem;background-color:#f1f5f9;color:#334155;border-radius:4px;font-size:.75rem;text-decoration:none;transition:all .2s ease;width:fit-content}.view-receipt-btn:hover{background-color:#e2e8f0}@media (max-width: 768px){.transaction-card{gap:.75rem;padding:.625rem}.transaction-icon{width:42px;height:42px;font-size:1.1rem}.transaction-title{font-size:.875rem}.amount-chip{padding:.25rem .5rem;font-size:.8125rem}}@media (max-width: 480px){.transaction-card{flex-direction:column;align-items:flex-start;padding:.75rem;gap:.75rem}.transaction-details{width:100%;flex-direction:column;align-items:flex-start;gap:.75rem}.transaction-right{width:100%;display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}.view-receipt-btn{width:100%;text-align:center;margin-top:.75rem}.icon-img{width:20px;height:20px}.transaction-title{white-space:normal}}.recent-income-card{background:#fff;border-radius:1rem;padding:1.5rem;box-shadow:0 4px 12px #0000000d;border:1px solid rgba(203,213,225,.5);height:100%;width:100%}.recent-income-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.recent-income-title{font-size:1.125rem;font-weight:600;color:#1e293b}.recent-income-btn{display:flex;align-items:center;font-size:.875rem;color:#6366f1;background:none;border:none;cursor:pointer;gap:.3rem;font-weight:500;transition:color .2s ease}.recent-income-btn:hover{color:#4f46e5}.recent-income-icon{font-size:1rem;transition:transform .2s ease}.recent-income-btn:hover .recent-income-icon{transform:translate(2px)}.recent-income-list{margin-top:1rem;display:flex;flex-direction:column;gap:1rem}.transactions-card{background-color:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 12px #0000000d;border:1px solid rgba(229,231,235,.5);height:100%}.transactions-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}.transactions-title{font-size:1.125rem;font-weight:600;color:#1e293b}.see-all-btn{display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;color:#6366f1;background-color:#f5f3ff;padding:.5rem 1rem;border-radius:8px;border:1px solid rgba(229,231,235,.5);cursor:pointer;transition:all .2s ease}.see-all-btn:hover{background-color:#ede9fe;color:#4f46e5}.transactions-list{display:flex;flex-direction:column;gap:1rem}@media (max-width: 768px){.transactions-card{padding:1rem}.see-all-btn{padding:.375rem .75rem}}.finance-card{background:#fff;border-radius:1rem;padding:1.5rem;box-shadow:0 4px 12px #0000000d;border:1px solid rgba(203,213,225,.5);height:100%}.finance-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.finance-title{font-size:1.125rem;font-weight:600;color:#1e293b}.chart-container{height:250px;margin-top:1rem}@media (min-width: 768px){.chart-container{height:200px}}.bar-chart-container{background-color:#fff;border-radius:12px;padding:1.5rem;margin-top:1.5rem}.custom-tooltip{background-color:#fff;border-radius:8px;padding:.75rem;box-shadow:0 4px 12px #0000001a;border:1px solid rgba(229,231,235,.5)}.tooltip-title{font-size:.875rem;font-weight:600;color:#6366f1;margin-bottom:.5rem}.tooltip-amount{font-size:.875rem;color:#64748b}.tooltip-value{font-weight:600;color:#1e293b}@media (max-width: 768px){.bar-chart-container{padding:1rem}.custom-tooltip{padding:.5rem;font-size:.75rem}}.income-card{padding:1rem;border-radius:.5rem;box-shadow:0 2px 8px #0000001a;background-color:#fff;margin-left:20px;margin-top:20px;width:900px}.income-header{display:flex;justify-content:space-between;align-items:center}.income-title{font-size:1.125rem;font-weight:600}.income-subtitle{font-size:.75rem;color:#9ca3af;margin-top:.125rem}.add-income-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background-color:#7c3aed;color:#fff;border:none;border-radius:.375rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:background-color .2s ease-in-out;margin-left:500px;width:150px;height:45px}.add-income-btn:hover{background-color:#6d28d9}.income-chart-container{margin-top:2.5rem}.modal-overlay{position:fixed;top:0;right:0;left:0;bottom:0;z-index:50;display:flex;justify-content:center;align-items:center;background-color:#0006;overflow-y:auto;overflow-x:hidden;padding:1rem}.modal-wrapper{position:relative;width:100%;max-width:42rem;margin:auto}.modal-content{background-color:#fff;border-radius:.5rem;box-shadow:0 10px 25px #0000001a;overflow:hidden;animation:fadeIn .3s ease-in-out}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid #e5e7eb}.modal-title{font-size:1.25rem;font-weight:600;color:#111827}.modal-close-btn{background:transparent;color:#6b7280;border:none;font-size:1.25rem;width:2rem;height:2rem;border-radius:.375rem;cursor:pointer;transition:background-color .2s ease,color .2s ease}.modal-close-btn:hover{background-color:#f3f4f6;color:#111827}.modal-body{padding:1rem}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 640px){.modal-wrapper{max-width:90%}.modal-title{font-size:1.125rem}.modal-close-btn{width:1.75rem;height:1.75rem;font-size:1rem}}.emoji-picker-container{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-bottom:1.5rem}.icon-selector{position:absolute;right:40px;align-items:center;gap:4px;cursor:pointer}.icon-image{width:3rem;height:3rem}.icon-text{width:320px;height:3rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem;background-color:#e9d8fd;color:#7c3aed;border-radius:.5rem}.emoji-popup-container{position:relative}.close-button{background-color:#fff;border:1px solid #e5e7eb;border-radius:50%;position:absolute;top:-.5rem;right:-.5rem;z-index:10;cursor:pointer}.close-button:hover{background-color:#f3f4f6}.button-container{background-color:#6d28d9}.add-income-form{position:absolute;top:25vh;right:50%;transform:translate(50%);padding:2rem;background:#fff;border-radius:12px;box-shadow:0 4px 12px #0000001a;max-width:500px;width:90%;box-sizing:border-box;z-index:1000}.form-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.form-title{font-size:1.5rem;font-weight:600;color:#1e293b;margin:0}.close-btn{background:none;border:none;cursor:pointer;padding:.25rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#6b7280;transition:all .3s ease}.close-btn:hover{background-color:#f3f4f6;color:#ef4444;transform:rotate(90deg)}.close-btn:focus{outline:2px solid #7c3aed;outline-offset:2px}.icon-picker{display:flex;align-items:center;margin-bottom:1.5rem;gap:.75rem}.icon-label{font-weight:500;color:#475569;font-size:.9375rem}.form-group{margin-bottom:1.25rem}.form-row{display:flex;gap:1rem}.form-group-half{flex:1}.add-btn{margin-top:30px;margin-right:50px;padding:.5rem 1rem;background-color:#7c3aed;color:#fff;border:none;border-radius:.375rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:background-color .2s ease-in-out}.add-btn:hover{background-color:#582185}.income-list-card{padding:1.5rem;background:#fff;border-radius:8px;box-shadow:0 4px 8px #0000001a;margin-top:10px;margin-left:20px}.header{display:flex;justify-content:space-between;align-items:center}.title{font-size:1.25rem;font-weight:600;color:#000}.download-btn{background-color:#9333ea;color:#fff;padding:.5rem 1rem;font-weight:500;border-radius:6px;cursor:pointer}.download-btn:hover{background-color:#7e28b1}.download-icon{margin-right:.5rem}.transaction-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}@media (min-width: 768px){.transaction-grid{grid-template-columns:repeat(2,1fr)}}.chart-container{background-color:#fff;border-radius:.75rem;box-shadow:0 4px 6px #0000001a;padding:1rem;border:1px solid #d1d5db;margin:1rem 0;height:350px}.tooltip-container{background-color:#fff;border-radius:.5rem;padding:.75rem;box-shadow:0 4px 6px #0000001a;border:1px solid #e5e7eb;min-width:120px}.tooltip-title{font-size:.75rem;font-weight:600;color:#7c3aed;margin-bottom:.25rem}.tooltip-amount{font-size:.875rem;color:#4b5563}.tooltip-amount span{font-size:.875rem;font-weight:500;color:#111827}@media (max-width: 768px){.chart-container{padding:.75rem;border-radius:.5rem}.tooltip-container{padding:.5rem}.tooltip-title{font-size:.6875rem}.tooltip-amount,.tooltip-amount span{font-size:.75rem}}@media (max-width: 480px){.chart-container{padding:.5rem;margin:.5rem 0}.tooltip-container{transform:scale(.9)}}.form-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;position:relative}.form-title{font-size:1.5rem;font-weight:600;color:#333;margin:0}.close-btn{background:none;border:none;cursor:pointer;padding:.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#6b7280;transition:all .3s ease}.close-btn:hover{background-color:#f3f4f6;color:#4b5563;transform:rotate(90deg)}.close-btn svg{width:1.25rem;height:1.25rem}.add-expense-form{position:absolute;top:25vh;right:50vh;padding:2rem;background:#fff;border-radius:12px;box-shadow:0 4px 12px #0000001a;max-width:500px;margin:0 auto;width:100%;box-sizing:border-box}@media (max-width: 640px){.add-expense-form{padding:1.5rem}.form-header{margin-bottom:1rem}.form-title{font-size:1.25rem}.close-btn{padding:.4rem}.close-btn svg{width:1.1rem;height:1.1rem}}.expense-overview-heading{font-size:1.125rem;line-height:1.75rem;font-weight:500;color:#111827}.expense-overview-subtitle{font-size:.75rem;line-height:1rem;color:#9ca3af;margin-top:.125rem}.add-expense-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background-color:#7c3aed;color:#fff;border:none;border-radius:.375rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:background-color .2s ease-in-out;margin-left:500px}.add-expense-btn:hover{background-color:#6d28d9}.add-expense-btn svg{width:1.125rem;height:1.125rem}.add{margin-top:30px;margin-right:50px;padding:.5rem 1rem;background-color:#7c3aed;color:#fff;border:none;border-radius:.375rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:background-color .2s ease-in-out}.card{padding:1.5rem;background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #0000001a;margin:1rem 0 1rem 1rem}.card1{width:900px;padding:1.5rem;background-color:#fff;border-radius:8px;box-shadow:0 4px 12px #0000001a;margin:1rem 0 1rem 1rem}.action-icons{display:flex;gap:10px;align-items:center}.download-icon,.delete-icon{font-size:18px;cursor:pointer;color:#666;transition:color .3s}.download-icon:hover,.delete-icon:hover{color:#000}.card .flex{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.card h5{font-size:1.125rem;font-weight:600;color:#333;margin-bottom:.5rem}.card .card-btn{padding:.5rem 1rem;font-size:.875rem;border:none;background-color:#7c3aed;color:#fff;border-radius:4px;cursor:pointer;transition:background-color .3s ease;white-space:nowrap}.card .card-btn:hover{background-color:#6d28d9}.card .grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}.card .grid.md\:grid-cols-2{grid-template-columns:repeat(2,1fr)}.card .grid .transaction-card{background-color:#f9fafb;padding:1rem;border-radius:8px;box-shadow:0 2px 8px #0000001a}.card .grid .transaction-card .title{font-weight:600;font-size:1rem;color:#333}.card .grid .transaction-card .amount{font-weight:700;color:#e4002b}.card .grid .transaction-card .date{color:#6b7280;font-size:.875rem}.card .grid .transaction-card .icon{font-size:1.5rem;color:#7c3aed}.card .grid .transaction-card .delete-btn{font-size:1rem;color:#e4002b;cursor:pointer}.view-receipt-btn{display:inline-block;margin-top:.75rem;padding:.4rem .75rem;background-color:#2563eb;color:#fff;border-radius:4px;font-size:.875rem;font-weight:500;text-decoration:none;transition:background-color .3s ease}.view-receipt-btn:hover{background-color:#1e40af}@media (max-width: 768px){.card{padding:1rem}.card .grid.md\:grid-cols-2{grid-template-columns:1fr}.card .flex{flex-direction:column;align-items:flex-start;gap:.5rem}.card .card-btn{width:100%;text-align:center}}@media (max-width: 480px){.card,.card .grid .transaction-card{padding:.75rem}.action-icons{flex-wrap:wrap}}.delete-confirmation-modal{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.delete-confirmation-content{background-color:#fff;padding:2rem;border-radius:8px;max-width:400px;width:90%;box-shadow:0 4px 12px #00000026;text-align:center}.delete-confirmation-title{font-size:1.25rem;font-weight:600;margin-bottom:1rem;color:#333}.delete-confirmation-message{margin-bottom:1.5rem;color:#666}.delete-confirmation-buttons{display:flex;justify-content:center;gap:1rem}.delete-confirm-btn{padding:.5rem 1.5rem;background-color:#ef4444;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s}.delete-confirm-btn:hover{background-color:#dc2626}.delete-cancel-btn{padding:.5rem 1.5rem;background-color:#e5e7eb;color:#333;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s}.delete-cancel-btn:hover{background-color:#d1d5db}.delete-icon{font-size:1.25rem;cursor:pointer;color:#ef4444;transition:all .3s;padding:.5rem;border-radius:50%}.delete-icon:hover{background-color:#fee2e2;transform:scale(1.1)}