*{margin:0;padding:0;box-sizing:border-box}body{font-family:Arial,sans-serif;background:#2c5364}.main-container{padding:20px;margin:auto;max-width:1200px}h1{text-align:center;margin-bottom:25px;color:#fff}.balance-container{border:1px solid white;padding:30px;border-radius:18px;margin-bottom:30px;box-shadow:0 10px 25px #0003}.balance-container h2{font-size:35px;margin-bottom:10px;text-align:center}.balance{font-size:28px;font-weight:700;text-align:center}.income-expense-container{display:flex;margin-top:25px;gap:20px}.income-expense-container div{flex:1;padding:18px;border-radius:14px;text-align:center;box-shadow:0 6px 15px #00000026}.income-expense-container .income{background:#e9fff6;color:green}.income-expense-container .expense{background:#ffecec;color:red}.income-expense-container h3{font-weight:700;font-size:25px;margin-bottom:10px}.filter-container{display:flex;gap:25px;margin:25px 0}.filter-container label{font-weight:700;color:#fff}.filter-container select{padding:10px 14px;border-radius:10px;border:none;font-size:15px;cursor:pointer;margin-left:7px}.transaction-form-btn{position:fixed;top:25px;right:20px;width:60px;height:60px;border-radius:50%;font-size:30px;border:none;cursor:pointer;background:#2c5364;color:#fff}.transaction-form{position:fixed;inset:0;background:#0000008a;display:flex;align-items:center;justify-content:center;z-index:1000}.transaction-form-card{background:#fff;padding:25px;border-radius:15px}.transaction-form-card h2{text-align:center;margin-bottom:19px;color:#2c5364;font-size:30px}.welcome-container{height:100vh;display:flex;justify-content:center;align-items:center;background:#2c5364;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.welcome-card{background:#fff;padding:40px 50px;border-radius:15px;text-align:center;box-shadow:0 15px 40px #0003;animation:fadeIn 1s ease}.welcome-card h1{font-size:45px;margin-bottom:15px;color:#2c5364}.welcome-card p{font-size:15px;color:#000;margin-bottom:30px;font-weight:500}.welcome-card button{padding:12px 30px;font-size:20px;border-radius:14px;border:none;cursor:pointer;background:#2c5364;color:#fff;transition:transform .2s ease,box-shadow .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.loading-container{height:100vh;display:flex;align-items:center;justify-content:center;background:#2c5364;color:#fff;flex-direction:column}.loader{width:58px;height:58px;border:6px solid white;border-top:5px solid #3183a7;border-radius:50%;margin-bottom:15px;animation:spin 1s linear infinite}.loading-container h2{font-weight:500;letter-spacing:1px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.transaction-form-container{width:100%}.form{display:flex;flex-direction:column;gap:15px}.input-label{display:flex;flex-direction:column;gap:6px}.input-label label{font-size:17px;font-weight:700;color:#2c5364}.input-label input{padding:12px;border-radius:10px;border:2px solid #9b9898;font-size:15px}.input-label input:focus,.input-label select:focus{outline:none;border-color:#2c5364}.type-category{display:flex;gap:15px;margin-top:12px}.type-category label{font-size:17px;font-weight:700;color:#2c5364;margin-right:8px}.type-category select{padding:12px;border-radius:10px;border:2px solid #9b9898;font-size:15px;cursor:pointer}.type-category select:focus{outline:none;border-color:#2c5364}.form-btns{display:flex;gap:13px;margin-top:12px}.transaction-add-btn{padding:14px;border-radius:13px;border:none;font-size:16px;font-weight:700;background:#2c5364;color:#fff;cursor:pointer;width:50%;transition:transform .2s ease,box-shadow .2s ease}.cancel-btn{padding:14px;border-radius:13px;border:2px solid #2c5364;background:transparent;color:#2c5364;font-weight:700;cursor:pointer;width:50%;transition:transform .2s ease,box-shadow .2s ease}.cancel-btn:hover{background:#2c5364;color:#fff}.chart-btn{padding:15px 24px;font-size:18px;font-weight:700;border-radius:17px;border:none;background:#2c5364;color:#fff;cursor:pointer;border:1px solid white;transition:transform .2s ease,box-shadow .2s ease}.transaction-add-btn:hover,.chart-btn:hover,.welcome-card button:hover,.cancel-btn:hover,.back-btn:hover,.edit-btn:hover,.delete-btn:hover,.transaction-item:hover{transform:translateY(-2px);box-shadow:0 10px 22px #00000040}.transaction-add-btn:active,.chart-btn:active,.welcome-card button:active,.cancel-btn:active,.back-btn:active,.edit-btn:active,.delete-btn:active{transform:scale(.97)}.chart-container{height:100vh;background:#2c5364;padding:30px 20px}.expense-chart{text-align:center}.expense-chart h2{font-size:33px;margin-bottom:20px;color:#fff}.no-data{font-size:18px;font-weight:700;color:#a09a9a}.back-btn{position:absolute;right:30px;top:34px;padding:12px 22px;border-radius:14px;border:2px solid white;background:transparent;color:#fff;font-weight:700;cursor:pointer;font-size:16px;transition:transform .2s ease,box-shadow .2s ease}.transaction-list-container{background:#fff;padding:20px;border-radius:15px}.transaction-heading{font-size:35px;font-weight:700;color:#2c5364;margin-bottom:15px}.no-transacitons{text-align:center;font-size:20px;color:#7c7878;padding:15px 0}.transaction-list{list-style:none}.transaction-list-header{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 2fr;padding:12px;font-weight:700;color:#2c5364;margin-bottom:13px}.transaction-list-header span{font-size:24px}.transaction-item{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 2fr;padding:10px;margin-bottom:10px;align-items:center;transition:transform .2s ease,box-shadow .2s ease}.transaction-item span{font-size:18px;display:flex;align-items:center}.transaction-item.income{color:green;border-left:5px solid green}.transaction-item.expense{color:red;border-left:5px solid red}.type,.category{text-transform:capitalize;font-weight:500}.list-btns{display:flex;gap:30px;margin-left:5px}.edit-btn,.delete-btn{padding:10px 23px;border-radius:8px;border:none;font-weight:700;cursor:pointer;font-size:14px;transition:transform .2s ease,box-shadow .2s ease}.edit-btn{background:#2c5364;color:#fff}.delete-btn{background:#ff4d4d;color:#fff}
