body{
font-family:sans-serif;
margin:0;
background:#f5f5f5;
}

.header{
background:#222;
color:white;
padding:15px;
text-align:center;
}

main{
padding:15px;
padding-bottom:80px;
}

.screen{
display:none;
}

.screen.active{
display:block;
}

.cardContainer{
display:grid;
grid-template-columns:1fr;
gap:12px;
}

.card{
background:white;
padding:15px;
border-radius:10px;
box-shadow:0 2px 5px rgba(0,0,0,0.1);
}

.progress{
height:8px;
background:#ddd;
border-radius:4px;
margin-top:8px;
}

.progressBar{
height:100%;
background:#515151;
border-radius:4px;
}

form{
display:flex;
flex-direction:column;
gap:10px;
}

input,select,button{
padding:10px;
font-size:16px;
}

button{
background:#515151;
color:white;
border:none;
border-radius:6px;
}

button:active{
background:#3a3a3a;
}

.bottomNav{
position:fixed;
bottom:0;
left:0;
right:0;
background:#ffffff;
display:flex;
border-top:1px solid #ccc;
height:60px;
z-index:1000;
}

.bottomNav button{
flex:1;
background:#ffffff;
border:none;
font-size:14px;
font-weight:600;
color:#333;
}

table{
overflow-x:auto;
display:block;
}

td{
white-space:nowrap;
}

th,td{
padding:10px;
border-bottom:1px solid #eee;
text-align:left;
font-size:14px;
}

th{
background:#f0f0f0;
}

tr:hover{
background:#f9f9f9;
}

td:nth-child(3){
text-align:right;
font-weight:bold;
}

.deleteBtn{
background:#515151;
color:white;
border:none;
padding:4px 6px;
font-size:14px;
border-radius:2px;
cursor:pointer;
}

.deleteBtn:hover{
background:#3a3a3a;
}

.deleteBtn:active{
background:#3a3a3a;
}


.editBtn{
padding:4px 6px;
font-size:14px;
border-radius:2px;
}

.editBtn:hover{
background:#3a3a3a;
}

.editBtn:active{
background:#3a3a3a;
}

.monthNav{
display:flex;
gap:10px;
align-items:center;
justify-content:center;
margin-top:5px;
}

.monthNav button{
padding:4px 10px;
font-size:16px;
}

.budgetSave{
margin-top:15px;
text-align:center;
}

.dataActions{
display:flex;
gap:10px;
margin-top:20px;
justify-content:center;
flex-wrap:wrap;
}

.dataActions button,
.importBtn{
padding:8px 12px;
font-size:14px;
background:#eee;
border:none;
border-radius:6px;
cursor:pointer;
}

.importBtn input{
display:none;
}

.danger{
background:#ff5252;
color:white;
}

.dataActions button,
.importBtn{
color:#333;
background:#eee;
}

#budgetInputs{
margin-top:10px;
}

.budgetRow{
display:flex;
align-items:center;
gap:12px;
margin-bottom:10px;
}

.budgetRow label{
width:120px;
text-transform:capitalize;
}

.budgetRow input{
width:120px;
padding:5px;
border:1px solid #ccc;
border-radius:4px;
text-align:right;
}

.totalCard{
background:#222;
padding:20px;
border-radius:12px;
margin-bottom:20px;
}

.totalAmount{
font-size:28px;
font-weight:bold;
}


.popup{
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:rgba(0,0,0,0.5);
display:flex;
align-items:center;
justify-content:center;
z-index:2000;
}

.popup.hidden{
display:none;
}

.popupContent{
background:white;
padding:20px;
border-radius:10px;
max-width:400px;
width:90%;
max-height:70vh;
overflow:auto;
}