.cpm-color-item{

display:flex;

gap:20px;

align-items:center;

padding:15px;

border:1px solid #eee;

border-radius:10px;

}


.cpm-color-box{

width:80px;

height:80px;

border-radius:8px;

}


.cpm-info{

display:flex;

flex-direction:column;

gap:5px;

}


.cpm-info strong{

font-size:16px;

}


.cpm-info span{

color:#666;

}
.cpm-color-grid{

display:grid;

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

gap:20px;

}



.cpm-color-card{

border:1px solid #eee;

border-radius:12px;

overflow:hidden;

background:#fff;

}



.cpm-color-card .cpm-color-box{

height:160px;

}



.cpm-color-name{

font-weight:600;

padding:12px 15px 5px;

}



.cpm-color-code{

padding:0 15px 15px;

color:#777;

font-size:14px;

}





@media(max-width:768px){

.cpm-color-grid{

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

}

}
.cpm-picker{

display:grid;

grid-template-columns:300px 1fr;

gap:30px;

}



.cpm-color-list{

border:1px solid #eee;

border-radius:12px;

overflow:hidden;

}



.cpm-color-item{

display:flex;

align-items:center;

gap:15px;

padding:15px;

cursor:pointer;

border-bottom:1px solid #eee;

transition:.3s;

}



.cpm-color-item:hover,
.cpm-color-item.active{

background:#f7f7f7;

}



.cpm-dot{

width:35px;

height:35px;

border-radius:50%;

border:1px solid #ddd;

}



.cpm-color-item strong{

display:block;

}



.cpm-color-item small{

color:#777;

}



.cpm-preview-area{

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

}



.cpm-big-preview{

width:300px;

height:300px;

border-radius:20px;

border:1px solid #ddd;

}



.cpm-current-color{

margin-top:15px;

font-weight:600;

}



@media(max-width:768px){


.cpm-picker{

grid-template-columns:1fr;

}


.cpm-big-preview{

width:200px;

height:200px;

}


}