:root {
  --feedback-radius: 12px;
  --feedback-gap: 0.75rem;
  --feedback-padding-md: 0.875rem 1rem;
  --feedback-padding-lg: 1rem 1.125rem;
  --feedback-success-bg: #dcfce7;
  --feedback-success-fg: #166534;
  --feedback-warning-bg: #fef3c7;
  --feedback-warning-fg: #92400e;
  --feedback-error-bg: #fee2e2;
  --feedback-error-fg: #991b1b;
}

.ui-feedback {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--feedback-gap);
  align-items: start;
  border-radius: var(--feedback-radius);
}

.ui-feedback__icon {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  font-weight: 700;
}

.ui-feedback__title { margin: 0; font-weight: 700; line-height: 1.35; }
.ui-feedback__description { margin: 0.25rem 0 0; line-height: 1.45; }
.ui-feedback-md { padding: var(--feedback-padding-md); }
.ui-feedback-lg { padding: var(--feedback-padding-lg); }
.ui-feedback-success { background: var(--feedback-success-bg); color: var(--feedback-success-fg); }
.ui-feedback-warning { background: var(--feedback-warning-bg); color: var(--feedback-warning-fg); }
.ui-feedback-error { background: var(--feedback-error-bg); color: var(--feedback-error-fg); }
.ui-feedback-skeleton { grid-template-columns: 1fr; }
.ui-feedback__skeleton-line {
  width: 100%;
  height: 0.8rem;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 18%, white);
  margin-top: 0.55rem;
}
.ui-feedback__skeleton-line:first-child { margin-top: 0; }