/* Theme-friendly styles: inherit fonts, colors, spacing, and use WP CSS variables when present */
.cn-plugin { font: inherit; color: inherit; }
.cn-form { display: grid; gap: var(--wp--style--block-gap, 0.75rem); }
.cn-label { font: inherit; color: inherit; }
.cn-input {
  font: inherit;
  color: inherit;
  background: var(--wp--preset--color--background, inherit);
  border: 1px solid var(--wp--custom--form-border, rgba(0,0,0,.15));
  border-radius: var(--wp--custom--radius, .5rem);
  padding: 0.6em 0.8em;
  width: 100%;
  box-sizing: border-box;
}
.cn-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.cn-btn-primary { }
.cn-btn-secondary { }
.cn-results {
  margin-top: var(--wp--style--block-gap, 1rem);
  padding: var(--wp--style--block-gap, 1rem);
  border: 1px solid var(--wp--custom--card-border, rgba(0,0,0,.08));
  border-radius: var(--wp--custom--radius, .5rem);
  background: var(--wp--preset--color--base-2, transparent);
}
.cn-results ul { margin: .25rem 0 1rem 1.25rem; }
@media (max-width: 640px) {
  .cn-actions { width: 100%; }
  .cn-actions .button { flex: 1 1 auto; }
}