.prompt-placeholder-editor,
.prompt-placeholder-try {
  display: grid;
  gap: 0.75rem;
  margin-block: 0.75rem;
}

.prompt-placeholder-editor__heading,
.prompt-placeholder-try__heading {
  margin: 0;
  font-size: 1rem;
}

.prompt-placeholder-editor__table {
  width: 100%;
  border-collapse: collapse;
}

.prompt-placeholder-editor__table th,
.prompt-placeholder-editor__table td {
  padding: 0.45rem;
  border-bottom: 1px solid var(--border-light, var(--border, #E5E7E8));
  text-align: start;
  vertical-align: middle;
}

.prompt-placeholder-editor__table thead th {
  font-weight: 600;
}

.prompt-placeholder-editor__table input[type="text"],
.prompt-placeholder-try__field input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0.45rem 0.55rem;
  color: var(--text-primary, var(--text, #212224));
  background: var(--bg-card, var(--surface, #fff));
  border: 2px solid var(--border-medium, var(--border2, #C9CFD1));
  border-radius: 8px;
}

.prompt-placeholder-editor__required {
  width: 1.15rem;
  height: 1.15rem;
}

.prompt-placeholder-try__inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  min-width: 0;
  gap: 0.75rem;
}

.prompt-placeholder-try__field {
  display: grid;
  gap: 0.3rem;
}

.prompt-placeholder-try__result-label {
  font-weight: 600;
}

.prompt-placeholder-try__result {
  min-height: 3rem;
  margin: 0;
  padding: 0.75rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  color: var(--text-primary, var(--text, #212224));
  background: var(--surface-muted, var(--surface2, #f4f5f6));
  border-radius: 8px;
}

.prompt-placeholder-editor__empty,
.prompt-placeholder-try__missing,
.prompt-placeholder-try__none {
  margin: 0;
}

.prompt-placeholder-editor input:focus-visible,
.prompt-placeholder-try input:focus-visible {
  outline: 3px solid var(--brand-primary);
  outline-offset: 3px;
}

.prompt-placeholder-editor__table { table-layout: fixed; }
.prompt-placeholder-editor__table th { overflow-wrap: anywhere; }
.prompt-placeholder-editor__table input { min-width: 0; }

@media (max-width: 600px) {
  .prompt-placeholder-editor__table th,
  .prompt-placeholder-editor__table td { padding: 0.4rem 0.25rem; }
  .prompt-placeholder-editor__table .prompt-placeholder-editor__required { width: 1rem; height: 1rem; }
}