*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, sans-serif;
}


body{

    background:#0f172a;
    color:white;

}



header{

    background:linear-gradient(135deg,#2563eb,#7c3aed);

    padding:35px;

    text-align:center;

}



header h1{

    font-size:40px;

}



header p{

    margin-top:10px;

    opacity:.8;

}





.container{

    width:92%;

    max-width:1200px;

    margin:auto;

    padding:25px;

}





.card{

    background:#111827;

    padding:25px;

    border-radius:18px;

    margin-bottom:25px;

    box-shadow:0 10px 30px rgba(0,0,0,.3);

}





.dashboard{

    display:grid;

    grid-template-columns:repeat(
    auto-fit,
    minmax(220px,1fr)
    );

    gap:20px;

}



.dashboard div{

    background:linear-gradient(
    135deg,
    #2563eb,
    #4338ca
    );

    padding:25px;

    border-radius:15px;

    text-align:center;

}





h2{

    margin-bottom:20px;

}





input,
select{

    width:100%;

    padding:14px;

    margin-bottom:15px;

    border-radius:10px;

    border:none;

    outline:none;

    background:#1e293b;

    color:white;

    font-size:15px;

}





button{

    width:100%;

    padding:14px;

    border:none;

    border-radius:10px;

    background:linear-gradient(
    135deg,
    #3b82f6,
    #6366f1
    );

    color:white;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}



button:hover{

    transform:translateY(-3px);

}



#resetBtn{

    background:#dc2626;

}







/* Account Tree */


.account{

    background:#1e293b;

    border-left:6px solid #3b82f6;

    padding:18px;

    border-radius:15px;

    margin:12px 0;

    cursor:pointer;

}



.account:hover{

    background:#24344d;

}



.normal{

    margin-left:25px;

    border-left-color:#22c55e;

}



.sub{

    margin-left:55px;

    border-left-color:#a855f7;

}




.accountTitle{

    font-size:22px;

    font-weight:bold;

}



.balance{

    color:#38bdf8;

    font-size:28px;

    margin:10px 0;

}




.delete{

    background:#ef4444;

    padding:8px;

    width:auto;

    margin-top:10px;

}








/* Transaction */


.transaction{

    display:flex;

    justify-content:space-between;

    background:#1e293b;

    padding:15px;

    border-radius:10px;

    margin-top:10px;

}



.income{

    color:#22c55e;

}



.expense{

    color:#ef4444;

}






canvas{

    max-height:400px;

}





@media(max-width:600px){


header h1{

    font-size:28px;

}


.container{

    width:96%;

    padding:10px;

}


}