/* =======================
   AUDIO LIBRARY
======================= */

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

body{

background:#f5f7fb;

color:#222;

padding-bottom:90px;

}


/* HEADER */

.audio-header{

background:#0b8f45;

color:white;

padding:15px 20px;

display:flex;

align-items:center;

justify-content:space-between;

position:sticky;

top:0;

z-index:1000;

box-shadow:0 2px 10px rgba(0,0,0,.2);

}


.audio-header h1{

font-size:22px;

}


.audio-header a{

color:white;

text-decoration:none;

font-weight:bold;

padding:8px 15px;

border-radius:8px;

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

transition:.3s;

}


.audio-header a:hover{

background:white;

color:#0b8f45;

}


/* SECTION */

.audio-section{

padding:20px;

}


.audio-section h2{

text-align:center;

margin-bottom:20px;

color:#0b8f45;

font-size:28px;

}


/* GRID */

.audio-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:20px;

}


/* CARD */

.audio-card{

background:white;

border-radius:15px;

overflow:hidden;

box-shadow:0 8px 20px rgba(0,0,0,.08);

transition:.3s;

}


.audio-card:hover{

transform:translateY(-6px);

box-shadow:0 12px 25px rgba(0,0,0,.15);

}


.audio-card img{

width:100%;

height:230px;

object-fit:cover;

}


.audio-card h3{

font-size:19px;

padding:10px 15px 0;

color:#0b8f45;

}


.audio-card p{

padding:4px 15px;

font-size:14px;

color:#555;

}


.audio-card audio{

width:calc(100% - 20px);

margin:15px 10px;

}



/* MINI PLAYER */

.mini-player{

position:fixed;

bottom:0;

left:0;

right:0;

height:75px;

background:#0b8f45;

display:flex;

align-items:center;

justify-content:space-between;

padding:10px 20px;

color:white;

box-shadow:0 -4px 15px rgba(0,0,0,.25);

z-index:9999;

}


.mini-info{

display:flex;

align-items:center;

gap:12px;

}


.mini-info img{

width:55px;

height:55px;

border-radius:10px;

object-fit:cover;

}


.mini-info h4{

font-size:16px;

margin-bottom:3px;

}


.mini-info p{

font-size:12px;

opacity:.9;

}


#miniPlayPause{

width:50px;

height:50px;

border:none;

border-radius:50%;

background:white;

color:#0b8f45;

font-size:22px;

cursor:pointer;

font-weight:bold;

transition:.3s;

}


#miniPlayPause:hover{

transform:scale(1.08);

}


/* =======================
   MOBILE
======================= */

@media(max-width:768px){

.audio-section{

padding:12px;

}


.audio-grid{

grid-template-columns:repeat(2,1fr);

gap:10px;

}


.audio-card{

border-radius:10px;

}


.audio-card img{

height:120px;

}


.audio-card h3{

font-size:13px;

padding:8px;

}


.audio-card p{

font-size:11px;

padding:2px 8px;

}


.audio-card audio{

margin:8px;

width:calc(100% - 16px);

height:30px;

}


.audio-header h1{

font-size:16px;

}


.audio-header a{

font-size:13px;

padding:6px 10px;

}


.mini-player{

height:65px;

padding:8px 10px;

}


.mini-info img{

width:45px;

height:45px;

}


.mini-info h4{

font-size:13px;

}


.mini-info p{

font-size:10px;

}


#miniPlayPause{

width:40px;

height:40px;

font-size:18px;

}

}

/* MINI PLAYER */

.mini-player{

position:fixed;

bottom:0;

left:0;

right:0;

height:75px;

background:#0b8f45;

display:flex;

align-items:center;

justify-content:space-between;

padding:10px 20px;

color:white;

box-shadow:0 -4px 15px rgba(0,0,0,.25);

z-index:9999;

}

.mini-info{

display:flex;

align-items:center;

gap:12px;

}

.mini-info img{

width:55px;

height:55px;

border-radius:8px;

object-fit:cover;

}

.mini-info h4{

margin:0;

font-size:16px;

}

.mini-info p{

margin:0;

font-size:12px;

opacity:.9;

}

#miniPlayPause{

background:white;

color:#0b8f45;

border:none;

padding:10px 16px;

border-radius:50%;

font-size:20px;

cursor:pointer;

}