[data-fui-comp="ui-callout"] {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: var(--spacing-md, 12px);
  row-gap: var(--spacing-xs, 2px);
  padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
  border: 1px solid var(--color-border, #E4E4E7);
  border-radius: var(--radii-md, 8px);
  background: var(--color-surface-soft, var(--color-surface, #FFFFFF));
}
[data-fui-comp="ui-callout"]::before {
  content: var(--ui-callout-icon, "i");
  grid-row: 1 / span 2;
  display: inline-grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  margin-block-start: 1px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  color: var(--ui-callout-accent, var(--color-text-muted, #52525B));
  background: color-mix(in oklch, var(--ui-callout-accent, var(--color-text-muted, #52525B)) 14%, transparent);
  border: 1px solid color-mix(in oklch, var(--ui-callout-accent, var(--color-text-muted, #52525B)) 28%, transparent);
  border-radius: 999px;
}
[data-fui-comp="ui-callout"] .ui-callout__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text, #18181B);
  grid-column: 2;
}
[data-fui-comp="ui-callout"] .ui-callout__body {
  font-size: 0.9rem;
  color: var(--color-text-muted, #52525B);
  grid-column: 2;
}
[data-fui-comp="ui-callout"].ui-callout--info    { --ui-callout-accent: var(--color-info, #2563EB);    --ui-callout-icon: "i"; }
[data-fui-comp="ui-callout"].ui-callout--success { --ui-callout-accent: var(--color-success, #16A34A); --ui-callout-icon: "✓"; }
[data-fui-comp="ui-callout"].ui-callout--warning { --ui-callout-accent: var(--color-warning, #CA8A04); --ui-callout-icon: "!"; }
[data-fui-comp="ui-callout"].ui-callout--danger  { --ui-callout-accent: var(--color-danger, #DC2626);  --ui-callout-icon: "!"; }
[data-fui-comp="ui-callout"].ui-callout--neutral { --ui-callout-accent: var(--color-text-muted, #52525B); --ui-callout-icon: "·"; }