/* MosaicGen */

.mg-palette{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .35rem .75rem;
  padding: .5rem;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: .5rem;
  background: rgba(0,0,0,.02);
  max-height: 320px;
  overflow: auto;
}

.mg-palette-item{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin:0;
  padding:.25rem .35rem;
  border-radius:.35rem;
  cursor:pointer;
}

.mg-palette-item:hover{
  background: rgba(0,0,0,.04);
}

.mg-swatch{
  width:18px;
  height:18px;
  border-radius: 4px;
  border:1px solid rgba(0,0,0,.2);
  flex: 0 0 18px;
}

.mg-name{
  font-size:.95rem;
  line-height:1.1;
}


/* Upload preview bigger (for cropping / adjustments) */
.mg-upload-preview-img{
  max-height: 320px;
}

/* On small screens, keep it reasonable */
@media (max-width: 576px){
  .mg-upload-preview-img{
    max-height: 240px;
  }
}

/* Final preview near download buttons: keep compact */
.mg-final-preview-img{
  max-height: 160px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

@media (max-width: 576px){
  .mg-final-preview-img{
    max-height: 140px;
  }
}