.upload-zone {
  display: block;
  width: 100%;
}

.upload-preview {
  display: grid;
  gap: 0.75rem;
}

.upload-preview[hidden] {
  display: none !important;
}

.preview-image {
  max-height: 280px;
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.preview-image:not([src]),
.preview-image[src=""] {
  display: none;
}

.preview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.preview-name {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  word-break: break-all;
}

.check-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text);
  font-size: 0.875rem;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

.check-inline input[type='checkbox'] {
  accent-color: var(--color-primary);
}

.option-note {
  margin: 0.8rem 0 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.palette-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.9rem;
}

.color-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
}

.color-swatch {
  height: 90px;
  border-bottom: 1px solid var(--color-border);
}

.color-meta {
  padding: 0.75rem;
}

.color-hex {
  margin: 0;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.9rem;
}

.color-row {
  margin-top: 0.35rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.color-row-pantone {
  font-size: 0.74rem;
}

.copy-btn {
  margin-top: 0.6rem;
  width: 100%;
}