.cph-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
}

.cph-card {
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.cph-color {
    height: 50px;
    cursor: pointer;
    position: relative;
}

.cph-color span {
    position: absolute;
    bottom: 5px;
    right: 8px;
    font-size: 11px;
    color: #fff;
}


.cph-layout {
    display: grid;
    grid-template-columns: 220px 1fr 220px;
    gap: 20px;
}

/* CENTER GRID → 3 COLUMNS */
#cph-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* SIDEBARS */
.cph-sidebar-left,
.cph-sidebar-right {
    background: #fafafa;
    padding: 15px;
    border-radius: 8px;
}

.cph-sidebar-left ul {
    list-style: none;
    padding: 0;
}

.cph-sidebar-left li {
    cursor: pointer;
    padding: 6px 0;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .cph-layout {
        grid-template-columns: 1fr;
    }
}

.cph-like {
    background: #fff;
    border: 1px solid #e53935;
    color: #e53935;
    padding: 6px;
    cursor: pointer;
}

.cph-like.liked {
    background: #e53935;
    color: #fff;
}

.cph-like .heart {
    font-size: 16px;
}

.cph-copied {
    position: absolute;
    top: 5px;
    left: 5px;
    background: #000;
    color: #fff;
    font-size: 11px;
    padding: 3px 6px;
    border-radius: 4px;
}

.cph-filters button {
    margin: 5px;
}