.sidebar{height:100vh;width:150px;position:fixed;top:0;left:0;background-color:#1f2937;color:#fff;padding:20px;box-shadow:2px 0 5px #0000001a}.profile{text-align:center;margin-bottom:30px}.profile-pic{width:120px;height:120px;border-radius:50%;margin-bottom:10px}.username{margin-top:10px;font-size:1.1rem}.links ul{list-style:none;padding:0}.links ul li{margin:15px 0}.links a{color:#fff;text-decoration:none;font-size:1rem;transition:color .2s ease-in-out}.links a:hover{color:#38bdf8}.logout-button{margin-top:20px;padding:10px 16px;background-color:#ef4444;color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;transition:background-color .2s ease}.logout-button:hover{background-color:#dc2626}.expenses-form{background-color:#f9fafb;padding:20px;border-radius:16px;box-shadow:0 8px 24px #0000000d;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;max-width:100%;margin-bottom:30px;border:1px solid #e5e7eb}.form-group{display:flex;flex-direction:column;flex:1 1 400px;min-width:180px}.form-group label{font-size:.85rem;color:#6b7280;margin-bottom:6px;font-weight:500;letter-spacing:.3px}.form-group input{background-color:#fff;padding:10px 14px;font-size:.95rem;border:1px solid #d1d5db;border-radius:10px;transition:border-color .2s ease,box-shadow .2s ease;box-shadow:0 1px 2px #00000008}.form-group input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f633;outline:none}.expenses-form button{padding:12px 20px;background-color:#3b82f6;color:#fff;font-weight:600;border:none;border-radius:10px;font-size:.95rem;transition:background-color .2s ease,transform .15s ease;white-space:nowrap;margin-top:20px}.expenses-form button:hover{background-color:#2563eb;transform:translateY(-1px)}.plus-icon{margin-right:8px;vertical-align:middle;font-size:1rem}.expense-list{list-style:none;padding:0;margin:0}.expense-item{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#f0f4f8,#fff);padding:12px 16px;margin-bottom:10px;border-radius:12px;box-shadow:0 4px 15px #0000000d;transition:transform .2s ease,box-shadow .2s ease}.expense-item:hover{transform:translateY(-3px);box-shadow:0 12px 24px #00000014}.expense-info{display:flex;flex-direction:column;gap:4px}.expense-info strong{font-size:1rem;color:#111827}.expense-info span{font-size:.85rem;color:#6b7280}.expense-amount{font-size:1rem;font-weight:600;color:#10b981;margin-bottom:4px}.expense-date{font-size:.9rem;color:#9ca3af}.expense-item button{background-color:transparent;border:none;font-size:1.25rem;cursor:pointer;transition:color .2s ease;color:#9ca3af}.expense-item button:hover{color:#ef4444}@media (max-width: 600px){.expense-item{flex-direction:column;align-items:flex-start;padding:16px}.expense-amount{margin-top:10px}}.home-container{width:100%}.charts-container{display:flex;justify-content:space-between;align-items:flex-start;gap:400px;flex-wrap:wrap;padding:20px}.chart-box{flex:1;min-width:300px;max-width:48%}.empty-placeholder{color:#0000004d;font-style:italic;text-align:center;margin:80px}.expense-overview{display:flex;justify-content:space-around;align-items:center;gap:80px;width:calc(100% - 180px);margin:30px 0 0 170px;padding:25px 40px;background-color:#fff;box-shadow:0 4px 10px #00000026;border-radius:12px}.overview-item{font-size:1.2rem;font-weight:600;color:#374151}.recent-expense-section{display:flex;align-items:flex-start;gap:30px;width:100%}.recent-expenses{flex:0 1 800px;max-width:800px}.daily-tip{max-width:400px;margin-left:auto;width:100%}.view-all-expenses{margin-top:10px;margin-left:20px}.view-all-expenses a{text-decoration:none;color:#3b82f6;font-weight:500;transition:color .2s ease}.view-all-expenses a:hover{color:#1d4ed8}@media (max-width: 768px){.recent-expense-section{flex-direction:column}.daily-tip{max-width:100%;margin-top:20px}}.daily-tip-card{display:flex;align-items:flex-start;background-color:#f9fafb;border-left:5px solid #fbbf24;box-shadow:0 4px 10px #00000026;border-radius:12px;padding:20px;max-width:400px;transition:transform .2s ease}.daily-tip-card:hover{transform:scale(1.02)}.tip-icon{font-size:1.8rem;color:#fbbf24;margin-right:15px;margin-top:3px}.tip-content h3{margin:0 0 8px;font-size:1.1rem;color:#111827}.tip-content p{margin:0;font-size:1rem;color:#374151;line-height:1.4}.expenses-page h4{font-size:1.1rem;font-weight:500;margin-bottom:10px;color:#374151}html,body,#root{height:100%;margin:0;padding:0}.app-container{display:flex;min-height:100vh;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f3f4f6}.container{flex:1;padding:20px 220px}.loading-screen{height:100vh;width:100vw;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(to bottom right,#0f172a,#1e293b);color:#fff;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;position:fixed;top:0;left:0;z-index:9999;transition:opacity .4s ease;opacity:1}.spinner{width:60px;height:60px;border:6px solid rgba(255,255,255,.1);border-top:6px solid #60a5fa;border-radius:50%;animation:spin 1s ease-in-out infinite;box-shadow:0 0 20px #3b82f6}.loading-text{margin-top:20px;font-size:1.2rem;animation:fadeIn 1.5s ease-in-out infinite alternate;color:#e0f2fe}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:.6}to{opacity:1}}.login-page{position:fixed;bottom:0;right:0;padding:40px;background-color:#f9fafb;min-height:100vh;width:100vw;display:flex;justify-content:center;align-items:center}.auth-container{background-color:#fff;padding:30px 32px;border-radius:16px;box-shadow:0 8px 24px #0000001f;width:100%;max-width:360px}.auth-container h2{font-size:1.6rem;margin-bottom:20px;color:#1f2937}.auth-form{display:flex;flex-direction:column;gap:16px}.auth-form input{padding:12px 14px;font-size:.95rem;border:1px solid #d1d5db;border-radius:8px;transition:border .2s ease}.auth-form input:focus{border-color:#3b82f6;outline:none}.auth-form button{background-color:#3b82f6;color:#fff;border:none;padding:12px 0;font-weight:600;font-size:1rem;border-radius:8px;cursor:pointer;transition:background-color .2s ease}.auth-form button:hover{background-color:#2563eb}.toggle-auth{margin-top:14px;color:#2563eb;font-size:.9rem;cursor:pointer;text-align:center}