@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');


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


body{

    background:
    linear-gradient(135deg,#dcfce7,#86efac);

    min-height:100vh;

    display:flex;

    justify-content:center;

    padding:30px;

    transition:.4s;

}



/* DARK MODE */


body.dark{

    background:
    linear-gradient(135deg,#052e16,#111827);

}



body.dark .container{

    background:rgba(0,0,0,.45);

}



body.dark section,
body.dark .chart-card,
body.dark #list li{

    background:#1f2937;

    color:white;

}



body.dark input,
body.dark select{

    background:#374151;

    color:white;

}






/* CONTAINER */


.container{

    width:100%;

    max-width:950px;

    background:rgba(255,255,255,.35);

    backdrop-filter:blur(20px);

    border-radius:30px;

    padding:30px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.15);

}







/* NAVBAR */


.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}


.navbar h1{

    color:#14532d;

    font-size:28px;

}



.user-area{

    display:flex;

    align-items:center;

    gap:10px;

}



#username{

    font-weight:600;

}



#themeToggle{

    width:45px;
    height:45px;
    border-radius:50%;
    background:#14532d;
    padding:0;

}






.logout-btn{

    width:auto;

    background:#dc2626;

    padding:10px 18px;

}









/* ALL CARDS */


section,
.chart-card{

    animation:show .5s ease;

    transition:.3s;

}



section:hover,
.chart-card:hover{

    transform:translateY(-5px);

}




@keyframes show{

from{

opacity:0;

transform:translateY(30px);

}


to{

opacity:1;

transform:translateY(0);

}

}








/* BALANCE */


.balance-card{

    background:white;

    padding:30px;

    border-radius:25px;

    text-align:center;

    margin-bottom:20px;

}


.balance-card h2{

    font-size:40px;

    color:#16a34a;

}







/* SUMMARY */


.summary{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-bottom:20px;

}



.card{

    padding:25px;

    border-radius:25px;

    color:white;

    text-align:center;

}



.income{

background:
linear-gradient(135deg,#22c55e,#15803d);

}



.expense{

background:
linear-gradient(135deg,#ef4444,#991b1b);

}



.card p{

    font-size:28px;

    font-weight:700;

}









/* SEARCH */


.search-box{

    position:relative;

    margin-bottom:20px;

}


.search-box input{

width:100%;

padding:15px 15px 15px 45px;

border-radius:20px;

border:none;

}









/* FORM */


.form-section,
.analytics-card,
.budget-card,
.export-card,
.profile-card{

    background:white;

    padding:25px;

    border-radius:25px;

    margin-bottom:20px;

}



input,
select{

width:100%;

padding:14px;

margin:8px 0;

border-radius:15px;

border:1px solid #ddd;

}






button{

width:100%;

padding:14px;

border:none;

border-radius:18px;

background:#16a34a;

color:white;

cursor:pointer;

font-size:16px;

margin-top:10px;

}



button:hover{

transform:scale(1.03);

}








/* ANALYTICS */


.analytics-box{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

margin:20px 0;

}



.analytics-box div{

background:#dcfce7;

padding:20px;

border-radius:20px;

text-align:center;

}






/* CHARTS */


.chart-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}



.chart-card{

background:white;

padding:25px;

border-radius:25px;

margin-bottom:20px;

}



canvas{

max-height:300px;

}







/* BUDGET */


#budgetMessage{

margin-top:15px;

color:#dc2626;

}







/* PROFILE */


.profile-card p{

font-size:16px;

margin:10px;

}






/* HISTORY */


#list{

list-style:none;

}



#list li{

background:white;

padding:18px;

margin-bottom:15px;

border-radius:20px;

display:flex;

justify-content:space-between;

align-items:center;

}



.plus{

border-left:7px solid #16a34a;

}



.minus{

border-left:7px solid #ef4444;

}



.delete-btn{

width:auto;

background:#dc2626;

padding:7px 12px;

}








/* MOBILE */


@media(max-width:768px){


body{

padding:15px;

}



.container{

padding:20px;

}



.navbar{

flex-direction:column;

gap:15px;

}



.user-area{

width:100%;

justify-content:center;

}



.summary{

grid-template-columns:1fr;

}



.analytics-box{

grid-template-columns:1fr;

}



.chart-grid{

grid-template-columns:1fr;

}



#list li{

flex-direction:column;

gap:10px;

}



.balance-card h2{

font-size:32px;

}



}