.preview {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  gap: 12px;
  overflow-y: auto;
}

.header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 1px solid var(--border-accent);
  padding-bottom: 8px;
}

.name {
  font-family: 'Cinzel', serif;
  font-size: 1em;
  color: var(--text-primary);
}

.id {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.75em;
  color: var(--accent-gold);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tag {
  font-family: 'Cinzel', serif;
  font-size: 0.625em;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 7px;
}

.canvasWrap {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 80px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px;
}

.loading {
  color: var(--text-secondary);
  font-family: 'Cinzel', serif;
  font-size: 0.75em;
  padding: 8px;
}

.noArt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
  color: var(--text-muted);
  font-size: 0.75em;
  font-family: 'Cinzel', serif;
}

.artCanvas {
  image-rendering: pixelated;
  max-width: 100%;
}

.meta {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.6875em;
  color: var(--text-muted);
}