.lcbp-mp3-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 980px;
margin: 0 auto;
box-sizing: border-box;
}
.lcbp-mp3-grid * {
box-sizing: border-box;
}
@media (max-width: 680px) {
.lcbp-mp3-grid {
grid-template-columns: 1fr;
}
}
.lcbp-mp3-card {
background: linear-gradient(180deg, #fffaf0 0%, #fdf3dd 100%);
border: 1px solid #ecd9a8;
border-radius: 18px;
padding: 20px 22px 18px;
box-shadow: 0 4px 16px rgba(120, 90, 20, 0.1);
}
.lcbp-mp3-title {
margin: 0 0 14px;
font-size: 19px;
line-height: 1.4;
color: #5c3d10;
font-weight: 700;
}
.lcbp-mp3-controls {
display: flex;
align-items: center;
gap: 10px;
}
.lcbp-mp3-playbtn {
flex: 0 0 auto;
width: 42px;
height: 42px;
border-radius: 50%;
border: none;
background: linear-gradient(180deg, #d8ac4c 0%, #b8860b 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 6px rgba(150, 110, 10, 0.35);
transition: transform 0.12s ease;
padding: 0;
}
.lcbp-mp3-playbtn:hover {
transform: scale(1.06);
}
.lcbp-mp3-playbtn:active {
transform: scale(0.96);
}
.lcbp-mp3-icon-pause {
display: none;
}
.lcbp-mp3-playbtn.is-playing .lcbp-mp3-icon-play {
display: none;
}
.lcbp-mp3-playbtn.is-playing .lcbp-mp3-icon-pause {
display: block;
}
.lcbp-mp3-time {
flex: 0 0 auto;
font-size: 12px;
color: #7a5a20;
min-width: 34px;
font-variant-numeric: tabular-nums;
}
.lcbp-mp3-duration {
text-align: right;
}
.lcbp-mp3-seek {
--fill: 0%;
flex: 1 1 auto;
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
border-radius: 3px;
background: linear-gradient(to right, #b8860b 0%, #b8860b var(--fill), #ecdcb0 var(--fill), #ecdcb0 100%);
outline: none;
cursor: pointer;
margin: 0;
}
.lcbp-mp3-seek::-webkit-slider-thumb {
-webkit-appearance: none;
width: 15px;
height: 15px;
border-radius: 50%;
background: #b8860b;
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
cursor: pointer;
}
.lcbp-mp3-seek::-moz-range-thumb {
width: 15px;
height: 15px;
border-radius: 50%;
background: #b8860b;
border: 2px solid #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
cursor: pointer;
}
.lcbp-mp3-seek::-moz-range-track {
height: 6px;
border-radius: 3px;
background: #ecdcb0;
}
.lcbp-mp3-seek::-moz-range-progress {
height: 6px;
border-radius: 3px;
background: #b8860b;
}
.lcbp-mp3-loopbtn {
flex: 0 0 auto;
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid #d9bd77;
background: #fff;
color: #b8860b;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
opacity: 0.55;
}
.lcbp-mp3-loopbtn.is-active {
background: #b8860b;
color: #fff;
opacity: 1;
box-shadow: 0 1px 4px rgba(150, 110, 10, 0.4);
}
@media (max-width: 400px) {
.lcbp-mp3-card {
padding: 16px 14px;
}
.lcbp-mp3-controls {
gap: 7px;
}
.lcbp-mp3-time {
min-width: 28px;
font-size: 11px;
}
}