.phatt-wrapper{
padding:40px;
}

.phatt-grid{
display:flex;
gap:25px;
flex-wrap:wrap;
justify-content:center;
}


.phatt-card{
width:320px;
background:linear-gradient(145deg,#2b0c41,#15001f);
border-radius:20px;
padding:20px;
color:#fff;
}


.card-top{
display:flex;
justify-content:space-between;
align-items:flex-start;
}


.subheading{
font-size:13px;
color:rgba(255,255,255,0.7);
margin-top:2px;
}


.tag-pill{
background:#ffb54733;
color:#ffb547;
padding:4px 10px;
border-radius:20px;
font-size:11px;
margin:3px;
display:inline-block;
}


.progress-bar{
height:8px;
background:#333;
border-radius:10px;
margin:12px 0;
overflow:hidden;
}


.progress-inner{
height:100%;
width:0;
background:linear-gradient(90deg,#f2b94b,#d48b2c);
}


.play-btn{
background:#ffb547;
border:none;
border-radius:50%;
width:45px;
height:45px;
font-size:18px;
cursor:pointer;
}


.controls{
display:flex;
align-items:center;
gap:10px;
}


.actions{
margin-left:auto;
display:flex;
gap:8px;
}


.action-btn{
text-decoration:none;
color:#fff;
border:1px solid #999;
padding:6px 14px;
border-radius:20px;
font-size:12px;
}


/* Filter Pills */

.phatt-filter.pills{
display:flex;
justify-content:center;
gap:12px;
flex-wrap:wrap;
margin-bottom:35px;
}


.pill{
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.2);
color:#fff;
padding:8px 18px;
border-radius:25px;
font-size:13px;
cursor:pointer;
transition:.25s;
}


.pill:hover{
background:rgba(255,181,71,0.15);
}


.pill.active{
background:linear-gradient(135deg,#f2b94b,#d48b2c);
color:#000;
border:none;
font-weight:600;
}