/* Success panel shown after a form submit (see ds-form.js). Token-driven so it
   tracks every skin + light/dark. */
.ds-form-success {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.25rem;
  animation: dsFormIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.ds-form-success-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: hsl(var(--accent) / 0.16);
  color: hsl(var(--accent));
}
.dark .ds-form-success-icon,
[data-theme="dark"] .ds-form-success-icon { color: hsl(var(--foreground)); }
.ds-form-success strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  margin-bottom: 0.15rem;
}
.ds-form-success span {
  display: block;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}
@keyframes dsFormIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}