.spt-free-panel {
  position: absolute;
  z-index: 20;
  top: 20px;
  left: 20px;
  width: 300px;
  max-height: calc(100% - 40px);
  padding: 18px;
  overflow: auto;
  pointer-events: auto;
  border: 1px solid var(--spt-border);
  border-radius: var(--spt-radius);
  background: var(--spt-surface-raised);
  box-shadow: var(--spt-shadow-soft);
}

.spt-free-panel__title,
.spt-free-group__title {
  margin: 0;
}

.spt-free-panel__title {
  font-size: 18px;
}

.spt-free-group {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.spt-free-group__title {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

.spt-free-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.spt-free-control,
.spt-free-panel input,
.spt-free-panel select {
  min-height: 30px;
  border: 1px solid var(--spt-border);
  border-radius: 6px;
  background: #ffffff;
  color: #222222;
}

.spt-free-control {
  padding: 5px 9px;
  cursor: pointer;
}

.spt-free-control[aria-pressed="true"],
.spt-free-control--primary {
  border-color: #222222;
  background: #222222;
  color: #ffffff;
}

.spt-free-count {
  color: #666666;
  font-size: 12px;
}

.spt-free-preview {
  position: absolute;
  inset: 32px 32px 32px 352px;
  max-width: calc(100% - 384px);
  max-height: calc(100% - 64px);
  margin: auto;
  background: #ffffff;
  box-shadow: var(--spt-shadow-soft);
}

.spt-free-mosaic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.spt-free-mosaic img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.spt-free-mosaic[data-layout="square"] img {
  aspect-ratio: 1;
}