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

body{
background:#f8f8f8;
}

.container{
max-width:500px;
margin:auto;
background:#fff;
min-height:100vh;
}

.top-bar{
display:flex;
align-items:center;
justify-content:center;
position:relative;
padding:30px 20px;
}

.back-btn{
position:absolute;
left:20px;
font-size:28px;
color:#43156f;
}

.top-bar h1{
font-size:22px;
font-weight:700;
color:#000;
}

.search-row{
display:flex;
gap:15px;
padding:20px;
align-items:center;
}

.search-box{
flex:1;
height:58px;
background:#f4f4f4;
border-radius:12px;
display:flex;
align-items:center;
padding:0 18px;
}

.search-box i{
font-size:22px;
color:#b7bcc7;
}

.search-box input{
border:none;
outline:none;
background:none;
width:100%;
padding-left:15px;
font-size:20px;
color:#444;
}

.filter-btn{
background:none;
border:none;
font-size:24px;
}

.month-tabs{
display:flex;
gap:15px;
padding:0 20px 20px;
overflow:auto;
}

.month{
border:none;
background:#fff;
padding:14px 30px;
border-radius:15px;
font-size:18px;
color:#808080;
box-shadow:0 3px 12px rgba(0,0,0,.08);
white-space:nowrap;
}

.transaction{
display:flex;
justify-content:space-between;
align-items:center;
padding:22px 20px;
border-bottom:1px solid #efefef;
}

.left{
display:flex;
align-items:center;
gap:16px;
}

.icon{
width:56px;
height:56px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
}

.pink{
background:#f7d7db;
color:#d65b70;
}

.orange{
background:#ffe4c7;
color:#f27c00;
}

.red{
background:#f8d7d7;
color:#d80000;
}

.purple{
background:#ead0ee;
color:#9d00a8;
}

.info h3{
font-size:17px;
font-weight:600;
color:#111;
}

.info p{
font-size:14px;
color:#b2b2b2;
margin-top:2px;
}

.amount{
font-size:17px;
font-weight:600;
}

.credit{
color:#5ec788;
}

.debit{
color:#000;
}

.date-divider{
background:#f3f3f3;
padding:12px 20px;
font-size:16px;
color:#888;
}