.fdg-panel {
  --fdg-border: var(--color-secondary, #d1d5db);
  --fdg-surface: var(--color-box-body, #fff);
  --fdg-text: var(--color-text, #20242b);
  color: var(--fdg-text);
  border: 1px solid var(--fdg-border);
  border-radius: var(--border-radius, 4px);
  background: var(--fdg-surface);
  margin-block: 1rem;
  overflow: hidden;
}
.fdg-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem .6rem;
  padding: .4rem .65rem;
  border-bottom: 1px solid var(--fdg-border);
  background: var(--color-box-header, var(--fdg-surface));
}
.fdg-toolbar .button { margin: 0; padding: .55em .7em; font-size: .75rem; }
.fdg-title { font-size: .85rem; }
.fdg-status {
  color: var(--color-text-light, var(--fdg-text));
  flex: 0 1 auto;
  margin-inline-start: auto;
  font-size: .75rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.fdg-status[data-state='error'] { flex-basis: 100%; white-space: normal; }
.fdg-engine {
  color: inherit;
  background: var(--fdg-surface);
  border: 1px solid var(--fdg-border);
  border-radius: var(--border-radius, 4px);
  padding: .3rem .4rem;
  font: inherit;
  font-size: .8rem;
  max-width: 160px;
}
.fdg-preview {
  padding: 1rem;
  overflow: auto;
  text-align: center;
  max-height: 80dvh;
}
.fdg-image { display: block; max-width: 100%; height: auto; margin-inline: auto; }
.fdg-panel > pre { margin: 0; border: none; border-radius: 0; }
.fdg-hidden-source, .fdg-panel [hidden] { display: none !important; }
.fdg-toolbar button[aria-pressed='true'] {
  color: var(--color-primary, #1767ac);
  border-color: var(--color-primary, #1767ac);
}
@media (max-width: 480px) {
  .fdg-toolbar { gap: .4rem; padding: .5rem; }
  .fdg-engine { max-width: 128px; }
  .fdg-preview { padding: .5rem; }
}