*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--light);color:var(--dark);font-family:Arial,Helvetica,sans-serif}.layout{height:100vh;display:flex}.sidebar{background-color:var(--primary);color:#fff;flex-direction:column;flex-shrink:0;width:300px;min-width:300px;padding:20px 10px;display:flex}.logo{margin-bottom:60px}.logo h1{text-align:center;font-size:30px;font-weight:800}.sidebar nav ul{flex-direction:column;gap:40px;font-size:20px;list-style:none;display:flex}.sidebar nav ul li a{color:#cbd5e1;border-radius:10px;align-items:center;gap:40px;padding:12px 20px;text-decoration:none;transition:all .2s;display:flex}.sidebar nav ul li a:hover,.sidebar nav ul li a:active{color:#fff;background-color:#ffffff26}.main-section{flex-direction:column;flex:1;display:flex}.topbar{background-color:var(--white);border-bottom:1px solid var(--gray);justify-content:space-between;align-items:center;height:80px;padding:0 40px;display:flex}.topbar-left{align-items:center;display:flex}.searchbox{background-color:var(--white);border:1px solid var(--gray);border-radius:12px;align-items:center;display:flex;overflow:hidden}.searchbox input{background:0 0;border:none;outline:none;width:400px;padding:10px;font-size:14px}.searchbox button{background-color:var(--primary-dark);width:40px;height:40px;color:var(--white);cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;margin:5px;font-size:16px;transition:all .2s;display:flex}.searchbox:focus-within{border-color:var(--primary-dark);box-shadow:0 0 0 3px #007bff33}.searchbox button:hover{background-color:var(--primary)}.topbar-right{align-items:center;gap:40px;display:flex}.notification{background:var(--primary-dark);cursor:pointer;width:40px;height:40px;color:var(--white);border-radius:50%;justify-content:center;align-items:center;font-size:20px;transition:all .2s;display:flex}.notification:hover{background:var(--primary)}.profile{cursor:pointer;position:relative}.profile-img{object-fit:cover;border:2px solid var(--primary);border-radius:50%;width:40px;height:40px}.dropdown{background:var(--white);z-index:99;border-radius:12px;flex-direction:column;width:180px;padding:10px 0;display:none;position:absolute;top:80px;right:0;box-shadow:0 10px 25px #00000014}.profile:hover .dropdown{display:flex}.dropdown a,.logout-btn{color:#333;text-align:left;cursor:pointer;background:0 0;border:none;padding:12px 16px;font-size:14px;text-decoration:none;transition:all .2s}.dropdown a:hover,.logout-btn:hover{background:#f3f4f6}.logout-btn{color:#ef4444;font-weight:500}.content{flex:1;padding:24px;overflow-y:auto}@media (width<=768px){.topbar{padding:0 16px}.searchbox{width:220px}.content{padding:16px}}@media (width<=576px){.topbar{flex-direction:column;align-items:stretch;gap:12px;height:auto;padding:12px}.topbar-left,.topbar-right{justify-content:space-between;width:100%}.searchbox{width:100%}}:root{--primary:#2563eb;--primary-dark:#1d4ed8;--success:#16a34a;--danger:#dc2626;--warning:#f59e0b;--dark:#0f172a;--gray:#64748b;--light:#f8fafc;--white:#fff;--border:#e2e8f0;--shadow:0 10px 30px #0f172a14;border:#dbe2ea}.dashboard{padding:0 30px}.dashboard-header{background-color:var(--white);border:1px solid var(--gray);border-radius:16px;margin-bottom:10px;padding:20px;box-shadow:0 4px 12px #0000000d}.dashboard-header h1{color:var(--dark);margin-bottom:10px;font-size:32px}.dashboard-header p{color:var(--gray);font-size:16px}.summary-section{width:100%}.summary-header{background-color:var(--white);border:1px solid var(--gray);border-radius:16px;margin-bottom:10px;padding:20px}.summary-title{margin-bottom:10px}.summary-title h2{color:var(--dark);margin-bottom:8px;font-size:28px}.summary-title p{color:var(--gray);font-size:15px}.summary-filter{background-color:var(--white);border:1px solid var(--gray);border-radius:16px;flex-wrap:wrap;align-items:end;gap:20px;margin-bottom:10px;padding:20px;display:flex;box-shadow:0 4px 12px #0000000d}.filter-group{flex-direction:column;flex:1;min-width:200px;display:flex}.filter-group label{color:var(--gray);margin-bottom:8px;font-size:14px;font-weight:600}.filter-group input,.filter-group select{border:1px solid var(--border);background-color:var(--white);border-radius:10px;outline:none;padding:12px;font-size:14px;transition:all .3s}.filter-group input:focus,.filter-group select:focus{border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1a}.search-btn{background-color:var(--primary);color:var(--white);cursor:pointer;border:none;border-radius:10px;height:fit-content;padding:12px 24px;font-size:14px;font-weight:600;transition:all .3s}.search-btn:hover{background-color:var(--primary-dark)}.card-container{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-bottom:10px;display:grid}.card{background-color:var(--white);border:1px solid;border-width:1px 6px;border-radius:16px;padding:20px;transition:all .3s;box-shadow:0 4px 12px #0000000d}.card:hover{transform:translateY(-5px)}.card h3{color:var(--gray);margin-bottom:15px;font-size:16px}.card h1{color:var(--dark);margin-bottom:10px;font-size:30px}.card span{color:var(--gray);font-size:14px}.income{border-color:var(--success)}.expense{border-color:var(--danger)}.report{border-color:var(--primary)}.budget{border-color:var(--warning)}.saving-card{background-color:var(--white);border:1px solid var(--gray);border-radius:16px;padding:20px;box-shadow:0 4px 12px #0000000d}.saving-header{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.saving-header h2{color:var(--dark);font-size:24px}.saving-header p{color:var(--gray);margin-top:5px;font-size:14px}.saving-header h3{color:var(--success);font-size:26px}.progress-bar{background-color:#e2e8f0;border-radius:20px;width:100%;height:14px;margin-bottom:10px;overflow:hidden}.progress{background-color:#22c55e;border-radius:20px;width:65%;height:100%}.saving-info{color:var(--gray);justify-content:space-between;font-size:14px;display:flex}@media screen and (width<=768px){.dashboard{padding:20px}.dashboard-header{padding:24px}.dashboard-header h1{font-size:26px}.summary-title h2{font-size:24px}.summary-filter{flex-direction:column;align-items:stretch}.search-btn{width:100%}.saving-header{flex-direction:column;align-items:flex-start;gap:10px}.saving-info{flex-direction:column;gap:8px}}.income-page{background-color:#f5f7fb;padding:0 30px;font-family:Arial,sans-serif}.income-header{background-color:var(--white);border:1px solid var(--gray);border-radius:12px;justify-content:space-between;margin-bottom:10px;padding:20px;display:flex}.income-header h1{color:var(--dark);margin-bottom:5px;font-size:32px}.income-header p{color:var(--gray);font-size:14px}.income-summary{grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px;display:grid}.summary-card{background-color:var(--white);border-left:6px solid var(--primary);border-right:6px solid var(--primary-dark);border-top:1px solid var(--gray);border-bottom:1px solid var(--gray);border-radius:16px;padding:20px;box-shadow:0 2px 10px #0000000d}.income-filter{background-color:var(--white);border:1px solid var(--gray);border-radius:18px;gap:15px;margin-bottom:10px;padding:20px;display:flex}.income-filter input,.income-filter select{background-color:var(--white);border:1px solid #dbe2ea;border-radius:12px;outline:none;padding:14px 16px;font-size:14px}.income-filter input:focus,.income-filter select:focus{border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1a}.income-filter input[type=text]{width:450px}.income-filter select,.income-filter input[type=date]{width:225px}.income-filter button{background-color:var(--primary);color:var(--white);cursor:pointer;border:none;border-radius:12px;padding:14px 24px;font-size:14px;font-weight:600;transition:all .2s}.income-filter button:hover{background-color:var(--primary-dark)}.income-chart{background-color:var(--white);border:1px solid var(--gray);border-radius:16px;margin-bottom:10px;padding:20px;box-shadow:0 2px 10px #0000000d}.income-table-section{background-color:var(--white);border:1px solid var(--gray);border-radius:16px;padding:20px;box-shadow:0 2px 10px #0000000d}.income-table{border-collapse:collapse;width:100%}.income-table thead{background-color:#f8fafc}.income-table th{text-align:left;color:#475569;padding:15px;font-size:14px}.income-table td{color:#334155;border-top:1px solid #e2e8f0;padding:15px;font-size:14px}.income-table button{cursor:pointer;background-color:#e2e8f0;border:none;border-radius:8px;margin-right:8px;padding:8px 14px;transition:all .3s}.income-table button:hover{background-color:#cbd5e1}.pagination-income{justify-content:flex-end;align-items:center;gap:10px;margin-top:25px;display:flex}.pagination-income button{border:1px solid var(--gray);cursor:pointer;background-color:#fff;border-radius:10px;padding:10px 16px;box-shadow:0 2px 5px #0000000d}@media (width<=1024px){.income-summary{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.income-header{flex-direction:column;align-items:flex-start;gap:20px}.income-summary{grid-template-columns:1fr}.income-filter{flex-direction:column}.income-filter input[type=text]{width:100%}.income-table-section{overflow-x:auto}}.expense-page{background-color:#f5f7fb;padding:0 30px;font-family:Arial,sans-serif}.expense-header{background-color:var(--white);border:1px solid var(--gray);border-radius:12px;justify-content:space-between;margin-bottom:10px;padding:20px;display:flex}.expense-header h1{color:var(--dark);margin-bottom:5px;font-size:32px}.expense-header p{color:var(--gray);font-size:14px}.add-btn{background-color:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:10px;padding:12px 20px;font-weight:600;transition:all .3s}.add-btn:hover{background-color:var(--primary-dark)}.expense-summary{grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px;display:grid}.summary-card{background-color:var(--white);border-left:6px solid var(--primary);border-right:6px solid var(--primary-dark);border-radius:16px;padding:20px;box-shadow:0 2px 10px #0000000d}.summary-card span{color:var(--gray);font-size:14px}.summary-card h2{color:var(--dark);margin-top:10px;font-size:28px}.expense-filter{background-color:var(--white);border:1px solid var(--gray);border-radius:18px;gap:15px;margin-bottom:10px;padding:20px;display:flex}.expense-filter input,.expense-filter select{background-color:var(--white);border:1px solid #dbe2ea;border-radius:12px;outline:none;padding:14px 16px;font-size:14px}.expense-filter input:focus,.expense-filter select:focus{border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1a}.expense-filter input[type=text]{width:450px}.expense-filter select,.expense-filter input[type=date]{width:225px}.expense-filter button{background-color:var(--primary);color:var(--white);cursor:pointer;border:none;border-radius:12px;padding:14px 24px;font-size:14px;font-weight:600;transition:all .2s}.expense-filter button:hover{background-color:var(--primary-dark)}.expense-chart{background-color:var(--white);border:1px solid var(--gray);border-radius:16px;margin-bottom:10px;padding:20px;box-shadow:0 2px 10px #0000000d}.expense-table-section{background-color:var(--white);border:1px solid var(--gray);border-radius:16px;padding:20px;box-shadow:0 2px 10px #0000000d}.expense-table{border-collapse:collapse;width:100%}.expense-table thead{background-color:#f8fafc}.expense-table th{text-align:left;color:#475569;padding:15px;font-size:14px}.expense-table td{color:#334155;border-top:1px solid #e2e8f0;padding:15px;font-size:14px}.expense-table button{cursor:pointer;background-color:#e2e8f0;border:none;border-radius:8px;margin-right:8px;padding:8px 14px;transition:all .3s}.expense-table button:hover{background-color:#cbd5e1}.pagination-expense{justify-content:flex-end;align-items:center;gap:10px;margin-top:25px;display:flex}.pagination-expense button{border:1px solid var(--gray);cursor:pointer;background-color:#fff;border-radius:10px;padding:10px 16px;box-shadow:0 2px 5px #0000000d}.page-number{background-color:var(--primary);color:#fff;border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;display:flex}@media (width<=1024px){.expense-summary{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.expense-header{flex-direction:column;align-items:flex-start;gap:20px}.expense-summary{grid-template-columns:1fr}.expense-filter{flex-direction:column}.expense-filter input[type=text]{width:100%}.expense-table-section{overflow-x:auto}}*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}body,.transfer-page{background-color:var(--light)}.transfer-header{text-align:center;margin-bottom:10px}.transfer-header h1{color:var(--dark);margin-bottom:8px;font-size:32px}.transfer-header p{color:var(--gray);font-size:15px}.transfer-container{border:1px solid var(--gray);background-color:#fff;border-radius:20px;max-width:800px;margin:auto;padding:30px;box-shadow:0 5px 20px #0000000d}.transfer-form,.form-group{flex-direction:column;gap:10px;display:flex}.form-group label{color:#334155;font-size:14px;font-weight:600}.form-group input,.form-group select,.form-group textarea{background-color:#fff;border:1px solid #dbe2ea;border-radius:12px;outline:none;width:100%;padding:10px 16px;font-size:14px;transition:all .2s}.form-group textarea{resize:none}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#2563eb;box-shadow:0 0 0 4px #2563eb26}.transfer-action{margin-top:10px}.transfer-action button{color:#fff;cursor:pointer;background-color:#2563eb;border:none;border-radius:14px;width:100%;padding:10px;font-size:15px;font-weight:600;transition:all .2s}.transfer-action button:hover{background-color:#1d4ed8}@media (width<=768px){.transfer-page,.transfer-container{padding:20px}.transfer-header h1{font-size:26px}}.report-page{background-color:#f5f7fb;padding:0 30px}.report-header{background-color:var(--white);border:1px solid var(--gray);border-radius:18px;justify-content:space-between;align-items:center;margin-bottom:10px;padding:20px;display:flex}.report-header h1{color:var(--dark);margin-bottom:8px;font-size:32px}.report-header p{color:var(--gray);font-size:15px}.report-action{gap:15px;display:flex}.export-btn,.print-btn{cursor:pointer;border:none;border-radius:12px;width:150px;padding:20px;font-size:14px;font-weight:600;transition:all .2s}.export-btn{background-color:var(--primary);color:var(--white)}.export-btn:hover{background-color:var(--primary-dark)}.report-summary{grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px;display:grid}.report-card{border-left:6px solid var(--primary);border-right:6px solid var(--primary);border-top:1px solid var(--gray);border-bottom:1px solid var(--gray);background-color:#fff;border-radius:18px;padding:20px;box-shadow:0 5px 20px #0000000d}.report-card span{color:var(--gray);font-size:14px}.report-card h2{color:var(--dark);margin-top:10px;font-size:28px}.report-filter{background-color:var(--white);border:1px solid var(--gray);border-radius:18px;gap:15px;margin-bottom:10px;padding:20px;display:flex}.report-filter input,.report-filter select{background-color:var(--white);border:1px solid #dbe2ea;border-radius:12px;outline:none;padding:14px 16px;font-size:14px}.report-filter input[type=text]{width:450px}.report-filter select,.report-filter input[type=date]{width:225px}.report-filter button{background-color:var(--primary);color:var(--white);cursor:pointer;border:none;border-radius:12px;padding:14px 24px;font-size:14px;font-weight:600;transition:all .2s}.report-filter button:hover{background-color:var(--primary-dark)}.report-chart-section{background-color:var(--white);border:1px solid var(--gray);border-radius:18px;margin-bottom:10px;padding:20px;box-shadow:0 5px 20px #0000000d}.chart-container{background-color:var(--light);border:2px dashed #cbd5e1;border-radius:14px;height:100px}.report-table-section{background-color:var(--white);border:1px solid var(--gray);border-radius:18px;padding:20px;box-shadow:0 5px 20px #0000000d}.report-table{border-collapse:collapse;width:100%}.report-table thead{background-color:#f8fafc}.report-table th{text-align:left;color:#475569;padding:16px;font-size:14px}.report-table td{color:#334155;border-top:1px solid #e2e8f0;padding:16px;font-size:14px}.report-table button{cursor:pointer;background-color:#e2e8f0;border:none;border-radius:10px;margin-right:8px;padding:8px 14px;transition:all .2s}.report-table button:hover{background-color:#cbd5e1}.pagination-report{justify-content:flex-end;align-items:center;gap:10px;margin-top:10px;display:flex}.pagination-report button{border:1px solid var(--gray);cursor:pointer;background-color:#fff;border-radius:10px;padding:10px 16px;box-shadow:0 2px 5px #0000000d}@media (width<=1024px){.report-summary{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.report-page{padding:20px}.report-header{flex-direction:column;align-items:flex-start;gap:20px}.report-summary{grid-template-columns:1fr}.report-filter{flex-direction:column}.report-table-section{overflow-x:auto}}.budget-page{background-color:#f5f7fb;padding:0 30px}.budget-header{background-color:var(--white);border:1px solid var(--gray);border-radius:18px;justify-content:space-between;align-items:center;margin-bottom:10px;padding:20px;display:flex}.budget-header h1{color:var(--dark);margin-bottom:8px;font-size:32px}.budget-header p{color:var(--gray);font-size:15px}.budget-action{gap:15px;display:flex}.export-btn,.add-budget-btn{border:1px solid var(--primary-dark);cursor:pointer;border-radius:12px;width:160px;padding:20px;font-size:14px;font-weight:600;transition:all .2s}.add-budget-btn{background-color:var(--light);color:var(--primary)}.add-budget-btn:hover,.export-btn{background-color:var(--primary);color:var(--white)}.export-btn:hover{background-color:var(--light);color:var(--primary)}.print-btn{background-color:var(--white);color:var(--dark);border:1px solid #dbe2ea}.print-btn:hover{background-color:var(--light)}.budget-summary{grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px;display:grid}.budget-card{border-left:6px solid var(--primary);border-right:6px solid var(--primary-dark);border-top:1px solid var(--gray);border-bottom:1px solid var(--gray);background-color:#fff;border-radius:18px;padding:20px;box-shadow:0 5px 20px #0000000d}.budget-card span{color:var(--gray);font-size:14px}.budget-card h2{color:var(--dark);margin-top:10px;font-size:28px}.budget-filter{background-color:var(--white);border:1px solid var(--gray);border-radius:18px;gap:15px;margin-bottom:10px;padding:20px;display:flex}.budget-filter input,.budget-filter select{background-color:var(--white);border:1px solid #dbe2ea;border-radius:12px;outline:none;padding:14px 16px;font-size:14px}.budget-filter input[type=text]{width:450px}.budget-filter select,.budget-filter input[type=date]{width:225px}.budget-filter button{background-color:var(--primary);color:var(--white);cursor:pointer;border:none;border-radius:12px;padding:14px 24px;font-size:14px;font-weight:600;transition:all .2s}.budget-filter button:hover{background-color:var(--primary-dark)}.section-header{margin-bottom:10px}.section-header h3{color:var(--dark);font-size:20px}.budget-progress-section{background-color:var(--white);border:1px solid var(--gray);border-radius:18px;margin-bottom:10px;padding:20px;box-shadow:0 5px 20px #0000000d}.budget-progress-card{margin-bottom:20px}.progress-info{justify-content:space-between;margin-bottom:8px;font-size:14px;font-weight:600;display:flex}.progress-bar{background:var(--light);border:1px solid var(--gray);border-radius:10px;width:100%;height:10px;overflow:hidden}.progress-fill{border-radius:10px;height:100%}.budget-progress-card:nth-of-type(2) .progress-fill{background:#3498db}.budget-progress-card:nth-of-type(3) .progress-fill{background:#e74c3c}.budget-progress-card:nth-of-type(4) .progress-fill{background:#2ecc71}.budget-table-section{background-color:var(--white);border:1px solid var(--gray);border-radius:18px;padding:20px;box-shadow:0 5px 20px #0000000d}.budget-table{border-collapse:collapse;width:100%}.budget-table thead{background-color:#f8fafc}.budget-table th{text-align:left;color:#475569;padding:16px;font-size:14px}.budget-table td{color:#334155;border-top:1px solid #e2e8f0;padding:16px;font-size:14px}.success{color:#166534;background-color:#dcfce7;border-radius:20px;padding:6px 12px;font-size:12px;font-weight:600}.budget-table button{cursor:pointer;background-color:#e2e8f0;border:none;border-radius:10px;margin-right:8px;padding:8px 14px;transition:all .2s}.budget-table button:hover{background-color:#cbd5e1}.pagination-budget{justify-content:flex-end;align-items:center;gap:10px;margin-top:10px;display:flex}.pagination-budget button{cursor:pointer;border:1px solid var(--gray);background-color:#fff;border-radius:10px;padding:10px 16px;box-shadow:0 2px 5px #0000000d}.page-number{color:#fff;background-color:#2563eb;border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;display:flex}@media (width<=1024px){.budget-summary{grid-template-columns:repeat(2,1fr)}}@media (width<=768px){.budget-page{padding:20px}.budget-header{flex-direction:column;align-items:flex-start;gap:20px}.budget-summary{grid-template-columns:1fr}.budget-filter{flex-direction:column}.budget-table-section{overflow-x:auto}}
