body{
font-family:Arial,sans-serif;
}

.cip-wrapper{
display:flex;
justify-content:center;
padding:30px 10px;
}

.cip-player{
width:430px;
background:linear-gradient(to bottom,#d9d9d9,#a7a7a7);
border-radius:40px;
padding:22px;
box-shadow:0 25px 60px rgba(0,0,0,.5);
border:2px solid #dcdcdc;
position:relative;
overflow:hidden;
}

.cip-screen{
background:#050505;
border-radius:25px;
padding:18px;
border:4px solid #202020;
box-shadow:inset 0 0 20px rgba(0,255,120,.2);
color:white;
}

.cip-topbar{
display:flex;
justify-content:space-between;
align-items:center;
color:#b7ff58;
font-size:14px;
margin-bottom:20px;
}

.cip-content{
display:flex;
gap:20px;
align-items:center;
}

.cip-logo-box img{
width:150px;
border-radius:15px;
}

.cip-meta h2{
font-size:34px;
margin:0;
}

.cip-meta h3{
color:#9eff48;
margin:10px 0 5px;
font-size:26px;
}

.cip-meta p{
color:#b8b8b8;
margin:0 0 15px;
font-size:22px;
}

.cip-wave{
height:60px;
background:linear-gradient(90deg,#71ff3d,#0a4200,#71ff3d);
border-radius:12px;
opacity:.9;
}

.cip-progress{
display:flex;
align-items:center;
gap:10px;
margin-top:25px;
font-size:20px;
}

.cip-bar{
flex:1;
height:10px;
background:#333;
border-radius:20px;
overflow:hidden;
}

#cip-progress-fill{
height:100%;
width:0%;
background:#9eff48;
}

.cip-controls-row{
display:flex;
justify-content:space-around;
align-items:center;
margin-top:25px;
font-size:28px;
color:white;
}

.play-main{
font-size:44px;
color:#9eff48;
}

.cip-body{
padding-top:25px;
position:relative;
}

.cip-wheel{
width:300px;
height:300px;
margin:0 auto;
border-radius:50%;
background:radial-gradient(circle,#f2f2f2,#d2d2d2);
position:relative;
box-shadow:inset 0 0 25px rgba(0,0,0,.2);
transition:transform .2s ease;
border:2px solid #bfbfbf;
}

.cip-center{
width:115px;
height:115px;
background:#111;
border-radius:50%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
border:4px solid #fff;
}

.cip-center img{
width:100%;
height:100%;
object-fit:cover;
}

.cip-wheel-menu,
.cip-wheel-prev,
.cip-wheel-next,
.cip-wheel-play{
position:absolute;
font-size:28px;
font-weight:bold;
color:#222;
}

.cip-wheel-menu{
top:22px;
left:50%;
transform:translateX(-50%);
}

.cip-wheel-prev{
left:25px;
top:50%;
transform:translateY(-50%);
}

.cip-wheel-next{
right:25px;
top:50%;
transform:translateY(-50%);
}

.cip-wheel-play{
bottom:25px;
left:50%;
transform:translateX(-50%);
}

.cip-ornament{
position:absolute;
width:50px;
height:200px;
top:20px;
opacity:.5;
}

.cip-ornament.left{
left:0;
border-left:5px solid #3e7b2b;
border-radius:30px;
}

.cip-ornament.right{
right:0;
border-right:5px solid #3e7b2b;
border-radius:30px;
}

.cip-footer-logo{
text-align:right;
margin-top:20px;
font-size:22px;
color:#274020;
font-family:Georgia,serif;
}

@media(max-width:600px){

.cip-player{
width:95%;
padding:15px;
}

.cip-content{
flex-direction:column;
text-align:center;
}

.cip-logo-box img{
width:120px;
}

.cip-meta h2{
font-size:26px;
}

.cip-meta h3{
font-size:20px;
}

.cip-meta p{
font-size:16px;
}

.cip-wheel{
width:240px;
height:240px;
}
}