body{

font-family:Arial;
background:linear-gradient(135deg,#667eea,#764ba2);
min-height:100vh;
padding:30px;

}

.container{

max-width:1000px;
margin:auto;
background:white;
padding:30px;
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,0.2);

}

.top-bar{

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;

}

.toggle-btn{

background:#1f2937;
color:white;
border:none;
padding:10px 15px;
border-radius:8px;
cursor:pointer;

}

.controls{

display:flex;
gap:10px;
margin-bottom:20px;

}

#save-btn{

background:#22c55e;
color:white;
border:none;
padding:10px 15px;
border-radius:8px;
cursor:pointer;

}

#reset-btn{

background:#ef4444;
color:white;
border:none;
padding:10px 15px;
border-radius:8px;
cursor:pointer;

}

.dashboard{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
margin-bottom:25px;

}

.card{

background:#eef2ff;
padding:20px;
border-radius:10px;
text-align:center;

}

.income{

background:#dcfce7;

}

.expense{

background:#fee2e2;

}

.savings{

background:#dbeafe;

}

.sections{

display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-bottom:20px;

}

.box{

background:#f8fafc;
padding:20px;
border-radius:10px;

}

input,select{

width:100%;
padding:10px;
margin-top:10px;
border-radius:6px;
border:1px solid #ccc;

}

button{

margin-top:10px;
padding:10px;
border:none;
background:#667eea;
color:white;
border-radius:6px;
cursor:pointer;

}

.bottom-grid{

display:grid;
grid-template-columns:2fr 1fr;
gap:20px;
margin-bottom:20px;

}

ul{

list-style:none;
padding:0;

}

li{

display:flex;
justify-content:space-between;
padding:8px;
border-bottom:1px solid #ddd;

}

.delete-btn{

background:red;
color:white;
border:none;
padding:5px 10px;
border-radius:5px;
cursor:pointer;

}

.dark-mode{

background:#111827;
color:white;

}

.dark-mode .container{

background:#1f2937;

}